@makeswift/runtime 0.2.16 → 0.2.18

package/dist/Carousel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  ImagesValue,\n  MarginValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n  BorderValue,\n  BorderRadiusValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\n// NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far\nconst Container = styled.div`\n  position: relative;\n  height: 100%;\n`\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: WidthValue\n  margin?: MarginValue\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: BorderValue\n  slideBorderRadius?: BorderRadiusValue\n}\n\nconst Wrapper = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'width'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ${cssWidth('400px')}\n  ${cssMargin()}\n\n  &:focus {\n    outline: 0;\n  }\n`\n\nconst Arrow = styled.div.withConfig({\n  shouldForwardProp: prop => !['background'].includes(prop),\n})<{ background?: ResponsiveValue<Color> | null }>`\n  padding: 10px;\n  border-radius: 50%;\n  outline: 0;\n  border: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  ${p =>\n    cssMediaRules(\n      [p.background] as const,\n      ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => css`\n        background: ${colorToString(background)};\n      `,\n    )}\n\n  svg {\n    transition: transform 0.15s;\n    stroke: currentColor;\n  }\n`\n\nconst Slop = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{\n  color?: ResponsiveValue<Color> | null\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  align-items: center;\n  cursor: pointer;\n  z-index: 2;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Slide = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['pageSize', 'alignItems'].includes(prop),\n})<{\n  pageSize: Props['pageSize']\n  alignItems: Props['slideAlignment']\n}>`\n  display: flex;\n  ${p =>\n    cssMediaRules(\n      [p.pageSize],\n      ([pageSize = 1]) => css`\n        flex-basis: ${100 / pageSize}%;\n        max-width: ${100 / pageSize}%;\n        min-width: ${100 / pageSize}%;\n      `,\n    )}\n\n  ${p => cssMediaRules([p.alignItems], ([alignItems = 'center']) => ({ alignItems }))}\n`\n\nconst Reel = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['gap'].includes(prop),\n})<{ gap: Props['gap'] }>`\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  ${p =>\n    cssMediaRules(\n      [p.gap] as const,\n      ([gap = { value: 0, unit: 'px' }]) => css`\n        margin: 0 ${`${-gap.value / 2}${gap.unit}`};\n\n        & > ${Slide} {\n          padding: 0 ${`${gap.value / 2}${gap.unit}`};\n        }\n      `,\n    )}\n`\n\nconst Page = styled(motion.div)`\n  position: relative;\n  width: 100%;\n`\n\nconst LeftSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(-100% - 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(-50%));\n          `\n      }\n    })}\n  left: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(-2px);\n    }\n  }\n`\n\nconst RightSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(-8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(100% + 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(50%));\n          `\n      }\n    })}\n  right: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(2px);\n    }\n  }\n`\n\nconst ClipMask = styled.div`\n  overflow: hidden;\n`\n\nconst Dots = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{ color?: ResponsiveValue<Color> | null }>`\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  justify-content: center;\n  margin-top: 20px;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Dot = styled.div.withConfig({\n  shouldForwardProp: prop => !['active'].includes(prop),\n})<{ active: boolean }>`\n  position: relative;\n  margin: 0 6px;\n  border-radius: 50%;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: block;\n    border-radius: 50%;\n    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  &::before {\n    box-shadow: 0 0 0 2px currentColor;\n    transform: translate3d(-50%, -50%, 0);\n    width: ${props => (props.active ? 16 : 10)}px;\n    height: ${props => (props.active ? 16 : 10)}px;\n  }\n\n  &::after {\n    background: currentColor;\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0)});\n    width: 10px;\n    height: 10px;\n  }\n\n  &:hover::after {\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0.5)});\n  }\n`\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, velocity)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  return (\n    <Wrapper\n      ref={ref}\n      width={width}\n      margin={margin}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      <Container>\n        <ClipMask>\n          <Page {...bindPage()} animate={animation}>\n            <Reel\n              gap={gap}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <Slide\n                  id={key}\n                  key={key}\n                  pageSize={responsivePageSize}\n                  alignItems={slideAlignment}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </Slide>\n              ))}\n            </Reel>\n          </Page>\n        </ClipMask>\n        <LeftSlop\n          onClick={() => paginate(-1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isFirstPage}\n        >\n          <Arrow background={arrowBackground}>\n            <LeftChevron />\n          </Arrow>\n        </LeftSlop>\n        <RightSlop\n          onClick={() => paginate(1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isLastPage}\n        >\n          <Arrow background={arrowBackground}>\n            <RightChevron />\n          </Arrow>\n        </RightSlop>\n      </Container>\n      {/* @ts-expect-error: HTMLDivElement attributes conflicts with `color` prop */}\n      <Dots color={dotColor} hidden={!showDots}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </Dots>\n    </Wrapper>\n  )\n})\n\nexport default Carousel\n"],"names":["LeftChevron","_jsx","RightChevron","Container","styled","div","Wrapper","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Arrow","p","cssMediaRules","background","swatch","hue","saturation","lightness","alpha","css","colorToString","Slop","props","hidden","color","Slide","motion","pageSize","alignItems","Reel","gap","value","unit","Page","LeftSlop","position","RightSlop","ClipMask","Dots","Dot","active","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","responsivePageSize","step","responsiveStep","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","e","key","_jsxs","ease","duration","map","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i"],"mappings":"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"}
+{"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  ImagesValue,\n  MarginValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n  BorderValue,\n  BorderRadiusValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\n// NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far\nconst Container = styled.div`\n  position: relative;\n  height: 100%;\n`\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: WidthValue\n  margin?: MarginValue\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: BorderValue\n  slideBorderRadius?: BorderRadiusValue\n}\n\nconst Wrapper = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'width'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ${cssWidth('400px')}\n  ${cssMargin()}\n\n  &:focus {\n    outline: 0;\n  }\n`\n\nconst Arrow = styled.div.withConfig({\n  shouldForwardProp: prop => !['background'].includes(prop),\n})<{ background?: ResponsiveValue<Color> | null }>`\n  padding: 10px;\n  border-radius: 50%;\n  outline: 0;\n  border: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  ${p =>\n    cssMediaRules(\n      [p.background] as const,\n      ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => css`\n        background: ${colorToString(background)};\n      `,\n    )}\n\n  svg {\n    transition: transform 0.15s;\n    stroke: currentColor;\n  }\n`\n\nconst Slop = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{\n  color?: ResponsiveValue<Color> | null\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  align-items: center;\n  cursor: pointer;\n  z-index: 2;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Slide = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['pageSize', 'alignItems'].includes(prop),\n})<{\n  pageSize: Props['pageSize']\n  alignItems: Props['slideAlignment']\n}>`\n  display: flex;\n  ${p =>\n    cssMediaRules(\n      [p.pageSize],\n      ([pageSize = 1]) => css`\n        flex-basis: ${100 / pageSize}%;\n        max-width: ${100 / pageSize}%;\n        min-width: ${100 / pageSize}%;\n      `,\n    )}\n\n  ${p => cssMediaRules([p.alignItems], ([alignItems = 'center']) => ({ alignItems }))}\n`\n\nconst Reel = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['gap'].includes(prop),\n})<{ gap: Props['gap'] }>`\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  ${p =>\n    cssMediaRules(\n      [p.gap] as const,\n      ([gap = { value: 0, unit: 'px' }]) => css`\n        margin: 0 ${`${-gap.value / 2}${gap.unit}`};\n\n        & > ${Slide} {\n          padding: 0 ${`${gap.value / 2}${gap.unit}`};\n        }\n      `,\n    )}\n`\n\nconst Page = styled(motion.div)`\n  position: relative;\n  width: 100%;\n`\n\nconst LeftSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(-100% - 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(-50%));\n          `\n      }\n    })}\n  left: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(-2px);\n    }\n  }\n`\n\nconst RightSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(-8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(100% + 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(50%));\n          `\n      }\n    })}\n  right: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(2px);\n    }\n  }\n`\n\nconst ClipMask = styled.div`\n  overflow: hidden;\n`\n\nconst Dots = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{ color?: ResponsiveValue<Color> | null }>`\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  justify-content: center;\n  margin-top: 20px;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Dot = styled.div.withConfig({\n  shouldForwardProp: prop => !['active'].includes(prop),\n})<{ active: boolean }>`\n  position: relative;\n  margin: 0 6px;\n  border-radius: 50%;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: block;\n    border-radius: 50%;\n    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  &::before {\n    box-shadow: 0 0 0 2px currentColor;\n    transform: translate3d(-50%, -50%, 0);\n    width: ${props => (props.active ? 16 : 10)}px;\n    height: ${props => (props.active ? 16 : 10)}px;\n  }\n\n  &::after {\n    background: currentColor;\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0)});\n    width: 10px;\n    height: 10px;\n  }\n\n  &:hover::after {\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0.5)});\n  }\n`\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, velocity)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  return (\n    <Wrapper\n      ref={ref}\n      width={width}\n      margin={margin}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      <Container>\n        <ClipMask>\n          <Page {...bindPage()} animate={animation}>\n            <Reel\n              gap={gap}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <Slide\n                  id={key}\n                  key={key}\n                  pageSize={responsivePageSize}\n                  alignItems={slideAlignment}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </Slide>\n              ))}\n            </Reel>\n          </Page>\n        </ClipMask>\n        <LeftSlop\n          onClick={() => paginate(-1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isFirstPage}\n        >\n          <Arrow background={arrowBackground}>\n            <LeftChevron />\n          </Arrow>\n        </LeftSlop>\n        <RightSlop\n          onClick={() => paginate(1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isLastPage}\n        >\n          <Arrow background={arrowBackground}>\n            <RightChevron />\n          </Arrow>\n        </RightSlop>\n      </Container>\n      {/* @ts-expect-error: HTMLDivElement attributes conflicts with `color` prop */}\n      <Dots color={dotColor} hidden={!showDots}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </Dots>\n    </Wrapper>\n  )\n})\n\nexport default Carousel\n"],"names":["LeftChevron","_jsx","RightChevron","Container","styled","div","Wrapper","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Arrow","p","cssMediaRules","background","swatch","hue","saturation","lightness","alpha","css","colorToString","Slop","props","hidden","color","Slide","motion","pageSize","alignItems","Reel","gap","value","unit","Page","LeftSlop","position","RightSlop","ClipMask","Dots","Dot","active","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","responsivePageSize","step","responsiveStep","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","e","key","_jsxs","ease","duration","map","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i"],"mappings":"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"}

