@makeswift/runtime 0.18.0-canary.7 → 0.18.0-canary.8

package/dist/cjs/components/builtin/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\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 { ResponsiveIconRadioGroupValue } 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'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveNumberValue,\n  type ImagesData,\n} from '@makeswift/prop-controllers'\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?: string\n  images?: ImagesData\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: ResponsiveGapData\n  autoplay?: boolean\n  delay?: number\n  showArrows?: boolean\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: boolean\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAhCJ,mBAQO;AACP,2BAAqC;AACrC,IAAAA,gBAA2B;AAC3B,qBAAqB;AAErB,2BAA8B;AAC9B,mBAA8B;AAE9B,mBAAkB;AAGlB,uBAAyB;AACzB,iBAAmB;AACnB,8BAAmC;AACnC,yBAAkC;AAClC,IAAAA,gBAA+B;AAO/B,MAAM,cAAc,MAClB,4CAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aACrE;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA;AACd,GACF;AAGF,MAAM,eAAe,MACnB,4CAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aACrE;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA;AACd,GACF;AAwBF,MAAM,kBAAkB;AACxB,MAAM,aAAa,CAAC,IAAY,aAAqB,MAAM,IAAI;AAE/D,MAAM,eAAW,yBAAW,SAASC,UACnC;AAAA,EACE,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,kBAAc,8BAAe;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,QAAM,YAAQ,qBAAO,CAAC;AACtB,QAAM,iBAAa,qBAAK,GAAG,OAAO,QAAQ,KAAK;AAC/C,QAAM,eAAW,4BAAc,kBAAkB,KAAK;AACtD,QAAM,WAAO,4BAAc,cAAc,KAAK;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,YAAY,KAAK,MAAM,OAAO,SAAS,YAAY,OAAO,CAAC;AACjE,QAAM,YAAY,KAAK,KAAK,aAAa,IAAI;AAC7C,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,cAAc,YAAY;AAC7C,QAAM,eAAW;AAAA,IACf,CAAC,iBAAyB;AACxB,UAAI,iBAAiB;AAAG;AAExB,YAAM,YAAY,eAAe,KAAK,IAAI,YAAY;AACtD,YAAM,YAAY,YAAY,IAAI,OAAO,MAAM,QAAQ,IAAI,OAAO,MAAM,GAAG,UAAU;AACrF,YAAM,WAAW,YAAY,KAAK,IAAI,UAAU,QAAQ,OAAO,KAAK,IAAI,YAAY,CAAC;AAErF,eAAS,QAAQ,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY,UAAU,IAAI;AAAA,EAC5C;AAEA,QAAM,gBAAY,mCAAa,EAAE,GAAG,GAAG,YAAY,EAAE,MAAM,UAAU,WAAW,IAAI,EAAE,CAAC;AACvF,QAAM,eAAW;AAAA,IACf;AAAA,MACE,QAAQ,CAAC,EAAE,UAAU,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,MAAM;AAC3D,kBAAU,MAAM,EAAE,GAAG,GAAG,CAAC;AACzB,cAAM,UAAU,WAAW,IAAI,EAAE;AAAA,MACnC;AAAA,MACA,WAAW,MAAM;AACf,kBAAU,MAAM,EAAE,GAAG,EAAE,CAAC;AAExB,YAAI,MAAM,UAAU;AAAiB,mBAAS,CAAC;AAAA,iBACtC,MAAM,UAAU,CAAC;AAAiB,mBAAS,EAAE;AAAA,MACxD;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE;AAAA,QAC5B,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,YAAY,aAAa;AAAG,eAAS,CAAC;AAAA,EAC7C,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,8BAAU,MAAM;AACd,QAAI,CAAC;AAAU,aAAO,MAAM;AAAA,MAAC;AAE7B,UAAM,aAAa,YAAY,MAAO,aAAa,SAAS,CAAC,IAAI,SAAS,CAAC,GAAI,QAAQ,GAAI;AAE3F,WAAO,MAAM,cAAc,UAAU;AAAA,EACvC,GAAG,CAAC,UAAU,OAAO,UAAU,UAAU,CAAC;AAE1C,QAAM,wBAAoB,2BAAS,EAAE,UAAU,SAAS,CAAC;AACzD,QAAM,oBAAgB,2BAAS,EAAE,UAAU,YAAY,OAAO,OAAO,CAAC;AACtE,QAAM,qBAAiB;AAAA,QACrB,2BAAS,EAAE,SAAS,OAAO,CAAC;AAAA,QAC5B;AAAA,UACE,4CAAmB,CAAC,kBAAkB,GAAY,CAAC,CAACC,YAAW,CAAC,OAAO;AAAA,QACrE,WAAW,GAAG,MAAMA,SAAQ;AAAA,QAC5B,UAAU,GAAG,MAAMA,SAAQ;AAAA,QAC3B,UAAU,GAAG,MAAMA,SAAQ;AAAA,MAC7B,EAAE;AAAA,IACJ;AAAA,QACA;AAAA,UACE,4CAAmB,CAAC,cAAc,GAAY,CAAC,CAAC,aAAa,QAAQ,OAAO,EAAE,WAAW,EAAE;AAAA,IAC7F;AAAA,EACF;AACA,QAAM,oBAAgB;AAAA,QACpB,2BAAS,EAAE,SAAS,QAAQ,UAAU,YAAY,UAAU,SAAS,CAAC;AAAA,QACtE;AAAA,UACE,4CAAmB,CAAC,GAAG,GAAY,CAAC,CAACC,OAAM,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO;AAAA,QACxE,QAAQ,KAAK,GAAG,CAACA,KAAI,QAAQ,CAAC,GAAGA,KAAI,IAAI,EAAE;AAAA,QAC3C,CAAC,QAAQ,cAAc,EAAE,GAAG;AAAA,UAC1B,SAAS,KAAK,GAAGA,KAAI,QAAQ,CAAC,GAAGA,KAAI,IAAI,EAAE;AAAA,QAC7C;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,EACF;AACA,QAAM,qBAAiB;AAAA,QACrB,2BAAS;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,YAAY;AAAA,IACd,CAAC;AAAA,QACD;AAAA,UACE;AAAA,QACE,CAAC,eAAe;AAAA,QAChB,CAAC,CAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,IAAI,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UACnF,gBAAY,oCAAc,UAAU;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,QACA,2BAAS,EAAE,KAAK,EAAE,YAAY,mBAAmB,QAAQ,eAAe,EAAE,CAAC;AAAA,EAC7E;AACA,QAAM,oBAAgB;AAAA,QACpB,2BAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MAER,SAAS;AAAA,MACT,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,MAEA,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV,CAAC;AAAA,QACD;AAAA,UACE;AAAA,QACE,CAAC,UAAU;AAAA,QACX,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UAC5E,WAAO,oCAAc,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,QAAM,wBAAoB;AAAA,IACxB;AAAA,QACA;AAAA,UACE,4CAAmB,CAAC,aAAa,GAAY,CAAC,CAAC,WAAW,QAAQ,MAAM;AACtE,gBAAQ,UAAU;AAAA,UAChB,KAAK;AACH,mBAAO,EAAE,WAAW,kBAAkB;AAAA,UAExC,KAAK;AACH,mBAAO,EAAE,WAAW,gCAAgC;AAAA,UAEtD;AACE,mBAAO,EAAE,WAAW,yBAAyB;AAAA,QACjD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,QACA,2BAAS;AAAA,MACP,MAAM;AAAA,MAEN,CAAC,cAAc,cAAc,EAAE,GAAG;AAAA,QAChC,WAAW;AAAA,UACT,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACA,QAAM,yBAAqB;AAAA,IACzB;AAAA,QACA;AAAA,UACE,4CAAmB,CAAC,aAAa,GAAY,CAAC,CAAC,WAAW,QAAQ,MAAM;AACtE,gBAAQ,UAAU;AAAA,UAChB,KAAK;AACH,mBAAO,EAAE,WAAW,mBAAmB;AAAA,UAEzC,KAAK;AACH,mBAAO,EAAE,WAAW,+BAA+B;AAAA,UAErD;AACE,mBAAO,EAAE,WAAW,wBAAwB;AAAA,QAChD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,QACA,2BAAS;AAAA,MACP,OAAO;AAAA,MAEP,CAAC,cAAc,cAAc,EAAE,GAAG;AAAA,QAChC,WAAW;AAAA,UACT,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACA,QAAM,oBAAgB;AAAA,QACpB,2BAAS,EAAE,SAAS,WAAW,SAAS,QAAQ,gBAAgB,UAAU,WAAW,GAAG,CAAC;AAAA,QACzF;AAAA,UACE;AAAA,QACE,CAAC,QAAQ;AAAA,QACT,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UAC5E,WAAO,oCAAc,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,YACT,2BAAS,EAAE,UAAU,YAAY,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,QAC3E;AAAA,QACA;AAAA,YACA,2BAAS,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC;AAAA,MACxC;AAAA,MACA,UAAU;AAAA,MACV,WAAW,OAAK;AACd,gBAAQ,EAAE,KAAK;AAAA,UACb,KAAK;AACH,qBAAS,CAAC;AACV;AAAA,UACF,KAAK;AACH,qBAAS,EAAE;AACX;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAGA;AAAA,qDAAC,SAAI,eAAW,2BAAS,EAAE,UAAU,YAAY,QAAQ,OAAO,CAAC,GAC/D;AAAA,sDAAC,SAAI,WAAW,mBAGd,sDAAC,4BAAO,KAAP,EAAY,GAAG,SAAS,GAAG,WAAW,eAAe,SAAS,WAC7D;AAAA,YAAC,4BAAO;AAAA,YAAP;AAAA,cACC,WAAW;AAAA,cACX,SAAS,EAAE,GAAG,GAAG,EAAE,MAAM,YAAY,UAAU,IAAI;AAAA,cACnD,YAAY;AAAA,gBACV,GAAG;AAAA,kBACD,MAAM;AAAA,kBACN,MAAM,CAAC,OAAO,MAAM,MAAM,CAAC;AAAA,kBAC3B,UAAU;AAAA,gBACZ;AAAA,cACF;AAAA,cAEC,iBAAO,IAAI,CAAC,EAAE,OAAO,YAAY,IAAI,MACpC;AAAA,gBAAC,4BAAO;AAAA,gBAAP;AAAA,kBACC,IAAI;AAAA,kBAEJ,WAAW;AAAA,kBACX,aAAa,OAAK,EAAE,eAAe;AAAA,kBACnC,SAAS,OAAK;AACZ,wBAAI,MAAM,YAAY;AAAG,wBAAE,eAAe;AAAA,kBAC5C;AAAA,kBAEA;AAAA,oBAAC,aAAAC;AAAA,oBAAA;AAAA,sBACC,OAAO;AAAA,wBACL;AAAA,0BACE,cAAU,sCAAkB,WAAW,EAAE;AAAA,0BACzC,OAAO,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,wBACjC;AAAA,sBACF;AAAA,sBACA,MAAM,WAAW;AAAA,sBACjB,SAAS,WAAW;AAAA,sBACpB,MAAM,WAAW;AAAA,sBACjB,QAAQ;AAAA,sBACR,cAAc;AAAA;AAAA,kBAChB;AAAA;AAAA,gBAnBK;AAAA,cAoBP,CACD;AAAA;AAAA,UACH,GACF,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,SAAS,EAAE;AAAA,cAC1B,WAAW;AAAA,cACX,QAAQ,CAAC,cAAc;AAAA,cAEvB,sDAAC,SAAI,WAAW,gBACd,sDAAC,eAAY,GACf;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,SAAS,CAAC;AAAA,cACzB,WAAW;AAAA,cACX,QAAQ,CAAC,cAAc;AAAA,cAEvB,sDAAC,SAAI,WAAW,gBACd,sDAAC,gBAAa,GAChB;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QACA,4CAAC,SAAI,WAAW,eACb,gBAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,MACzC,4CAAC,OAAY,QAAQ,MAAM,WAAW,SAAS,MAAM,SAAS,IAAI,SAAS,KAAjE,CAAoE,CAC/E,GACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,mBAAQ;AASf,SAAS,IAAI,EAAE,WAAW,QAAQ,GAAG,YAAY,GAAa;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UAER,uBAAuB;AAAA,YACrB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,SAAS;AAAA,YACT,cAAc;AAAA,YACd,YAAY;AAAA,UACd;AAAA,UAEA,aAAa;AAAA,YACX,WAAW;AAAA,YACX,WAAW;AAAA,YACX,OAAO,SAAS,KAAK;AAAA,YACrB,QAAQ,SAAS,KAAK;AAAA,UACxB;AAAA,UAEA,YAAY;AAAA,YACV,YAAY;AAAA,YACZ,WAAW,oCAAoC,SAAS,IAAI,CAAC;AAAA,YAC7D,OAAO;AAAA,YACP,QAAQ;AAAA,UACV;AAAA,UAEA,kBAAkB;AAAA,YAChB,WAAW,oCAAoC,SAAS,IAAI,CAAC;AAAA,UAC/D;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["import_react","Carousel","pageSize","gap","Image"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\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 { 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'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveNumberValue,\n  type ResponsiveIconRadioGroupValue,\n  type ImagesData,\n} from '@makeswift/prop-controllers'\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?: string\n  images?: ImagesData\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: ResponsiveGapData\n  autoplay?: boolean\n  delay?: number\n  showArrows?: boolean\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: boolean\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"],"mappings":"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","names":["import_react","Carousel","pageSize","gap","Image"]}

