npm - @makeswift/runtime - Versions diffs - 0.15.0 → 0.16.0-canary.1 - Mend

@makeswift/runtime 0.15.0 → 0.16.0-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/esm/components/builtin/Carousel/Carousel.js.map CHANGED Viewed

	@@ -1 +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 {\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"],"mappings":"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","names":["Carousel","pageSize","gap"]}
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 {\n ElementIDValue,\n ImagesValue,\n ResponsiveNumberValue,\n ResponsiveIconRadioGroupValue,\n GapXValue,\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?: 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":["Carousel","pageSize","gap"]}

package/dist/esm/components/builtin/Carousel/register.js CHANGED Viewed

@@ -1,9 +1,16 @@
 import { v4 as uuid } from "uuid";
 import { Props } from "../../../prop-controllers";
 import { findBreakpointOverride } from "../../../state/modules/breakpoints";
+import { BorderRadius, Number, ResponsiveColor } from "@makeswift/prop-controllers";
 import { MakeswiftComponentType } from "../constants";
 import { ComponentIcon } from "../../../state/modules/components-meta";
 import { lazy } from "react";
+import {
+  Border,
+  Checkbox,
+  checkboxPropControllerDataSchema,
+  getCheckboxPropControllerDataBoolean
+} from "@makeswift/prop-controllers";
 function registerComponent(runtime) {
   return runtime.registerComponent(
     lazy(() => import("./Carousel")),
@@ -61,16 +68,18 @@ function registerComponent(runtime) {
           step: 5,
           defaultValue: { value: 0, unit: "px" }
         }),
-        autoplay: Props.Checkbox({ label: "Autoplay" }),
-        delay: Props.Number((props) => ({
+        autoplay: Checkbox({ label: "Autoplay" }),
+        delay: Number((props) => ({
           label: "Delay",
           preset: 5,
           min: 1,
           step: 0.1,
           suffix: "seconds",
-          hidden: !props.autoplay
+          hidden: !getCheckboxPropControllerDataBoolean(
+            checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.autoplay)
+          )
         })),
-        showArrows: Props.Checkbox({ preset: true, label: "Show arrows" }),
+        showArrows: Checkbox({ preset: true, label: "Show arrows" }),
         arrowPosition: Props.ResponsiveIconRadioGroup((props) => ({
           label: "Arrow position",
           options: [
@@ -79,26 +88,34 @@ function registerComponent(runtime) {
             { label: "Outside", value: "outside", icon: "ArrowOutside16" }
           ],
           defaultValue: "inside",
-          hidden: props.showArrows === false
+          hidden: getCheckboxPropControllerDataBoolean(
+            checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
+          ) === false
         })),
-        arrowColor: Props.ResponsiveColor((props) => ({
+        arrowColor: ResponsiveColor((props) => ({
           label: "Arrow color",
           placeholder: "black",
-          hidden: props.showArrows === false
+          hidden: getCheckboxPropControllerDataBoolean(
+            checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
+          ) === false
         })),
-        arrowBackground: Props.ResponsiveColor((props) => ({
+        arrowBackground: ResponsiveColor((props) => ({
           label: "Arrow background",
           placeholder: "white",
-          hidden: props.showArrows === false
+          hidden: getCheckboxPropControllerDataBoolean(
+            checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showArrows)
+          ) === false
         })),
-        showDots: Props.Checkbox({ preset: true, label: "Show dots" }),
-        dotColor: Props.ResponsiveColor((props) => ({
+        showDots: Checkbox({ preset: true, label: "Show dots" }),
+        dotColor: ResponsiveColor((props) => ({
           label: "Dot color",
           placeholder: "black",
-          hidden: props.showDots === false
+          hidden: getCheckboxPropControllerDataBoolean(
+            checkboxPropControllerDataSchema.optional().catch(void 0).parse(props.showDots)
+          ) === false
         })),
-        slideBorder: Props.Border({ format: Props.Border.Format.ClassName }),
-        slideBorderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName })
+        slideBorder: Border({ format: Border.Format.ClassName }),
+        slideBorderRadius: BorderRadius({ format: BorderRadius.Format.ClassName })
       }
     }
   );

package/dist/esm/components/builtin/Carousel/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Carousel/register.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid'\n\nimport { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '../../../state/modules/breakpoints'\n\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\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: Props.ElementID(),\n images: Props.Images({\n preset: [\n { key: uuid(), props: {} },\n { key: uuid(), props: {} },\n { key: uuid(), props: {} },\n ],\n }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 400, unit: 'px' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n pageSize: Props.ResponsiveNumber(props => {\n const images = props.images as unknown[]\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: Props.ResponsiveNumber((props, device) => {\n const pageSize = props.pageSize as ResponsiveValue<number>\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: Props.GapX({\n label: 'Gap',\n step: 5,\n defaultValue: { value: 0, unit: 'px' },\n }),\n autoplay: ~~Props.~~Checkbox({ label: 'Autoplay' }),\n delay: ~~Props.~~Number(props => ({\n label: 'Delay',\n preset: 5,\n min: 1,\n step: 0.1,\n suffix: 'seconds',\n hidden: !props.autoplay,\n })),\n showArrows: ~~Props.~~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: props.showArrows === false,\n })),\n arrowColor: ~~Props.~~ResponsiveColor(props => ({\n label: 'Arrow color',\n placeholder: 'black',\n hidden: props.showArrows === false,\n })),\n arrowBackground: ~~Props.~~ResponsiveColor(props => ({\n label: 'Arrow background',\n placeholder: 'white',\n hidden: props.showArrows === false,\n })),\n showDots: ~~Props.~~Checkbox({ preset: true, label: 'Show dots' }),\n dotColor: ~~Props.~~ResponsiveColor(props => ({\n label: 'Dot color',\n placeholder: 'black',\n hidden: props.showDots === false,\n })),\n slideBorder: ~~Props.~~Border({ format: ~~Props.~~Border.Format.ClassName }),\n slideBorderRadius: ~~Props.~~BorderRadius({ format: ~~Props.~~BorderRadius.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"AAAA,SAAS,MAAM,YAAY;AAE3B,SAAS,aAA8B;AAEvC,SAAS,8BAA8B;~~AAEvC~~,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;~~AAEd~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,YAAY,CAAC;AAAA,IAC/B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,MAAM,UAAU;AAAA,QACpB,QAAQ,MAAM,OAAO;AAAA,UACnB,QAAQ;AAAA,YACN,EAAE,KAAK,KAAK,GAAG,OAAO,CAAC,EAAE;AAAA,YACzB,EAAE,KAAK,KAAK,GAAG,OAAO,CAAC,EAAE;AAAA,YACzB,EAAE,KAAK,KAAK,GAAG,OAAO,CAAC,EAAE;AAAA,UAC3B;AAAA,QACF,CAAC;AAAA,QACD,OAAO,MAAM,MAAM;AAAA,UACjB,QAAQ,MAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,UAAU,MAAM,iBAAiB,WAAS;AACxC,gBAAM,SAAS,MAAM;AACrB,gBAAM,eAAe,QAAQ,UAAU;AAEvC,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,cAAc;AAAA,YACd,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,MAAM,MAAM,iBAAiB,CAAC,OAAO,WAAW;AAC9C,gBAAM,WAAW,MAAM;AACvB,gBAAM,gBACJ,uBAAuB,QAAQ,eAAe,GAAG,UAAU,MAAM,GAAG,SAAS;AAE/E,iBAAO;AAAA,YACL,OAAO;AAAA,YACP,cAAc;AAAA,YACd,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,gBAAgB,MAAM,yBAAyB;AAAA,UAC7C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,OAAO,OAAO,cAAc,MAAM,uBAAuB;AAAA,YAClE,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,wBAAwB;AAAA,YAClE,EAAE,OAAO,UAAU,OAAO,YAAY,MAAM,qBAAqB;AAAA,UACnE;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,KAAK,MAAM,KAAK;AAAA,UACd,OAAO;AAAA,UACP,MAAM;AAAA,UACN,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACvC,CAAC;AAAA,QACD,UAAU,~~MAAM,~~SAAS,EAAE,OAAO,WAAW,CAAC;AAAA,~~QAC9C~~,OAAO,~~MAAM,~~OAAO,YAAU;AAAA,~~UAC5B~~,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,QAAQ,CAAC,MAAM;AAAA,~~QACjB~~,EAAE;AAAA,QACF,YAAY,~~MAAM,~~SAAS,EAAE,QAAQ,MAAM,OAAO,cAAc,CAAC;AAAA,~~QACjE~~,eAAe,MAAM,yBAAyB,YAAU;AAAA,UACtD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,gBAAgB;AAAA,YAC1D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,gBAAgB;AAAA,YAC1D,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,iBAAiB;AAAA,UAC/D;AAAA,UACA,cAAc;AAAA,UACd,~~QAAQ~~,MAAM,~~eAAe~~;AAAA,~~QAC/B~~,EAAE;AAAA,QACF,YAAY,~~MAAM,~~gBAAgB,YAAU;AAAA,~~UAC1C~~,OAAO;AAAA,UACP,aAAa;AAAA,UACb,~~QAAQ~~,MAAM,~~eAAe~~;AAAA,~~QAC/B~~,EAAE;AAAA,QACF,iBAAiB,~~MAAM,~~gBAAgB,YAAU;AAAA,~~UAC/C~~,OAAO;AAAA,UACP,aAAa;AAAA,UACb,~~QAAQ~~,MAAM,~~eAAe~~;AAAA,~~QAC/B~~,EAAE;AAAA,QACF,UAAU,~~MAAM,~~SAAS,EAAE,QAAQ,MAAM,OAAO,YAAY,CAAC;AAAA,~~QAC7D~~,UAAU,~~MAAM,~~gBAAgB,YAAU;AAAA,~~UACxC~~,OAAO;AAAA,UACP,aAAa;AAAA,UACb,~~QAAQ~~,MAAM,~~aAAa~~;AAAA,~~QAC7B~~,EAAE;AAAA,QACF,aAAa,~~MAAM,~~OAAO,EAAE,QAAQ,~~MAAM,~~OAAO,OAAO,UAAU,CAAC;AAAA,~~QACnE~~,mBAAmB,~~MAAM,~~aAAa,EAAE,QAAQ,~~MAAM,~~aAAa,OAAO,UAAU,CAAC;AAAA,~~MACvF~~;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Carousel/register.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid'\n\nimport { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { BorderRadius, Number, ResponsiveColor } 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: Props.ElementID(),\n images: Props.Images({\n preset: [\n { key: uuid(), props: {} },\n { key: uuid(), props: {} },\n { key: uuid(), props: {} },\n ],\n }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 400, unit: 'px' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n pageSize: Props.ResponsiveNumber(props => {\n const images = props.images as unknown[]\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: Props.ResponsiveNumber((props, device) => {\n const pageSize = props.pageSize as ResponsiveValue<number>\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: Props.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":[]}

package/dist/esm/components/builtin/Countdown/Countdown.js.map CHANGED Viewed

	@@ -1 +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 {\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"],"mappings":"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","names":["Container","size","gap","shape","variant","blockColor","numberColor","numberFont","labelColor","labelFont","Countdown"]}
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 {\n DateValue,\n ElementIDValue,\n FontValue,\n GapXValue,\n ResponsiveIconRadioGroupValue,\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'\nimport { ResponsiveValue } from '@makeswift/prop-controllers'\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"],"mappings":";AA+CI,cA0TE,YA1TF;AA7CJ,SAAS,UAAU;AACnB,SAAiD,YAAiB,WAAW,gBAAgB;AAU7F,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AA0BnC,MAAM,mBAAmB;AAIzB,SAAS,MAAM,EAAE,WAAW,GAAG,YAAY,GAAe;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,SAAS,SAAS,UAAU,MAAM,CAAC;AAAA,QAChE;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,mBAAmB;AAIzB,SAAS,MAAM,EAAE,WAAW,GAAG,YAAY,GAAe;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,kBAAkB,SAAS,EAAE,WAAW,SAAS,CAAC,GAAG,SAAS;AAAA;AAAA,EAC9E;AAEJ;AAEA,MAAM,qBAAqB;AAI3B,SAAS,QAAQ,EAAE,WAAW,GAAG,YAAY,GAAiB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,oBAAoB,SAAS,EAAE,MAAM,GAAG,WAAW,SAAS,CAAC,GAAG,SAAS;AAAA;AAAA,EACzF;AAEJ;AAmBA,MAAM,YAAY,WAAW,SAASA,WACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,OAAO,CAAC;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,UACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACC,QAAO,QAAQ,MAAM;AACzD,oBAAQA,OAAM;AAAA,cACZ,KAAK;AACH,uBAAO,EAAE,UAAU,IAAI,CAAC,IAAI,gBAAgB,EAAE,GAAG,EAAE,UAAU,GAAG,EAAE;AAAA,cAEpE,KAAK;AACH,uBAAO,EAAE,UAAU,IAAI,CAAC,IAAI,gBAAgB,EAAE,GAAG,EAAE,UAAU,GAAG,EAAE;AAAA,cAEpE;AACE,uBAAO,EAAE,UAAU,IAAI,CAAC,IAAI,gBAAgB,EAAE,GAAG,EAAE,UAAU,GAAG,EAAE;AAAA,YACtE;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,SAAS;AAAA,UACP,CAAC,IAAI,kBAAkB,EAAE,GAAG,mBAAmB,CAAC,GAAG,GAAY,CAAC,CAACC,IAAG,OAAO;AAAA,YACzE,QAAQ,KAAKA,QAAO,OAAO,IAAI,GAAGA,KAAI,QAAQ,CAAC,GAAGA,KAAI,IAAI,EAAE;AAAA,YAE5D,iBAAiB;AAAA,cACf,YAAY;AAAA,YACd;AAAA,YAEA,gBAAgB;AAAA,cACd,aAAa;AAAA,YACf;AAAA,UACF,EAAE;AAAA,QACJ,CAAC;AAAA,QACD,SAAS;AAAA,UACP,CAAC,IAAI,gBAAgB,EAAE,GAAG,mBAAmB,CAAC,KAAK,GAAY,CAAC,CAACC,SAAQ,SAAS,MAAM;AACtF,oBAAQA,QAAO;AAAA,cACb,KAAK;AACH,uBAAO,EAAE,cAAc,IAAI;AAAA,cAE7B,KAAK;AACH,uBAAO,EAAE,cAAc,EAAE;AAAA,cAE3B;AACE,uBAAO,EAAE,cAAc,EAAE;AAAA,YAC7B;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,QACD,SAAS;AAAA,UACP,CAAC,IAAI,gBAAgB,EAAE,GAAG;AAAA,YACxB,CAAC,SAAS,YAAY,aAAa,UAAU;AAAA,YAC7C,CAAC;AAAA,cACCC,WAAU;AAAA,cACVC,cAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,cACzEC,eAAc,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,IAAI,GAAG,OAAO,EAAE;AAAA,cAC5EC,cAAa;AAAA,YACf,MAAM;AACJ,sBAAQH,UAAS;AAAA,gBACf,KAAK;AACH,yBAAO;AAAA,oBACL,YAAY,IAAIG,WAAU;AAAA,oBAC1B,OAAO,cAAcD,YAAW;AAAA,oBAChC,YAAY,cAAcD,WAAU;AAAA,kBACtC;AAAA,gBAEF,KAAK;AACH,yBAAO;AAAA,oBACL,UAAU;AAAA,oBACV,OAAO,cAAcC,YAAW;AAAA,oBAChC,YAAY,IAAIC,WAAU;AAAA,oBAE1B,UAAU;AAAA,sBACR,UAAU;AAAA,sBACV,QAAQ;AAAA,oBACV;AAAA,oBAEA,YAAY;AAAA,sBACV,SAAS;AAAA,sBACT,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,qBAAqB;AAAA,sBACrB,sBAAsB;AAAA,sBACtB,YAAY,cAAcF,WAAU;AAAA,oBACtC;AAAA,oBAEA,WAAW;AAAA,sBACT,SAAS;AAAA,sBACT,UAAU;AAAA,sBACV,MAAM;AAAA,sBACN,OAAO;AAAA,sBACP,KAAK;AAAA,sBACL,QAAQ;AAAA,sBACR,wBAAwB;AAAA,sBACxB,yBAAyB;AAAA,sBACzB,YAAY,cAAcA,WAAU;AAAA,oBACtC;AAAA,kBACF;AAAA,gBAEF,KAAK;AACH,yBAAO;AAAA,oBACL,YAAY,IAAIE,WAAU;AAAA,oBAC1B,OAAO,cAAcD,YAAW;AAAA,oBAChC,YAAY;AAAA,oBACZ,QAAQ,aAAa,cAAcD,WAAU,CAAC;AAAA,kBAChD;AAAA,gBAEF,KAAK;AACH,yBAAO;AAAA,oBACL,UAAU;AAAA,oBACV,YAAY,IAAIE,WAAU;AAAA,oBAC1B,OAAO,cAAcD,YAAW;AAAA,oBAChC,QAAQ,aAAa,cAAcD,WAAU,CAAC;AAAA,oBAE9C,UAAU;AAAA,sBACR,UAAU;AAAA,sBACV,QAAQ;AAAA,oBACV;AAAA,oBAEA,YAAY;AAAA,sBACV,SAAS;AAAA,sBACT,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,WAAW;AAAA,sBACX,YAAY,cAAcA,WAAU;AAAA,oBACtC;AAAA,kBACF;AAAA,gBAEF;AACE,yBAAO;AAAA,oBACL,YAAY,IAAIE,WAAU;AAAA,oBAC1B,YAAY;AAAA,oBACZ,OAAO,cAAcD,YAAW;AAAA,oBAChC,YAAY;AAAA,oBACZ,eAAe;AAAA,kBACjB;AAAA,cACJ;AAAA,YACF;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,SAAS;AAAA,UACP,CAAC,IAAI,gBAAgB,EAAE,GAAG;AAAA,YACxB,CAAC,YAAY,SAAS;AAAA,YACtB,CAAC;AAAA,cACCE,cAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,cACzEC,aAAY;AAAA,YACd,OAAO;AAAA,cACL,YAAY,IAAIA,UAAS;AAAA,cACzB,OAAO,cAAcD,WAAU;AAAA,YACjC;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,MAAM,eAAe,CAAC,SAA2C;AAC/D,MAAI,QAAQ;AAAM,WAAO,EAAE,MAAM,KAAK,OAAO,KAAK,SAAS,KAAK,SAAS,IAAI;AAE7E,QAAM,WAAW,IAAI,KAAK,IAAI,EAAE,QAAQ,IAAI,KAAK,IAAI;AAErD,MAAI,YAAY;AAAG,WAAO,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,EAAE;AAEtE,MAAI,QAAQ,KAAK,IAAI,QAAQ,IAAI;AAEjC,QAAM,OAAO,KAAK,MAAM,QAAQ,KAAK;AACrC,WAAS,OAAO;AAEhB,QAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI,IAAI;AACzC,WAAS,QAAQ;AAEjB,QAAM,UAAU,KAAK,MAAM,QAAQ,EAAE,IAAI;AACzC,WAAS,UAAU;AAEnB,QAAM,UAAU,SAAS,OAAO,QAAQ,EAAE,GAAG,EAAE;AAE/C,SAAO;AAAA,IACL,MAAM,KAAK,SAAS;AAAA,IACpB,OAAO,MAAM,SAAS;AAAA,IACtB,SAAS,QAAQ,SAAS;AAAA,IAC1B,SAAS,QAAQ,SAAS;AAAA,EAC5B;AACF;AAEA,MAAM,YAAY,WAAW,SAASE,WACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,CAAC,EAAE,MAAM,OAAO,SAAS,QAAQ,GAAG,YAAY,IAAI,SAAS,aAAa,IAAI,CAAC;AAErF,YAAU,MAAM;AACd,iBAAa,aAAa,IAAI,CAAC;AAE/B,UAAM,aAAa,YAAY,MAAM;AACnC,mBAAa,aAAa,IAAI,CAAC;AAAA,IACjC,GAAG,GAAI;AAEP,WAAO,MAAM,cAAc,UAAU;AAAA,EACvC,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,6BAAC,WACC;AAAA,8BAAC,SACC,8BAAC,UAAM,gBAAK,GACd;AAAA,UACA,oBAAC,SAAO,uBAAa,OAAO,SAAS,WAAU;AAAA,WACjD;AAAA,QACA,qBAAC,WACC;AAAA,8BAAC,SACC,8BAAC,UAAM,iBAAM,GACf;AAAA,UACA,oBAAC,SAAO,wBAAc,OAAO,UAAU,YAAW;AAAA,WACpD;AAAA,QACA,qBAAC,WACC;AAAA,8BAAC,SACC,8BAAC,UAAM,mBAAQ,GACjB;AAAA,UACA,oBAAC,SAAO,0BAAgB,OAAO,YAAY,cAAa;AAAA,WAC1D;AAAA,QACA,qBAAC,WACC;AAAA,8BAAC,SACC,8BAAC,UAAM,mBAAQ,GACjB;AAAA,UACA,oBAAC,SAAO,0BAAgB,OAAO,YAAY,cAAa;AAAA,WAC1D;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,oBAAQ;","names":["Container","size","gap","shape","variant","blockColor","numberColor","numberFont","labelColor","labelFont","Countdown"]}

package/dist/esm/components/builtin/Countdown/register.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { getBaseBreakpoint } from "../../../state/modules/breakpoints";
 import { MakeswiftComponentType } from "../constants";
 import { ComponentIcon } from "../../../state/modules/components-meta";
 import { lazy } from "react";
+import { ResponsiveColor } from "@makeswift/prop-controllers";
 function registerComponent(runtime) {
   return runtime.registerComponent(
     lazy(() => import("./Countdown")),
@@ -66,16 +67,16 @@ function registerComponent(runtime) {
           defaultValue: { value: 0, unit: "px" }
         }),
         numberFont: Props.Font({ label: "Number font" }),
-        numberColor: Props.ResponsiveColor({
+        numberColor: ResponsiveColor({
           label: "Number color",
           placeholder: "white"
         }),
-        blockColor: Props.ResponsiveColor({
+        blockColor: ResponsiveColor({
           label: "Block color",
           placeholder: "black"
         }),
         labelFont: Props.Font({ label: "Label font" }),
-        labelColor: Props.ResponsiveColor({
+        labelColor: ResponsiveColor({
           label: "Label color",
           placeholder: "black"
         }),

package/dist/esm/components/builtin/Countdown/register.js.map CHANGED Viewed

	@@ -1 +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'\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: Props.ElementID(),\n date: Props.Date(() => ({\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: Props.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: Props.Font({ label: 'Number font' }),\n numberColor: ~~Props.~~ResponsiveColor({\n label: 'Number color',\n placeholder: 'white',\n }),\n blockColor: ~~Props.~~ResponsiveColor({\n label: 'Block color',\n placeholder: 'black',\n }),\n labelFont: Props.Font({ label: 'Label font' }),\n labelColor: ~~Props.~~ResponsiveColor({\n label: 'Label color',\n placeholder: 'black',\n }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 560, unit: 'px' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n daysLabel: Props.TextInput({ label: 'Days label', placeholder: 'Days' }),\n hoursLabel: Props.TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n minutesLabel: Props.TextInput({\n label: 'Minutes label',\n placeholder: 'Minutes',\n }),\n secondsLabel: Props.TextInput({\n label: 'Seconds label',\n placeholder: 'Seconds',\n }),\n },\n },\n )\n}\n"],"mappings":"AAAA,SAAS,aAAa;AAEtB,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;~~AAEd~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,aAAa,CAAC;AAAA,IAChC;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,MAAM,UAAU;AAAA,QACpB,MAAM,MAAM,KAAK,OAAO;AAAA,UACtB,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAO,KAAK,KAAK,KAAK,CAAC,EAAE,YAAY;AAAA,QACrE,EAAE;AAAA,QACF,SAAS,MAAM,yBAAyB;AAAA,UACtC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,mBAAmB;AAAA,YAC7D;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM;AAAA,YACR;AAAA,YACA,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,qBAAqB;AAAA,YACjE;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM;AAAA,YACR;AAAA,YACA,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,mBAAmB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,OAAO,MAAM,yBAAyB;AAAA,UACpC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAAA,YACrD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,kBAAkB;AAAA,YAC9D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,iBAAiB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,MAAM,MAAM,yBAAyB;AAAA,UACnC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,UACxD;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,KAAK,MAAM,KAAK;AAAA,UACd,QAAQ;AAAA,YACN;AAAA,cACE,UAAU,kBAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,YACjC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,UACL,KAAK;AAAA,UACL,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACvC,CAAC;AAAA,QACD,YAAY,MAAM,KAAK,EAAE,OAAO,cAAc,CAAC;AAAA,QAC/C,aAAa,~~MAAM,~~gBAAgB;AAAA,~~UACjC~~,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,YAAY,~~MAAM,~~gBAAgB;AAAA,~~UAChC~~,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,WAAW,MAAM,KAAK,EAAE,OAAO,aAAa,CAAC;AAAA,QAC7C,YAAY,~~MAAM,~~gBAAgB;AAAA,~~UAChC~~,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,OAAO,MAAM,MAAM;AAAA,UACjB,QAAQ,MAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,QACzC,CAAC;AAAA,QACD,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,WAAW,MAAM,UAAU,EAAE,OAAO,cAAc,aAAa,OAAO,CAAC;AAAA,QACvE,YAAY,MAAM,UAAU,EAAE,OAAO,eAAe,aAAa,QAAQ,CAAC;AAAA,QAC1E,cAAc,MAAM,UAAU;AAAA,UAC5B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,cAAc,MAAM,UAAU;AAAA,UAC5B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
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 { ResponsiveColor } 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: Props.ElementID(),\n date: Props.Date(() => ({\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: Props.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: Props.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: Props.Font({ label: 'Label font' }),\n labelColor: ResponsiveColor({\n label: 'Label color',\n placeholder: 'black',\n }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 560, unit: 'px' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n daysLabel: Props.TextInput({ label: 'Days label', placeholder: 'Days' }),\n hoursLabel: Props.TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n minutesLabel: Props.TextInput({\n label: 'Minutes label',\n placeholder: 'Minutes',\n }),\n secondsLabel: Props.TextInput({\n label: 'Seconds label',\n placeholder: 'Seconds',\n }),\n },\n },\n )\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/builtin/Divider/Divider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport {\n ElementIDValue~~,\n ResponsiveLengthValue,\n~~ ResponsiveSelectValue~~,\n~~} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype DividerVariant = 'solid' \| 'dashed' \| 'dotted' \| 'blended'\n\ntype Props = {\n id?: ElementIDValue\n variant?: ResponsiveSelectValue<DividerVariant>\n thickness?: ~~ResponsiveLengthValue~~\n color?: ResponsiveColor \| null\n width?: string\n margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n { id, variant, thickness, color, width, margin }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n return (\n // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n // Wrapping it in another flex container fixes it for some reason, read more here:\n // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n <div\n ref={ref}\n id={id}\n className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n >\n <div\n className={useStyle({\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n minHeight: 40,\n width: '100%',\n })}\n >\n <div\n className={useStyle(\n useResponsiveStyle(\n [variant, thickness, color] as const,\n ([\n variant = 'solid',\n thickness = { value: 1, unit: 'px' },\n color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => {\n switch (variant) {\n case 'solid':\n case 'dashed':\n case 'dotted':\n return {\n borderBottomWidth:\n thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n borderBottomStyle: variant,\n borderBottomColor: colorToString(color),\n }\n\n case 'blended':\n return {\n height: `${thickness.value}${thickness.unit}`,\n background: `linear-gradient(${[\n '90deg',\n colorToString({ swatch: color.swatch, alpha: 0 }),\n colorToString(color),\n colorToString({ swatch: color.swatch, alpha: 0 }),\n ].join(', ')})`,\n }\n\n default:\n variant as never\n throw new Error(`Invalid variant ${variant}.`)\n }\n },\n ),\n )}\n />\n </div>\n </div>\n )\n})\n\nexport default Divider\n"],"mappings":"~~AA8CQ~~;~~AA9CR~~,SAAS,kBAAuB;~~AAOhC~~,SAAS,qBAAqB;AAE9B,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,0BAA0B;~~AAanC~~,MAAM,UAAU,WAAW,SAASA,SAClC,EAAE,IAAI,SAAS,WAAW,OAAO,OAAO,OAAO,GAC/C,KACA;AACA;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,SAAS,EAAE,SAAS,QAAQ,OAAO,OAAO,CAAC,GAAG,OAAO,MAAM;AAAA,QAEzE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,SAAS;AAAA,cAClB,SAAS;AAAA,cACT,eAAe;AAAA,cACf,gBAAgB;AAAA,cAChB,WAAW;AAAA,cACX,OAAO;AAAA,YACT,CAAC;AAAA,YAED;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,oBACE,CAAC,SAAS,WAAW,KAAK;AAAA,oBAC1B,CAAC;AAAA,sBACCC,WAAU;AAAA,sBACVC,aAAY,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,sBACnCC,SAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,oBACtE,MAAM;AACJ,8BAAQF,UAAS;AAAA,wBACf,KAAK;AAAA,wBACL,KAAK;AAAA,wBACL,KAAK;AACH,iCAAO;AAAA,4BACL,mBACEC,cAAa,OAAO,IAAI,GAAGA,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC7D,mBAAmBD;AAAA,4BACnB,mBAAmB,cAAcE,MAAK;AAAA,0BACxC;AAAA,wBAEF,KAAK;AACH,iCAAO;AAAA,4BACL,QAAQ,GAAGD,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC3C,YAAY,mBAAmB;AAAA,8BAC7B;AAAA,8BACA,cAAc,EAAE,QAAQC,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,8BAChD,cAAcA,MAAK;AAAA,8BACnB,cAAc,EAAE,QAAQA,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,4BAClD,EAAE,KAAK,IAAI,CAAC;AAAA,0BACd;AAAA,wBAEF;AACE,0BAAAF;AACA,gCAAM,IAAI,MAAM,mBAAmBA,QAAO,GAAG;AAAA,sBACjD;AAAA,oBACF;AAAA,kBACF;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["Divider","variant","thickness","color"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport { ElementIDValue, ResponsiveSelectValue } from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\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 { ResponsiveLengthData } from '@makeswift/prop-controllers'\n\ntype DividerVariant = 'solid' \| 'dashed' \| 'dotted' \| 'blended'\n\ntype Props = {\n id?: ElementIDValue\n variant?: ResponsiveSelectValue<DividerVariant>\n thickness?: ResponsiveLengthData\n color?: ResponsiveColor \| null\n width?: string\n margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n { id, variant, thickness, color, width, margin }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n return (\n // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n // Wrapping it in another flex container fixes it for some reason, read more here:\n // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n <div\n ref={ref}\n id={id}\n className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n >\n <div\n className={useStyle({\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n minHeight: 40,\n width: '100%',\n })}\n >\n <div\n className={useStyle(\n useResponsiveStyle(\n [variant, thickness, color] as const,\n ([\n variant = 'solid',\n thickness = { value: 1, unit: 'px' },\n color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => {\n switch (variant) {\n case 'solid':\n case 'dashed':\n case 'dotted':\n return {\n borderBottomWidth:\n thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n borderBottomStyle: variant,\n borderBottomColor: colorToString(color),\n }\n\n case 'blended':\n return {\n height: `${thickness.value}${thickness.unit}`,\n background: `linear-gradient(${[\n '90deg',\n colorToString({ swatch: color.swatch, alpha: 0 }),\n colorToString(color),\n colorToString({ swatch: color.swatch, alpha: 0 }),\n ].join(', ')})`,\n }\n\n default:\n variant as never\n throw new Error(`Invalid variant ${variant}.`)\n }\n },\n ),\n )}\n />\n </div>\n </div>\n )\n})\n\nexport default Divider\n"],"mappings":"AA2CQ;AA3CR,SAAS,kBAAuB;AAGhC,SAAS,qBAAqB;AAE9B,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,0BAA0B;AAcnC,MAAM,UAAU,WAAW,SAASA,SAClC,EAAE,IAAI,SAAS,WAAW,OAAO,OAAO,OAAO,GAC/C,KACA;AACA;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,SAAS,EAAE,SAAS,QAAQ,OAAO,OAAO,CAAC,GAAG,OAAO,MAAM;AAAA,QAEzE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,SAAS;AAAA,cAClB,SAAS;AAAA,cACT,eAAe;AAAA,cACf,gBAAgB;AAAA,cAChB,WAAW;AAAA,cACX,OAAO;AAAA,YACT,CAAC;AAAA,YAED;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,oBACE,CAAC,SAAS,WAAW,KAAK;AAAA,oBAC1B,CAAC;AAAA,sBACCC,WAAU;AAAA,sBACVC,aAAY,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,sBACnCC,SAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,oBACtE,MAAM;AACJ,8BAAQF,UAAS;AAAA,wBACf,KAAK;AAAA,wBACL,KAAK;AAAA,wBACL,KAAK;AACH,iCAAO;AAAA,4BACL,mBACEC,cAAa,OAAO,IAAI,GAAGA,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC7D,mBAAmBD;AAAA,4BACnB,mBAAmB,cAAcE,MAAK;AAAA,0BACxC;AAAA,wBAEF,KAAK;AACH,iCAAO;AAAA,4BACL,QAAQ,GAAGD,WAAU,KAAK,GAAGA,WAAU,IAAI;AAAA,4BAC3C,YAAY,mBAAmB;AAAA,8BAC7B;AAAA,8BACA,cAAc,EAAE,QAAQC,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,8BAChD,cAAcA,MAAK;AAAA,8BACnB,cAAc,EAAE,QAAQA,OAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,4BAClD,EAAE,KAAK,IAAI,CAAC;AAAA,0BACd;AAAA,wBAEF;AACE,0BAAAF;AACA,gCAAM,IAAI,MAAM,mBAAmBA,QAAO,GAAG;AAAA,sBACjD;AAAA,oBACF;AAAA,kBACF;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["Divider","variant","thickness","color"]}

package/dist/esm/components/builtin/Divider/register.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { Props } from "../../../prop-controllers";
 import { MakeswiftComponentType } from "../constants";
 import { ComponentIcon } from "../../../state/modules/components-meta";
 import { lazy } from "react";
+import { ResponsiveColor, ResponsiveLength } from "@makeswift/prop-controllers";
 function registerComponent(runtime) {
   return runtime.registerComponent(
     lazy(() => import("./Divider")),
@@ -22,12 +23,12 @@ function registerComponent(runtime) {
           ],
           defaultValue: "solid"
         }),
-        thickness: Props.ResponsiveLength({
+        thickness: ResponsiveLength({
           label: "Height",
           defaultValue: { value: 1, unit: "px" },
           options: [{ value: "px", label: "Pixels", icon: "Px16" }]
         }),
-        color: Props.ResponsiveColor({ placeholder: "black" }),
+        color: ResponsiveColor({ placeholder: "black" }),
         width: Props.Width({
           format: Props.Width.Format.ClassName,
           defaultValue: { value: 100, unit: "%" }

package/dist/esm/components/builtin/Divider/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Divider/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Divider')),\n {\n type: MakeswiftComponentType.Divider,\n label: 'Divider',\n icon: ComponentIcon.Divider,\n props: {\n id: Props.ElementID(),\n variant: Props.ResponsiveSelect({\n label: 'Style',\n labelOrientation: 'horizontal',\n options: [\n { value: 'solid', label: 'Solid' },\n { value: 'dashed', label: 'Dashed' },\n { value: 'dotted', label: 'Dotted' },\n { value: 'blended', label: 'Blended' },\n ],\n defaultValue: 'solid',\n }),\n thickness: ~~Props.~~ResponsiveLength({\n label: 'Height',\n defaultValue: { value: 1, unit: 'px' },\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n }),\n color: ~~Props.~~ResponsiveColor({ placeholder: 'black' }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"AAAA,SAAS,aAAa;AAEtB,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;~~AAEd~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,WAAW,CAAC;AAAA,IAC9B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,MAAM,UAAU;AAAA,QACpB,SAAS,MAAM,iBAAiB;AAAA,UAC9B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACvC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAW,~~MAAM,~~iBAAiB;AAAA,~~UAChC~~,OAAO;AAAA,UACP,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,QAC1D,CAAC;AAAA,QACD,OAAO,~~MAAM,~~gBAAgB,EAAE,aAAa,QAAQ,CAAC;AAAA,~~QACrD~~,OAAO,MAAM,MAAM;AAAA,UACjB,QAAQ,MAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Divider/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport { ResponsiveColor, ResponsiveLength } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Divider')),\n {\n type: MakeswiftComponentType.Divider,\n label: 'Divider',\n icon: ComponentIcon.Divider,\n props: {\n id: Props.ElementID(),\n variant: Props.ResponsiveSelect({\n label: 'Style',\n labelOrientation: 'horizontal',\n options: [\n { value: 'solid', label: 'Solid' },\n { value: 'dashed', label: 'Dashed' },\n { value: 'dotted', label: 'Dotted' },\n { value: 'blended', label: 'Blended' },\n ],\n defaultValue: 'solid',\n }),\n thickness: ResponsiveLength({\n label: 'Height',\n defaultValue: { value: 1, unit: 'px' },\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n }),\n color: ResponsiveColor({ placeholder: 'black' }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"AAAA,SAAS,aAAa;AAEtB,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,iBAAiB,wBAAwB;AAE3C,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,WAAW,CAAC;AAAA,IAC9B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,MAAM,UAAU;AAAA,QACpB,SAAS,MAAM,iBAAiB;AAAA,UAC9B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACvC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAW,iBAAiB;AAAA,UAC1B,OAAO;AAAA,UACP,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,QAC1D,CAAC;AAAA,QACD,OAAO,gBAAgB,EAAE,aAAa,QAAQ,CAAC;AAAA,QAC/C,OAAO,MAAM,MAAM;AAAA,UACjB,QAAQ,MAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/esm/components/builtin/Form/Form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n useState,\n useEffect,\n useRef,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n Ref,\n useImperativeHandle,\n ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n Size,\n Sizes,\n Provider as FormContextProvider,\n Shape,\n Contrast,\n Alignment,\n Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport {\n ElementIDValue,\n GapYValue,\n LinkValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveLengthValue,\n ResponsiveSelectValue,\n ResponsiveValue,\n TableFormFieldsDescriptor,\n TableFormFieldsValue,\n TableValue,\n TextInputValue,\n TextStyleValue,\n} from '../../../prop-controllers/descriptors'\nimport { Link } from '../../shared/Link'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useMakeswiftHostApiClient } from '../../../next/context/makeswift-host-api-client'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 12\n\n case Sizes.MEDIUM:\n return 14\n\n case Sizes.LARGE:\n return 18\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\ntype Props = {\n id?: ElementIDValue\n tableId?: TableValue\n fields?: TableFormFieldsValue\n submitLink?: LinkValue\n gap?: GapYValue\n shape?: ResponsiveIconRadioGroupValue<Shape>\n size?: ResponsiveIconRadioGroupValue<Size>\n contrast?: ResponsiveIconRadioGroupValue<Contrast>\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n submitTextStyle?: TextStyleValue\n brandColor?: ResponsiveColor \| null\n submitTextColor?: ResponsiveColor \| null\n submitLabel?: TextInputValue\n submitVariant?: ResponsiveSelectValue<\n 'flat' \| 'outline' \| 'shadow' \| 'clear' \| 'blocky' \| 'bubbly' \| 'skewed'\n >\n submitWidth?: ResponsiveLengthValue\n submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n width?: string\n margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n { className, size, ...restOfProps }: GridFormProps,\n ref: ForwardedRef<HTMLFormElement>,\n) {\n return (\n <form\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n useStyle(\n useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n fontSize: getSizeFontSize(size),\n })),\n ),\n className,\n )}\n />\n )\n})\n\ntype GridItemBaseProps = {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n rowGap: Props['gap']\n columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n className,\n )}\n />\n )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n switch (alignment) {\n case Alignments.LEFT:\n return '0 auto 0 0'\n case Alignments.RIGHT:\n return '0 0 0 auto'\n default:\n return '0 auto'\n }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n return (\n <Button\n {...restOfProps}\n as=\"button\"\n className={cx(\n useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n useStyle(\n useResponsiveStyle(\n [size, alignment] as const,\n ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n minHeight: getInputSizeHeight(size),\n maxHeight: getInputSizeHeight(size),\n margin: getAlignmentMargin(alignment),\n paddingTop: 0,\n paddingBottom: 0,\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n padding: '8px 16px',\n backgroundColor: '#f19eb9',\n borderRadius: 4,\n marginTop: 16,\n }),\n className,\n )}\n />\n )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n return (\n <p\n {...restOfProps}\n className={cx(\n useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n className,\n )}\n />\n )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n switch (tableColumn.__typename) {\n case 'CheckboxTableColumn':\n return false\n\n case 'MultipleSelectTableColumn':\n return []\n\n case 'SingleLineTextTableColumn':\n case 'LongTextTableColumn':\n case 'SingleSelectTableColumn':\n case 'PhoneNumberTableColumn':\n case 'EmailTableColumn':\n case 'URLTableColumn':\n case 'NumberTableColumn':\n default:\n return ''\n }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string \| string[] \| boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n {\n id,\n tableId,\n fields: fieldsProp,\n submitLabel = 'Submit',\n submitLink,\n shape,\n size,\n contrast,\n brandColor,\n gap,\n width,\n margin,\n submitTextStyle,\n submitVariant,\n submitTextColor,\n submitWidth,\n submitAlignment,\n labelTextStyle,\n labelTextColor,\n }: Props,\n ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n const table = useTable(tableId ?? null)\n const client = useMakeswiftHostApiClient()\n const [refEl, setRefEl] = useState<HTMLElement \| null>(null)\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> \| null>(null)\n const [initialValues, setInitialValues] = useState<Fields>(() =>\n fields.reduce((acc, formField) => {\n const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n const defaultValue = formField ? formField.defaultValue : null\n\n if (tableColumn) {\n acc[tableColumn.name] =\n defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n }\n\n return acc\n }, {} as Fields),\n )\n const controller = propControllers?.fields\n const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n const [isDone, setIsDone] = useState(false)\n const linkRef = useRef<HTMLAnchorElement>(null)\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return refEl instanceof Element ? refEl : null\n },\n getBoxModel() {\n return refEl instanceof Element ? getBox(refEl) : null\n },\n setPropControllers,\n }),\n [refEl, setPropControllers],\n )\n\n useEffect(() => {\n container(refEl)\n }, [container, refEl])\n\n useEffect(() => {\n if (!isDone) return\n\n let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n return () => clearTimeout(timeoutId)\n }, [isDone])\n\n function getTableColumn({ tableColumnId }: any) {\n return table && table.columns.find(field => tableColumnId === field.id)\n }\n\n async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n if (table) {\n const columns: Column[] = []\n\n fields.forEach(field => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data) {\n columns.push({ columnId: field.tableColumnId, data })\n\n if (field.autofill) {\n localStorage.setItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n JSON.stringify(data),\n )\n }\n }\n }\n })\n\n try {\n await client.createTableRecord(table.id, columns)\n setIsDone(true)\n setInitialValues(prev =>\n fields.reduce(\n (acc, field) => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n resetForm()\n\n if (linkRef.current != null) linkRef.current.click()\n } catch (error) {\n setStatus({ error: 'An unexpected error has occurred, please try again later' })\n } finally {\n setSubmitting(false)\n }\n }\n }\n\n useEffect(() => {\n setInitialValues(prev =>\n fields.reduce(\n (acc, formField) => {\n const tableColumn =\n table && table.columns.find(field => field.id === formField.tableColumnId)\n\n if (tableColumn && formField.autofill) {\n const storedValue = localStorage.getItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n )\n\n if (storedValue) {\n try {\n acc[tableColumn.name] = JSON.parse(storedValue)\n } catch (e) {\n // Ignore\n }\n }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n }, [fields, table])\n\n return (\n <FormContextProvider\n value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n >\n {tableId == null ? (\n <Placeholder ref={setRefEl} width={width} margin={margin} />\n ) : (\n <>\n <Formik\n onSubmit={handleSubmit}\n initialValues={initialValues}\n initialStatus={{ error: null }}\n enableReinitialize\n >\n {formik => {\n const error = formik.status && formik.status.error\n const errors = fields\n .map(field => {\n const tableColumn = getTableColumn(field)\n\n return (\n tableColumn &&\n getIn(formik.touched, tableColumn.name) &&\n getIn(formik.errors, tableColumn.name)\n )\n })\n .filter(message => typeof message === 'string')\n\n return (\n <>\n <GridForm\n ref={setRefEl}\n id={id}\n className={cx(width, margin)}\n size={size}\n onSubmit={formik.handleSubmit}\n onReset={formik.handleReset}\n noValidate\n >\n {fields.map((field, index) => {\n const tableColumn = getTableColumn(field)\n\n return (\n <GridItem\n key={field.id}\n ref={items[index]}\n grid={grid}\n index={index}\n rowGap={gap}\n columnGap={gap}\n >\n <Field tableColumn={tableColumn} tableFormField={field} />\n </GridItem>\n )\n })}\n <GridItem\n ref={items[fields.length]}\n grid={grid}\n index={fields.length}\n rowGap={gap}\n columnGap={gap}\n >\n <StyledButton\n type=\"submit\"\n // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n disabled={formik.isSubmitting \|\| isDone}\n shape={shape}\n size={size}\n color={brandColor}\n variant={submitVariant}\n textColor={submitTextColor}\n width={submitWidth}\n alignment={submitAlignment}\n textStyle={submitTextStyle}\n >\n {formik.isSubmitting ? (\n <Spinner />\n ) : isDone ? (\n <IconContainer>\n <Check12 />\n </IconContainer>\n ) : (\n submitLabel\n )}\n </StyledButton>\n {(errors.length > 0 \|\| error) && (\n <ErrorContainer>\n {errors.map(message => (\n <ErrorMessage key={message}>{message}</ErrorMessage>\n ))}\n {error != null && <ErrorMessage>{error}</ErrorMessage>}\n </ErrorContainer>\n )}\n </GridItem>\n </GridForm>\n {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n </>\n )\n }}\n </Formik>\n </>\n )}\n </FormContextProvider>\n )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","alignment","Form"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n useState,\n useEffect,\n useRef,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n Ref,\n useImperativeHandle,\n ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n Size,\n Sizes,\n Provider as FormContextProvider,\n Shape,\n Contrast,\n Alignment,\n Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport {\n ElementIDValue,\n GapYValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveSelectValue,\n TableFormFieldsDescriptor,\n TableFormFieldsValue,\n TableValue,\n TextInputValue,\n TextStyleValue,\n} from '../../../prop-controllers/descriptors'\nimport { Link } from '../../shared/Link'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useMakeswiftHostApiClient } from '../../../next/context/makeswift-host-api-client'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\nimport {\n LinkPropControllerValue,\n ResponsiveLengthData,\n ResponsiveValue,\n} from '@makeswift/prop-controllers'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 12\n\n case Sizes.MEDIUM:\n return 14\n\n case Sizes.LARGE:\n return 18\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\ntype Props = {\n id?: ElementIDValue\n tableId?: TableValue\n fields?: TableFormFieldsValue\n submitLink?: LinkPropControllerValue\n gap?: GapYValue\n shape?: ResponsiveIconRadioGroupValue<Shape>\n size?: ResponsiveIconRadioGroupValue<Size>\n contrast?: ResponsiveIconRadioGroupValue<Contrast>\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n submitTextStyle?: TextStyleValue\n brandColor?: ResponsiveColor \| null\n submitTextColor?: ResponsiveColor \| null\n submitLabel?: TextInputValue\n submitVariant?: ResponsiveSelectValue<\n 'flat' \| 'outline' \| 'shadow' \| 'clear' \| 'blocky' \| 'bubbly' \| 'skewed'\n >\n submitWidth?: ResponsiveLengthData\n submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n width?: string\n margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n { className, size, ...restOfProps }: GridFormProps,\n ref: ForwardedRef<HTMLFormElement>,\n) {\n return (\n <form\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n useStyle(\n useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n fontSize: getSizeFontSize(size),\n })),\n ),\n className,\n )}\n />\n )\n})\n\ntype GridItemBaseProps = {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n rowGap: Props['gap']\n columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n className,\n )}\n />\n )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n switch (alignment) {\n case Alignments.LEFT:\n return '0 auto 0 0'\n case Alignments.RIGHT:\n return '0 0 0 auto'\n default:\n return '0 auto'\n }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n return (\n <Button\n {...restOfProps}\n as=\"button\"\n className={cx(\n useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n useStyle(\n useResponsiveStyle(\n [size, alignment] as const,\n ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n minHeight: getInputSizeHeight(size),\n maxHeight: getInputSizeHeight(size),\n margin: getAlignmentMargin(alignment),\n paddingTop: 0,\n paddingBottom: 0,\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n padding: '8px 16px',\n backgroundColor: '#f19eb9',\n borderRadius: 4,\n marginTop: 16,\n }),\n className,\n )}\n />\n )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n return (\n <p\n {...restOfProps}\n className={cx(\n useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n className,\n )}\n />\n )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n switch (tableColumn.__typename) {\n case 'CheckboxTableColumn':\n return false\n\n case 'MultipleSelectTableColumn':\n return []\n\n case 'SingleLineTextTableColumn':\n case 'LongTextTableColumn':\n case 'SingleSelectTableColumn':\n case 'PhoneNumberTableColumn':\n case 'EmailTableColumn':\n case 'URLTableColumn':\n case 'NumberTableColumn':\n default:\n return ''\n }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string \| string[] \| boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n {\n id,\n tableId,\n fields: fieldsProp,\n submitLabel = 'Submit',\n submitLink,\n shape,\n size,\n contrast,\n brandColor,\n gap,\n width,\n margin,\n submitTextStyle,\n submitVariant,\n submitTextColor,\n submitWidth,\n submitAlignment,\n labelTextStyle,\n labelTextColor,\n }: Props,\n ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n const table = useTable(tableId ?? null)\n const client = useMakeswiftHostApiClient()\n const [refEl, setRefEl] = useState<HTMLElement \| null>(null)\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> \| null>(null)\n const [initialValues, setInitialValues] = useState<Fields>(() =>\n fields.reduce((acc, formField) => {\n const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n const defaultValue = formField ? formField.defaultValue : null\n\n if (tableColumn) {\n acc[tableColumn.name] =\n defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n }\n\n return acc\n }, {} as Fields),\n )\n const controller = propControllers?.fields\n const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n const [isDone, setIsDone] = useState(false)\n const linkRef = useRef<HTMLAnchorElement>(null)\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return refEl instanceof Element ? refEl : null\n },\n getBoxModel() {\n return refEl instanceof Element ? getBox(refEl) : null\n },\n setPropControllers,\n }),\n [refEl, setPropControllers],\n )\n\n useEffect(() => {\n container(refEl)\n }, [container, refEl])\n\n useEffect(() => {\n if (!isDone) return\n\n let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n return () => clearTimeout(timeoutId)\n }, [isDone])\n\n function getTableColumn({ tableColumnId }: any) {\n return table && table.columns.find(field => tableColumnId === field.id)\n }\n\n async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n if (table) {\n const columns: Column[] = []\n\n fields.forEach(field => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data) {\n columns.push({ columnId: field.tableColumnId, data })\n\n if (field.autofill) {\n localStorage.setItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n JSON.stringify(data),\n )\n }\n }\n }\n })\n\n try {\n await client.createTableRecord(table.id, columns)\n setIsDone(true)\n setInitialValues(prev =>\n fields.reduce(\n (acc, field) => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n resetForm()\n\n if (linkRef.current != null) linkRef.current.click()\n } catch (error) {\n setStatus({ error: 'An unexpected error has occurred, please try again later' })\n } finally {\n setSubmitting(false)\n }\n }\n }\n\n useEffect(() => {\n setInitialValues(prev =>\n fields.reduce(\n (acc, formField) => {\n const tableColumn =\n table && table.columns.find(field => field.id === formField.tableColumnId)\n\n if (tableColumn && formField.autofill) {\n const storedValue = localStorage.getItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n )\n\n if (storedValue) {\n try {\n acc[tableColumn.name] = JSON.parse(storedValue)\n } catch (e) {\n // Ignore\n }\n }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n }, [fields, table])\n\n return (\n <FormContextProvider\n value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n >\n {tableId == null ? (\n <Placeholder ref={setRefEl} width={width} margin={margin} />\n ) : (\n <>\n <Formik\n onSubmit={handleSubmit}\n initialValues={initialValues}\n initialStatus={{ error: null }}\n enableReinitialize\n >\n {formik => {\n const error = formik.status && formik.status.error\n const errors = fields\n .map(field => {\n const tableColumn = getTableColumn(field)\n\n return (\n tableColumn &&\n getIn(formik.touched, tableColumn.name) &&\n getIn(formik.errors, tableColumn.name)\n )\n })\n .filter(message => typeof message === 'string')\n\n return (\n <>\n <GridForm\n ref={setRefEl}\n id={id}\n className={cx(width, margin)}\n size={size}\n onSubmit={formik.handleSubmit}\n onReset={formik.handleReset}\n noValidate\n >\n {fields.map((field, index) => {\n const tableColumn = getTableColumn(field)\n\n return (\n <GridItem\n key={field.id}\n ref={items[index]}\n grid={grid}\n index={index}\n rowGap={gap}\n columnGap={gap}\n >\n <Field tableColumn={tableColumn} tableFormField={field} />\n </GridItem>\n )\n })}\n <GridItem\n ref={items[fields.length]}\n grid={grid}\n index={fields.length}\n rowGap={gap}\n columnGap={gap}\n >\n <StyledButton\n type=\"submit\"\n // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n disabled={formik.isSubmitting \|\| isDone}\n shape={shape}\n size={size}\n color={brandColor}\n variant={submitVariant}\n textColor={submitTextColor}\n width={submitWidth}\n alignment={submitAlignment}\n textStyle={submitTextStyle}\n >\n {formik.isSubmitting ? (\n <Spinner />\n ) : isDone ? (\n <IconContainer>\n <Check12 />\n </IconContainer>\n ) : (\n submitLabel\n )}\n </StyledButton>\n {(errors.length > 0 \|\| error) && (\n <ErrorContainer>\n {errors.map(message => (\n <ErrorMessage key={message}>{message}</ErrorMessage>\n ))}\n {error != null && <ErrorMessage>{error}</ErrorMessage>}\n </ErrorContainer>\n )}\n </GridItem>\n </GridForm>\n {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n </>\n )\n }}\n </Formik>\n </>\n )}\n </FormContextProvider>\n )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","alignment","Form"]}

package/dist/esm/components/builtin/Form/context/FormContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/components/builtin/Form/context/FormContext.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\nimport { ~~ResponsiveValue,~~ TextStyleValue } from '../../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../../runtimes/react/controls'\nimport { ColorValue } from '../../../utils/types'\n\nexport const Alignments = {\n LEFT: 'left',\n CENTER: 'center',\n RIGHT: 'right',\n} as const\n\nexport type Alignment = typeof Alignments[keyof typeof Alignments]\n\nexport const Shapes = Object.freeze({\n SQUARE: 'square',\n ROUNDED: 'rounded',\n PILL: 'pill',\n} as const)\n\nexport type Shape = typeof Shapes[keyof typeof Shapes]\n\nexport const Sizes = Object.freeze({\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large',\n} as const)\n\nexport type Size = typeof Sizes[keyof typeof Sizes]\n\nexport const Contrasts = Object.freeze({\n LIGHT: 'light',\n DARK: 'dark',\n} as const)\n\nexport type Contrast = typeof Contrasts[keyof typeof Contrasts]\n\nexport type Value = {\n shape: ResponsiveValue<Shape> \| null \| undefined\n size: ResponsiveValue<Size> \| null \| undefined\n contrast: ResponsiveValue<Contrast> \| null \| undefined\n brandColor: ResponsiveValue<ColorValue> \| null \| undefined\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n}\n\nconst Context = createContext<Value>({} as Value)\n\nexport function useFormContext(): Value {\n return useContext(Context)\n}\n\nconst { Provider } = Context\n\nexport { Provider }\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;~~AAMnC~~,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAIO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR,CAAU;AAIH,MAAM,QAAQ,OAAO,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,CAAU;AAIH,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,OAAO;AAAA,EACP,MAAM;AACR,CAAU;AAaV,MAAM,UAAU,cAAqB,CAAC,CAAU;AAEzC,SAAS,iBAAwB;AACtC,SAAO,WAAW,OAAO;AAC3B;AAEA,MAAM,EAAE,SAAS,IAAI;","names":[]}
1	+ {"version":3,"sources":["../../../../../../src/components/builtin/Form/context/FormContext.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\nimport { TextStyleValue } from '../../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../../runtimes/react/controls'\nimport { ColorValue } from '../../../utils/types'\nimport { ResponsiveValue } from '@makeswift/prop-controllers'\n\nexport const Alignments = {\n LEFT: 'left',\n CENTER: 'center',\n RIGHT: 'right',\n} as const\n\nexport type Alignment = typeof Alignments[keyof typeof Alignments]\n\nexport const Shapes = Object.freeze({\n SQUARE: 'square',\n ROUNDED: 'rounded',\n PILL: 'pill',\n} as const)\n\nexport type Shape = typeof Shapes[keyof typeof Shapes]\n\nexport const Sizes = Object.freeze({\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large',\n} as const)\n\nexport type Size = typeof Sizes[keyof typeof Sizes]\n\nexport const Contrasts = Object.freeze({\n LIGHT: 'light',\n DARK: 'dark',\n} as const)\n\nexport type Contrast = typeof Contrasts[keyof typeof Contrasts]\n\nexport type Value = {\n shape: ResponsiveValue<Shape> \| null \| undefined\n size: ResponsiveValue<Size> \| null \| undefined\n contrast: ResponsiveValue<Contrast> \| null \| undefined\n brandColor: ResponsiveValue<ColorValue> \| null \| undefined\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n}\n\nconst Context = createContext<Value>({} as Value)\n\nexport function useFormContext(): Value {\n return useContext(Context)\n}\n\nconst { Provider } = Context\n\nexport { Provider }\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AAOnC,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAIO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR,CAAU;AAIH,MAAM,QAAQ,OAAO,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,CAAU;AAIH,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,OAAO;AAAA,EACP,MAAM;AACR,CAAU;AAaV,MAAM,UAAU,cAAqB,CAAC,CAAU;AAEzC,SAAS,iBAAwB;AACtC,SAAO,WAAW,OAAO;AAC3B;AAEA,MAAM,EAAE,SAAS,IAAI;","names":[]}