package/dist/Carousel.es.js

@@ -25,23 +25,22 @@ import { wrap } from "@popmotion/popcorn";
 import { a as cssWidth, b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
 import { p as colorToString } from "./index.es.js";
 import { u as useMediaQuery } from "./useMediaQuery.es.js";
-import ImageComponent from "./Image.es2.js";
+import ImageComponent from "./Image.es.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
-import "./image.es.js";
-import "./color.es.js";
 import "./slot.es.js";
+import "./control.es.js";
 import "next/dynamic";
 import "@apollo/client";
 import "@apollo/client/link/batch-http";
 import "slate";
 import "./graphql.es.js";
-import "./shape.es.js";
 import "./text-input.es.js";
+import "./combobox.es.js";
 import "@emotion/css";
 import "color";
 import "scroll-into-view-if-needed";

package/dist/Carousel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.es.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  ImagesValue,\n  MarginValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n  BorderValue,\n  BorderRadiusValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\n// NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far\nconst Container = styled.div`\n  position: relative;\n  height: 100%;\n`\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: WidthValue\n  margin?: MarginValue\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: BorderValue\n  slideBorderRadius?: BorderRadiusValue\n}\n\nconst Wrapper = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'width'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ${cssWidth('400px')}\n  ${cssMargin()}\n\n  &:focus {\n    outline: 0;\n  }\n`\n\nconst Arrow = styled.div.withConfig({\n  shouldForwardProp: prop => !['background'].includes(prop),\n})<{ background?: ResponsiveValue<Color> | null }>`\n  padding: 10px;\n  border-radius: 50%;\n  outline: 0;\n  border: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  ${p =>\n    cssMediaRules(\n      [p.background] as const,\n      ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => css`\n        background: ${colorToString(background)};\n      `,\n    )}\n\n  svg {\n    transition: transform 0.15s;\n    stroke: currentColor;\n  }\n`\n\nconst Slop = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{\n  color?: ResponsiveValue<Color> | null\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  align-items: center;\n  cursor: pointer;\n  z-index: 2;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Slide = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['pageSize', 'alignItems'].includes(prop),\n})<{\n  pageSize: Props['pageSize']\n  alignItems: Props['slideAlignment']\n}>`\n  display: flex;\n  ${p =>\n    cssMediaRules(\n      [p.pageSize],\n      ([pageSize = 1]) => css`\n        flex-basis: ${100 / pageSize}%;\n        max-width: ${100 / pageSize}%;\n        min-width: ${100 / pageSize}%;\n      `,\n    )}\n\n  ${p => cssMediaRules([p.alignItems], ([alignItems = 'center']) => ({ alignItems }))}\n`\n\nconst Reel = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['gap'].includes(prop),\n})<{ gap: Props['gap'] }>`\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  ${p =>\n    cssMediaRules(\n      [p.gap] as const,\n      ([gap = { value: 0, unit: 'px' }]) => css`\n        margin: 0 ${`${-gap.value / 2}${gap.unit}`};\n\n        & > ${Slide} {\n          padding: 0 ${`${gap.value / 2}${gap.unit}`};\n        }\n      `,\n    )}\n`\n\nconst Page = styled(motion.div)`\n  position: relative;\n  width: 100%;\n`\n\nconst LeftSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(-100% - 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(-50%));\n          `\n      }\n    })}\n  left: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(-2px);\n    }\n  }\n`\n\nconst RightSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(-8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(100% + 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(50%));\n          `\n      }\n    })}\n  right: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(2px);\n    }\n  }\n`\n\nconst ClipMask = styled.div`\n  overflow: hidden;\n`\n\nconst Dots = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{ color?: ResponsiveValue<Color> | null }>`\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  justify-content: center;\n  margin-top: 20px;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Dot = styled.div.withConfig({\n  shouldForwardProp: prop => !['active'].includes(prop),\n})<{ active: boolean }>`\n  position: relative;\n  margin: 0 6px;\n  border-radius: 50%;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: block;\n    border-radius: 50%;\n    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  &::before {\n    box-shadow: 0 0 0 2px currentColor;\n    transform: translate3d(-50%, -50%, 0);\n    width: ${props => (props.active ? 16 : 10)}px;\n    height: ${props => (props.active ? 16 : 10)}px;\n  }\n\n  &::after {\n    background: currentColor;\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0)});\n    width: 10px;\n    height: 10px;\n  }\n\n  &:hover::after {\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0.5)});\n  }\n`\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, velocity)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  return (\n    <Wrapper\n      ref={ref}\n      width={width}\n      margin={margin}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      <Container>\n        <ClipMask>\n          <Page {...bindPage()} animate={animation}>\n            <Reel\n              gap={gap}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <Slide\n                  id={key}\n                  key={key}\n                  pageSize={responsivePageSize}\n                  alignItems={slideAlignment}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </Slide>\n              ))}\n            </Reel>\n          </Page>\n        </ClipMask>\n        <LeftSlop\n          onClick={() => paginate(-1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isFirstPage}\n        >\n          <Arrow background={arrowBackground}>\n            <LeftChevron />\n          </Arrow>\n        </LeftSlop>\n        <RightSlop\n          onClick={() => paginate(1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isLastPage}\n        >\n          <Arrow background={arrowBackground}>\n            <RightChevron />\n          </Arrow>\n        </RightSlop>\n      </Container>\n      {/* @ts-expect-error: HTMLDivElement attributes conflicts with `color` prop */}\n      <Dots color={dotColor} hidden={!showDots}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </Dots>\n    </Wrapper>\n  )\n})\n\nexport default Carousel\n"],"names":["LeftChevron","_jsx","RightChevron","Container","styled","div","Wrapper","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Arrow","p","cssMediaRules","background","swatch","hue","saturation","lightness","alpha","css","colorToString","Slop","props","hidden","color","Slide","motion","pageSize","alignItems","Reel","gap","value","unit","Page","LeftSlop","position","RightSlop","ClipMask","Dots","Dot","active","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","responsivePageSize","step","responsiveStep","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","e","key","_jsxs","ease","duration","map","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAMA,cAAc,MAClBC,oBAAA,OAAA;AAAA,EAAK,OAAM;AAAA,EAA6B,OAAM;AAAA,EAAK,QAAO;AAAA,EAAK,SAAQ;AAAA,EACrE,8BAAA,QAAA;AAAA,IACE,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA,EAAA,CALd;AADF,CADF;AAYA,MAAMC,eAAe,MACnBD,oBAAA,OAAA;AAAA,EAAK,OAAM;AAAA,EAA6B,OAAM;AAAA,EAAK,QAAO;AAAA,EAAK,SAAQ;AAAA,EACrE,8BAAA,QAAA;AAAA,IACE,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA,EAAA,CALd;AADF,CAAA;AAYF,MAAME,YAAYC,OAAOC;AAAAA;AAAAA;AAAAA;AA0BzB,MAAMC,UAAUF,OAAOC,IAAIE,WAAW;AAAA,EACpCC,mBAAmBC,UAAQ,CAAC,CAAC,UAAU,OAAX,EAAoBC,SAASD,IAA7B;AADQ,CAAtB;AAAA;AAAA;AAAA;AAAA,IAMZE,SAAS,OAAD;AAAA,IACRC,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhB,MAAMC,QAAQT,OAAOC,IAAIE,WAAW;AAAA,EAClCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,YAAD,EAAeC,SAASD,IAAxB;AADM,CAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcVK,CAAAA,MACAC,cACE,CAACD,EAAEE,UAAH,GACA,CAAC,CAACA,aAAa;AAAA,EAAEC,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAqDC,OAAO;AAA5D,OAAqEC;AAAAA,sBACpEC,cAAcP,UAAD;AAAA,OAHlB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAajB,MAAMQ,OAAOpB,OAAOC,IAAIE,WAAW;AAAA,EACjCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,OAAD,EAAUC,SAASD,IAAnB;AADK,CAAtB;AAAA;AAAA;AAAA;AAAA,aAQAgB,CAAAA,UAAUA,MAAMC,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA,IAI3CZ,CAAAA,MACAC,cACE,CAACD,EAAEa,KAAH,GACA,CAAC,CAACA,QAAQ;AAAA,EAAEV,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OAAmEC;AAAAA,iBAClEC,cAAcI,KAAD;AAAA,OAHb;AAAA;AAQjB,MAAMC,QAAQxB,OAAOyB,OAAOxB,GAAR,EAAaE,WAAW;AAAA,EAC1CC,mBAAmBC,UAAQ,CAAC,CAAC,YAAY,YAAb,EAA2BC,SAASD,IAApC;AADc,CAA9B;AAAA;AAAA,IAOVK,CAAAA,MACAC,cACE,CAACD,EAAEgB,QAAH,GACA,CAAC,CAACA,WAAW,OAAOR;AAAAA,sBACJ,MAAMQ;AAAAA,qBACP,MAAMA;AAAAA,qBACN,MAAMA;AAAAA,OALV;AAAA;AAAA,IASbhB,CAAAA,MAAKC,cAAc,CAACD,EAAEiB,UAAH,GAAgB,CAAC,CAACA,aAAa,cAAe;AAAA,EAAEA;AAAF,EAA/C;AAAA;AAGtB,MAAMC,OAAO5B,OAAOyB,OAAOxB,GAAR,EAAaE,WAAW;AAAA,EACzCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,KAAD,EAAQC,SAASD,IAAjB;AADa,CAA9B;AAAA;AAAA;AAAA;AAAA,IAMTK,CAAAA,MACAC,cACE,CAACD,EAAEmB,GAAH,GACA,CAAC,CAACA,MAAM;AAAA,EAAEC,OAAO;AAAA,EAAGC,MAAM;AAAlB,OAA8Bb;AAAAA,oBACvB,GAAE,CAACW,IAAIC,QAAQ,IAAID,IAAIE;AAAAA;AAAAA,cAE9BP;AAAAA,uBACU,GAAEK,IAAIC,QAAQ,IAAID,IAAIE;AAAAA;AAAAA,OAN7B;AAAA;AAYjB,MAAMC,OAAOhC,OAAOyB,OAAOxB,GAAR;AAAA;AAAA;AAAA;AAKnB,MAAMgC,WAAWjC,OAAOoB,IAAD,EAAOjB,WAAW;AAAA,EACvCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,UAAD,EAAaC,SAASD,IAAtB;AADW,CAAxB;AAAA,IAGbK,CAAAA,MACAC,cAAc,CAACD,EAAEwB,QAAH,GAAuB,CAAC,CAACA,WAAW,cAAc;AACtDA,UAAAA;AAAAA,SACD;AACIhB,aAAAA;AAAAA;AAAAA;AAAAA,SAGJ;AACIA,aAAAA;AAAAA;AAAAA;AAAAA;AAIAA,aAAAA;AAAAA;AAAAA;AAAAA;AAIZ,CAfY;AAAA;AAAA;AAAA,cAkBHT;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAOd,MAAM0B,YAAYnC,OAAOoB,IAAD,EAAOjB,WAAW;AAAA,EACxCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,UAAD,EAAaC,SAASD,IAAtB;AADY,CAAxB;AAAA,IAGdK,CAAAA,MACAC,cAAc,CAACD,EAAEwB,QAAH,GAAuB,CAAC,CAACA,WAAW,cAAc;AACtDA,UAAAA;AAAAA,SACD;AACIhB,aAAAA;AAAAA;AAAAA;AAAAA,SAGJ;AACIA,aAAAA;AAAAA;AAAAA;AAAAA;AAIAA,aAAAA;AAAAA;AAAAA;AAAAA;AAIZ,CAfY;AAAA;AAAA;AAAA,cAkBHT;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAOd,MAAM2B,WAAWpC,OAAOC;AAAAA;AAAAA;AAIxB,MAAMoC,OAAOrC,OAAOC,IAAIE,WAAW;AAAA,EACjCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,OAAD,EAAUC,SAASD,IAAnB;AADK,CAAtB;AAAA,aAGAgB,CAAAA,UAAUA,MAAMC,SAAS,SAAS;AAAA;AAAA;AAAA,IAG3CZ,CAAAA,MACAC,cACE,CAACD,EAAEa,KAAH,GACA,CAAC,CAACA,QAAQ;AAAA,EAAEV,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OAAmEC;AAAAA,iBAClEC,cAAcI,KAAD;AAAA,OAHb;AAAA;AAQjB,MAAMe,MAAMtC,OAAOC,IAAIE,WAAW;AAAA,EAChCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,QAAD,EAAWC,SAASD,IAApB;AADI,CAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAwBCgB,CAAAA,UAAUA,MAAMkB,SAAS,KAAK;AAAA,cAC7BlB,CAAAA,UAAUA,MAAMkB,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kDAKMlB,CAAAA,UAAUA,MAAMkB,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kDAM7BlB,CAAAA,UAAUA,MAAMkB,SAAS,IAAI;AAAA;AAAA;AAI/E,MAAMC,kBAAkB;AACxB,MAAMC,aAAa,CAACC,IAAYC,aAAqBD,KAAUC,KAAAA;AAEzDC,MAAAA,WAAWC,WAAW,mBAC1B;AAAA,EACEC,SAAS,CADX;AAAA,EAEEC;AAAAA,EACAC;AAAAA,EACAtB,UAAUuB;AAAAA,EACVC,MAAMC;AAAAA,EACNtB;AAAAA,EACAuB;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,GAEFC,KACA;AACM,QAAA,CAACC,OAAOC,YAAYC,SAAS,CAAD;AAC5BC,QAAAA,QAAQC,OAAO,CAAD;AACdC,QAAAA,aAAaC,KAAK,GAAGxB,OAAOyB,QAAQP,KAAnB;AACjBtC,QAAAA,WAAW8C,cAAcvB,kBAAD,KAAwB;AAChDC,QAAAA,OAAOsB,cAAcrB,cAAD,KAAoB;AAC9C,QAAMsB,WAAWJ,aAAa3C;AAC9B,QAAMgD,YAAYC,KAAKC,aAAaL,SAAS7C,YAAYwB,OAAO,CAA9C;AACZ2B,QAAAA,YAAYF,KAAKC,KAAKP,aAAanB,IAAvB;AAClB,QAAM4B,cAAcD,cAAc;AAC5BE,QAAAA,aAAaF,cAAcH,YAAY;AACvCM,QAAAA,WAAWC,YACf,CAACC,iBAAyB;AACpBA,QAAAA,iBAAiB;AAAG;AAElBC,UAAAA,YAAYD,eAAeP,KAAKS,IAAIF,YAAT;AAC3BG,UAAAA,YAAYF,YAAY,IAAIrC,OAAOwC,MAAMb,QAAb,IAAyB3B,OAAOwC,MAAM,GAAGjB,UAAhB;AACrDkB,UAAAA,WAAWJ,YAAYR,KAAKa,IAAIH,UAAUd,QAAQrB,OAAOyB,KAAKS,IAAIF,YAAT,CAAlC;AAE7BjB,aAASD,QAAQuB,QAAT;AAAA,EAAA,GAEV,CAACzC,QAAQkB,OAAOK,YAAYI,UAAUvB,IAAtC,CAV0B;AAatBuC,QAAAA,YAAYC,aAAa;AAAA,IAAEC,GAAG;AAAA,IAAGC,YAAY;AAAA,MAAEC,MAAM;AAAA,MAAUC,WAAW;AAAA,IAA7B;AAAA,EAAA,CAArB;AACxBC,QAAAA,WAAWC,WACf;AAAA,IACEC,QAAQ,CAAC;AAAA,MAAEC,UAAU,CAACC;AAAAA,MAAKC,OAAO,CAAC1D;AAAAA,MAAKC;AAAAA,UAAe;AACrD8C,gBAAUY,MAAM;AAAA,QAAEV,GAAGQ;AAAAA,MAAAA,CAArB;AACMG,YAAAA,UAAU7D,WAAWC,IAAIC,QAAL;AAAA,IAH9B;AAAA,IAKE4D,WAAW,MAAM;AACfd,gBAAUY,MAAM;AAAA,QAAEV,GAAG;AAAA,MAAA,CAArB;AAEIxB,UAAAA,MAAMmC,UAAU9D;AAAiBwC,iBAAS,CAAD;AAAA,eACpCb,MAAMmC,UAAU,CAAC9D;AAAiBwC,iBAAS,EAAD;AAAA,IACpD;AAAA,EAAA,GAEH;AAAA,IACEwB,MAAM;AAAA,MACJC,MAAM;AAAA,MACNC,QAAQ;AAAA,QAAEC,MAAM;AAAA,QAAGC,OAAO;AAAA,MAFtB;AAAA,MAGJC,YAAY;AAAA,IAHR;AAAA,EAAA,CAdiB;AAsB3BC,YAAU,MAAM;AACV,QAAA,CAACnD,YAAYjC,aAAa;AAAGuC,eAAS,CAAD;AAAA,EAAA,GACxC,CAACN,UAAUjC,QAAX,CAFM;AAIToF,YAAU,MAAM;AACd,QAAI,CAACnD;AAAU,aAAO,MAAM;AAAA,MAAA;AAEtBoD,UAAAA,aAAaC,YAAY,MAAOjC,aAAad,SAAS,CAAD,IAAMe,SAAS,CAAD,GAAMpB,QAAQ,GAAzD;AAEvB,WAAA,MAAMqD,cAAcF,UAAD;AAAA,KACzB,CAACpD,UAAUC,OAAOoB,UAAUD,UAA5B,CANM;AAQT,8BACG,SAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAWmC,CAAK,MAAA;AACNA,cAAAA,EAAEC;AAAAA,aACH;AACHnC,mBAAS,CAAD;AACR;AAAA,aACG;AACHA,mBAAS,EAAD;AACR;AAAA;AAAA,IAZR;AAAA,IAAA,UAAA,CAiBEoC,qBAAC,WAAD;AAAA,MAAA,UAAA,CACEvH,oBAAC,UAAD;AAAA,QAAA,8BACG,MAASkG,iCAAAA,SAAV,IAAUA;AAAAA,UAAY,SAASN;AAAAA,UAA/B,8BACG,MAAD;AAAA,YACE;AAAA,YACA,SAAS;AAAA,cAAEE,GAAI,GAAE,CAAE,OAAMjE,YAAY2C;AAAAA,YAFvC;AAAA,YAGE,YAAY;AAAA,cACVsB,GAAG;AAAA,gBACDE,MAAM;AAAA,gBACNwB,MAAM,CAAC,OAAO,MAAM,MAAM,CAApB;AAAA,gBACNC,UAAU;AAAA,cAHT;AAAA,YAJP;AAAA,YAAA,UAWGxE,OAAOyE,IAAI,CAAC;AAAA,cAAElG,OAAOmG;AAAAA,cAAYL;AAAAA,sCAC/B,OAAD;AAAA,cACE,IAAIA;AAAAA,cAEJ,UAAUlE;AAAAA,cACV,YAAYG;AAAAA,cACZ,aAAa8D,CAAKA,MAAAA,EAAEO,eALtB;AAAA,cAME,SAASP,CAAK,MAAA;AACR/C,oBAAAA,MAAMmC,YAAY;AAAGY,oBAAEO,eAAF;AAAA,cAP7B;AAAA,cAAA,8BAUGC,gBAAD;AAAA,gBACE,OAAO,CAAC;AAAA,kBAAEC,UAAU;AAAA,kBAAW7F,OAAO;AAAA,oBAAEA,OAAO;AAAA,oBAAKC,MAAM;AAAA,kBAApB;AAAA,gBAAA,CAA/B;AAAA,gBACP,MAAMyF,WAAWI;AAAAA,gBACjB,SAASJ,WAAWK;AAAAA,gBACpB,MAAML,WAAWM;AAAAA,gBACjB,QAAQjE;AAAAA,gBACR,cAAcC;AAAAA,cAAAA,CANhB;AAAA,YAVF,GAEOqD,GAFP,CADD;AAAA,UAAA,CAXH;AAAA,QAAA,EADF;AAAA,MAAA,CAFJ,GAsCEtH,oBAAC,UAAD;AAAA,QACE,SAAS,MAAMmF,SAAS,EAAD;AAAA,QACvB,UAAUzB;AAAAA,QAEV,OAAOC;AAAAA,QACP,QAAQ,CAACF,cAAcwB;AAAAA,QALzB,8BAOG,OAAD;AAAA,UAAO,YAAYrB;AAAAA,UAAnB,UACE5D,oBAAC,aAAD,EAAA;AAAA,QAAA,CADF;AAAA,MAAA,CA7CJ,GAiDEA,oBAAC,WAAD;AAAA,QACE,SAAS,MAAMmF,SAAS,CAAD;AAAA,QACvB,UAAUzB;AAAAA,QAEV,OAAOC;AAAAA,QACP,QAAQ,CAACF,cAAcyB;AAAAA,QALzB,8BAOG,OAAD;AAAA,UAAO,YAAYtB;AAAAA,UAAnB,UACE5D,oBAAC,cAAD,EAAA;AAAA,QAAA,CADF;AAAA,MAAA,CAxDJ,CAAA;AAAA,IAAA,CAjBF,GA+EEA,oBAAC,MAAD;AAAA,MAAM,OAAO6D;AAAAA,MAAU,QAAQ,CAACL;AAAAA,MAC7B0E,UAAAA,MAAMC,KAAK;AAAA,QAAEzD,QAAQG;AAAAA,MAAAA,CAArB,EAAkC6C,IAAI,CAACU,GAAGC,0BACxC,KAAD;AAAA,QAAa,QAAQA,MAAMrD;AAAAA,QAAW,SAAS,MAAMG,SAASkD,IAAIrD,SAAL;AAAA,MAA7D,GAAUqD,CAAV,CADD;AAAA,IAAA,CAhFL,CAAA;AAAA,EAAA,CADF;AAuFD,CAvK0B;;"}
+{"version":3,"file":"Carousel.es.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  ImagesValue,\n  MarginValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n  BorderValue,\n  BorderRadiusValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\n// NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far\nconst Container = styled.div`\n  position: relative;\n  height: 100%;\n`\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: WidthValue\n  margin?: MarginValue\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: BorderValue\n  slideBorderRadius?: BorderRadiusValue\n}\n\nconst Wrapper = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'width'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ${cssWidth('400px')}\n  ${cssMargin()}\n\n  &:focus {\n    outline: 0;\n  }\n`\n\nconst Arrow = styled.div.withConfig({\n  shouldForwardProp: prop => !['background'].includes(prop),\n})<{ background?: ResponsiveValue<Color> | null }>`\n  padding: 10px;\n  border-radius: 50%;\n  outline: 0;\n  border: 0;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  ${p =>\n    cssMediaRules(\n      [p.background] as const,\n      ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => css`\n        background: ${colorToString(background)};\n      `,\n    )}\n\n  svg {\n    transition: transform 0.15s;\n    stroke: currentColor;\n  }\n`\n\nconst Slop = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{\n  color?: ResponsiveValue<Color> | null\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  align-items: center;\n  cursor: pointer;\n  z-index: 2;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Slide = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['pageSize', 'alignItems'].includes(prop),\n})<{\n  pageSize: Props['pageSize']\n  alignItems: Props['slideAlignment']\n}>`\n  display: flex;\n  ${p =>\n    cssMediaRules(\n      [p.pageSize],\n      ([pageSize = 1]) => css`\n        flex-basis: ${100 / pageSize}%;\n        max-width: ${100 / pageSize}%;\n        min-width: ${100 / pageSize}%;\n      `,\n    )}\n\n  ${p => cssMediaRules([p.alignItems], ([alignItems = 'center']) => ({ alignItems }))}\n`\n\nconst Reel = styled(motion.div).withConfig({\n  shouldForwardProp: prop => !['gap'].includes(prop),\n})<{ gap: Props['gap'] }>`\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  ${p =>\n    cssMediaRules(\n      [p.gap] as const,\n      ([gap = { value: 0, unit: 'px' }]) => css`\n        margin: 0 ${`${-gap.value / 2}${gap.unit}`};\n\n        & > ${Slide} {\n          padding: 0 ${`${gap.value / 2}${gap.unit}`};\n        }\n      `,\n    )}\n`\n\nconst Page = styled(motion.div)`\n  position: relative;\n  width: 100%;\n`\n\nconst LeftSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(-100% - 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(-50%));\n          `\n      }\n    })}\n  left: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(-2px);\n    }\n  }\n`\n\nconst RightSlop = styled(Slop).withConfig({\n  shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n  ${p =>\n    cssMediaRules([p.position] as const, ([position = 'inside']) => {\n      switch (position) {\n        case 'inside':\n          return css`\n            transform: translateX(-8px);\n          `\n        case 'outside':\n          return css`\n            transform: translateX(calc(100% + 8px));\n          `\n        default:\n          return css`\n            transform: translateX(calc(50%));\n          `\n      }\n    })}\n  right: 0;\n\n  &:hover > ${Arrow} {\n    & > svg {\n      transform: translateX(2px);\n    }\n  }\n`\n\nconst ClipMask = styled.div`\n  overflow: hidden;\n`\n\nconst Dots = styled.div.withConfig({\n  shouldForwardProp: prop => !['color'].includes(prop),\n})<{ color?: ResponsiveValue<Color> | null }>`\n  display: ${props => (props.hidden ? 'none' : 'flex')};\n  justify-content: center;\n  margin-top: 20px;\n  ${p =>\n    cssMediaRules(\n      [p.color] as const,\n      ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n        color: ${colorToString(color)};\n      `,\n    )}\n`\n\nconst Dot = styled.div.withConfig({\n  shouldForwardProp: prop => !['active'].includes(prop),\n})<{ active: boolean }>`\n  position: relative;\n  margin: 0 6px;\n  border-radius: 50%;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: block;\n    border-radius: 50%;\n    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  &::before {\n    box-shadow: 0 0 0 2px currentColor;\n    transform: translate3d(-50%, -50%, 0);\n    width: ${props => (props.active ? 16 : 10)}px;\n    height: ${props => (props.active ? 16 : 10)}px;\n  }\n\n  &::after {\n    background: currentColor;\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0)});\n    width: 10px;\n    height: 10px;\n  }\n\n  &:hover::after {\n    transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0.5)});\n  }\n`\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, velocity)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  return (\n    <Wrapper\n      ref={ref}\n      width={width}\n      margin={margin}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      <Container>\n        <ClipMask>\n          <Page {...bindPage()} animate={animation}>\n            <Reel\n              gap={gap}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <Slide\n                  id={key}\n                  key={key}\n                  pageSize={responsivePageSize}\n                  alignItems={slideAlignment}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </Slide>\n              ))}\n            </Reel>\n          </Page>\n        </ClipMask>\n        <LeftSlop\n          onClick={() => paginate(-1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isFirstPage}\n        >\n          <Arrow background={arrowBackground}>\n            <LeftChevron />\n          </Arrow>\n        </LeftSlop>\n        <RightSlop\n          onClick={() => paginate(1)}\n          position={arrowPosition}\n          // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n          color={arrowColor}\n          hidden={!showArrows || isLastPage}\n        >\n          <Arrow background={arrowBackground}>\n            <RightChevron />\n          </Arrow>\n        </RightSlop>\n      </Container>\n      {/* @ts-expect-error: HTMLDivElement attributes conflicts with `color` prop */}\n      <Dots color={dotColor} hidden={!showDots}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </Dots>\n    </Wrapper>\n  )\n})\n\nexport default Carousel\n"],"names":["LeftChevron","_jsx","RightChevron","Container","styled","div","Wrapper","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Arrow","p","cssMediaRules","background","swatch","hue","saturation","lightness","alpha","css","colorToString","Slop","props","hidden","color","Slide","motion","pageSize","alignItems","Reel","gap","value","unit","Page","LeftSlop","position","RightSlop","ClipMask","Dots","Dot","active","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","responsivePageSize","step","responsiveStep","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","e","key","_jsxs","ease","duration","map","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i"],"mappings":"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"}

