@makeswift/runtime 0.8.5 → 0.8.6

package/dist/Carousel.es.js.map

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

package/dist/Countdown.cjs.js

@@ -33,15 +33,41 @@ var __objRest = (source, exclude) => {
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var css = require("@emotion/css");
 var React = require("react");
-var responsiveStyle = require("./responsive-style.cjs.js");
+var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
+require("use-sync-external-store/shim/with-selector");
+require("next/dynamic");
+require("./constants.cjs.js");
+require("redux");
+require("redux-thunk");
+require("./actions.cjs.js");
+require("./descriptors.cjs.js");
+require("slate");
+require("slate-react");
+require("./state/breakpoints.cjs.js");
+require("./introspection.cjs.js");
 require("@emotion/serialize");
 require("@emotion/utils");
+require("./text-input.cjs.js");
+require("./combobox.cjs.js");
 require("use-sync-external-store/shim");
-require("redux");
-require("redux-thunk");
 require("./types.cjs.js");
-require("./actions.cjs.js");
+require("./box-models.cjs.js");
+require("css-box-model");
+require("color");
+require("scroll-into-view-if-needed");
+require("react-dom");
+require("html-react-parser");
+require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cors");
+require("path-to-regexp");
+require("cookie");
+require("http-proxy");
+require("set-cookie-parser");
+require("uuid");
+require("corporate-ipsum");
 const BLOCK_CLASS_NAME = "block";
 function Block(_a) {
   var _b = _a, {
@@ -50,7 +76,7 @@ function Block(_a) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(BLOCK_CLASS_NAME, responsiveStyle.useStyle({
+    className: css.cx(BLOCK_CLASS_NAME, next.useStyle({
       display: "block",
       padding: "0.5em",
       fontSize: "1em"
@@ -65,7 +91,7 @@ function Label(_c) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(LABEL_CLASS_NAME, responsiveStyle.useStyle({
+    className: css.cx(LABEL_CLASS_NAME, next.useStyle({
       marginTop: "0.25em"
     }), className)
   }));
@@ -78,7 +104,7 @@ function Segment(_e) {
     "className"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(SEGMENT_CLASS_NAME, responsiveStyle.useStyle({
+    className: css.cx(SEGMENT_CLASS_NAME, next.useStyle({
       flex: 1,
       textAlign: "center"
     }), className)
@@ -114,9 +140,9 @@ const Container = React.forwardRef(function Container2(_g, ref) {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
     ref,
-    className: css.cx(responsiveStyle.useStyle({
+    className: css.cx(next.useStyle({
       display: "flex"
-    }), width, margin, responsiveStyle.useStyle(responsiveStyle.responsiveStyle([size], ([size2 = "medium"]) => {
+    }), width, margin, next.useStyle(next.useResponsiveStyle([size], ([size2 = "medium"]) => {
       switch (size2) {
         case "small":
           return {
@@ -140,8 +166,8 @@ const Container = React.forwardRef(function Container2(_g, ref) {
             }
           };
       }
-    })), responsiveStyle.useStyle({
-      [`.${SEGMENT_CLASS_NAME}`]: responsiveStyle.responsiveStyle([gap], ([gap2]) => ({
+    })), next.useStyle({
+      [`.${SEGMENT_CLASS_NAME}`]: next.useResponsiveStyle([gap], ([gap2]) => ({
         margin: `0 ${gap2 == null ? 0 : `${gap2.value / 2}${gap2.unit}`}`,
         "&:first-child": {
           marginLeft: 0
@@ -150,8 +176,8 @@ const Container = React.forwardRef(function Container2(_g, ref) {
           marginRight: 0
         }
       }))
-    }), responsiveStyle.useStyle({
-      [`.${BLOCK_CLASS_NAME}`]: responsiveStyle.responsiveStyle([shape], ([shape2 = "rounded"]) => {
+    }), next.useStyle({
+      [`.${BLOCK_CLASS_NAME}`]: next.useResponsiveStyle([shape], ([shape2 = "rounded"]) => {
         switch (shape2) {
           case "pill":
             return {
@@ -167,8 +193,8 @@ const Container = React.forwardRef(function Container2(_g, ref) {
             };
         }
       })
-    }), responsiveStyle.useStyle({
-      [`.${BLOCK_CLASS_NAME}`]: responsiveStyle.responsiveStyle([variant, blockColor, numberColor, numberFont], ([variant2 = "filled", blockColor2 = {
+    }), next.useStyle({
+      [`.${BLOCK_CLASS_NAME}`]: next.useResponsiveStyle([variant, blockColor, numberColor, numberFont], ([variant2 = "filled", blockColor2 = {
         swatch: {
           hue: 0,
           saturation: 0,
@@ -187,13 +213,13 @@ const Container = React.forwardRef(function Container2(_g, ref) {
           case "filled":
             return {
               fontFamily: `"${numberFont2}"`,
-              color: responsiveStyle.colorToString(numberColor2),
-              background: responsiveStyle.colorToString(blockColor2)
+              color: next.colorToString(numberColor2),
+              background: next.colorToString(blockColor2)
             };
           case "filled-split":
             return {
               position: "relative",
-              color: responsiveStyle.colorToString(numberColor2),
+              color: next.colorToString(numberColor2),
               fontFamily: `"${numberFont2}"`,
               "> span": {
                 position: "relative",
@@ -208,7 +234,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
                 bottom: "calc(50% + 1px)",
                 borderTopLeftRadius: "inherit",
                 borderTopRightRadius: "inherit",
-                background: responsiveStyle.colorToString(blockColor2)
+                background: next.colorToString(blockColor2)
               },
               "::after": {
                 content: '""',
@@ -219,22 +245,22 @@ const Container = React.forwardRef(function Container2(_g, ref) {
                 bottom: 0,
                 borderBottomLeftRadius: "inherit",
                 borderBottomRightRadius: "inherit",
-                background: responsiveStyle.colorToString(blockColor2)
+                background: next.colorToString(blockColor2)
               }
             };
           case "outline":
             return {
               fontFamily: `"${numberFont2}"`,
-              color: responsiveStyle.colorToString(numberColor2),
+              color: next.colorToString(numberColor2),
               background: "transparent",
-              border: `2px solid ${responsiveStyle.colorToString(blockColor2)}`
+              border: `2px solid ${next.colorToString(blockColor2)}`
             };
           case "outline-split":
             return {
               position: "relative",
               fontFamily: `"${numberFont2}"`,
-              color: responsiveStyle.colorToString(numberColor2),
-              border: `2px solid ${responsiveStyle.colorToString(blockColor2)}`,
+              color: next.colorToString(numberColor2),
+              border: `2px solid ${next.colorToString(blockColor2)}`,
               "> span": {
                 position: "relative",
                 zIndex: 1
@@ -247,21 +273,21 @@ const Container = React.forwardRef(function Container2(_g, ref) {
                 right: 0,
                 height: 2,
                 marginTop: -1,
-                background: responsiveStyle.colorToString(blockColor2)
+                background: next.colorToString(blockColor2)
               }
             };
           default:
             return {
               fontFamily: `"${numberFont2}"`,
               background: "transparent",
-              color: responsiveStyle.colorToString(numberColor2),
+              color: next.colorToString(numberColor2),
               paddingTop: 0,
               paddingBottom: 0
             };
         }
       })
-    }), responsiveStyle.useStyle({
-      [`.${LABEL_CLASS_NAME}`]: responsiveStyle.responsiveStyle([labelColor, labelFont], ([labelColor2 = {
+    }), next.useStyle({
+      [`.${LABEL_CLASS_NAME}`]: next.useResponsiveStyle([labelColor, labelFont], ([labelColor2 = {
         swatch: {
           hue: 0,
           saturation: 0,
@@ -270,7 +296,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
         alpha: 1
       }, labelFont2 = "sans-serif"]) => ({
         fontFamily: `"${labelFont2}"`,
-        color: responsiveStyle.colorToString(labelColor2)
+        color: next.colorToString(labelColor2)
       }))
     }), className)
   }));

package/dist/Countdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\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?: string\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        BLOCK_CLASS_NAME,\n        useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n        className,\n      )}\n    />\n  )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n    />\n  )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  width?: string\n  margin?: string\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\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n  {\n    className,\n    width,\n    margin,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    numberFont,\n    numberColor,\n    blockColor,\n    labelFont,\n    ...restOfProps\n  }: ContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex' }),\n        width,\n        margin,\n        useStyle(\n          responsiveStyle([size] as const, ([size = 'medium']) => {\n            switch (size) {\n              case 'small':\n                return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n              case 'large':\n                return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n              default:\n                return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n            }\n          }),\n        ),\n        useStyle({\n          [`.${SEGMENT_CLASS_NAME}`]: responsiveStyle([gap] as const, ([gap]) => ({\n            margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n            '&:first-child': {\n              marginLeft: 0,\n            },\n\n            '&:last-child': {\n              marginRight: 0,\n            },\n          })),\n        }),\n        useStyle({\n          [`.${BLOCK_CLASS_NAME}`]: responsiveStyle([shape] as const, ([shape = 'rounded']) => {\n            switch (shape) {\n              case 'pill':\n                return { borderRadius: 500 }\n\n              case 'rounded':\n                return { borderRadius: 6 }\n\n              default:\n                return { borderRadius: 0 }\n            }\n          }),\n        }),\n        useStyle({\n          [`.${BLOCK_CLASS_NAME}`]: responsiveStyle(\n            [variant, blockColor, numberColor, 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 {\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    background: colorToString(blockColor),\n                  }\n\n                case 'filled-split':\n                  return {\n                    position: 'relative',\n                    color: colorToString(numberColor),\n                    fontFamily: `\"${numberFont}\"`,\n\n                    '> span': {\n                      position: 'relative',\n                      zIndex: 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                      borderTopLeftRadius: 'inherit',\n                      borderTopRightRadius: '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                      borderBottomLeftRadius: 'inherit',\n                      borderBottomRightRadius: 'inherit',\n                      background: colorToString(blockColor),\n                    },\n                  }\n\n                case 'outline':\n                  return {\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    background: 'transparent',\n                    border: `2px solid ${colorToString(blockColor)}`,\n                  }\n\n                case 'outline-split':\n                  return {\n                    position: 'relative',\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    border: `2px solid ${colorToString(blockColor)}`,\n\n                    '> span': {\n                      position: 'relative',\n                      zIndex: 1,\n                    },\n\n                    '::before': {\n                      content: '\"\"',\n                      position: 'absolute',\n                      top: '50%',\n                      left: 0,\n                      right: 0,\n                      height: 2,\n                      marginTop: -1,\n                      background: colorToString(blockColor),\n                    },\n                  }\n\n                default:\n                  return {\n                    fontFamily: `\"${numberFont}\"`,\n                    background: 'transparent',\n                    color: colorToString(numberColor),\n                    paddingTop: 0,\n                    paddingBottom: 0,\n                  }\n              }\n            },\n          ),\n        }),\n        useStyle({\n          [`.${LABEL_CLASS_NAME}`]: responsiveStyle(\n            [labelColor, labelFont] as const,\n            ([\n              labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              labelFont = 'sans-serif',\n            ]) => ({\n              fontFamily: `\"${labelFont}\"`,\n              color: colorToString(labelColor),\n            }),\n          ),\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nconst getRemaining = (date: Props['date'] | null | 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 {\n    days: days.toString(),\n    hours: hours.toString(),\n    minutes: minutes.toString(),\n    seconds: seconds.toString(),\n  }\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(null))\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      width={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_CLASS_NAME","className","restOfProps","cx","useStyle","display","padding","fontSize","LABEL_CLASS_NAME","marginTop","SEGMENT_CLASS_NAME","flex","textAlign","Container","forwardRef","ref","width","margin","variant","size","shape","gap","labelColor","numberFont","numberColor","blockColor","labelFont","responsiveStyle","value","unit","marginLeft","marginRight","borderRadius","swatch","hue","saturation","lightness","alpha","fontFamily","color","colorToString","background","position","zIndex","content","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","height","paddingTop","paddingBottom","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","toString","Countdown","id","daysLabel","hoursLabel","minutesLabel","secondsLabel","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\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?: string\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        BLOCK_CLASS_NAME,\n        useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n        className,\n      )}\n    />\n  )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n    />\n  )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  width?: string\n  margin?: string\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\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n  {\n    className,\n    width,\n    margin,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    numberFont,\n    numberColor,\n    blockColor,\n    labelFont,\n    ...restOfProps\n  }: ContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex' }),\n        width,\n        margin,\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = 'medium']) => {\n            switch (size) {\n              case 'small':\n                return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n              case 'large':\n                return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n              default:\n                return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n            }\n          }),\n        ),\n        useStyle({\n          [`.${SEGMENT_CLASS_NAME}`]: useResponsiveStyle([gap] as const, ([gap]) => ({\n            margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n            '&:first-child': {\n              marginLeft: 0,\n            },\n\n            '&:last-child': {\n              marginRight: 0,\n            },\n          })),\n        }),\n        useStyle({\n          [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle([shape] as const, ([shape = 'rounded']) => {\n            switch (shape) {\n              case 'pill':\n                return { borderRadius: 500 }\n\n              case 'rounded':\n                return { borderRadius: 6 }\n\n              default:\n                return { borderRadius: 0 }\n            }\n          }),\n        }),\n        useStyle({\n          [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle(\n            [variant, blockColor, numberColor, 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 {\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    background: colorToString(blockColor),\n                  }\n\n                case 'filled-split':\n                  return {\n                    position: 'relative',\n                    color: colorToString(numberColor),\n                    fontFamily: `\"${numberFont}\"`,\n\n                    '> span': {\n                      position: 'relative',\n                      zIndex: 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                      borderTopLeftRadius: 'inherit',\n                      borderTopRightRadius: '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                      borderBottomLeftRadius: 'inherit',\n                      borderBottomRightRadius: 'inherit',\n                      background: colorToString(blockColor),\n                    },\n                  }\n\n                case 'outline':\n                  return {\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    background: 'transparent',\n                    border: `2px solid ${colorToString(blockColor)}`,\n                  }\n\n                case 'outline-split':\n                  return {\n                    position: 'relative',\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    border: `2px solid ${colorToString(blockColor)}`,\n\n                    '> span': {\n                      position: 'relative',\n                      zIndex: 1,\n                    },\n\n                    '::before': {\n                      content: '\"\"',\n                      position: 'absolute',\n                      top: '50%',\n                      left: 0,\n                      right: 0,\n                      height: 2,\n                      marginTop: -1,\n                      background: colorToString(blockColor),\n                    },\n                  }\n\n                default:\n                  return {\n                    fontFamily: `\"${numberFont}\"`,\n                    background: 'transparent',\n                    color: colorToString(numberColor),\n                    paddingTop: 0,\n                    paddingBottom: 0,\n                  }\n              }\n            },\n          ),\n        }),\n        useStyle({\n          [`.${LABEL_CLASS_NAME}`]: useResponsiveStyle(\n            [labelColor, labelFont] as const,\n            ([\n              labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              labelFont = 'sans-serif',\n            ]) => ({\n              fontFamily: `\"${labelFont}\"`,\n              color: colorToString(labelColor),\n            }),\n          ),\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nconst getRemaining = (date: Props['date'] | null | 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 {\n    days: days.toString(),\n    hours: hours.toString(),\n    minutes: minutes.toString(),\n    seconds: seconds.toString(),\n  }\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(null))\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      width={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_CLASS_NAME","className","restOfProps","cx","useStyle","display","padding","fontSize","LABEL_CLASS_NAME","marginTop","SEGMENT_CLASS_NAME","flex","textAlign","Container","forwardRef","ref","width","margin","variant","size","shape","gap","labelColor","numberFont","numberColor","blockColor","labelFont","useResponsiveStyle","value","unit","marginLeft","marginRight","borderRadius","swatch","hue","saturation","lightness","alpha","fontFamily","color","colorToString","background","position","zIndex","content","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","height","paddingTop","paddingBottom","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","toString","Countdown","id","daysLabel","hoursLabel","minutesLabel","secondsLabel","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}

package/dist/Countdown.es.js

@@ -31,15 +31,41 @@ var __objRest = (source, exclude) => {
 };
 import { cx } from "@emotion/css";
 import { forwardRef, useState, useEffect } from "react";
-import { e as useStyle, r as responsiveStyle, i as colorToString } from "./responsive-style.es.js";
+import { n as useStyle, o as useResponsiveStyle, r as colorToString } from "./index.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import "use-sync-external-store/shim/with-selector";
+import "next/dynamic";
+import "./constants.es.js";
+import "redux";
+import "redux-thunk";
+import "./actions.es.js";
+import "./descriptors.es.js";
+import "slate";
+import "slate-react";
+import "./state/breakpoints.es.js";
+import "./introspection.es.js";
 import "@emotion/serialize";
 import "@emotion/utils";
+import "./text-input.es.js";
+import "./combobox.es.js";
 import "use-sync-external-store/shim";
-import "redux";
-import "redux-thunk";
 import "./types.es.js";
-import "./actions.es.js";
+import "./box-models.es.js";
+import "css-box-model";
+import "color";
+import "scroll-into-view-if-needed";
+import "react-dom";
+import "html-react-parser";
+import "next/head";
+import "@emotion/server/create-instance";
+import "next/document";
+import "cors";
+import "path-to-regexp";
+import "cookie";
+import "http-proxy";
+import "set-cookie-parser";
+import "uuid";
+import "corporate-ipsum";
 const BLOCK_CLASS_NAME = "block";
 function Block(_a) {
   var _b = _a, {
@@ -114,7 +140,7 @@ const Container = forwardRef(function Container2(_g, ref) {
     ref,
     className: cx(useStyle({
       display: "flex"
-    }), width, margin, useStyle(responsiveStyle([size], ([size2 = "medium"]) => {
+    }), width, margin, useStyle(useResponsiveStyle([size], ([size2 = "medium"]) => {
       switch (size2) {
         case "small":
           return {
@@ -139,7 +165,7 @@ const Container = forwardRef(function Container2(_g, ref) {
           };
       }
     })), useStyle({
-      [`.${SEGMENT_CLASS_NAME}`]: responsiveStyle([gap], ([gap2]) => ({
+      [`.${SEGMENT_CLASS_NAME}`]: useResponsiveStyle([gap], ([gap2]) => ({
         margin: `0 ${gap2 == null ? 0 : `${gap2.value / 2}${gap2.unit}`}`,
         "&:first-child": {
           marginLeft: 0
@@ -149,7 +175,7 @@ const Container = forwardRef(function Container2(_g, ref) {
         }
       }))
     }), useStyle({
-      [`.${BLOCK_CLASS_NAME}`]: responsiveStyle([shape], ([shape2 = "rounded"]) => {
+      [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle([shape], ([shape2 = "rounded"]) => {
         switch (shape2) {
           case "pill":
             return {
@@ -166,7 +192,7 @@ const Container = forwardRef(function Container2(_g, ref) {
         }
       })
     }), useStyle({
-      [`.${BLOCK_CLASS_NAME}`]: responsiveStyle([variant, blockColor, numberColor, numberFont], ([variant2 = "filled", blockColor2 = {
+      [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle([variant, blockColor, numberColor, numberFont], ([variant2 = "filled", blockColor2 = {
         swatch: {
           hue: 0,
           saturation: 0,
@@ -259,7 +285,7 @@ const Container = forwardRef(function Container2(_g, ref) {
         }
       })
     }), useStyle({
-      [`.${LABEL_CLASS_NAME}`]: responsiveStyle([labelColor, labelFont], ([labelColor2 = {
+      [`.${LABEL_CLASS_NAME}`]: useResponsiveStyle([labelColor, labelFont], ([labelColor2 = {
         swatch: {
           hue: 0,
           saturation: 0,

package/dist/Countdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\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?: string\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        BLOCK_CLASS_NAME,\n        useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n        className,\n      )}\n    />\n  )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n    />\n  )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  width?: string\n  margin?: string\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\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n  {\n    className,\n    width,\n    margin,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    numberFont,\n    numberColor,\n    blockColor,\n    labelFont,\n    ...restOfProps\n  }: ContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex' }),\n        width,\n        margin,\n        useStyle(\n          responsiveStyle([size] as const, ([size = 'medium']) => {\n            switch (size) {\n              case 'small':\n                return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n              case 'large':\n                return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n              default:\n                return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n            }\n          }),\n        ),\n        useStyle({\n          [`.${SEGMENT_CLASS_NAME}`]: responsiveStyle([gap] as const, ([gap]) => ({\n            margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n            '&:first-child': {\n              marginLeft: 0,\n            },\n\n            '&:last-child': {\n              marginRight: 0,\n            },\n          })),\n        }),\n        useStyle({\n          [`.${BLOCK_CLASS_NAME}`]: responsiveStyle([shape] as const, ([shape = 'rounded']) => {\n            switch (shape) {\n              case 'pill':\n                return { borderRadius: 500 }\n\n              case 'rounded':\n                return { borderRadius: 6 }\n\n              default:\n                return { borderRadius: 0 }\n            }\n          }),\n        }),\n        useStyle({\n          [`.${BLOCK_CLASS_NAME}`]: responsiveStyle(\n            [variant, blockColor, numberColor, 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 {\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    background: colorToString(blockColor),\n                  }\n\n                case 'filled-split':\n                  return {\n                    position: 'relative',\n                    color: colorToString(numberColor),\n                    fontFamily: `\"${numberFont}\"`,\n\n                    '> span': {\n                      position: 'relative',\n                      zIndex: 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                      borderTopLeftRadius: 'inherit',\n                      borderTopRightRadius: '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                      borderBottomLeftRadius: 'inherit',\n                      borderBottomRightRadius: 'inherit',\n                      background: colorToString(blockColor),\n                    },\n                  }\n\n                case 'outline':\n                  return {\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    background: 'transparent',\n                    border: `2px solid ${colorToString(blockColor)}`,\n                  }\n\n                case 'outline-split':\n                  return {\n                    position: 'relative',\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    border: `2px solid ${colorToString(blockColor)}`,\n\n                    '> span': {\n                      position: 'relative',\n                      zIndex: 1,\n                    },\n\n                    '::before': {\n                      content: '\"\"',\n                      position: 'absolute',\n                      top: '50%',\n                      left: 0,\n                      right: 0,\n                      height: 2,\n                      marginTop: -1,\n                      background: colorToString(blockColor),\n                    },\n                  }\n\n                default:\n                  return {\n                    fontFamily: `\"${numberFont}\"`,\n                    background: 'transparent',\n                    color: colorToString(numberColor),\n                    paddingTop: 0,\n                    paddingBottom: 0,\n                  }\n              }\n            },\n          ),\n        }),\n        useStyle({\n          [`.${LABEL_CLASS_NAME}`]: responsiveStyle(\n            [labelColor, labelFont] as const,\n            ([\n              labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              labelFont = 'sans-serif',\n            ]) => ({\n              fontFamily: `\"${labelFont}\"`,\n              color: colorToString(labelColor),\n            }),\n          ),\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nconst getRemaining = (date: Props['date'] | null | 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 {\n    days: days.toString(),\n    hours: hours.toString(),\n    minutes: minutes.toString(),\n    seconds: seconds.toString(),\n  }\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(null))\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      width={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_CLASS_NAME","className","restOfProps","cx","useStyle","display","padding","fontSize","LABEL_CLASS_NAME","marginTop","SEGMENT_CLASS_NAME","flex","textAlign","Container","forwardRef","ref","width","margin","variant","size","shape","gap","labelColor","numberFont","numberColor","blockColor","labelFont","responsiveStyle","value","unit","marginLeft","marginRight","borderRadius","swatch","hue","saturation","lightness","alpha","fontFamily","color","colorToString","background","position","zIndex","content","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","height","paddingTop","paddingBottom","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","toString","Countdown","id","daysLabel","hoursLabel","minutesLabel","secondsLabel","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\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?: string\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        BLOCK_CLASS_NAME,\n        useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n        className,\n      )}\n    />\n  )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n    />\n  )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  width?: string\n  margin?: string\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\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n  {\n    className,\n    width,\n    margin,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    numberFont,\n    numberColor,\n    blockColor,\n    labelFont,\n    ...restOfProps\n  }: ContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex' }),\n        width,\n        margin,\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = 'medium']) => {\n            switch (size) {\n              case 'small':\n                return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n              case 'large':\n                return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n              default:\n                return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n            }\n          }),\n        ),\n        useStyle({\n          [`.${SEGMENT_CLASS_NAME}`]: useResponsiveStyle([gap] as const, ([gap]) => ({\n            margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n            '&:first-child': {\n              marginLeft: 0,\n            },\n\n            '&:last-child': {\n              marginRight: 0,\n            },\n          })),\n        }),\n        useStyle({\n          [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle([shape] as const, ([shape = 'rounded']) => {\n            switch (shape) {\n              case 'pill':\n                return { borderRadius: 500 }\n\n              case 'rounded':\n                return { borderRadius: 6 }\n\n              default:\n                return { borderRadius: 0 }\n            }\n          }),\n        }),\n        useStyle({\n          [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle(\n            [variant, blockColor, numberColor, 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 {\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    background: colorToString(blockColor),\n                  }\n\n                case 'filled-split':\n                  return {\n                    position: 'relative',\n                    color: colorToString(numberColor),\n                    fontFamily: `\"${numberFont}\"`,\n\n                    '> span': {\n                      position: 'relative',\n                      zIndex: 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                      borderTopLeftRadius: 'inherit',\n                      borderTopRightRadius: '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                      borderBottomLeftRadius: 'inherit',\n                      borderBottomRightRadius: 'inherit',\n                      background: colorToString(blockColor),\n                    },\n                  }\n\n                case 'outline':\n                  return {\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    background: 'transparent',\n                    border: `2px solid ${colorToString(blockColor)}`,\n                  }\n\n                case 'outline-split':\n                  return {\n                    position: 'relative',\n                    fontFamily: `\"${numberFont}\"`,\n                    color: colorToString(numberColor),\n                    border: `2px solid ${colorToString(blockColor)}`,\n\n                    '> span': {\n                      position: 'relative',\n                      zIndex: 1,\n                    },\n\n                    '::before': {\n                      content: '\"\"',\n                      position: 'absolute',\n                      top: '50%',\n                      left: 0,\n                      right: 0,\n                      height: 2,\n                      marginTop: -1,\n                      background: colorToString(blockColor),\n                    },\n                  }\n\n                default:\n                  return {\n                    fontFamily: `\"${numberFont}\"`,\n                    background: 'transparent',\n                    color: colorToString(numberColor),\n                    paddingTop: 0,\n                    paddingBottom: 0,\n                  }\n              }\n            },\n          ),\n        }),\n        useStyle({\n          [`.${LABEL_CLASS_NAME}`]: useResponsiveStyle(\n            [labelColor, labelFont] as const,\n            ([\n              labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              labelFont = 'sans-serif',\n            ]) => ({\n              fontFamily: `\"${labelFont}\"`,\n              color: colorToString(labelColor),\n            }),\n          ),\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nconst getRemaining = (date: Props['date'] | null | 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 {\n    days: days.toString(),\n    hours: hours.toString(),\n    minutes: minutes.toString(),\n    seconds: seconds.toString(),\n  }\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(null))\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      width={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_CLASS_NAME","className","restOfProps","cx","useStyle","display","padding","fontSize","LABEL_CLASS_NAME","marginTop","SEGMENT_CLASS_NAME","flex","textAlign","Container","forwardRef","ref","width","margin","variant","size","shape","gap","labelColor","numberFont","numberColor","blockColor","labelFont","useResponsiveStyle","value","unit","marginLeft","marginRight","borderRadius","swatch","hue","saturation","lightness","alpha","fontFamily","color","colorToString","background","position","zIndex","content","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","height","paddingTop","paddingBottom","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","toString","Countdown","id","daysLabel","hoursLabel","minutesLabel","secondsLabel","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}