@makeswift/runtime 0.2.18 → 0.3.0

package/dist/Carousel.es.js

@@ -17,15 +17,26 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
-import styled, { css } from "styled-components";
-import { motion, useAnimation } from "framer-motion";
+import { useAnimation, motion } from "framer-motion";
 import { useGesture } from "react-use-gesture";
 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 { q as useStyle, r as responsiveStyle, v as colorToString } from "./index.es.js";
 import { u as useMediaQuery } from "./useMediaQuery.es.js";
 import ImageComponent from "./Image.es.js";
+import { cx } from "@emotion/css";
 import { jsxs, jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
@@ -41,7 +52,6 @@ import "slate";
 import "./graphql.es.js";
 import "./text-input.es.js";
 import "./combobox.es.js";
-import "@emotion/css";
 import "color";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";
@@ -58,9 +68,8 @@ import "set-cookie-parser";
 import "uuid/v4";
 import "corporate-ipsum";
 import "next/image";
-import "./useBoxShadow.es.js";
 import "./placeholders.es.js";
-import "./index.es3.js";
+import "./index.es2.js";
 import "next/link";
 const LeftChevron = () => /* @__PURE__ */ jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
@@ -88,222 +97,6 @@ const RightChevron = () => /* @__PURE__ */ jsx("svg", {
     strokeWidth: "2"
   })
 });