package/dist/Countdown.cjs.js

@@ -10,16 +10,15 @@ require("./react-page.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
-require("./image.cjs.js");
-require("./color.cjs.js");
 require("./slot.cjs.js");
+require("./control.cjs.js");
 require("next/dynamic");
 require("@apollo/client");
 require("@apollo/client/link/batch-http");
 require("slate");
 require("./graphql.cjs.js");
-require("./shape.cjs.js");
 require("./text-input.cjs.js");
+require("./combobox.cjs.js");
 require("@emotion/css");
 require("color");
 require("scroll-into-view-if-needed");

package/dist/Countdown.cjs.js.map

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

package/dist/Countdown.es.js

@@ -8,16 +8,15 @@ import "./react-page.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
-import "./image.es.js";
-import "./color.es.js";
 import "./slot.es.js";
+import "./control.es.js";
 import "next/dynamic";
 import "@apollo/client";
 import "@apollo/client/link/batch-http";
 import "slate";
 import "./graphql.es.js";
-import "./shape.es.js";
 import "./text-input.es.js";
+import "./combobox.es.js";
 import "@emotion/css";
 import "color";
 import "scroll-into-view-if-needed";

package/dist/Countdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: WidthValue\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'width',\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  width: Props['width']\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssWidth('560px')}\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      width={width}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: WidthValue\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'width',\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  width: Props['width']\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssWidth('560px')}\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      width={width}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,QAAQC,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAMrB,MAAMC,QAAQF,OAAOC;AAAAA;AAAAA;AAIrB,MAAME,UAAUH,OAAOC;AAAAA;AAAAA;AAAAA;AAKvB,MAAMG,YAAYJ,OAAOC,IAAII,WAAW;AAAA,EACtCC,mBAAmBC,CACjB,SAAA,CAAC,CACC,SACA,UACA,WACA,QACA,SACA,OACA,cACA,cACA,eACA,cACA,WAXD,EAYCC,SAASD,IAZV;AAFmC,CAAtB;AAAA;AAAA,IA6BdE,SAAS,OAAD;AAAA,IACRC,UAAY;AAAA,IACZC,CAAAA,MACAC,cAAc,CAACD,EAAEE,IAAH,GAAmB,CAAC,CAACA,OAAO,cAAc;AAC9CA,UAAAA;AAAAA,SACD;AACIC,aAAAA;AAAAA;AAAAA;AAAAA,cAGHZ;AAAAA;AAAAA;AAAAA;AAAAA,SAID;AACIY,aAAAA;AAAAA;AAAAA;AAAAA,cAGHZ;AAAAA;AAAAA;AAAAA;AAAAA;AAKGY,aAAAA;AAAAA;AAAAA;AAAAA,cAGHZ;AAAAA;AAAAA;AAAAA;AAAAA;AAKT,CA3BY;AAAA;AAAA,IA6BbC;AAAAA,MACEQ,CAAAA,MACAC,cACE,CAACD,EAAEI,GAAH,GACA,CAAC,CAACA,SAASD;AAAAA,sBACGC,OAAO,OAAO,IAAK,GAAEA,IAAIC,QAAQ,IAAID,IAAIE;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,SAH5C;AAAA;AAAA;AAAA,IAgBflB;AAAAA,MACEY,CAAAA,MACAC,cAAc,CAACD,EAAEO,KAAH,GAAoB,CAAC,CAACA,QAAQ,eAAe;AACjDA,UAAAA;AAAAA,SACD;AACIJ,aAAAA;AAAAA;AAAAA;AAAAA,SAGJ;AACIA,aAAAA;AAAAA;AAAAA;AAAAA;AAIAA,aAAAA;AAAAA;AAAAA;AAAAA;AAIZ,CAfY;AAAA,MAgBbH,OACAC,cACE,CAACD,EAAEQ,SAASR,EAAES,YAAYT,EAAEU,aAAaV,EAAEW,UAA3C,GACA,CAAC,CACCH,UAAU,UACVC,aAAa;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,GACbN,cAAc;AAAA,EAAEE,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAqDC,OAAO;AAA5D,GACdL,aAAa,kBACT;AACIH,UAAAA;AAAAA,SACD;AACIL,aAAAA;AAAAA,gCACWQ;AAAAA,yBACPM,cAAcP,WAAD;AAAA,8BACRO,cAAcR,UAAD;AAAA;AAAA,SAE1B;AACIN,aAAAA;AAAAA;AAAAA,yBAEIc,cAAcP,WAAD;AAAA,gCACNC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gCAgBAM,cAAcR,UAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAYbQ,cAAcR,UAAD;AAAA;AAAA;AAAA,SAG5B;AACIN,aAAAA;AAAAA,gCACWQ;AAAAA,yBACPM,cAAcP,WAAD;AAAA;AAAA,oCAEFO,cAAcR,UAAD;AAAA;AAAA,SAEhC;AACIN,aAAAA;AAAAA;AAAAA,gCAEWQ;AAAAA,yBACPM,cAAcP,WAAD;AAAA,oCACFO,cAAcR,UAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAejBQ,cAAcR,UAAD;AAAA;AAAA;AAAA;AAIxBN,aAAAA;AAAAA,gCACWQ;AAAAA;AAAAA,yBAEPM,cAAcP,WAAD;AAAA;AAAA;AAAA;AAAA;AAK7B,CAzFU;AAAA;AAAA;AAAA,IA6FfnB;AAAAA,MACES,CAAAA,MACAC,cACE,CAACD,EAAEkB,YAAYlB,EAAEmB,SAAjB,GACA,CAAC,CACCD,aAAa;AAAA,EAAEN,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,GACbG,YAAY,kBACRhB;AAAAA,0BACYgB;AAAAA,mBACPF,cAAcC,UAAD;AAAA,SAPb;AAAA;AAAA;AAanB,MAAME,eAAe,CAACC,SAAoC;AACxD,MAAIA,QAAQ;AAAa,WAAA;AAAA,MAAEC,MAAM;AAAA,MAAGC,OAAO;AAAA,MAAGC,SAAS;AAAA,MAAGC,SAAS;AAAA,IAAA;AAE7DC,QAAAA,WAAW,IAAIC,KAAKN,IAAT,EAAeO,YAAYD,KAAKE;AAEjD,MAAIH,YAAY;AAAU,WAAA;AAAA,MAAEJ,MAAM;AAAA,MAAGC,OAAO;AAAA,MAAGC,SAAS;AAAA,MAAGC,SAAS;AAAA,IAAA;AAEhEK,MAAAA,QAAQC,KAAKC,IAAIN,QAAT,IAAqB;AAE3BJ,QAAAA,OAAOS,KAAKE,MAAMH,QAAQ,KAAnB;AACbA,WAASR,OAAO;AAEVC,QAAAA,QAAQQ,KAAKE,MAAMH,QAAQ,IAAnB,IAA2B;AACzCA,WAASP,QAAQ;AAEXC,QAAAA,UAAUO,KAAKE,MAAMH,QAAQ,EAAnB,IAAyB;AACzCA,WAASN,UAAU;AAEnB,QAAMC,UAAUS,SAASC,OAAOL,QAAQ,EAAT,GAAc,EAArB;AAEjB,SAAA;AAAA,IAAER;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,EAAAA;AAChC;AAEKW,MAAAA,YAAYC,WAAW,oBAC3B;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAnB;AAAAA,EACAb;AAAAA,EACAN;AAAAA,EACAK;AAAAA,EACAH;AAAAA,EACAc;AAAAA,EACAC;AAAAA,EACAT;AAAAA,EACAC;AAAAA,EACAF;AAAAA,EACAgC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GAEFC,KACA;AACA,QAAM,CAAC;AAAA,IAAEvB;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,KAAWqB,gBAAgBC,SAAS3B,aAAaC,IAAD,CAAb;AAElE2B,YAAU,MAAM;AACD5B,iBAAAA,aAAaC,IAAD,CAAb;AAEN4B,UAAAA,aAAaC,YAAY,MAAM;AACtB9B,mBAAAA,aAAaC,IAAD,CAAb;AAAA,OACX,GAF2B;AAIvB,WAAA,MAAM8B,cAAcF,UAAD;AAAA,EAAA,GACzB,CAAC5B,IAAD,CARM;AAUT,8BACG,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAbF,UAAA,CAeE+B,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO/B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE+B,oBAAC,OAAD;AAAA,QAAA,UAAQZ,aAAa,OAAO,SAASA;AAAAA,MAAAA,CAJvC,CAAA;AAAA,IAAA,CAfF,GAqBEW,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO9B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE8B,oBAAC,OAAD;AAAA,QAAA,UAAQX,cAAc,OAAO,UAAUA;AAAAA,MAAAA,CAJzC,CAAA;AAAA,IAAA,CArBF,GA2BEU,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO7B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE6B,oBAAC,OAAD;AAAA,QAAA,UAAQV,gBAAgB,OAAO,YAAYA;AAAAA,MAAAA,CAJ7C,CAAA;AAAA,IAAA,CA3BF,GAiCES,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO5B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE4B,oBAAC,OAAD;AAAA,QAAA,UAAQT,gBAAgB,OAAO,YAAYA;AAAAA,MAAAA,CAJ7C,CAAA;AAAA,IAAA,CAjCF,CAAA;AAAA,EAAA,CADF;AA0CD,CA5E2B;;"}