package/dist/cjs/components/builtin/Carousel/register.js

@@ -32,13 +32,12 @@ __export(register_exports, {
 });
 module.exports = __toCommonJS(register_exports);
 var import_uuid = require("uuid");
-var import_prop_controllers = require("../../../prop-controllers");
 var import_breakpoints = require("../../../state/modules/breakpoints");
-var import_prop_controllers2 = require("@makeswift/prop-controllers");
+var import_prop_controllers = require("@makeswift/prop-controllers");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
 var import_react2 = require("react");
-var import_prop_controllers3 = require("@makeswift/prop-controllers");
+var import_prop_controllers2 = require("@makeswift/prop-controllers");
 function registerComponent(runtime) {
   return runtime.registerComponent(
     (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Carousel")))),
@@ -47,21 +46,21 @@ function registerComponent(runtime) {
       label: "Carousel",
       icon: import_components_meta.ComponentIcon.Carousel,
       props: {
-        id: (0, import_prop_controllers2.ElementID)(),
-        images: (0, import_prop_controllers2.Images)({
+        id: (0, import_prop_controllers.ElementID)(),
+        images: (0, import_prop_controllers.Images)({
           preset: [
             { key: (0, import_uuid.v4)(), props: {} },
             { key: (0, import_uuid.v4)(), props: {} },
             { key: (0, import_uuid.v4)(), props: {} }
           ]
         }),
-        width: (0, import_prop_controllers2.Width)({
-          format: import_prop_controllers2.Width.Format.ClassName,
+        width: (0, import_prop_controllers.Width)({
+          format: import_prop_controllers.Width.Format.ClassName,
           defaultValue: { value: 400, unit: "px" }
         }),
-        margin: (0, import_prop_controllers2.Margin)({ format: import_prop_controllers2.Margin.Format.ClassName }),
-        pageSize: (0, import_prop_controllers2.ResponsiveNumber)((props) => {
-          const images = (0, import_prop_controllers2.getImagesPropControllerDataImagesData)(
+        margin: (0, import_prop_controllers.Margin)({ format: import_prop_controllers.Margin.Format.ClassName }),
+        pageSize: (0, import_prop_controllers.ResponsiveNumber)((props) => {
+          const images = (0, import_prop_controllers.getImagesPropControllerDataImagesData)(
             props.images
           );
           const imagesLength = images?.length ?? 0;
@@ -73,8 +72,8 @@ function registerComponent(runtime) {
             step: 1
           };
         }),
-        step: (0, import_prop_controllers2.ResponsiveNumber)((props, device) => {
-          const pageSize = import_prop_controllers2.ResponsiveNumber.fromPropData(
+        step: (0, import_prop_controllers.ResponsiveNumber)((props, device) => {
+          const pageSize = import_prop_controllers.ResponsiveNumber.fromPropData(
             props.pageSize
           );
           const pageSizeValue = (0, import_breakpoints.findBreakpointOverride)(runtime.getBreakpoints(), pageSize, device)?.value ?? 1;
@@ -86,7 +85,7 @@ function registerComponent(runtime) {
             step: 1
           };
         }),
-        slideAlignment: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+        slideAlignment: (0, import_prop_controllers.ResponsiveIconRadioGroup)({
           label: "Alignment",
           options: [
             { label: "Top", value: "flex-start", icon: "VerticalAlignStart16" },
@@ -95,24 +94,24 @@ function registerComponent(runtime) {
           ],
           defaultValue: "center"
         }),
-        gap: (0, import_prop_controllers2.GapX)({
+        gap: (0, import_prop_controllers.GapX)({
           label: "Gap",
           step: 5,
           defaultValue: { value: 0, unit: "px" }
         }),
-        autoplay: (0, import_prop_controllers3.Checkbox)({ label: "Autoplay" }),
-        delay: (0, import_prop_controllers2.Number)((props) => ({
+        autoplay: (0, import_prop_controllers2.Checkbox)({ label: "Autoplay" }),
+        delay: (0, import_prop_controllers.Number)((props) => ({
           label: "Delay",
           preset: 5,
           min: 1,
           step: 0.1,
           suffix: "seconds",
-          hidden: !(0, import_prop_controllers3.getCheckboxPropControllerDataBoolean)(
-            import_prop_controllers3.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.autoplay)
+          hidden: !(0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.autoplay)
           )
         })),
-        showArrows: (0, import_prop_controllers3.Checkbox)({ preset: true, label: "Show arrows" }),
-        arrowPosition: import_prop_controllers.Props.ResponsiveIconRadioGroup((props) => ({
+        showArrows: (0, import_prop_controllers2.Checkbox)({ preset: true, label: "Show arrows" }),
+        arrowPosition: (0, import_prop_controllers.ResponsiveIconRadioGroup)((props) => ({
           label: "Arrow position",
           options: [
             { label: "Inside", value: "inside", icon: "ArrowInside16" },
@@ -120,34 +119,34 @@ function registerComponent(runtime) {
             { label: "Outside", value: "outside", icon: "ArrowOutside16" }
           ],
           defaultValue: "inside",
-          hidden: (0, import_prop_controllers3.getCheckboxPropControllerDataBoolean)(
-            import_prop_controllers3.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
+          hidden: (0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
           ) === false
         })),
-        arrowColor: (0, import_prop_controllers2.ResponsiveColor)((props) => ({
+        arrowColor: (0, import_prop_controllers.ResponsiveColor)((props) => ({
           label: "Arrow color",
           placeholder: "black",
-          hidden: (0, import_prop_controllers3.getCheckboxPropControllerDataBoolean)(
-            import_prop_controllers3.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
+          hidden: (0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
           ) === false
         })),
-        arrowBackground: (0, import_prop_controllers2.ResponsiveColor)((props) => ({
+        arrowBackground: (0, import_prop_controllers.ResponsiveColor)((props) => ({
           label: "Arrow background",
           placeholder: "white",
-          hidden: (0, import_prop_controllers3.getCheckboxPropControllerDataBoolean)(
-            import_prop_controllers3.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
+          hidden: (0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
           ) === false
         })),
-        showDots: (0, import_prop_controllers3.Checkbox)({ preset: true, label: "Show dots" }),
-        dotColor: (0, import_prop_controllers2.ResponsiveColor)((props) => ({
+        showDots: (0, import_prop_controllers2.Checkbox)({ preset: true, label: "Show dots" }),
+        dotColor: (0, import_prop_controllers.ResponsiveColor)((props) => ({
           label: "Dot color",
           placeholder: "black",
-          hidden: (0, import_prop_controllers3.getCheckboxPropControllerDataBoolean)(
-            import_prop_controllers3.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showDots)
+          hidden: (0, import_prop_controllers2.getCheckboxPropControllerDataBoolean)(
+            import_prop_controllers2.checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showDots)
           ) === false
         })),
-        slideBorder: (0, import_prop_controllers3.Border)({ format: import_prop_controllers3.Border.Format.ClassName }),
-        slideBorderRadius: (0, import_prop_controllers2.BorderRadius)({ format: import_prop_controllers2.BorderRadius.Format.ClassName })
+        slideBorder: (0, import_prop_controllers2.Border)({ format: import_prop_controllers2.Border.Format.ClassName }),
+        slideBorderRadius: (0, import_prop_controllers.BorderRadius)({ format: import_prop_controllers.BorderRadius.Format.ClassName })
       }
     }
   );

package/dist/cjs/components/builtin/Carousel/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Carousel/register.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid'\n\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport {\n  BorderRadius,\n  ElementID,\n  GapX,\n  Images,\n  ImagesPropControllerData,\n  Margin,\n  Number,\n  ResponsiveColor,\n  ResponsiveNumber,\n  Width,\n  getImagesPropControllerDataImagesData,\n  type PropData,\n} from '@makeswift/prop-controllers'\n\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n  Border,\n  Checkbox,\n  checkboxPropControllerDataSchema,\n  getCheckboxPropControllerDataBoolean,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Carousel')),\n    {\n      type: MakeswiftComponentType.Carousel,\n      label: 'Carousel',\n      icon: ComponentIcon.Carousel,\n      props: {\n        id: ElementID(),\n        images: Images({\n          preset: [\n            { key: uuid(), props: {} },\n            { key: uuid(), props: {} },\n            { key: uuid(), props: {} },\n          ],\n        }),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 400, unit: 'px' },\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        pageSize: ResponsiveNumber(props => {\n          const images = getImagesPropControllerDataImagesData(\n            props.images as ImagesPropControllerData | undefined,\n          )\n          const imagesLength = images?.length ?? 0\n\n          return {\n            label: 'Images shown',\n            defaultValue: 1,\n            min: 1,\n            max: imagesLength,\n            step: 1,\n          }\n        }),\n        step: ResponsiveNumber((props, device) => {\n          const pageSize = ResponsiveNumber.fromPropData(\n            props.pageSize as PropData<typeof ResponsiveNumber> | undefined,\n          )\n          const pageSizeValue =\n            findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)?.value ?? 1\n\n          return {\n            label: 'Step',\n            defaultValue: 1,\n            min: 1,\n            max: pageSizeValue,\n            step: 1,\n          }\n        }),\n        slideAlignment: Props.ResponsiveIconRadioGroup({\n          label: 'Alignment',\n          options: [\n            { label: 'Top', value: 'flex-start', icon: 'VerticalAlignStart16' },\n            { label: 'Middle', value: 'center', icon: 'VerticalAlignMiddle16' },\n            { label: 'Bottom', value: 'flex-end', icon: 'VerticalAlignEnd16' },\n          ],\n          defaultValue: 'center',\n        }),\n        gap: GapX({\n          label: 'Gap',\n          step: 5,\n          defaultValue: { value: 0, unit: 'px' },\n        }),\n        autoplay: Checkbox({ label: 'Autoplay' }),\n        delay: Number(props => ({\n          label: 'Delay',\n          preset: 5,\n          min: 1,\n          step: 0.1,\n          suffix: 'seconds',\n          hidden: !getCheckboxPropControllerDataBoolean(\n            checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.autoplay),\n          ),\n        })),\n        showArrows: Checkbox({ preset: true, label: 'Show arrows' }),\n        arrowPosition: Props.ResponsiveIconRadioGroup(props => ({\n          label: 'Arrow position',\n          options: [\n            { label: 'Inside', value: 'inside', icon: 'ArrowInside16' },\n            { label: 'Center', value: 'center', icon: 'ArrowCenter16' },\n            { label: 'Outside', value: 'outside', icon: 'ArrowOutside16' },\n          ],\n          defaultValue: 'inside',\n          hidden:\n            getCheckboxPropControllerDataBoolean(\n              checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n            ) === false,\n        })),\n        arrowColor: ResponsiveColor(props => ({\n          label: 'Arrow color',\n          placeholder: 'black',\n          hidden:\n            getCheckboxPropControllerDataBoolean(\n              checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n            ) === false,\n        })),\n        arrowBackground: ResponsiveColor(props => ({\n          label: 'Arrow background',\n          placeholder: 'white',\n          hidden:\n            getCheckboxPropControllerDataBoolean(\n              checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n            ) === false,\n        })),\n        showDots: Checkbox({ preset: true, label: 'Show dots' }),\n        dotColor: ResponsiveColor(props => ({\n          label: 'Dot color',\n          placeholder: 'black',\n          hidden:\n            getCheckboxPropControllerDataBoolean(\n              checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showDots),\n            ) === false,\n        })),\n        slideBorder: Border({ format: Border.Format.ClassName }),\n        slideBorderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["import_prop_controllers","import_react","uuid"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Carousel/register.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid'\n\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport {\n  BorderRadius,\n  ElementID,\n  GapX,\n  Images,\n  ImagesPropControllerData,\n  Margin,\n  Number,\n  ResponsiveColor,\n  ResponsiveIconRadioGroup,\n  ResponsiveNumber,\n  Width,\n  getImagesPropControllerDataImagesData,\n  type PropData,\n} from '@makeswift/prop-controllers'\n\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n  Border,\n  Checkbox,\n  checkboxPropControllerDataSchema,\n  getCheckboxPropControllerDataBoolean,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Carousel')),\n    {\n      type: MakeswiftComponentType.Carousel,\n      label: 'Carousel',\n      icon: ComponentIcon.Carousel,\n      props: {\n        id: ElementID(),\n        images: Images({\n          preset: [\n            { key: uuid(), props: {} },\n            { key: uuid(), props: {} },\n            { key: uuid(), props: {} },\n          ],\n        }),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 400, unit: 'px' },\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        pageSize: ResponsiveNumber(props => {\n          const images = getImagesPropControllerDataImagesData(\n            props.images as ImagesPropControllerData | undefined,\n          )\n          const imagesLength = images?.length ?? 0\n\n          return {\n            label: 'Images shown',\n            defaultValue: 1,\n            min: 1,\n            max: imagesLength,\n            step: 1,\n          }\n        }),\n        step: ResponsiveNumber((props, device) => {\n          const pageSize = ResponsiveNumber.fromPropData(\n            props.pageSize as PropData<typeof ResponsiveNumber> | undefined,\n          )\n          const pageSizeValue =\n            findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)?.value ?? 1\n\n          return {\n            label: 'Step',\n            defaultValue: 1,\n            min: 1,\n            max: pageSizeValue,\n            step: 1,\n          }\n        }),\n        slideAlignment: ResponsiveIconRadioGroup({\n          label: 'Alignment',\n          options: [\n            { label: 'Top', value: 'flex-start', icon: 'VerticalAlignStart16' },\n            { label: 'Middle', value: 'center', icon: 'VerticalAlignMiddle16' },\n            { label: 'Bottom', value: 'flex-end', icon: 'VerticalAlignEnd16' },\n          ],\n          defaultValue: 'center',\n        }),\n        gap: GapX({\n          label: 'Gap',\n          step: 5,\n          defaultValue: { value: 0, unit: 'px' },\n        }),\n        autoplay: Checkbox({ label: 'Autoplay' }),\n        delay: Number(props => ({\n          label: 'Delay',\n          preset: 5,\n          min: 1,\n          step: 0.1,\n          suffix: 'seconds',\n          hidden: !getCheckboxPropControllerDataBoolean(\n            checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.autoplay),\n          ),\n        })),\n        showArrows: Checkbox({ preset: true, label: 'Show arrows' }),\n        arrowPosition: ResponsiveIconRadioGroup(props => ({\n          label: 'Arrow position',\n          options: [\n            { label: 'Inside', value: 'inside', icon: 'ArrowInside16' },\n            { label: 'Center', value: 'center', icon: 'ArrowCenter16' },\n            { label: 'Outside', value: 'outside', icon: 'ArrowOutside16' },\n          ],\n          defaultValue: 'inside',\n          hidden:\n            getCheckboxPropControllerDataBoolean(\n              checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n            ) === false,\n        })),\n        arrowColor: ResponsiveColor(props => ({\n          label: 'Arrow color',\n          placeholder: 'black',\n          hidden:\n            getCheckboxPropControllerDataBoolean(\n              checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n            ) === false,\n        })),\n        arrowBackground: ResponsiveColor(props => ({\n          label: 'Arrow background',\n          placeholder: 'white',\n          hidden:\n            getCheckboxPropControllerDataBoolean(\n              checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showArrows),\n            ) === false,\n        })),\n        showDots: Checkbox({ preset: true, label: 'Show dots' }),\n        dotColor: ResponsiveColor(props => ({\n          label: 'Dot color',\n          placeholder: 'black',\n          hidden:\n            getCheckboxPropControllerDataBoolean(\n              checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showDots),\n            ) === false,\n        })),\n        slideBorder: Border({ format: Border.Format.ClassName }),\n        slideBorderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["import_react","import_prop_controllers","uuid"]}

package/dist/cjs/components/builtin/Countdown/Countdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport { ResponsiveIconRadioGroupValue } 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'\nimport { ResponsiveFontData, ResponsiveGapData, ResponsiveValue } from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: string\n  date?: string\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?: ResponsiveGapData\n  numberFont?: ResponsiveFontData\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: ResponsiveFontData\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: string\n  daysLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  secondsLabel?: string\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"],"mappings":"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","names":["Container","size","gap","shape","variant","blockColor","numberColor","numberFont","labelColor","labelFont","Countdown"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\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'\nimport {\n  type ResponsiveFontData,\n  type ResponsiveGapData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveValue,\n} from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: string\n  date?: string\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?: ResponsiveGapData\n  numberFont?: ResponsiveFontData\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: ResponsiveFontData\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: string\n  daysLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  secondsLabel?: string\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"],"mappings":"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","names":["Container","size","gap","shape","variant","blockColor","numberColor","numberFont","labelColor","labelFont","Countdown"]}

package/dist/cjs/components/builtin/Countdown/register.js

@@ -31,12 +31,11 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_prop_controllers = require("../../../prop-controllers");
 var import_breakpoints = require("../../../state/modules/breakpoints");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
 var import_react2 = require("react");
-var import_prop_controllers2 = require("@makeswift/prop-controllers");
+var import_prop_controllers = require("@makeswift/prop-controllers");
 function registerComponent(runtime) {
   return runtime.registerComponent(
     (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Countdown")))),
@@ -45,11 +44,11 @@ function registerComponent(runtime) {
       label: "Countdown",
       icon: import_components_meta.ComponentIcon.Countdown,
       props: {
-        id: (0, import_prop_controllers2.ElementID)(),
-        date: (0, import_prop_controllers2.Date)(() => ({
+        id: (0, import_prop_controllers.ElementID)(),
+        date: (0, import_prop_controllers.Date)(() => ({
           preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
         })),
-        variant: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+        variant: (0, import_prop_controllers.ResponsiveIconRadioGroup)({
           label: "Style",
           options: [
             { label: "Filled", value: "filled", icon: "CountdownSolid16" },
@@ -68,7 +67,7 @@ function registerComponent(runtime) {
           ],
           defaultValue: "filled"
         }),
-        shape: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+        shape: (0, import_prop_controllers.ResponsiveIconRadioGroup)({
           label: "Shape",
           options: [
             { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -77,7 +76,7 @@ function registerComponent(runtime) {
           ],
           defaultValue: "rounded"
         }),
-        size: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+        size: (0, import_prop_controllers.ResponsiveIconRadioGroup)({
           label: "Size",
           options: [
             { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -86,7 +85,7 @@ function registerComponent(runtime) {
           ],
           defaultValue: "medium"
         }),
-        gap: (0, import_prop_controllers2.GapX)({
+        gap: (0, import_prop_controllers.GapX)({
           preset: [
             {
               deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
@@ -99,32 +98,32 @@ function registerComponent(runtime) {
           max: 100,
           defaultValue: { value: 0, unit: "px" }
         }),
-        numberFont: (0, import_prop_controllers2.Font)({ label: "Number font" }),
-        numberColor: (0, import_prop_controllers2.ResponsiveColor)({
+        numberFont: (0, import_prop_controllers.Font)({ label: "Number font" }),
+        numberColor: (0, import_prop_controllers.ResponsiveColor)({
           label: "Number color",
           placeholder: "white"
         }),
-        blockColor: (0, import_prop_controllers2.ResponsiveColor)({
+        blockColor: (0, import_prop_controllers.ResponsiveColor)({
           label: "Block color",
           placeholder: "black"
         }),
-        labelFont: (0, import_prop_controllers2.Font)({ label: "Label font" }),
-        labelColor: (0, import_prop_controllers2.ResponsiveColor)({
+        labelFont: (0, import_prop_controllers.Font)({ label: "Label font" }),
+        labelColor: (0, import_prop_controllers.ResponsiveColor)({
           label: "Label color",
           placeholder: "black"
         }),
-        width: (0, import_prop_controllers2.Width)({
-          format: import_prop_controllers2.Width.Format.ClassName,
+        width: (0, import_prop_controllers.Width)({
+          format: import_prop_controllers.Width.Format.ClassName,
           defaultValue: { value: 560, unit: "px" }
         }),
-        margin: (0, import_prop_controllers2.Margin)({ format: import_prop_controllers2.Margin.Format.ClassName }),
-        daysLabel: (0, import_prop_controllers2.TextInput)({ label: "Days label", placeholder: "Days" }),
-        hoursLabel: (0, import_prop_controllers2.TextInput)({ label: "Hours label", placeholder: "Hours" }),
-        minutesLabel: (0, import_prop_controllers2.TextInput)({
+        margin: (0, import_prop_controllers.Margin)({ format: import_prop_controllers.Margin.Format.ClassName }),
+        daysLabel: (0, import_prop_controllers.TextInput)({ label: "Days label", placeholder: "Days" }),
+        hoursLabel: (0, import_prop_controllers.TextInput)({ label: "Hours label", placeholder: "Hours" }),
+        minutesLabel: (0, import_prop_controllers.TextInput)({
           label: "Minutes label",
           placeholder: "Minutes"
         }),
-        secondsLabel: (0, import_prop_controllers2.TextInput)({
+        secondsLabel: (0, import_prop_controllers.TextInput)({
           label: "Seconds label",
           placeholder: "Seconds"
         })

package/dist/cjs/components/builtin/Countdown/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Countdown/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n  Date as DatePropController,\n  ElementID,\n  Font,\n  GapX,\n  Margin,\n  ResponsiveColor,\n  TextInput,\n  Width,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Countdown')),\n    {\n      type: MakeswiftComponentType.Countdown,\n      label: 'Countdown',\n      icon: ComponentIcon.Countdown,\n      props: {\n        id: ElementID(),\n        date: DatePropController(() => ({\n          preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n        })),\n        variant: Props.ResponsiveIconRadioGroup({\n          label: 'Style',\n          options: [\n            { label: 'Filled', value: 'filled', icon: 'CountdownSolid16' },\n            {\n              label: 'Filled split',\n              value: 'filled-split',\n              icon: 'CountdownSolidSplit16',\n            },\n            { label: 'Outline', value: 'outline', icon: 'CountdownOutline16' },\n            {\n              label: 'Outline split',\n              value: 'outline-split',\n              icon: 'CountdownOutlineSplit16',\n            },\n            { label: 'Clear', value: 'clear', icon: 'CountdownNaked16' },\n          ],\n          defaultValue: 'filled',\n        }),\n        shape: Props.ResponsiveIconRadioGroup({\n          label: 'Shape',\n          options: [\n            { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n            { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n            { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n          ],\n          defaultValue: 'rounded',\n        }),\n        size: Props.ResponsiveIconRadioGroup({\n          label: 'Size',\n          options: [\n            { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n            { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n            { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n          ],\n          defaultValue: 'medium',\n        }),\n        gap: GapX({\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 10, unit: 'px' },\n            },\n          ],\n          label: 'Gap',\n          step: 1,\n          min: 0,\n          max: 100,\n          defaultValue: { value: 0, unit: 'px' },\n        }),\n        numberFont: Font({ label: 'Number font' }),\n        numberColor: ResponsiveColor({\n          label: 'Number color',\n          placeholder: 'white',\n        }),\n        blockColor: ResponsiveColor({\n          label: 'Block color',\n          placeholder: 'black',\n        }),\n        labelFont: Font({ label: 'Label font' }),\n        labelColor: ResponsiveColor({\n          label: 'Label color',\n          placeholder: 'black',\n        }),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 560, unit: 'px' },\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        daysLabel: TextInput({ label: 'Days label', placeholder: 'Days' }),\n        hoursLabel: TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n        minutesLabel: TextInput({\n          label: 'Minutes label',\n          placeholder: 'Minutes',\n        }),\n        secondsLabel: TextInput({\n          label: 'Seconds label',\n          placeholder: 'Seconds',\n        }),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["import_react","import_prop_controllers","DatePropController"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Countdown/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n  Date as DatePropController,\n  ElementID,\n  Font,\n  GapX,\n  Margin,\n  ResponsiveColor,\n  ResponsiveIconRadioGroup,\n  TextInput,\n  Width,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Countdown')),\n    {\n      type: MakeswiftComponentType.Countdown,\n      label: 'Countdown',\n      icon: ComponentIcon.Countdown,\n      props: {\n        id: ElementID(),\n        date: DatePropController(() => ({\n          preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n        })),\n        variant: ResponsiveIconRadioGroup({\n          label: 'Style',\n          options: [\n            { label: 'Filled', value: 'filled', icon: 'CountdownSolid16' },\n            {\n              label: 'Filled split',\n              value: 'filled-split',\n              icon: 'CountdownSolidSplit16',\n            },\n            { label: 'Outline', value: 'outline', icon: 'CountdownOutline16' },\n            {\n              label: 'Outline split',\n              value: 'outline-split',\n              icon: 'CountdownOutlineSplit16',\n            },\n            { label: 'Clear', value: 'clear', icon: 'CountdownNaked16' },\n          ],\n          defaultValue: 'filled',\n        }),\n        shape: ResponsiveIconRadioGroup({\n          label: 'Shape',\n          options: [\n            { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n            { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n            { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n          ],\n          defaultValue: 'rounded',\n        }),\n        size: ResponsiveIconRadioGroup({\n          label: 'Size',\n          options: [\n            { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n            { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n            { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n          ],\n          defaultValue: 'medium',\n        }),\n        gap: GapX({\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 10, unit: 'px' },\n            },\n          ],\n          label: 'Gap',\n          step: 1,\n          min: 0,\n          max: 100,\n          defaultValue: { value: 0, unit: 'px' },\n        }),\n        numberFont: Font({ label: 'Number font' }),\n        numberColor: ResponsiveColor({\n          label: 'Number color',\n          placeholder: 'white',\n        }),\n        blockColor: ResponsiveColor({\n          label: 'Block color',\n          placeholder: 'black',\n        }),\n        labelFont: Font({ label: 'Label font' }),\n        labelColor: ResponsiveColor({\n          label: 'Label color',\n          placeholder: 'black',\n        }),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 560, unit: 'px' },\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        daysLabel: TextInput({ label: 'Days label', placeholder: 'Days' }),\n        hoursLabel: TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n        minutesLabel: TextInput({\n          label: 'Minutes label',\n          placeholder: 'Minutes',\n        }),\n        secondsLabel: TextInput({\n          label: 'Seconds label',\n          placeholder: 'Seconds',\n        }),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["import_react","DatePropController"]}