@makeswift/runtime 0.2.3 → 0.2.4

package/dist/Box.cjs.js

@@ -34,12 +34,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var styled = require("styled-components");
 var framerMotion = require("framer-motion");
-var index = require("./index.cjs.js");
+var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 var useMediaQuery = require("./useMediaQuery.cjs.js");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
 var boxModels = require("./box-models.cjs.js");
-var index$1 = require("./index.cjs2.js");
+var index = require("./index.cjs2.js");
 var useBoxShadow = require("./useBoxShadow.cjs.js");
 require("use-sync-external-store/shim/with-selector");
 require("./react-page.cjs.js");
@@ -271,13 +271,13 @@ const useBoxAnimations = (_c) => {
     "elements"
   ]);
   const reducedMotion = framerMotion.useReducedMotion();
-  const boxAnimateType = useMediaQuery.useMediaQuery(props.boxAnimateType) || index.DEFAULT_BOX_ANIMATE_TYPE;
-  const boxAnimateDuration = useMediaQuery.useMediaQuery(props.boxAnimateDuration) || index.DEFAULT_BOX_ANIMATE_DURATION;
-  const boxAnimateDelay = useMediaQuery.useMediaQuery(props.boxAnimateDelay) || index.DEFAULT_BOX_ANIMATE_DELAY;
-  const itemAnimateType = useMediaQuery.useMediaQuery(props.itemAnimateType) || index.DEFAULT_ITEM_ANIMATE_TYPE;
-  const itemAnimateDuration = useMediaQuery.useMediaQuery(props.itemAnimateDuration) || index.DEFAULT_ITEM_ANIMATE_DURATION;
-  const itemAnimateDelay = useMediaQuery.useMediaQuery(props.itemAnimateDelay) || index.DEFAULT_ITEM_ANIMATE_DELAY;
-  const itemStaggerDuration = useMediaQuery.useMediaQuery(props.itemStaggerDuration) || index.DEFAULT_ITEM_STAGGER_DURATION;
+  const boxAnimateType = useMediaQuery.useMediaQuery(props.boxAnimateType) || next.DEFAULT_BOX_ANIMATE_TYPE;
+  const boxAnimateDuration = useMediaQuery.useMediaQuery(props.boxAnimateDuration) || next.DEFAULT_BOX_ANIMATE_DURATION;
+  const boxAnimateDelay = useMediaQuery.useMediaQuery(props.boxAnimateDelay) || next.DEFAULT_BOX_ANIMATE_DELAY;
+  const itemAnimateType = useMediaQuery.useMediaQuery(props.itemAnimateType) || next.DEFAULT_ITEM_ANIMATE_TYPE;
+  const itemAnimateDuration = useMediaQuery.useMediaQuery(props.itemAnimateDuration) || next.DEFAULT_ITEM_ANIMATE_DURATION;
+  const itemAnimateDelay = useMediaQuery.useMediaQuery(props.itemAnimateDelay) || next.DEFAULT_ITEM_ANIMATE_DELAY;
+  const itemStaggerDuration = useMediaQuery.useMediaQuery(props.itemStaggerDuration) || next.DEFAULT_ITEM_STAGGER_DURATION;
   const isBoxVisible = useElementOnScreen(boxElement, {
     root: null,
     rootMargin: `0px 0px -10% 0px`,
@@ -349,7 +349,7 @@ const useBoxAnimations = (_c) => {
     }
   };
 };