package/dist/Divider.cjs.js

@@ -10,16 +10,15 @@ require("./react-page.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
-require("./image.cjs.js");
-require("./color.cjs.js");
 require("./slot.cjs.js");
+require("./control.cjs.js");
 require("next/dynamic");
 require("@apollo/client");
 require("@apollo/client/link/batch-http");
 require("slate");
 require("./graphql.cjs.js");
-require("./shape.cjs.js");
 require("./text-input.cjs.js");
+require("./combobox.cjs.js");
 require("@emotion/css");
 require("color");
 require("scroll-into-view-if-needed");

package/dist/Divider.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.cjs.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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?: WidthValue\n  margin?: MarginValue\n}\n\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\nconst IE11MinHeightContainer = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  display: flex;\n  width: 100%;\n  ${cssWidth()}\n  ${cssMargin()}\n`\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 40px;\n  width: 100%;\n`\n\nconst Line = styled.div.withConfig({\n  shouldForwardProp: prop => !['variant', 'color', 'thickness'].includes(prop),\n})<{\n  variant: Props['variant']\n  color?: ResponsiveValue<Color> | null\n  thickness: Props['thickness']\n}>`\n  ${p =>\n    cssMediaRules(\n      [p.variant, p.thickness, p.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 css`\n              border-bottom-width: ${thickness == null\n                ? '1px'\n                : `${thickness.value}${thickness.unit}`};\n              border-bottom-style: ${variant};\n              border-bottom-color: ${colorToString(color)};\n            `\n\n          case 'blended':\n            return css`\n              height: ${`${thickness.value}${thickness.unit}`};\n              background: linear-gradient(\n                ${[\n                  '90deg',\n                  colorToString({ swatch: color.swatch, alpha: 0 }),\n                  colorToString(color),\n                  colorToString({ swatch: color.swatch, alpha: 0 }),\n                ].join(', ')}\n              );\n            `\n\n          default:\n            variant as never\n            throw new Error(`Invalid variant ${variant}.`)\n        }\n      },\n    )}\n`\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <IE11MinHeightContainer ref={ref} id={id} width={width} margin={margin}>\n      <Container>\n        {/* @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop */}\n        <Line variant={variant} thickness={thickness} color={color} />\n      </Container>\n    </IE11MinHeightContainer>\n  )\n})\n\nexport default Divider\n"],"names":["IE11MinHeightContainer","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Container","Line","p","cssMediaRules","variant","thickness","color","value","unit","swatch","hue","saturation","lightness","alpha","css","colorToString","join","Error","Divider","forwardRef","id","width","margin","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,yBAAyBC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACnDC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADuB,CAAtB;AAAA;AAAA;AAAA,IAK3BE,cAAW,SAAA;AAAA,IACXC,cAAY,UAAA;AAAA;AAGhB,MAAMC,YAAYR,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAQzB,MAAMQ,OAAOT,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACjCC,mBAAmBC,UAAQ,CAAC,CAAC,WAAW,SAAS,WAArB,EAAkCC,SAASD,IAA3C;AADK,CAAtB;AAAA,IAOTM,CACAC,MAAAA,cAAAA,cACE,CAACD,EAAEE,SAASF,EAAEG,WAAWH,EAAEI,KAA3B,GACA,CAAC,CACCF,UAAU,SACVC,YAAY;AAAA,EAAEE,OAAO;AAAA,EAAGC,MAAM;AAAlB,GACZF,QAAQ;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OACJ;AACIT,UAAAA;AAAAA,SACD;AAAA,SACA;AAAA,SACA;AACIU,aAAAA;qCACkBT,aAAa,OAChC,QACC,GAAEA,UAAUE,QAAQF,UAAUG;AAAAA,qCACZJ;AAAAA,qCACAW,KAAAA,cAAcT,KAAD;AAAA;AAAA,SAGnC;AACIQ,aAAAA;wBACM,GAAET,UAAUE,QAAQF,UAAUG;AAAAA;AAAAA,kBAErC,CACA,SACAO,mBAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAhC,CAAA,GACbE,KAAcT,cAAAA,KAAD,GACbS,mBAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAA,CAAhC,CAJb,EAKAG,KAAK,IALL;AAAA;AAAA;AAAA;AAWA,YAAA,IAAIC,MAAO,mBAAkBb,UAA7B;AAAA;AAEX,CApCU;AAAA;AAwCXc,MAAAA,UAAUC,MAAAA,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIhB;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOe;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,wCACG,wBAAD;AAAA,IAAwB;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAc;AAAA,IAAxD,yCACG,WAAD;AAAA,MAAA,yCAEG,MAAD;AAAA,QAAM;AAAA,QAAkB;AAAA,QAAsB;AAAA,MAAA,CAA9C;AAAA,IAAA,CAFF;AAAA,EAAA,CAFJ;AAQD,CAZyB;;"}
+{"version":3,"file":"Divider.cjs.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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?: WidthValue\n  margin?: MarginValue\n}\n\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\nconst IE11MinHeightContainer = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  display: flex;\n  width: 100%;\n  ${cssWidth()}\n  ${cssMargin()}\n`\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 40px;\n  width: 100%;\n`\n\nconst Line = styled.div.withConfig({\n  shouldForwardProp: prop => !['variant', 'color', 'thickness'].includes(prop),\n})<{\n  variant: Props['variant']\n  color?: ResponsiveValue<Color> | null\n  thickness: Props['thickness']\n}>`\n  ${p =>\n    cssMediaRules(\n      [p.variant, p.thickness, p.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 css`\n              border-bottom-width: ${thickness == null\n                ? '1px'\n                : `${thickness.value}${thickness.unit}`};\n              border-bottom-style: ${variant};\n              border-bottom-color: ${colorToString(color)};\n            `\n\n          case 'blended':\n            return css`\n              height: ${`${thickness.value}${thickness.unit}`};\n              background: linear-gradient(\n                ${[\n                  '90deg',\n                  colorToString({ swatch: color.swatch, alpha: 0 }),\n                  colorToString(color),\n                  colorToString({ swatch: color.swatch, alpha: 0 }),\n                ].join(', ')}\n              );\n            `\n\n          default:\n            variant as never\n            throw new Error(`Invalid variant ${variant}.`)\n        }\n      },\n    )}\n`\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <IE11MinHeightContainer ref={ref} id={id} width={width} margin={margin}>\n      <Container>\n        {/* @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop */}\n        <Line variant={variant} thickness={thickness} color={color} />\n      </Container>\n    </IE11MinHeightContainer>\n  )\n})\n\nexport default Divider\n"],"names":["IE11MinHeightContainer","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Container","Line","p","cssMediaRules","variant","thickness","color","value","unit","swatch","hue","saturation","lightness","alpha","css","colorToString","join","Error","Divider","forwardRef","id","width","margin","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,yBAAyBC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACnDC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADuB,CAAtB;AAAA;AAAA;AAAA,IAK3BE,cAAW,SAAA;AAAA,IACXC,cAAY,UAAA;AAAA;AAGhB,MAAMC,YAAYR,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAQzB,MAAMQ,OAAOT,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACjCC,mBAAmBC,UAAQ,CAAC,CAAC,WAAW,SAAS,WAArB,EAAkCC,SAASD,IAA3C;AADK,CAAtB;AAAA,IAOTM,CACAC,MAAAA,cAAAA,cACE,CAACD,EAAEE,SAASF,EAAEG,WAAWH,EAAEI,KAA3B,GACA,CAAC,CACCF,UAAU,SACVC,YAAY;AAAA,EAAEE,OAAO;AAAA,EAAGC,MAAM;AAAlB,GACZF,QAAQ;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OACJ;AACIT,UAAAA;AAAAA,SACD;AAAA,SACA;AAAA,SACA;AACIU,aAAAA;qCACkBT,aAAa,OAChC,QACC,GAAEA,UAAUE,QAAQF,UAAUG;AAAAA,qCACZJ;AAAAA,qCACAW,KAAAA,cAAcT,KAAD;AAAA;AAAA,SAGnC;AACIQ,aAAAA;wBACM,GAAET,UAAUE,QAAQF,UAAUG;AAAAA;AAAAA,kBAErC,CACA,SACAO,mBAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAhC,CAAA,GACbE,KAAcT,cAAAA,KAAD,GACbS,mBAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAA,CAAhC,CAJb,EAKAG,KAAK,IALL;AAAA;AAAA;AAAA;AAWA,YAAA,IAAIC,MAAO,mBAAkBb,UAA7B;AAAA;AAEX,CApCU;AAAA;AAwCXc,MAAAA,UAAUC,MAAAA,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIhB;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOe;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,wCACG,wBAAD;AAAA,IAAwB;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAc;AAAA,IAAxD,yCACG,WAAD;AAAA,MAAA,yCAEG,MAAD;AAAA,QAAM;AAAA,QAAkB;AAAA,QAAsB;AAAA,MAAA,CAA9C;AAAA,IAAA,CAFF;AAAA,EAAA,CAFJ;AAQD,CAZyB;;"}