-const Container = styled.div`
-  position: relative;
-  height: 100%;
-`;
-const Wrapper = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["margin", "width"].includes(prop)
-})`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  ${cssWidth("400px")}
-  ${cssMargin()}
-
-  &:focus {
-    outline: 0;
-  }
-`;
-const Arrow = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["background"].includes(prop)
-})`
-  padding: 10px;
-  border-radius: 50%;
-  outline: 0;
-  border: 0;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  user-select: none;
-  ${(p) => cssMediaRules([p.background], ([background = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 100
-  },
-  alpha: 1
-}]) => css`
-        background: ${colorToString(background)};
-      `)}
-
-  svg {
-    transition: transform 0.15s;
-    stroke: currentColor;
-  }
-`;
-const Slop = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["color"].includes(prop)
-})`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: ${(props) => props.hidden ? "none" : "flex"};
-  align-items: center;
-  cursor: pointer;
-  z-index: 2;
-  ${(p) => cssMediaRules([p.color], ([color = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => css`
-        color: ${colorToString(color)};
-      `)}
-`;
-const Slide = styled(motion.div).withConfig({
-  shouldForwardProp: (prop) => !["pageSize", "alignItems"].includes(prop)
-})`
-  display: flex;
-  ${(p) => cssMediaRules([p.pageSize], ([pageSize = 1]) => css`
-        flex-basis: ${100 / pageSize}%;
-        max-width: ${100 / pageSize}%;
-        min-width: ${100 / pageSize}%;
-      `)}
-
-  ${(p) => cssMediaRules([p.alignItems], ([alignItems = "center"]) => ({
-  alignItems
-}))}
-`;
-const Reel = styled(motion.div).withConfig({
-  shouldForwardProp: (prop) => !["gap"].includes(prop)
-})`
-  display: flex;
-  position: relative;
-  flex-wrap: nowrap;
-  ${(p) => cssMediaRules([p.gap], ([gap = {
-  value: 0,
-  unit: "px"
-}]) => css`
-        margin: 0 ${`${-gap.value / 2}${gap.unit}`};
-
-        & > ${Slide} {
-          padding: 0 ${`${gap.value / 2}${gap.unit}`};
-        }
-      `)}
-`;
-const Page = styled(motion.div)`
-  position: relative;
-  width: 100%;
-`;
-const LeftSlop = styled(Slop).withConfig({
-  shouldForwardProp: (prop) => !["position"].includes(prop)
-})`
-  ${(p) => cssMediaRules([p.position], ([position = "inside"]) => {
-  switch (position) {
-    case "inside":
-      return css`
-            transform: translateX(8px);
-          `;
-    case "outside":
-      return css`
-            transform: translateX(calc(-100% - 8px));
-          `;
-    default:
-      return css`
-            transform: translateX(calc(-50%));
-          `;
-  }
-})}
-  left: 0;
-
-  &:hover > ${Arrow} {
-    & > svg {
-      transform: translateX(-2px);
-    }
-  }
-`;
-const RightSlop = styled(Slop).withConfig({
-  shouldForwardProp: (prop) => !["position"].includes(prop)
-})`
-  ${(p) => cssMediaRules([p.position], ([position = "inside"]) => {
-  switch (position) {
-    case "inside":
-      return css`
-            transform: translateX(-8px);
-          `;
-    case "outside":
-      return css`
-            transform: translateX(calc(100% + 8px));
-          `;
-    default:
-      return css`
-            transform: translateX(calc(50%));
-          `;
-  }
-})}
-  right: 0;
-
-  &:hover > ${Arrow} {
-    & > svg {
-      transform: translateX(2px);
-    }
-  }
-`;
-const ClipMask = styled.div`
-  overflow: hidden;
-`;
-const Dots = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["color"].includes(prop)
-})`
-  display: ${(props) => props.hidden ? "none" : "flex"};
-  justify-content: center;
-  margin-top: 20px;
-  ${(p) => cssMediaRules([p.color], ([color = {
-  swatch: {
-    hue: 0,
-    saturation: 0,
-    lightness: 0
-  },
-  alpha: 1
-}]) => css`
-        color: ${colorToString(color)};
-      `)}
-`;
-const Dot = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["active"].includes(prop)
-})`
-  position: relative;
-  margin: 0 6px;
-  border-radius: 50%;
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: block;
-    border-radius: 50%;
-    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-
-  &::before {
-    box-shadow: 0 0 0 2px currentColor;
-    transform: translate3d(-50%, -50%, 0);
-    width: ${(props) => props.active ? 16 : 10}px;
-    height: ${(props) => props.active ? 16 : 10}px;
-  }
-
-  &::after {
-    background: currentColor;
-    transform: translate3d(-50%, -50%, 0) scale(${(props) => props.active ? 1 : 0});
-    width: 10px;
-    height: 10px;
-  }
-
-  &:hover::after {
-    transform: translate3d(-50%, -50%, 0) scale(${(props) => props.active ? 1 : 0.5});
-  }
-`;
 const SWIPE_THRESHOLD = 20;
 const swipePower = (dx, velocity) => dx * (1 + velocity);
 const Carousel = forwardRef(function Carousel2({
@@ -391,10 +184,154 @@ const Carousel = forwardRef(function Carousel2({
     const intervalId = setInterval(() => isLastPage ? setIndex(0) : paginate(1), delay * 1e3);
     return () => clearInterval(intervalId);
   }, [autoplay, delay, paginate, isLastPage]);
-  return /* @__PURE__ */ jsxs(Wrapper, {
+  const clipMaskClassName = useStyle({
+    overflow: "hidden"
+  });
+  const pageClassName = useStyle({
+    position: "relative",
+    width: "100%"
+  });
+  const slideClassName = cx(useStyle({
+    display: "flex"
+  }), useStyle(responsiveStyle([responsivePageSize], ([pageSize2 = 1]) => ({
+    flexBasis: `${100 / pageSize2}%`,
+    maxWidth: `${100 / pageSize2}%`,
+    minWidth: `${100 / pageSize2}%`
+  }))), useStyle(responsiveStyle([slideAlignment], ([alignItems = "center"]) => ({
+    alignItems
+  }))));
+  const reelClassName = cx(useStyle({
+    display: "flex",
+    position: "relative",
+    flexWrap: "nowrap"
+  }), useStyle(responsiveStyle([gap], ([gap2 = {
+    value: 0,
+    unit: "px"
+  }]) => ({
+    margin: `0 ${`${-gap2.value / 2}${gap2.unit}`}`,
+    [`& > .${slideClassName}`]: {
+      padding: `0 ${`${gap2.value / 2}${gap2.unit}`}`
+    }
+  }))));
+  const arrowClassName = cx(useStyle({
+    padding: 10,
+    borderRadius: "50%",
+    outline: 0,
+    border: 0,
+    width: 40,
+    height: 40,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    userSelect: "none"
+  }), useStyle(responsiveStyle([arrowBackground], ([background = {
+    swatch: {
+      hue: 0,
+      saturation: 0,
+      lightness: 100
+    },
+    alpha: 1
+  }]) => ({
+    background: colorToString(background)
+  }))), useStyle({
+    svg: {
+      transition: "transform 0.15s",
+      stroke: "currentcolor"
+    }
+  }));
+  const slopClassName = cx(useStyle({
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    display: "flex",
+    "&[hidden]": {
+      display: "none"
+    },
+    alignItems: "center",
+    cursor: "pointer",
+    zIndex: 2
+  }), useStyle(responsiveStyle([arrowColor], ([color = {
+    swatch: {
+      hue: 0,
+      saturation: 0,
+      lightness: 0
+    },
+    alpha: 1
+  }]) => ({
+    color: colorToString(color)
+  }))));
+  const leftSlopClassName = cx(slopClassName, useStyle(responsiveStyle([arrowPosition], ([position = "inside"]) => {
+    switch (position) {
+      case "inside":
+        return {
+          transform: "translateX(8px)"
+        };
+      case "outside":
+        return {
+          transform: "translateX(calc(-100% - 8px))"
+        };
+      default:
+        return {
+          transform: "translateX(calc(-50%))"
+        };
+    }
+  })), useStyle({
+    left: 0,
+    [`&:hover > .${arrowClassName}`]: {
+      "& > svg": {
+        transform: "translateX(-2px)"
+      }
+    }
+  }));
+  const rightSlopClassName = cx(slopClassName, useStyle(responsiveStyle([arrowPosition], ([position = "inside"]) => {
+    switch (position) {
+      case "inside":
+        return {
+          transform: "translateX(-8px)"
+        };
+      case "outside":
+        return {
+          transform: "translateX(calc(100% + 8px))"
+        };
+      default:
+        return {
+          transform: "translateX(calc(50%))"
+        };
+    }
+  })), useStyle({
+    right: 0,
+    [`&:hover > .${arrowClassName}`]: {
+      "& > svg": {
+        transform: "translateX(2px)"
+      }
+    }
+  }));
+  const dotsClassName = cx(useStyle({
+    display: showDots ? "flex" : "none",
+    justifyContent: "center",
+    marginTop: 20
+  }), useStyle(responsiveStyle([dotColor], ([color = {
+    swatch: {
+      hue: 0,
+      saturation: 0,
+      lightness: 0
+    },
+    alpha: 1
+  }]) => ({
+    color: colorToString(color)
+  }))));
+  return /* @__PURE__ */ jsxs("div", {
     ref,
-    width,
-    margin,
+    className: cx(useStyle({
+      position: "relative",
+      display: "flex",
+      flexDirection: "column"
+    }), width, margin, useStyle({
+      "&:focus": {
+        outline: 0
+      }
+    })),
     tabIndex: -1,
     onKeyDown: (e) => {
       switch (e.key) {
@@ -406,12 +343,18 @@ const Carousel = forwardRef(function Carousel2({
           break;
       }
     },
-    children: [/* @__PURE__ */ jsxs(Container, {
-      children: [/* @__PURE__ */ jsx(ClipMask, {
-        children: /* @__PURE__ */ jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: useStyle({
+        position: "relative",
+        height: "100%"
+      }),
+      children: [/* @__PURE__ */ jsx("div", {
+        className: clipMaskClassName,
+        children: /* @__PURE__ */ jsx(motion.div, __spreadProps(__spreadValues({}, bindPage()), {
+          className: pageClassName,
           animate: animation,
-          children: /* @__PURE__ */ jsx(Reel, {
-            gap,
+          children: /* @__PURE__ */ jsx(motion.div, {
+            className: reelClassName,
             animate: {
               x: `${-(100 / pageSize) * startIndex}%`
             },
@@ -425,10 +368,9 @@ const Carousel = forwardRef(function Carousel2({
             children: images.map(({
               props: imageProps,
               key
-            }) => /* @__PURE__ */ jsx(Slide, {
+            }) => /* @__PURE__ */ jsx(motion.div, {
               id: key,
-              pageSize: responsivePageSize,
-              alignItems: slideAlignment,
+              className: slideClassName,
               onMouseDown: (e) => e.preventDefault(),
               onClick: (e) => {
                 if (swipe.current !== 0)
@@ -451,28 +393,25 @@ const Carousel = forwardRef(function Carousel2({
             }, key))
           })
         }))
-      }), /* @__PURE__ */ jsx(LeftSlop, {
+      }), /* @__PURE__ */ jsx("div", {
         onClick: () => paginate(-1),
-        position: arrowPosition,
-        color: arrowColor,
+        className: leftSlopClassName,
         hidden: !showArrows || isFirstPage,
-        children: /* @__PURE__ */ jsx(Arrow, {
-          background: arrowBackground,
+        children: /* @__PURE__ */ jsx("div", {
+          className: arrowClassName,
           children: /* @__PURE__ */ jsx(LeftChevron, {})
         })
-      }), /* @__PURE__ */ jsx(RightSlop, {
+      }), /* @__PURE__ */ jsx("div", {
         onClick: () => paginate(1),
-        position: arrowPosition,
-        color: arrowColor,
+        className: rightSlopClassName,
         hidden: !showArrows || isLastPage,
-        children: /* @__PURE__ */ jsx(Arrow, {
-          background: arrowBackground,
+        children: /* @__PURE__ */ jsx("div", {
+          className: arrowClassName,
           children: /* @__PURE__ */ jsx(RightChevron, {})
         })
       })]
-    }), /* @__PURE__ */ jsx(Dots, {
-      color: dotColor,
-      hidden: !showDots,
+    }), /* @__PURE__ */ jsx("div", {
+      className: dotsClassName,
       children: Array.from({
         length: pageCount
       }).map((_, i) => /* @__PURE__ */ jsx(Dot, {
@@ -482,5 +421,48 @@ const Carousel = forwardRef(function Carousel2({
     })]
   });
 });
+function Dot(_a) {
+  var _b = _a, {
+    className,
+    active
+  } = _b, restOfProps = __objRest(_b, [
+    "className",
+    "active"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      position: "relative",
+      margin: "0 6px",
+      borderRadius: "50%",
+      cursor: "pointer",
+      width: 16,
+      height: 16,
+      "&::before, &::after": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        display: "block",
+        borderRadius: "50%",
+        transition: "all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+      },
+      "&::before": {
+        boxShadow: "0 0 0 2px currentColor",
+        transform: "translate3d(-50%, -50%, 0)",
+        width: active ? 16 : 10,
+        height: active ? 16 : 10
+      },
+      "&::after": {
+        background: "currentColor",
+        transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,
+        width: 10,
+        height: 10
+      },
+      "&:hover::after": {
+        transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`
+      }
+    }), className)
+  }));
+}
 export { Carousel as default };
 //# sourceMappingURL=Carousel.es.js.map

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