-const StyledBackgroundsContainer = styled__default["default"](index$1.BackgroundsContainer).withConfig({
+const StyledBackgroundsContainer = styled__default["default"](index.BackgroundsContainer).withConfig({
   shouldForwardProp: (prop) => !["width", "margin", "borderRadius", "alignSelf"].includes(prop.toString())
 })`
   display: flex;
@@ -446,7 +446,7 @@ const Box = React.forwardRef(function Box2({
       }) : null;
     }
   }), [boxElement]);
-  const borderData = index.useBorder(border);
+  const borderData = next.useBorder(border);
   const boxShadowData = useBoxShadow.useBoxShadow(boxShadow);
   const {
     initial,
@@ -486,15 +486,15 @@ const Box = React.forwardRef(function Box2({
       animate: animate == null ? void 0 : animate.parent,
       initial: initial == null ? void 0 : initial.parent,
       transition: transition == null ? void 0 : transition.parent,
-      children: children && children.elements.length > 0 ? children.elements.map((child, index$12) => /* @__PURE__ */ jsxRuntime.jsx(GridItem, {
+      children: children && children.elements.length > 0 ? children.elements.map((child, index2) => /* @__PURE__ */ jsxRuntime.jsx(GridItem, {
         grid: children.columns,
-        index: index$12,
+        index: index2,
         columnGap,
         rowGap,
         alignItems: verticalAlign,
         variants: variants == null ? void 0 : variants.child,
         transition: transition == null ? void 0 : transition.child,
-        children: /* @__PURE__ */ jsxRuntime.jsx(index.Element, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(next.Element, {
           element: child
         })
       }, child.key)) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {

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/animations.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled from 'styled-components'\n\nconst PlaceholderBase = styled.div<{ hide: boolean }>`\n  width: 100%;\n  background: rgba(161, 168, 194, 0.18);\n  height: 80px;\n  padding: 8px;\n  visibility: ${({ hide }) => (hide === true ? 'hidden' : 'initial')};\n`\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <PlaceholderBase {...restOfProps} hide={hide} ref={ref}>\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    </PlaceholderBase>\n  )\n})\n","import {\n  TargetAndTransition,\n  Transition,\n  useAnimation,\n  useReducedMotion,\n  Variants,\n  MotionProps,\n} from 'framer-motion'\nimport { TransitionMap } from 'framer-motion/types/types'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { ResponsiveValue } from '../../../prop-controllers'\nimport { useMediaQuery } from '../../hooks'\nimport { Element } from '../../../state/react-page'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_BOX_ANIMATE_TYPE,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_TYPE,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\n\nconst defaultExitedProps = {\n  opacity: 0,\n  x: 0,\n  y: 0,\n  scale: 1,\n}\n\ntype BoxAnimationVariants = {\n  entered: TargetAndTransition\n  exited: TargetAndTransition\n}\n\nexport const boxAnimations: {\n  [key in BoxAnimateIn]: {\n    transition: TransitionMap\n  } & BoxAnimationVariants\n} = {\n  none: {\n    entered: {\n      opacity: 1,\n    },\n    exited: {\n      ...defaultExitedProps,\n      opacity: 1,\n    },\n    transition: {},\n  },\n  fadeIn: {\n    exited: defaultExitedProps,\n    entered: {\n      opacity: 1,\n    },\n    transition: {},\n  },\n  fadeLeft: {\n    exited: {\n      ...defaultExitedProps,\n      x: 60,\n    },\n    entered: {\n      opacity: 1,\n      x: 0,\n    },\n    transition: {\n      x: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeRight: {\n    exited: {\n      ...defaultExitedProps,\n      x: -60,\n    },\n    entered: {\n      opacity: 1,\n      x: 0,\n    },\n    transition: {\n      x: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeUp: {\n    exited: {\n      ...defaultExitedProps,\n      y: 80,\n    },\n    entered: {\n      opacity: 1,\n      y: 0,\n    },\n    transition: {\n      y: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeDown: {\n    exited: {\n      ...defaultExitedProps,\n      y: -80,\n    },\n    entered: {\n      opacity: 1,\n      y: 0,\n    },\n    transition: {\n      y: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  blurIn: {\n    exited: {\n      ...defaultExitedProps,\n      filter: 'blur(20px)',\n    },\n    entered: {\n      opacity: 1,\n      filter: 'blur(0px)',\n    },\n    transition: {},\n  },\n  scaleDown: {\n    exited: {\n      ...defaultExitedProps,\n      scale: 1.2,\n    },\n    entered: {\n      opacity: 1,\n      scale: 1,\n    },\n    transition: {\n      scale: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  scaleUp: {\n    exited: {\n      ...defaultExitedProps,\n      scale: 0.75,\n    },\n    entered: {\n      opacity: 1,\n      scale: 1,\n    },\n    transition: {\n      scale: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n}\n\nconst mergeCustomTransitionWithDefault = (\n  transitions: TransitionMap,\n  props: Transition,\n): TransitionMap | Transition =>\n  transitions\n    ? Object.keys(transitions).reduce(\n        (a, c) => ({\n          ...a,\n          [c]: {\n            ...transitions[c as string],\n            ...props,\n          },\n        }),\n        props,\n      )\n    : props\n\nexport type BoxAnimationType = {\n  containerAnimationProps: {\n    transition: Transition\n    variants: Variants\n  }\n  parentAnimationProps: {\n    transition: Transition\n  }\n  childAnimationProps: {\n    transition: Transition\n    variants: Variants\n  }\n}\n\nconst useElementOnScreen = (element: HTMLElement | null, options: IntersectionObserverInit) => {\n  const [isVisible, setIsVisible] = useState(false)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(intersectionCallback, options)\n\n    if (element) observer.observe(element)\n\n    return () => {\n      if (element) observer.unobserve(element)\n    }\n\n    function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n      if (entry?.isIntersecting) {\n        setIsVisible(true)\n      }\n    }\n  }, [element, options])\n\n  return isVisible\n}\n\ntype UseBoxAnimationsPayload = {\n  initial?: { container: MotionProps['initial']; parent: MotionProps['initial'] }\n  animate?: { container: MotionProps['animate']; parent: MotionProps['animate'] }\n  variants?: { container: MotionProps['variants']; child: MotionProps['variants'] }\n  transition?: {\n    container: MotionProps['transition']\n    parent: MotionProps['transition']\n    child: MotionProps['transition']\n  }\n  key?: { container: string }\n}\n\nexport const useBoxAnimations = ({\n  boxElement,\n  elements,\n  ...props\n}: {\n  boxAnimateType: ResponsiveValue<BoxAnimateIn> | undefined\n  boxAnimateDuration: ResponsiveValue<number> | undefined\n  boxAnimateDelay: ResponsiveValue<number> | undefined\n  itemAnimateType: ResponsiveValue<BoxAnimateIn> | undefined\n  itemAnimateDuration: ResponsiveValue<number> | undefined\n  itemAnimateDelay: ResponsiveValue<number> | undefined\n  itemStaggerDuration: ResponsiveValue<number> | undefined\n  boxElement: HTMLElement | null\n  elements: Element[] | undefined\n}): UseBoxAnimationsPayload => {\n  const reducedMotion = useReducedMotion()\n  const boxAnimateType = useMediaQuery(props.boxAnimateType) || DEFAULT_BOX_ANIMATE_TYPE\n  const boxAnimateDuration = useMediaQuery(props.boxAnimateDuration) || DEFAULT_BOX_ANIMATE_DURATION\n  const boxAnimateDelay = useMediaQuery(props.boxAnimateDelay) || DEFAULT_BOX_ANIMATE_DELAY\n  const itemAnimateType = useMediaQuery(props.itemAnimateType) || DEFAULT_ITEM_ANIMATE_TYPE\n  const itemAnimateDuration =\n    useMediaQuery(props.itemAnimateDuration) || DEFAULT_ITEM_ANIMATE_DURATION\n  const itemAnimateDelay = useMediaQuery(props.itemAnimateDelay) || DEFAULT_ITEM_ANIMATE_DELAY\n  const itemStaggerDuration =\n    useMediaQuery(props.itemStaggerDuration) || DEFAULT_ITEM_STAGGER_DURATION\n\n  const isBoxVisible = useElementOnScreen(boxElement, {\n    root: null,\n    rootMargin: `0px 0px -10% 0px`,\n    threshold: 0.2,\n  })\n\n  const itemControls = useAnimation()\n  const boxControls = useAnimation()\n\n  const setSequence = useCallback(\n    (variant: keyof BoxAnimationVariants) => {\n      boxControls.stop()\n      itemControls.stop()\n      boxControls.set(variant)\n      itemControls.set(variant)\n    },\n    [boxControls, itemControls],\n  )\n\n  const playSequence = useCallback(() => {\n    boxControls.stop()\n    itemControls.stop()\n    boxControls.set('exited')\n    itemControls.set('exited')\n    boxControls.start('entered')\n    itemControls.start('entered')\n  }, [boxControls, itemControls])\n\n  useEffect(() => {\n    if (isBoxVisible) {\n      setSequence('entered')\n    }\n  }, [\n    elements\n      ?.map(e => e.key)\n      .sort()\n      .join(),\n    setSequence,\n  ])\n\n  useEffect(() => {\n    if (isBoxVisible) {\n      playSequence()\n    }\n  }, [\n    isBoxVisible,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n    reducedMotion,\n    playSequence,\n  ])\n\n  const boxVariant = boxAnimations[boxAnimateType]\n  const itemVariant = boxAnimations[itemAnimateType]\n\n  return {\n    initial: {\n      container: reducedMotion ? 'entered' : 'exited',\n      parent: reducedMotion ? 'entered' : 'exited',\n    },\n    animate: {\n      container: reducedMotion ? undefined : boxControls,\n      parent: reducedMotion ? undefined : itemControls,\n    },\n    variants: {\n      container: {\n        exited: boxVariant.exited,\n        entered: boxVariant.entered,\n      },\n      child: {\n        exited: itemVariant.exited,\n        entered: itemVariant.entered,\n      },\n    },\n    transition: {\n      container: mergeCustomTransitionWithDefault(boxVariant.transition, {\n        delay: boxAnimateDelay,\n        duration: boxAnimateDuration,\n      }),\n      parent: {\n        delayChildren: itemAnimateDelay,\n        staggerChildren: itemStaggerDuration,\n        duration: itemAnimateDuration,\n      },\n      child: mergeCustomTransitionWithDefault(itemVariant.transition, {\n        duration: itemAnimateDuration,\n      }),\n    },\n    key: {\n      container:\n        boxAnimateType +\n        boxAnimateDuration +\n        boxAnimateDelay +\n        itemAnimateType +\n        itemAnimateDuration +\n        itemAnimateDelay +\n        itemStaggerDuration +\n        reducedMotion,\n    },\n  }\n}\n","import { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { motion } from 'framer-motion'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useBoxAnimations } from './animations'\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\n  WidthValue,\n  MarginValue,\n  PaddingValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  ResponsiveSelectValue,\n  ResponsiveNumberValue,\n  BackgroundsValue,\n  BorderValue,\n  ShadowsValue,\n} from '../../../prop-controllers/descriptors'\nimport {\n  cssWidth,\n  cssMargin,\n  cssPadding,\n  cssBorderRadius,\n  cssGridItem,\n  cssMediaRules,\n  cssBorder,\n  cssBoxShadow,\n} from '../../utils/cssMediaRules'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport {\n  BorderPropControllerData,\n  BoxShadowPropControllerData,\n  useBorder,\n  useBoxShadow,\n} from '../../hooks'\nimport { BoxAnimateIn } from './constants'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: WidthValue\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: MarginValue\n  padding?: PaddingValue\n  border?: BorderValue\n  borderRadius?: BorderRadiusValue\n  boxShadow?: ShadowsValue\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 StyledBackgroundsContainer = styled(BackgroundsContainer).withConfig({\n  shouldForwardProp: prop =>\n    !['width', 'margin', 'borderRadius', 'alignSelf'].includes(prop.toString()),\n})<{\n  width: Props['width']\n  margin: Props['margin']\n  borderRadius: Props['borderRadius']\n  alignSelf: Props['height']\n}>`\n  display: flex;\n  ${cssWidth()}\n  ${cssMargin()}\n  ${cssBorderRadius()}\n  ${props => cssMediaRules([props.alignSelf] as const, ([alignSelf = 'auto']) => ({ alignSelf }))}\n`\n\nconst Grid = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['padding', 'border', 'boxShadow', 'alignContent'].includes(prop),\n})<{\n  padding: Props['padding']\n  border: BorderPropControllerData | null | undefined\n  boxShadow: BoxShadowPropControllerData | null | undefined\n  alignContent: Props['verticalAlign']\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  ${cssPadding()}\n  ${cssBorder()}\n  ${cssBoxShadow()}\n  ${props =>\n    cssMediaRules([props.alignContent] as const, ([alignContent = 'flex-start']) => ({\n      alignContent,\n    }))}\n`\nconst GridItem = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['grid', 'alignItems', 'index', 'columnGap', 'rowGap'].includes(prop),\n})<{\n  grid: NonNullable<Props['children']>['columns']\n  alignItems: Props['verticalAlign']\n  index: number\n  columnGap: Props['columnGap']\n  rowGap: Props['rowGap']\n}>`\n  display: flex;\n\n  /* IE11 doesn't recognize space-between and treats it as stretch, so we fall back to flex-start */\n  align-items: flex-start;\n  ${cssGridItem()}\n  ${props =>\n    cssMediaRules([props.alignItems] as const, ([alignItems = 'flex-start']) => ({ alignItems }))}\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 borderData = useBorder(border)\n  const boxShadowData = useBoxShadow(boxShadow)\n\n  const { initial, animate, variants, transition, key } = useBoxAnimations({\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n    boxElement,\n    elements: children?.elements,\n  })\n\n  return (\n    <StyledBackgroundsContainer\n      ref={setBoxElement}\n      id={id}\n      backgrounds={backgrounds}\n      width={width}\n      margin={margin}\n      borderRadius={borderRadius}\n      alignSelf={height}\n      animate={animate?.container}\n      initial={initial?.container}\n      variants={variants?.container}\n      transition={transition?.container}\n      key={key?.container}\n    >\n      <Grid\n        ref={innerRef}\n        padding={padding}\n        border={borderData}\n        boxShadow={boxShadowData}\n        alignContent={verticalAlign}\n        animate={animate?.parent}\n        initial={initial?.parent}\n        transition={transition?.parent}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              grid={children.columns}\n              index={index}\n              columnGap={columnGap}\n              rowGap={rowGap}\n              alignItems={verticalAlign}\n              variants={variants?.child}\n              transition={transition?.child}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </Grid>\n    </StyledBackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["PlaceholderBase","styled","div","hide","forwardRef","ref","restOfProps","overflow","defaultExitedProps","opacity","x","y","scale","boxAnimations","none","entered","exited","transition","fadeIn","fadeLeft","type","ease","fadeRight","fadeUp","fadeDown","blurIn","filter","scaleDown","scaleUp","mergeCustomTransitionWithDefault","transitions","props","Object","keys","reduce","a","c","useElementOnScreen","element","options","isVisible","setIsVisible","useState","useEffect","observer","IntersectionObserver","intersectionCallback","observe","unobserve","entry","isIntersecting","useBoxAnimations","boxElement","elements","reducedMotion","useReducedMotion","boxAnimateType","useMediaQuery","DEFAULT_BOX_ANIMATE_TYPE","boxAnimateDuration","DEFAULT_BOX_ANIMATE_DURATION","boxAnimateDelay","DEFAULT_BOX_ANIMATE_DELAY","itemAnimateType","DEFAULT_ITEM_ANIMATE_TYPE","itemAnimateDuration","DEFAULT_ITEM_ANIMATE_DURATION","itemAnimateDelay","DEFAULT_ITEM_ANIMATE_DELAY","itemStaggerDuration","DEFAULT_ITEM_STAGGER_DURATION","isBoxVisible","root","rootMargin","threshold","itemControls","useAnimation","boxControls","setSequence","useCallback","variant","stop","set","playSequence","start","map","e","key","sort","join","boxVariant","itemVariant","initial","container","parent","animate","undefined","variants","child","delay","duration","delayChildren","staggerChildren","StyledBackgroundsContainer","BackgroundsContainer","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","cssBorderRadius","cssMediaRules","alignSelf","Grid","motion","cssPadding","cssBorder","cssBoxShadow","alignContent","GridItem","cssGridItem","alignItems","Box","id","backgrounds","width","height","margin","padding","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","innerRef","useRef","setBoxElement","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","borderData","useBorder","boxShadowData","useBoxShadow","length","index","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/animations.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled from 'styled-components'\n\nconst PlaceholderBase = styled.div<{ hide: boolean }>`\n  width: 100%;\n  background: rgba(161, 168, 194, 0.18);\n  height: 80px;\n  padding: 8px;\n  visibility: ${({ hide }) => (hide === true ? 'hidden' : 'initial')};\n`\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <PlaceholderBase {...restOfProps} hide={hide} ref={ref}>\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    </PlaceholderBase>\n  )\n})\n","import {\n  TargetAndTransition,\n  Transition,\n  useAnimation,\n  useReducedMotion,\n  Variants,\n  MotionProps,\n} from 'framer-motion'\nimport { TransitionMap } from 'framer-motion/types/types'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { ResponsiveValue } from '../../../prop-controllers'\nimport { useMediaQuery } from '../../hooks'\nimport { Element } from '../../../state/react-page'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_BOX_ANIMATE_TYPE,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_TYPE,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\n\nconst defaultExitedProps = {\n  opacity: 0,\n  x: 0,\n  y: 0,\n  scale: 1,\n}\n\ntype BoxAnimationVariants = {\n  entered: TargetAndTransition\n  exited: TargetAndTransition\n}\n\nexport const boxAnimations: {\n  [key in BoxAnimateIn]: {\n    transition: TransitionMap\n  } & BoxAnimationVariants\n} = {\n  none: {\n    entered: {\n      opacity: 1,\n    },\n    exited: {\n      ...defaultExitedProps,\n      opacity: 1,\n    },\n    transition: {},\n  },\n  fadeIn: {\n    exited: defaultExitedProps,\n    entered: {\n      opacity: 1,\n    },\n    transition: {},\n  },\n  fadeLeft: {\n    exited: {\n      ...defaultExitedProps,\n      x: 60,\n    },\n    entered: {\n      opacity: 1,\n      x: 0,\n    },\n    transition: {\n      x: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeRight: {\n    exited: {\n      ...defaultExitedProps,\n      x: -60,\n    },\n    entered: {\n      opacity: 1,\n      x: 0,\n    },\n    transition: {\n      x: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeUp: {\n    exited: {\n      ...defaultExitedProps,\n      y: 80,\n    },\n    entered: {\n      opacity: 1,\n      y: 0,\n    },\n    transition: {\n      y: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeDown: {\n    exited: {\n      ...defaultExitedProps,\n      y: -80,\n    },\n    entered: {\n      opacity: 1,\n      y: 0,\n    },\n    transition: {\n      y: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  blurIn: {\n    exited: {\n      ...defaultExitedProps,\n      filter: 'blur(20px)',\n    },\n    entered: {\n      opacity: 1,\n      filter: 'blur(0px)',\n    },\n    transition: {},\n  },\n  scaleDown: {\n    exited: {\n      ...defaultExitedProps,\n      scale: 1.2,\n    },\n    entered: {\n      opacity: 1,\n      scale: 1,\n    },\n    transition: {\n      scale: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  scaleUp: {\n    exited: {\n      ...defaultExitedProps,\n      scale: 0.75,\n    },\n    entered: {\n      opacity: 1,\n      scale: 1,\n    },\n    transition: {\n      scale: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n}\n\nconst mergeCustomTransitionWithDefault = (\n  transitions: TransitionMap,\n  props: Transition,\n): TransitionMap | Transition =>\n  transitions\n    ? Object.keys(transitions).reduce(\n        (a, c) => ({\n          ...a,\n          [c]: {\n            ...transitions[c as string],\n            ...props,\n          },\n        }),\n        props,\n      )\n    : props\n\nexport type BoxAnimationType = {\n  containerAnimationProps: {\n    transition: Transition\n    variants: Variants\n  }\n  parentAnimationProps: {\n    transition: Transition\n  }\n  childAnimationProps: {\n    transition: Transition\n    variants: Variants\n  }\n}\n\nconst useElementOnScreen = (element: HTMLElement | null, options: IntersectionObserverInit) => {\n  const [isVisible, setIsVisible] = useState(false)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(intersectionCallback, options)\n\n    if (element) observer.observe(element)\n\n    return () => {\n      if (element) observer.unobserve(element)\n    }\n\n    function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n      if (entry?.isIntersecting) {\n        setIsVisible(true)\n      }\n    }\n  }, [element, options])\n\n  return isVisible\n}\n\ntype UseBoxAnimationsPayload = {\n  initial?: { container: MotionProps['initial']; parent: MotionProps['initial'] }\n  animate?: { container: MotionProps['animate']; parent: MotionProps['animate'] }\n  variants?: { container: MotionProps['variants']; child: MotionProps['variants'] }\n  transition?: {\n    container: MotionProps['transition']\n    parent: MotionProps['transition']\n    child: MotionProps['transition']\n  }\n  key?: { container: string }\n}\n\nexport const useBoxAnimations = ({\n  boxElement,\n  elements,\n  ...props\n}: {\n  boxAnimateType: ResponsiveValue<BoxAnimateIn> | undefined\n  boxAnimateDuration: ResponsiveValue<number> | undefined\n  boxAnimateDelay: ResponsiveValue<number> | undefined\n  itemAnimateType: ResponsiveValue<BoxAnimateIn> | undefined\n  itemAnimateDuration: ResponsiveValue<number> | undefined\n  itemAnimateDelay: ResponsiveValue<number> | undefined\n  itemStaggerDuration: ResponsiveValue<number> | undefined\n  boxElement: HTMLElement | null\n  elements: Element[] | undefined\n}): UseBoxAnimationsPayload => {\n  const reducedMotion = useReducedMotion()\n  const boxAnimateType = useMediaQuery(props.boxAnimateType) || DEFAULT_BOX_ANIMATE_TYPE\n  const boxAnimateDuration = useMediaQuery(props.boxAnimateDuration) || DEFAULT_BOX_ANIMATE_DURATION\n  const boxAnimateDelay = useMediaQuery(props.boxAnimateDelay) || DEFAULT_BOX_ANIMATE_DELAY\n  const itemAnimateType = useMediaQuery(props.itemAnimateType) || DEFAULT_ITEM_ANIMATE_TYPE\n  const itemAnimateDuration =\n    useMediaQuery(props.itemAnimateDuration) || DEFAULT_ITEM_ANIMATE_DURATION\n  const itemAnimateDelay = useMediaQuery(props.itemAnimateDelay) || DEFAULT_ITEM_ANIMATE_DELAY\n  const itemStaggerDuration =\n    useMediaQuery(props.itemStaggerDuration) || DEFAULT_ITEM_STAGGER_DURATION\n\n  const isBoxVisible = useElementOnScreen(boxElement, {\n    root: null,\n    rootMargin: `0px 0px -10% 0px`,\n    threshold: 0.2,\n  })\n\n  const itemControls = useAnimation()\n  const boxControls = useAnimation()\n\n  const setSequence = useCallback(\n    (variant: keyof BoxAnimationVariants) => {\n      boxControls.stop()\n      itemControls.stop()\n      boxControls.set(variant)\n      itemControls.set(variant)\n    },\n    [boxControls, itemControls],\n  )\n\n  const playSequence = useCallback(() => {\n    boxControls.stop()\n    itemControls.stop()\n    boxControls.set('exited')\n    itemControls.set('exited')\n    boxControls.start('entered')\n    itemControls.start('entered')\n  }, [boxControls, itemControls])\n\n  useEffect(() => {\n    if (isBoxVisible) {\n      setSequence('entered')\n    }\n  }, [\n    elements\n      ?.map(e => e.key)\n      .sort()\n      .join(),\n    setSequence,\n  ])\n\n  useEffect(() => {\n    if (isBoxVisible) {\n      playSequence()\n    }\n  }, [\n    isBoxVisible,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n    reducedMotion,\n    playSequence,\n  ])\n\n  const boxVariant = boxAnimations[boxAnimateType]\n  const itemVariant = boxAnimations[itemAnimateType]\n\n  return {\n    initial: {\n      container: reducedMotion ? 'entered' : 'exited',\n      parent: reducedMotion ? 'entered' : 'exited',\n    },\n    animate: {\n      container: reducedMotion ? undefined : boxControls,\n      parent: reducedMotion ? undefined : itemControls,\n    },\n    variants: {\n      container: {\n        exited: boxVariant.exited,\n        entered: boxVariant.entered,\n      },\n      child: {\n        exited: itemVariant.exited,\n        entered: itemVariant.entered,\n      },\n    },\n    transition: {\n      container: mergeCustomTransitionWithDefault(boxVariant.transition, {\n        delay: boxAnimateDelay,\n        duration: boxAnimateDuration,\n      }),\n      parent: {\n        delayChildren: itemAnimateDelay,\n        staggerChildren: itemStaggerDuration,\n        duration: itemAnimateDuration,\n      },\n      child: mergeCustomTransitionWithDefault(itemVariant.transition, {\n        duration: itemAnimateDuration,\n      }),\n    },\n    key: {\n      container:\n        boxAnimateType +\n        boxAnimateDuration +\n        boxAnimateDelay +\n        itemAnimateType +\n        itemAnimateDuration +\n        itemAnimateDelay +\n        itemStaggerDuration +\n        reducedMotion,\n    },\n  }\n}\n","import { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { motion } from 'framer-motion'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useBoxAnimations } from './animations'\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\n  WidthValue,\n  MarginValue,\n  PaddingValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  ResponsiveSelectValue,\n  ResponsiveNumberValue,\n  BackgroundsValue,\n  BorderValue,\n  ShadowsValue,\n} from '../../../prop-controllers/descriptors'\nimport {\n  cssWidth,\n  cssMargin,\n  cssPadding,\n  cssBorderRadius,\n  cssGridItem,\n  cssMediaRules,\n  cssBorder,\n  cssBoxShadow,\n} from '../../utils/cssMediaRules'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport {\n  BorderPropControllerData,\n  BoxShadowPropControllerData,\n  useBorder,\n  useBoxShadow,\n} from '../../hooks'\nimport { BoxAnimateIn } from './constants'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: WidthValue\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: MarginValue\n  padding?: PaddingValue\n  border?: BorderValue\n  borderRadius?: BorderRadiusValue\n  boxShadow?: ShadowsValue\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 StyledBackgroundsContainer = styled(BackgroundsContainer).withConfig({\n  shouldForwardProp: prop =>\n    !['width', 'margin', 'borderRadius', 'alignSelf'].includes(prop.toString()),\n})<{\n  width: Props['width']\n  margin: Props['margin']\n  borderRadius: Props['borderRadius']\n  alignSelf: Props['height']\n}>`\n  display: flex;\n  ${cssWidth()}\n  ${cssMargin()}\n  ${cssBorderRadius()}\n  ${props => cssMediaRules([props.alignSelf] as const, ([alignSelf = 'auto']) => ({ alignSelf }))}\n`\n\nconst Grid = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['padding', 'border', 'boxShadow', 'alignContent'].includes(prop),\n})<{\n  padding: Props['padding']\n  border: BorderPropControllerData | null | undefined\n  boxShadow: BoxShadowPropControllerData | null | undefined\n  alignContent: Props['verticalAlign']\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  ${cssPadding()}\n  ${cssBorder()}\n  ${cssBoxShadow()}\n  ${props =>\n    cssMediaRules([props.alignContent] as const, ([alignContent = 'flex-start']) => ({\n      alignContent,\n    }))}\n`\nconst GridItem = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['grid', 'alignItems', 'index', 'columnGap', 'rowGap'].includes(prop),\n})<{\n  grid: NonNullable<Props['children']>['columns']\n  alignItems: Props['verticalAlign']\n  index: number\n  columnGap: Props['columnGap']\n  rowGap: Props['rowGap']\n}>`\n  display: flex;\n\n  /* IE11 doesn't recognize space-between and treats it as stretch, so we fall back to flex-start */\n  align-items: flex-start;\n  ${cssGridItem()}\n  ${props =>\n    cssMediaRules([props.alignItems] as const, ([alignItems = 'flex-start']) => ({ alignItems }))}\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 borderData = useBorder(border)\n  const boxShadowData = useBoxShadow(boxShadow)\n\n  const { initial, animate, variants, transition, key } = useBoxAnimations({\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n    boxElement,\n    elements: children?.elements,\n  })\n\n  return (\n    <StyledBackgroundsContainer\n      ref={setBoxElement}\n      id={id}\n      backgrounds={backgrounds}\n      width={width}\n      margin={margin}\n      borderRadius={borderRadius}\n      alignSelf={height}\n      animate={animate?.container}\n      initial={initial?.container}\n      variants={variants?.container}\n      transition={transition?.container}\n      key={key?.container}\n    >\n      <Grid\n        ref={innerRef}\n        padding={padding}\n        border={borderData}\n        boxShadow={boxShadowData}\n        alignContent={verticalAlign}\n        animate={animate?.parent}\n        initial={initial?.parent}\n        transition={transition?.parent}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              grid={children.columns}\n              index={index}\n              columnGap={columnGap}\n              rowGap={rowGap}\n              alignItems={verticalAlign}\n              variants={variants?.child}\n              transition={transition?.child}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </Grid>\n    </StyledBackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["PlaceholderBase","styled","div","hide","forwardRef","ref","restOfProps","overflow","defaultExitedProps","opacity","x","y","scale","boxAnimations","none","entered","exited","transition","fadeIn","fadeLeft","type","ease","fadeRight","fadeUp","fadeDown","blurIn","filter","scaleDown","scaleUp","mergeCustomTransitionWithDefault","transitions","props","Object","keys","reduce","a","c","useElementOnScreen","element","options","isVisible","setIsVisible","useState","useEffect","observer","IntersectionObserver","intersectionCallback","observe","unobserve","entry","isIntersecting","useBoxAnimations","boxElement","elements","reducedMotion","useReducedMotion","boxAnimateType","useMediaQuery","DEFAULT_BOX_ANIMATE_TYPE","boxAnimateDuration","DEFAULT_BOX_ANIMATE_DURATION","boxAnimateDelay","DEFAULT_BOX_ANIMATE_DELAY","itemAnimateType","DEFAULT_ITEM_ANIMATE_TYPE","itemAnimateDuration","DEFAULT_ITEM_ANIMATE_DURATION","itemAnimateDelay","DEFAULT_ITEM_ANIMATE_DELAY","itemStaggerDuration","DEFAULT_ITEM_STAGGER_DURATION","isBoxVisible","root","rootMargin","threshold","itemControls","useAnimation","boxControls","setSequence","useCallback","variant","stop","set","playSequence","start","map","e","key","sort","join","boxVariant","itemVariant","initial","container","parent","animate","undefined","variants","child","delay","duration","delayChildren","staggerChildren","StyledBackgroundsContainer","BackgroundsContainer","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","cssBorderRadius","cssMediaRules","alignSelf","Grid","motion","cssPadding","cssBorder","cssBoxShadow","alignContent","GridItem","cssGridItem","alignItems","Box","id","backgrounds","width","height","margin","padding","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","innerRef","useRef","setBoxElement","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","borderData","useBorder","boxShadowData","useBoxShadow","length","index","columns","Element"],"mappings":"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"}

package/dist/Button.cjs.js

@@ -35,7 +35,7 @@ var React = require("react");
 var styled = require("styled-components");
 var ColorHelper = require("color");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
-var index$1 = require("./index.cjs.js");
+var next = require("./index.cjs.js");
 var index = require("./index.cjs3.js");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
@@ -111,7 +111,7 @@ const StyledButton = styled__default["default"](index.Link).withConfig({
     unit: "px"
   };
   return styled.css`