package/dist/Divider.es.js

@@ -8,16 +8,15 @@ import "./react-page.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
-import "./image.es.js";
-import "./color.es.js";
 import "./slot.es.js";
+import "./control.es.js";
 import "next/dynamic";
 import "@apollo/client";
 import "@apollo/client/link/batch-http";
 import "slate";
 import "./graphql.es.js";
-import "./shape.es.js";
 import "./text-input.es.js";
+import "./combobox.es.js";
 import "@emotion/css";
 import "color";
 import "scroll-into-view-if-needed";

package/dist/Divider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.es.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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?: WidthValue\n  margin?: MarginValue\n}\n\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\nconst IE11MinHeightContainer = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  display: flex;\n  width: 100%;\n  ${cssWidth()}\n  ${cssMargin()}\n`\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 40px;\n  width: 100%;\n`\n\nconst Line = styled.div.withConfig({\n  shouldForwardProp: prop => !['variant', 'color', 'thickness'].includes(prop),\n})<{\n  variant: Props['variant']\n  color?: ResponsiveValue<Color> | null\n  thickness: Props['thickness']\n}>`\n  ${p =>\n    cssMediaRules(\n      [p.variant, p.thickness, p.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 css`\n              border-bottom-width: ${thickness == null\n                ? '1px'\n                : `${thickness.value}${thickness.unit}`};\n              border-bottom-style: ${variant};\n              border-bottom-color: ${colorToString(color)};\n            `\n\n          case 'blended':\n            return css`\n              height: ${`${thickness.value}${thickness.unit}`};\n              background: linear-gradient(\n                ${[\n                  '90deg',\n                  colorToString({ swatch: color.swatch, alpha: 0 }),\n                  colorToString(color),\n                  colorToString({ swatch: color.swatch, alpha: 0 }),\n                ].join(', ')}\n              );\n            `\n\n          default:\n            variant as never\n            throw new Error(`Invalid variant ${variant}.`)\n        }\n      },\n    )}\n`\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <IE11MinHeightContainer ref={ref} id={id} width={width} margin={margin}>\n      <Container>\n        {/* @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop */}\n        <Line variant={variant} thickness={thickness} color={color} />\n      </Container>\n    </IE11MinHeightContainer>\n  )\n})\n\nexport default Divider\n"],"names":["IE11MinHeightContainer","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Container","Line","p","cssMediaRules","variant","thickness","color","value","unit","swatch","hue","saturation","lightness","alpha","css","colorToString","join","Error","Divider","forwardRef","id","width","margin","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,yBAAyBC,OAAOC,IAAIC,WAAW;AAAA,EACnDC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADuB,CAAtB;AAAA;AAAA;AAAA,IAK3BE,SAAW;AAAA,IACXC,UAAY;AAAA;AAGhB,MAAMC,YAAYR,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAQzB,MAAMQ,OAAOT,OAAOC,IAAIC,WAAW;AAAA,EACjCC,mBAAmBC,UAAQ,CAAC,CAAC,WAAW,SAAS,WAArB,EAAkCC,SAASD,IAA3C;AADK,CAAtB;AAAA,IAOTM,CACAC,MAAAA,cACE,CAACD,EAAEE,SAASF,EAAEG,WAAWH,EAAEI,KAA3B,GACA,CAAC,CACCF,UAAU,SACVC,YAAY;AAAA,EAAEE,OAAO;AAAA,EAAGC,MAAM;AAAlB,GACZF,QAAQ;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OACJ;AACIT,UAAAA;AAAAA,SACD;AAAA,SACA;AAAA,SACA;AACIU,aAAAA;AAAAA,qCACkBT,aAAa,OAChC,QACC,GAAEA,UAAUE,QAAQF,UAAUG;AAAAA,qCACZJ;AAAAA,qCACAW,cAAcT,KAAD;AAAA;AAAA,SAGnC;AACIQ,aAAAA;AAAAA,wBACM,GAAET,UAAUE,QAAQF,UAAUG;AAAAA;AAAAA,kBAErC,CACA,SACAO,cAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAhC,CAAA,GACbE,cAAcT,KAAD,GACbS,cAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAA,CAAhC,CAJb,EAKAG,KAAK,IALL;AAAA;AAAA;AAAA;AAWA,YAAA,IAAIC,MAAO,mBAAkBb,UAA7B;AAAA;AAEX,CApCU;AAAA;AAwCXc,MAAAA,UAAUC,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIhB;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOe;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,6BACG,wBAAD;AAAA,IAAwB;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAc;AAAA,IAAxD,8BACG,WAAD;AAAA,MAAA,8BAEG,MAAD;AAAA,QAAM;AAAA,QAAkB;AAAA,QAAsB;AAAA,MAAA,CAA9C;AAAA,IAAA,CAFF;AAAA,EAAA,CAFJ;AAQD,CAZyB;;"}
+{"version":3,"file":"Divider.es.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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?: WidthValue\n  margin?: MarginValue\n}\n\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\nconst IE11MinHeightContainer = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  display: flex;\n  width: 100%;\n  ${cssWidth()}\n  ${cssMargin()}\n`\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 40px;\n  width: 100%;\n`\n\nconst Line = styled.div.withConfig({\n  shouldForwardProp: prop => !['variant', 'color', 'thickness'].includes(prop),\n})<{\n  variant: Props['variant']\n  color?: ResponsiveValue<Color> | null\n  thickness: Props['thickness']\n}>`\n  ${p =>\n    cssMediaRules(\n      [p.variant, p.thickness, p.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 css`\n              border-bottom-width: ${thickness == null\n                ? '1px'\n                : `${thickness.value}${thickness.unit}`};\n              border-bottom-style: ${variant};\n              border-bottom-color: ${colorToString(color)};\n            `\n\n          case 'blended':\n            return css`\n              height: ${`${thickness.value}${thickness.unit}`};\n              background: linear-gradient(\n                ${[\n                  '90deg',\n                  colorToString({ swatch: color.swatch, alpha: 0 }),\n                  colorToString(color),\n                  colorToString({ swatch: color.swatch, alpha: 0 }),\n                ].join(', ')}\n              );\n            `\n\n          default:\n            variant as never\n            throw new Error(`Invalid variant ${variant}.`)\n        }\n      },\n    )}\n`\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <IE11MinHeightContainer ref={ref} id={id} width={width} margin={margin}>\n      <Container>\n        {/* @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop */}\n        <Line variant={variant} thickness={thickness} color={color} />\n      </Container>\n    </IE11MinHeightContainer>\n  )\n})\n\nexport default Divider\n"],"names":["IE11MinHeightContainer","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Container","Line","p","cssMediaRules","variant","thickness","color","value","unit","swatch","hue","saturation","lightness","alpha","css","colorToString","join","Error","Divider","forwardRef","id","width","margin","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,yBAAyBC,OAAOC,IAAIC,WAAW;AAAA,EACnDC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADuB,CAAtB;AAAA;AAAA;AAAA,IAK3BE,SAAW;AAAA,IACXC,UAAY;AAAA;AAGhB,MAAMC,YAAYR,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAQzB,MAAMQ,OAAOT,OAAOC,IAAIC,WAAW;AAAA,EACjCC,mBAAmBC,UAAQ,CAAC,CAAC,WAAW,SAAS,WAArB,EAAkCC,SAASD,IAA3C;AADK,CAAtB;AAAA,IAOTM,CACAC,MAAAA,cACE,CAACD,EAAEE,SAASF,EAAEG,WAAWH,EAAEI,KAA3B,GACA,CAAC,CACCF,UAAU,SACVC,YAAY;AAAA,EAAEE,OAAO;AAAA,EAAGC,MAAM;AAAlB,GACZF,QAAQ;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OACJ;AACIT,UAAAA;AAAAA,SACD;AAAA,SACA;AAAA,SACA;AACIU,aAAAA;AAAAA,qCACkBT,aAAa,OAChC,QACC,GAAEA,UAAUE,QAAQF,UAAUG;AAAAA,qCACZJ;AAAAA,qCACAW,cAAcT,KAAD;AAAA;AAAA,SAGnC;AACIQ,aAAAA;AAAAA,wBACM,GAAET,UAAUE,QAAQF,UAAUG;AAAAA;AAAAA,kBAErC,CACA,SACAO,cAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAhC,CAAA,GACbE,cAAcT,KAAD,GACbS,cAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAA,CAAhC,CAJb,EAKAG,KAAK,IALL;AAAA;AAAA;AAAA;AAWA,YAAA,IAAIC,MAAO,mBAAkBb,UAA7B;AAAA;AAEX,CApCU;AAAA;AAwCXc,MAAAA,UAAUC,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIhB;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOe;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,6BACG,wBAAD;AAAA,IAAwB;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAc;AAAA,IAAxD,8BACG,WAAD;AAAA,MAAA,8BAEG,MAAD;AAAA,QAAM;AAAA,QAAkB;AAAA,QAAsB;AAAA,MAAA,CAA9C;AAAA,IAAA,CAFF;AAAA,EAAA,CAFJ;AAQD,CAZyB;;"}

package/dist/Embed.cjs.js

@@ -10,16 +10,15 @@ require("./react-page.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
-require("./image.cjs.js");
-require("./color.cjs.js");
 require("./slot.cjs.js");
+require("./control.cjs.js");
 require("next/dynamic");
 require("@apollo/client");
 require("@apollo/client/link/batch-http");
 require("slate");
 require("./graphql.cjs.js");
-require("./shape.cjs.js");
 require("./text-input.cjs.js");
+require("./combobox.cjs.js");
 require("@emotion/css");
 require("color");
 require("scroll-into-view-if-needed");