@makeswift/runtime 0.1.3 → 0.1.6

package/dist/Box.cjs.js

@@ -61,6 +61,7 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");

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'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useBoxAnimations } from './animations'\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\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  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?: string\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 => !['margin', 'borderRadius', 'alignSelf'].includes(prop.toString()),\n})<{\n  margin: Props['margin']\n  borderRadius: Props['borderRadius']\n  alignSelf: Props['height']\n}>`\n  display: flex;\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      className={cx(width)}\n      backgrounds={backgrounds}\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","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","cx","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'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useBoxAnimations } from './animations'\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\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  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?: string\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 => !['margin', 'borderRadius', 'alignSelf'].includes(prop.toString()),\n})<{\n  margin: Props['margin']\n  borderRadius: Props['borderRadius']\n  alignSelf: Props['height']\n}>`\n  display: flex;\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      className={cx(width)}\n      backgrounds={backgrounds}\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","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","cx","length","index","columns","Element"],"mappings":"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"}

package/dist/Box.es.js

@@ -59,6 +59,7 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";

package/dist/Box.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.es.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/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'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useBoxAnimations } from './animations'\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\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  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?: string\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 => !['margin', 'borderRadius', 'alignSelf'].includes(prop.toString()),\n})<{\n  margin: Props['margin']\n  borderRadius: Props['borderRadius']\n  alignSelf: Props['height']\n}>`\n  display: flex;\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      className={cx(width)}\n      backgrounds={backgrounds}\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","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","cx","length","index","columns"],"mappings":"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"}
+{"version":3,"file":"Box.es.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/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'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useBoxAnimations } from './animations'\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\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  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?: string\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 => !['margin', 'borderRadius', 'alignSelf'].includes(prop.toString()),\n})<{\n  margin: Props['margin']\n  borderRadius: Props['borderRadius']\n  alignSelf: Props['height']\n}>`\n  display: flex;\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      className={cx(width)}\n      backgrounds={backgrounds}\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","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","cx","length","index","columns"],"mappings":"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"}

package/dist/Button.cjs.js

@@ -57,12 +57,12 @@ require("@apollo/client/link/batch-http");
 require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
 require("uuid/v4");
 require("corporate-ipsum");
-require("scroll-into-view-if-needed");
 require("next/link");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };

package/dist/Button.es.js

@@ -34,7 +34,7 @@ import styled, { css as css$1 } from "styled-components";
 import ColorHelper from "color";
 import { cx, css } from "@emotion/css";
 import { b as cssMargin, c as cssMediaRules, i as cssTextStyle } from "./cssMediaRules.es.js";
-import { r as responsiveWidth, o as colorToString } from "./index.es.js";
+import { r as responsiveWidth, p as colorToString } from "./index.es.js";
 import { L as Link } from "./index.es3.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
@@ -55,12 +55,12 @@ import "@apollo/client/link/batch-http";
 import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
 import "uuid/v4";
 import "corporate-ipsum";
-import "scroll-into-view-if-needed";
 import "next/link";
 const StyledButton = styled(Link).withConfig({
   shouldForwardProp: (prop) => !["margin", "variant", "shape", "size", "textColor", "color", "textStyle"].includes(prop.toString())

package/dist/Carousel.cjs.js

@@ -49,6 +49,7 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
@@ -58,7 +59,6 @@ require("next/image");
 require("./useBoxShadow.cjs.js");
 require("./placeholders.cjs.js");
 require("./index.cjs3.js");
-require("scroll-into-view-if-needed");
 require("next/link");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };

package/dist/Carousel.es.js

@@ -24,7 +24,7 @@ import { useGesture } from "react-use-gesture";
 import { wrap } from "@popmotion/popcorn";
 import { cx } from "@emotion/css";
 import { b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
-import { o as colorToString } from "./index.es.js";
+import { p as colorToString } from "./index.es.js";
 import { u as useMediaQuery } from "./useMediaQuery.es.js";
 import ImageComponent from "./Image.es2.js";
 import { jsxs, jsx } from "react/jsx-runtime";
@@ -47,6 +47,7 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
@@ -56,7 +57,6 @@ import "next/image";
 import "./useBoxShadow.es.js";
 import "./placeholders.es.js";
 import "./index.es3.js";
-import "scroll-into-view-if-needed";
 import "next/link";
 const LeftChevron = () => /* @__PURE__ */ jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",

package/dist/Countdown.cjs.js

@@ -25,6 +25,7 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");

package/dist/Countdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      className={cx(width)}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","cx","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      className={cx(width)}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","cx","_jsxs","_jsx"],"mappings":"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"}

package/dist/Countdown.es.js

@@ -1,7 +1,7 @@
 import { forwardRef, useState, useEffect } from "react";
 import styled, { css } from "styled-components";
 import { cx } from "@emotion/css";
-import { o as colorToString } from "./index.es.js";
+import { p as colorToString } from "./index.es.js";
 import { b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
@@ -23,6 +23,7 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";

package/dist/Countdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      className={cx(width)}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","cx","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      className={cx(width)}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","cx","_jsxs","_jsx"],"mappings":"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"}

package/dist/Divider.cjs.js

@@ -25,6 +25,7 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");