-          color: ${index$1.colorToString(textColor)};
+          color: ${next.colorToString(textColor)};
           border-radius: ${{
     square: 0,
     rounded: 4,
@@ -125,35 +125,35 @@ const StyledButton = styled__default["default"](index.Link).withConfig({
           font-size: ${`${fontSize.value}${fontSize.unit}`};
           ${{
     flat: styled.css`
-              background: ${index$1.colorToString(color)};
+              background: ${next.colorToString(color)};
               border: none;
               transition: ${["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", ")};
 
               :hover {
-                background: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.1).hex()};
+                background: ${ColorHelper__default["default"](next.colorToString(color)).darken(0.1).hex()};
               }
 
               :active {
-                background: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.15).hex()};
+                background: ${ColorHelper__default["default"](next.colorToString(color)).darken(0.15).hex()};
               }
             `,
     outline: styled.css`
               background: transparent;
-              box-shadow: inset 0 0 0 2px ${index$1.colorToString(color)};
+              box-shadow: inset 0 0 0 2px ${next.colorToString(color)};
               transition: ${["color", "background", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", ")};
 
               :hover {
-                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.1).hex()};
-                color: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.1).hex()};
+                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](next.colorToString(color)).darken(0.1).hex()};
+                color: ${ColorHelper__default["default"](next.colorToString(color)).darken(0.1).hex()};
               }
 
               :active {
-                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.15).hex()};
-                color: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.15).hex()};
+                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](next.colorToString(color)).darken(0.15).hex()};
+                color: ${ColorHelper__default["default"](next.colorToString(color)).darken(0.15).hex()};
               }
             `,
     shadow: styled.css`
-              background: ${index$1.colorToString(color)};
+              background: ${next.colorToString(color)};
               box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
               transition: ${["transform", "box-shadow"].map((property) => `${property} 0.18s`).join(", ")};
 
@@ -172,36 +172,36 @@ const StyledButton = styled__default["default"](index.Link).withConfig({
               border: none;
 
               :hover {
-                color: ${ColorHelper__default["default"](index$1.colorToString(textColor)).alpha(0.5).toString()};
+                color: ${ColorHelper__default["default"](next.colorToString(textColor)).alpha(0.5).toString()};
               }
 
               :active {
-                color: ${ColorHelper__default["default"](index$1.colorToString(textColor)).alpha(0.6).toString()};
+                color: ${ColorHelper__default["default"](next.colorToString(textColor)).alpha(0.6).toString()};
               }
             `,
     blocky: styled.css`
-              background: ${index$1.colorToString(color)};
+              background: ${next.colorToString(color)};
               border-width: 1px;
               border-style: solid;
-              border-color: ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.25).hex()};
-              box-shadow: 0 4px ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.25).hex()};
+              border-color: ${ColorHelper__default["default"](next.colorToString(color)).darken(0.25).hex()};
+              box-shadow: 0 4px ${ColorHelper__default["default"](next.colorToString(color)).darken(0.25).hex()};
               transition: ${["transform", "box-shadow"].map((property) => `${property} 0.1s`).join(", ")};
 
               :hover {
                 transform: translateY(2px);
-                box-shadow: 0 2px ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.25).hex()};
+                box-shadow: 0 2px ${ColorHelper__default["default"](next.colorToString(color)).darken(0.25).hex()};
               }
 
               :active {
                 transform: translateY(4px);
-                box-shadow: 0 0 ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.25).hex()};
+                box-shadow: 0 0 ${ColorHelper__default["default"](next.colorToString(color)).darken(0.25).hex()};
               }
             `,
     bubbly: styled.css`
               background: linear-gradient(
                 180deg,
-                ${ColorHelper__default["default"](index$1.colorToString(color)).lighten(0.05).hex()},
-                ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.3).saturate(0.05).hex()}
+                ${ColorHelper__default["default"](next.colorToString(color)).lighten(0.05).hex()},
+                ${ColorHelper__default["default"](next.colorToString(color)).darken(0.3).saturate(0.05).hex()}
               );
               position: relative;
               z-index: 0;
@@ -217,8 +217,8 @@ const StyledButton = styled__default["default"](index.Link).withConfig({
                 border-radius: inherit;
                 background: linear-gradient(
                   180deg,
-                  ${ColorHelper__default["default"](index$1.colorToString(color)).lighten(0.2).hex()},
-                  ${ColorHelper__default["default"](index$1.colorToString(color)).darken(0.2).saturate(0.05).hex()}
+                  ${ColorHelper__default["default"](next.colorToString(color)).lighten(0.2).hex()},
+                  ${ColorHelper__default["default"](next.colorToString(color)).darken(0.2).saturate(0.05).hex()}
                 );
                 opacity: 0;
                 transition: opacity 0.15s;
@@ -248,7 +248,7 @@ const StyledButton = styled__default["default"](index.Link).withConfig({
                 bottom: 0;
                 left: 0;
                 z-index: -1;
-                background: ${index$1.colorToString(color)};
+                background: ${next.colorToString(color)};
                 transform: skewX(-12deg);
                 border-radius: inherit;
                 transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);

package/dist/Button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import { ReactElement, ComponentPropsWithoutRef, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport ColorHelper from 'color'\n\nimport { cssMediaRules, cssMargin, cssTextStyle, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  TextInputValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\n\ntype ControllerProps = {\n  id?: ElementIDValue\n  children?: TextInputValue\n  link?: LinkValue\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor\n  textColor?: ResponsiveColor\n  textStyle?: TextStyleValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst StyledButton = styled(Link).withConfig({\n  shouldForwardProp: prop =>\n    !['width', 'margin', 'variant', 'shape', 'size', 'textColor', 'color', 'textStyle'].includes(\n      prop.toString(),\n    ),\n})<{\n  width: ControllerProps['width']\n  margin: ControllerProps['margin']\n  variant: ControllerProps['variant']\n  shape: ControllerProps['shape']\n  size: ControllerProps['size']\n  textColor: ResponsiveValue<Color> | null | undefined\n  color: ResponsiveValue<Color> | null | undefined\n  textStyle: ControllerProps['textStyle']\n}>`\n  display: table;\n  border: 0;\n  outline: 0;\n  user-select: none;\n  cursor: pointer;\n  font-family: inherit;\n  text-decoration: none;\n  text-align: center;\n  ${cssWidth('auto')}\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules(\n      [p.variant, p.shape, p.size, p.textColor, p.color] as const,\n      ([\n        variant = 'flat',\n        shape = 'rounded',\n        size = 'medium',\n        textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n        color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n      ]) => {\n        const fontSize = {\n          value: { small: 12, medium: 14, large: 18 }[size],\n          unit: 'px',\n        }\n\n        return css`\n          color: ${colorToString(textColor)};\n          border-radius: ${{ square: 0, rounded: 4, pill: 500 }[shape]}px;\n          padding: ${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]};\n          font-size: ${`${fontSize.value}${fontSize.unit}`};\n          ${{\n            flat: css`\n              background: ${colorToString(color)};\n              border: none;\n              transition: ${['color', 'background', 'border', 'box-shadow']\n                .map(property => `${property} 0.15s ease-in-out`)\n                .join(', ')};\n\n              :hover {\n                background: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n              }\n\n              :active {\n                background: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n              }\n            `,\n            outline: css`\n              background: transparent;\n              box-shadow: inset 0 0 0 2px ${colorToString(color)};\n              transition: ${['color', 'background', 'box-shadow']\n                .map(property => `${property} 0.15s ease-in-out`)\n                .join(', ')};\n\n              :hover {\n                box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n                color: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n              }\n\n              :active {\n                box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n                color: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n              }\n            `,\n            shadow: css`\n              background: ${colorToString(color)};\n              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);\n              transition: ${['transform', 'box-shadow']\n                .map(property => `${property} 0.18s`)\n                .join(', ')};\n\n              :hover {\n                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);\n                transform: translateY(-1px);\n              }\n\n              :active {\n                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3);\n                transform: translateY(0px);\n              }\n            `,\n            clear: css`\n              background: transparent;\n              border: none;\n\n              :hover {\n                color: ${ColorHelper(colorToString(textColor)).alpha(0.5).toString()};\n              }\n\n              :active {\n                color: ${ColorHelper(colorToString(textColor)).alpha(0.6).toString()};\n              }\n            `,\n            blocky: css`\n              background: ${colorToString(color)};\n              border-width: 1px;\n              border-style: solid;\n              border-color: ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              box-shadow: 0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              transition: ${['transform', 'box-shadow']\n                .map(property => `${property} 0.1s`)\n                .join(', ')};\n\n              :hover {\n                transform: translateY(2px);\n                box-shadow: 0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              }\n\n              :active {\n                transform: translateY(4px);\n                box-shadow: 0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              }\n            `,\n            bubbly: css`\n              background: linear-gradient(\n                180deg,\n                ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n              );\n              position: relative;\n              z-index: 0;\n\n              :before {\n                position: absolute;\n                content: '';\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                z-index: -1;\n                border-radius: inherit;\n                background: linear-gradient(\n                  180deg,\n                  ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                  ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                );\n                opacity: 0;\n                transition: opacity 0.15s;\n              }\n\n              :hover {\n                :before {\n                  opacity: 1;\n                }\n              }\n\n              :active {\n                :before {\n                  opacity: 0.25;\n                }\n              }\n            `,\n            skewed: css`\n              position: relative;\n              z-index: 0;\n\n              :before {\n                position: absolute;\n                content: '';\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                z-index: -1;\n                background: ${colorToString(color)};\n                transform: skewX(-12deg);\n                border-radius: inherit;\n                transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);\n              }\n\n              :hover:before {\n                transform: skew(0deg);\n              }\n\n              :active:before {\n                transform: skew(-8deg);\n              }\n            `,\n          }[variant]}\n        `\n      },\n    )}\n  ${cssTextStyle()}\n`\n\ntype BaseProps = {\n  id?: ControllerProps['id']\n  children?: ReactElement | string\n  link?: ControllerProps['link']\n  variant?: ControllerProps['variant']\n  shape?: ControllerProps['shape']\n  size?: ControllerProps['size']\n  textColor?: ControllerProps['textColor']\n  color?: ControllerProps['color']\n  textStyle?: ControllerProps['textStyle']\n  width?: ControllerProps['width']\n  margin?: ControllerProps['margin']\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof StyledButton>, keyof BaseProps>\n\nconst Button = forwardRef<HTMLAnchorElement, Props>(function Button(\n  {\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  },\n  ref,\n) {\n  return (\n    <StyledButton\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={className}\n      // @ts-expect-error: HTMLAnchorElement `color` attribute conflicts with prop\n      color={color}\n      link={link}\n      width={width}\n      margin={margin}\n      shape={shape}\n      size={size}\n      textColor={textColor}\n      textStyle={textStyle}\n      variant={variant}\n    >\n      {children == null ? 'Button Text' : children}\n    </StyledButton>\n  )\n})\n\nexport default Button\n"],"names":["StyledButton","styled","Link","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","p","cssMediaRules","variant","shape","size","textColor","color","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","css","colorToString","square","rounded","pill","flat","map","property","join","ColorHelper","darken","hex","outline","shadow","clear","blocky","bubbly","lighten","saturate","skewed","cssTextStyle","Button","forwardRef","ref","id","children","link","textStyle","width","margin","className","restOfProps"],"mappings":"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"}
+{"version":3,"file":"Button.cjs.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import { ReactElement, ComponentPropsWithoutRef, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport ColorHelper from 'color'\n\nimport { cssMediaRules, cssMargin, cssTextStyle, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  TextInputValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\n\ntype ControllerProps = {\n  id?: ElementIDValue\n  children?: TextInputValue\n  link?: LinkValue\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor\n  textColor?: ResponsiveColor\n  textStyle?: TextStyleValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst StyledButton = styled(Link).withConfig({\n  shouldForwardProp: prop =>\n    !['width', 'margin', 'variant', 'shape', 'size', 'textColor', 'color', 'textStyle'].includes(\n      prop.toString(),\n    ),\n})<{\n  width: ControllerProps['width']\n  margin: ControllerProps['margin']\n  variant: ControllerProps['variant']\n  shape: ControllerProps['shape']\n  size: ControllerProps['size']\n  textColor: ResponsiveValue<Color> | null | undefined\n  color: ResponsiveValue<Color> | null | undefined\n  textStyle: ControllerProps['textStyle']\n}>`\n  display: table;\n  border: 0;\n  outline: 0;\n  user-select: none;\n  cursor: pointer;\n  font-family: inherit;\n  text-decoration: none;\n  text-align: center;\n  ${cssWidth('auto')}\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules(\n      [p.variant, p.shape, p.size, p.textColor, p.color] as const,\n      ([\n        variant = 'flat',\n        shape = 'rounded',\n        size = 'medium',\n        textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n        color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n      ]) => {\n        const fontSize = {\n          value: { small: 12, medium: 14, large: 18 }[size],\n          unit: 'px',\n        }\n\n        return css`\n          color: ${colorToString(textColor)};\n          border-radius: ${{ square: 0, rounded: 4, pill: 500 }[shape]}px;\n          padding: ${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]};\n          font-size: ${`${fontSize.value}${fontSize.unit}`};\n          ${{\n            flat: css`\n              background: ${colorToString(color)};\n              border: none;\n              transition: ${['color', 'background', 'border', 'box-shadow']\n                .map(property => `${property} 0.15s ease-in-out`)\n                .join(', ')};\n\n              :hover {\n                background: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n              }\n\n              :active {\n                background: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n              }\n            `,\n            outline: css`\n              background: transparent;\n              box-shadow: inset 0 0 0 2px ${colorToString(color)};\n              transition: ${['color', 'background', 'box-shadow']\n                .map(property => `${property} 0.15s ease-in-out`)\n                .join(', ')};\n\n              :hover {\n                box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n                color: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n              }\n\n              :active {\n                box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n                color: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n              }\n            `,\n            shadow: css`\n              background: ${colorToString(color)};\n              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);\n              transition: ${['transform', 'box-shadow']\n                .map(property => `${property} 0.18s`)\n                .join(', ')};\n\n              :hover {\n                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);\n                transform: translateY(-1px);\n              }\n\n              :active {\n                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3);\n                transform: translateY(0px);\n              }\n            `,\n            clear: css`\n              background: transparent;\n              border: none;\n\n              :hover {\n                color: ${ColorHelper(colorToString(textColor)).alpha(0.5).toString()};\n              }\n\n              :active {\n                color: ${ColorHelper(colorToString(textColor)).alpha(0.6).toString()};\n              }\n            `,\n            blocky: css`\n              background: ${colorToString(color)};\n              border-width: 1px;\n              border-style: solid;\n              border-color: ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              box-shadow: 0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              transition: ${['transform', 'box-shadow']\n                .map(property => `${property} 0.1s`)\n                .join(', ')};\n\n              :hover {\n                transform: translateY(2px);\n                box-shadow: 0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              }\n\n              :active {\n                transform: translateY(4px);\n                box-shadow: 0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n              }\n            `,\n            bubbly: css`\n              background: linear-gradient(\n                180deg,\n                ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n              );\n              position: relative;\n              z-index: 0;\n\n              :before {\n                position: absolute;\n                content: '';\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                z-index: -1;\n                border-radius: inherit;\n                background: linear-gradient(\n                  180deg,\n                  ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                  ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                );\n                opacity: 0;\n                transition: opacity 0.15s;\n              }\n\n              :hover {\n                :before {\n                  opacity: 1;\n                }\n              }\n\n              :active {\n                :before {\n                  opacity: 0.25;\n                }\n              }\n            `,\n            skewed: css`\n              position: relative;\n              z-index: 0;\n\n              :before {\n                position: absolute;\n                content: '';\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                z-index: -1;\n                background: ${colorToString(color)};\n                transform: skewX(-12deg);\n                border-radius: inherit;\n                transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);\n              }\n\n              :hover:before {\n                transform: skew(0deg);\n              }\n\n              :active:before {\n                transform: skew(-8deg);\n              }\n            `,\n          }[variant]}\n        `\n      },\n    )}\n  ${cssTextStyle()}\n`\n\ntype BaseProps = {\n  id?: ControllerProps['id']\n  children?: ReactElement | string\n  link?: ControllerProps['link']\n  variant?: ControllerProps['variant']\n  shape?: ControllerProps['shape']\n  size?: ControllerProps['size']\n  textColor?: ControllerProps['textColor']\n  color?: ControllerProps['color']\n  textStyle?: ControllerProps['textStyle']\n  width?: ControllerProps['width']\n  margin?: ControllerProps['margin']\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof StyledButton>, keyof BaseProps>\n\nconst Button = forwardRef<HTMLAnchorElement, Props>(function Button(\n  {\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  },\n  ref,\n) {\n  return (\n    <StyledButton\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={className}\n      // @ts-expect-error: HTMLAnchorElement `color` attribute conflicts with prop\n      color={color}\n      link={link}\n      width={width}\n      margin={margin}\n      shape={shape}\n      size={size}\n      textColor={textColor}\n      textStyle={textStyle}\n      variant={variant}\n    >\n      {children == null ? 'Button Text' : children}\n    </StyledButton>\n  )\n})\n\nexport default Button\n"],"names":["StyledButton","styled","Link","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","p","cssMediaRules","variant","shape","size","textColor","color","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","css","colorToString","square","rounded","pill","flat","map","property","join","ColorHelper","darken","hex","outline","shadow","clear","blocky","bubbly","lighten","saturate","skewed","cssTextStyle","Button","forwardRef","ref","id","children","link","textStyle","width","margin","className","restOfProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAMA,eAAeC,gBAAAA,WAAOC,UAAD,EAAOC,WAAW;AAAA,EAC3CC,mBAAmBC,CACjB,SAAA,CAAC,CAAC,SAAS,UAAU,WAAW,SAAS,QAAQ,aAAa,SAAS,WAAtE,EAAmFC,SAClFD,KAAKE,UADN;AAFwC,CAAxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuBjBC,cAAAA,SAAS,MAAD;AAAA,IACRC,cAAY,UAAA;AAAA,IACZC,CAAAA,MACAC,4BACE,CAACD,EAAEE,SAASF,EAAEG,OAAOH,EAAEI,MAAMJ,EAAEK,WAAWL,EAAEM,KAA5C,GACA,CAAC,CACCJ,UAAU,QACVC,QAAQ,WACRC,OAAO,UACPC,YAAY;AAAA,EAAEE,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAqDC,OAAO;AAA5D,GACZL,QAAQ;AAAA,EAAEC,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OACJ;AACJ,QAAMC,WAAW;AAAA,IACfC,OAAO;AAAA,MAAEC,OAAO;AAAA,MAAIC,QAAQ;AAAA,MAAIC,OAAO;AAAA,IAAKZ,EAAAA;AAAAA,IAC5Ca,MAAM;AAAA,EAAA;AAGDC,SAAAA;mBACIC,KAAAA,cAAcd,SAAD;AAAA,2BACL;AAAA,IAAEe,QAAQ;AAAA,IAAGC,SAAS;AAAA,IAAGC,MAAM;AAAA,EAAMnB,EAAAA;AAAAA,qBAC3C;AAAA,IAAEW,OAAO;AAAA,IAAYC,QAAQ;AAAA,IAAaC,OAAO;AAAA,EAAcZ,EAAAA;AAAAA,uBAC5D,GAAEQ,SAASC,QAAQD,SAASK;AAAAA,YACxC;AAAA,IACAM,MAAML,OAAAA;AAAAA,4BACUC,KAAAA,cAAcb,KAAD;AAAA;AAAA,4BAEb,CAAC,SAAS,cAAc,UAAU,YAAlC,EACXkB,IAAIC,CAAAA,aAAa,GAAEA,4BADR,EAEXC,KAAK,IAFM;AAAA;AAAA;AAAA,8BAKEC,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CC;;;;8BAI9CF,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;;;IAGjEC,SAASZ,OAAAA;AAAAA;AAAAA,4CAEuBC,KAAAA,cAAcb,KAAD;AAAA,4BAC7B,CAAC,SAAS,cAAc,YAAxB,EACXkB,IAAIC,CAAAA,aAAa,GAAEA,4BADR,EAEXC,KAAK,IAFM;AAAA;AAAA;AAAA,8CAKkBC,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CC;yBACnEF,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CC;;;;8CAIzBF,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;yBACpEF,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;;;IAG5DE,QAAQb,OAAAA;AAAAA,4BACQC,KAAAA,cAAcb,KAAD;AAAA;AAAA,4BAEb,CAAC,aAAa,YAAd,EACXkB,IAAIC,cAAa,GAAEA,gBADR,EAEXC,KAAK,IAFM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAchBM,OAAOd,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,yBAKMS,qBAAAA,WAAYR,mBAAcd,SAAD,CAAd,EAA2BM,MAAM,GAA5C,EAAiDd;;;;yBAIjD8B,qBAAAA,WAAYR,mBAAcd,SAAD,CAAd,EAA2BM,MAAM,GAA5C,EAAiDd;;;IAG9DoC,QAAQf,OAAAA;AAAAA,4BACQC,KAAAA,cAAcb,KAAD;AAAA;AAAA;AAAA,8BAGXqB,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;kCAC3CF,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;4BACrD,CAAC,aAAa,YAAd,EACXL,IAAIC,cAAa,GAAEA,eADR,EAEXC,KAAK,IAFM;AAAA;AAAA;AAAA;AAAA,oCAMQC,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;;;;;kCAKjDF,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuBsB,OAAO,IAAzC,EAA+CC;;;IAGrEK,QAAQhB,OAAAA;AAAAA;AAAAA;AAAAA,kBAGFS,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuB6B,QAAQ,IAA1C,EAAgDN;kBAChDF,gCAAYR,KAAAA,cAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CQ,SAAS,IAAvD,EAA6DP,IAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAgBjEF,qBAAAA,WAAYR,mBAAcb,KAAD,CAAd,EAAuB6B,QAAQ,GAA1C,EAA+CN;oBAC/CF,gCAAYR,KAAAA,cAAcb,KAAD,CAAd,EAAuBsB,OAAO,GAAzC,EAA8CQ,SAAS,IAAvD,EAA6DP,IAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkB3EQ,QAAQnB,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,8BAYUC,KAAAA,cAAcb,KAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc/BJ,EAAAA;AAAAA;AAEL,CAxKU;AAAA,IA0KboC,cAAe,aAAA;AAAA;AAmBbC,MAAAA,SAASC,MAAAA,WAAqC,iBAClD,IAeAC,KACA;AAhBA,eACEC;AAAAA;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA1C;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAuC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MAZF,IAaKC,wBAbL,IAaKA;AAAAA,IAZHP;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA1C;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAuC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAMA,wCAAC,cAAD,iCACMC,cADN;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAdF,UAgBGN,YAAY,OAAO,gBAAgBA;AAAAA,EAAAA,EAjBxC;AAoBD,CAtCwB;;"}

package/dist/Carousel.cjs.js

@@ -25,7 +25,7 @@ var framerMotion = require("framer-motion");
 var reactUseGesture = require("react-use-gesture");
 var popcorn = require("@popmotion/popcorn");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
-var index = require("./index.cjs.js");
+var next = require("./index.cjs.js");
 var useMediaQuery = require("./useMediaQuery.cjs.js");
 var Image = require("./Image.cjs2.js");
 var jsxRuntime = require("react/jsx-runtime");
@@ -134,7 +134,7 @@ const Arrow = styled__default["default"].div.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-        background: ${index.colorToString(background)};
+        background: ${next.colorToString(background)};
       `)}
 
   svg {
@@ -160,7 +160,7 @@ const Slop = styled__default["default"].div.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-        color: ${index.colorToString(color)};
+        color: ${next.colorToString(color)};
       `)}
 `;
 const Slide = styled__default["default"](framerMotion.motion.div).withConfig({
@@ -269,7 +269,7 @@ const Dots = styled__default["default"].div.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-        color: ${index.colorToString(color)};
+        color: ${next.colorToString(color)};
       `)}
 `;
 const Dot = styled__default["default"].div.withConfig({
@@ -332,9 +332,9 @@ const Carousel = React.forwardRef(function Carousel2({
   slideBorder,
   slideBorderRadius
 }, ref) {
-  const [index2, setIndex] = React.useState(0);
+  const [index, setIndex] = React.useState(0);
   const swipe = React.useRef(0);
-  const startIndex = popcorn.wrap(0, images.length, index2);
+  const startIndex = popcorn.wrap(0, images.length, index);
   const pageSize = useMediaQuery.useMediaQuery(responsivePageSize) || 1;
   const step = useMediaQuery.useMediaQuery(responsiveStep) || 1;
   const endIndex = startIndex + pageSize;
@@ -348,8 +348,8 @@ const Carousel = React.forwardRef(function Carousel2({
     const direction = pageDistance / Math.abs(pageDistance);
     const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex);
     const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance));
-    setIndex(index2 + distance);
-  }, [images, index2, startIndex, endIndex, step]);
+    setIndex(index + distance);
+  }, [images, index, startIndex, endIndex, step]);
   const animation = framerMotion.useAnimation({
     x: 0,
     transition: {

package/dist/Carousel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  ImagesValue,\n  MarginValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n  BorderValue,\n  BorderRadiusValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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\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\nconst Container = styled.div`\n  position: relative;\n  height: 100%;\n`\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: WidthValue\n  margin?: MarginValue\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?: BorderValue\n  slideBorderRadius?: BorderRadiusValue\n}\n\nconst Wrapper = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'width'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ${cssWidth('400px')}\n  ${cssMargin()}\n\n  &:focus {\n    outline: 0;\n  }\n`\n\nconst Arrow = styled.div.withConfig({\n  shouldForwardProp: prop => !['background'].includes(prop),\n})<{ background?: ResponsiveValue<Color> | null }>`\n  padding: 10px;\n  border-radius: 50%;\n  outline: 0;\n  border: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  ${p =>\n    cssMediaRules(\n      [p.background] as const,\n      ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => css`\n        background: ${colorToString(background)};\n      `,\n    )}\n\n  svg {\n    transition: transform 0.15s;\n    stroke: currentColor;\n  }\n`\n\nconst Slop = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{\n  color?: ResponsiveValue<Color> | null\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  align-items: center;\n  cursor: pointer;\n  z-index: 2;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Slide = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['pageSize', 'alignItems'].includes(prop),\n})<{\n  pageSize: Props['pageSize']\n  alignItems: Props['slideAlignment']\n}>`\n  display: flex;\n  ${p =>\n    cssMediaRules(\n      [p.pageSize],\n      ([pageSize = 1]) => css`\n        flex-basis: ${100 / pageSize}%;\n        max-width: ${100 / pageSize}%;\n        min-width: ${100 / pageSize}%;\n      `,\n    )}\n\n  ${p => cssMediaRules([p.alignItems], ([alignItems = 'center']) => ({ alignItems }))}\n`\n\nconst Reel = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['gap'].includes(prop),\n})<{ gap: Props['gap'] }>`\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  ${p =>\n    cssMediaRules(\n      [p.gap] as const,\n      ([gap = { value: 0, unit: 'px' }]) => css`\n        margin: 0 ${`${-gap.value / 2}${gap.unit}`};\n\n        & > ${Slide} {\n          padding: 0 ${`${gap.value / 2}${gap.unit}`};\n        }\n      `,\n    )}\n`\n\nconst Page = styled(motion.div)`\n  position: relative;\n  width: 100%;\n`\n\nconst LeftSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(-100% - 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(-50%));\n          `\n      }\n    })}\n  left: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(-2px);\n    }\n  }\n`\n\nconst RightSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(-8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(100% + 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(50%));\n          `\n      }\n    })}\n  right: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(2px);\n    }\n  }\n`\n\nconst ClipMask = styled.div`\n  overflow: hidden;\n`\n\nconst Dots = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{ color?: ResponsiveValue<Color> | null }>`\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  justify-content: center;\n  margin-top: 20px;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Dot = styled.div.withConfig({\n  shouldForwardProp: prop => !['active'].includes(prop),\n})<{ active: boolean }>`\n  position: relative;\n  margin: 0 6px;\n  border-radius: 50%;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: block;\n    border-radius: 50%;\n    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  &::before {\n    box-shadow: 0 0 0 2px currentColor;\n    transform: translate3d(-50%, -50%, 0);\n    width: ${props => (props.active ? 16 : 10)}px;\n    height: ${props => (props.active ? 16 : 10)}px;\n  }\n\n  &::after {\n    background: currentColor;\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0)});\n    width: 10px;\n    height: 10px;\n  }\n\n  &:hover::after {\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0.5)});\n  }\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  return (\n    <Wrapper\n      ref={ref}\n      width={width}\n      margin={margin}\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      <Container>\n        <ClipMask>\n          <Page {...bindPage()} animate={animation}>\n            <Reel\n              gap={gap}\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                <Slide\n                  id={key}\n                  key={key}\n                  pageSize={responsivePageSize}\n                  alignItems={slideAlignment}\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                </Slide>\n              ))}\n            </Reel>\n          </Page>\n        </ClipMask>\n        <LeftSlop\n          onClick={() => paginate(-1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isFirstPage}\n        >\n          <Arrow background={arrowBackground}>\n            <LeftChevron />\n          </Arrow>\n        </LeftSlop>\n        <RightSlop\n          onClick={() => paginate(1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isLastPage}\n        >\n          <Arrow background={arrowBackground}>\n            <RightChevron />\n          </Arrow>\n        </RightSlop>\n      </Container>\n      {/* @ts-expect-error: HTMLDivElement attributes conflicts with `color` prop */}\n      <Dots color={dotColor} hidden={!showDots}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </Dots>\n    </Wrapper>\n  )\n})\n\nexport default Carousel\n"],"names":["LeftChevron","_jsx","RightChevron","Container","styled","div","Wrapper","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Arrow","p","cssMediaRules","background","swatch","hue","saturation","lightness","alpha","css","colorToString","Slop","props","hidden","color","Slide","motion","pageSize","alignItems","Reel","gap","value","unit","Page","LeftSlop","position","RightSlop","ClipMask","Dots","Dot","active","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","responsivePageSize","step","responsiveStep","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","e","key","_jsxs","ease","duration","map","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i"],"mappings":"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"}
+{"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  ImagesValue,\n  MarginValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n  BorderValue,\n  BorderRadiusValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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\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\nconst Container = styled.div`\n  position: relative;\n  height: 100%;\n`\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: WidthValue\n  margin?: MarginValue\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?: BorderValue\n  slideBorderRadius?: BorderRadiusValue\n}\n\nconst Wrapper = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'width'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ${cssWidth('400px')}\n  ${cssMargin()}\n\n  &:focus {\n    outline: 0;\n  }\n`\n\nconst Arrow = styled.div.withConfig({\n  shouldForwardProp: prop => !['background'].includes(prop),\n})<{ background?: ResponsiveValue<Color> | null }>`\n  padding: 10px;\n  border-radius: 50%;\n  outline: 0;\n  border: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  ${p =>\n    cssMediaRules(\n      [p.background] as const,\n      ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => css`\n        background: ${colorToString(background)};\n      `,\n    )}\n\n  svg {\n    transition: transform 0.15s;\n    stroke: currentColor;\n  }\n`\n\nconst Slop = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{\n  color?: ResponsiveValue<Color> | null\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  align-items: center;\n  cursor: pointer;\n  z-index: 2;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Slide = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['pageSize', 'alignItems'].includes(prop),\n})<{\n  pageSize: Props['pageSize']\n  alignItems: Props['slideAlignment']\n}>`\n  display: flex;\n  ${p =>\n    cssMediaRules(\n      [p.pageSize],\n      ([pageSize = 1]) => css`\n        flex-basis: ${100 / pageSize}%;\n        max-width: ${100 / pageSize}%;\n        min-width: ${100 / pageSize}%;\n      `,\n    )}\n\n  ${p => cssMediaRules([p.alignItems], ([alignItems = 'center']) => ({ alignItems }))}\n`\n\nconst Reel = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['gap'].includes(prop),\n})<{ gap: Props['gap'] }>`\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  ${p =>\n    cssMediaRules(\n      [p.gap] as const,\n      ([gap = { value: 0, unit: 'px' }]) => css`\n        margin: 0 ${`${-gap.value / 2}${gap.unit}`};\n\n        & > ${Slide} {\n          padding: 0 ${`${gap.value / 2}${gap.unit}`};\n        }\n      `,\n    )}\n`\n\nconst Page = styled(motion.div)`\n  position: relative;\n  width: 100%;\n`\n\nconst LeftSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(-100% - 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(-50%));\n          `\n      }\n    })}\n  left: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(-2px);\n    }\n  }\n`\n\nconst RightSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(-8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(100% + 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(50%));\n          `\n      }\n    })}\n  right: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(2px);\n    }\n  }\n`\n\nconst ClipMask = styled.div`\n  overflow: hidden;\n`\n\nconst Dots = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{ color?: ResponsiveValue<Color> | null }>`\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  justify-content: center;\n  margin-top: 20px;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Dot = styled.div.withConfig({\n  shouldForwardProp: prop => !['active'].includes(prop),\n})<{ active: boolean }>`\n  position: relative;\n  margin: 0 6px;\n  border-radius: 50%;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: block;\n    border-radius: 50%;\n    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  &::before {\n    box-shadow: 0 0 0 2px currentColor;\n    transform: translate3d(-50%, -50%, 0);\n    width: ${props => (props.active ? 16 : 10)}px;\n    height: ${props => (props.active ? 16 : 10)}px;\n  }\n\n  &::after {\n    background: currentColor;\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0)});\n    width: 10px;\n    height: 10px;\n  }\n\n  &:hover::after {\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0.5)});\n  }\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  return (\n    <Wrapper\n      ref={ref}\n      width={width}\n      margin={margin}\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      <Container>\n        <ClipMask>\n          <Page {...bindPage()} animate={animation}>\n            <Reel\n              gap={gap}\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                <Slide\n                  id={key}\n                  key={key}\n                  pageSize={responsivePageSize}\n                  alignItems={slideAlignment}\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                </Slide>\n              ))}\n            </Reel>\n          </Page>\n        </ClipMask>\n        <LeftSlop\n          onClick={() => paginate(-1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isFirstPage}\n        >\n          <Arrow background={arrowBackground}>\n            <LeftChevron />\n          </Arrow>\n        </LeftSlop>\n        <RightSlop\n          onClick={() => paginate(1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isLastPage}\n        >\n          <Arrow background={arrowBackground}>\n            <RightChevron />\n          </Arrow>\n        </RightSlop>\n      </Container>\n      {/* @ts-expect-error: HTMLDivElement attributes conflicts with `color` prop */}\n      <Dots color={dotColor} hidden={!showDots}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </Dots>\n    </Wrapper>\n  )\n})\n\nexport default Carousel\n"],"names":["LeftChevron","_jsx","RightChevron","Container","styled","div","Wrapper","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Arrow","p","cssMediaRules","background","swatch","hue","saturation","lightness","alpha","css","colorToString","Slop","props","hidden","color","Slide","motion","pageSize","alignItems","Reel","gap","value","unit","Page","LeftSlop","position","RightSlop","ClipMask","Dots","Dot","active","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","responsivePageSize","step","responsiveStep","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","e","key","_jsxs","ease","duration","map","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i"],"mappings":"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"}