@cntrl-site/sdk 1.24.5 → 1.25.0

package/dist/index.js

@@ -1,2737 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fetch$1 = require("isomorphic-fetch");
-const url = require("url");
-const zod = require("zod");
-const UAParser = require("ua-parser-js");
-const MP4Box = require("mp4box");
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const reactSplide = require("@splidejs/react-splide");
-const cn = require("classnames");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const MP4Box__namespace = /* @__PURE__ */ _interopNamespaceDefault(MP4Box);
-var SectionHeightMode = /* @__PURE__ */ ((SectionHeightMode2) => {
-  SectionHeightMode2["ControlUnits"] = "control-units";
-  SectionHeightMode2["ViewportHeightUnits"] = "viewport-height-units";
-  return SectionHeightMode2;
-})(SectionHeightMode || {});
-const ColorPointSchema = zod.z.object({
-  id: zod.z.string(),
-  value: zod.z.string(),
-  position: zod.z.number()
-});
-const FillLayerSchema = zod.z.discriminatedUnion("type", [
-  zod.z.object({
-    id: zod.z.string(),
-    type: zod.z.literal("solid"),
-    value: zod.z.string(),
-    blendMode: zod.z.string()
-  }),
-  zod.z.object({
-    id: zod.z.string(),
-    type: zod.z.literal("linear-gradient"),
-    colors: zod.z.array(ColorPointSchema),
-    start: zod.z.tuple([zod.z.number(), zod.z.number()]),
-    end: zod.z.tuple([zod.z.number(), zod.z.number()]),
-    angle: zod.z.number(),
-    blendMode: zod.z.string()
-  }),
-  zod.z.object({
-    id: zod.z.string(),
-    type: zod.z.literal("radial-gradient"),
-    colors: zod.z.array(ColorPointSchema),
-    center: zod.z.tuple([zod.z.number(), zod.z.number()]),
-    diameter: zod.z.number(),
-    angle: zod.z.number(),
-    blendMode: zod.z.string()
-  }),
-  zod.z.object({
-    id: zod.z.string(),
-    type: zod.z.literal("conic-gradient"),
-    colors: zod.z.array(ColorPointSchema),
-    center: zod.z.tuple([zod.z.number(), zod.z.number()]),
-    angle: zod.z.number(),
-    blendMode: zod.z.string()
-  }),
-  zod.z.object({
-    id: zod.z.string(),
-    type: zod.z.literal("image"),
-    src: zod.z.string(),
-    behavior: zod.z.string(),
-    backgroundSize: zod.z.number(),
-    opacity: zod.z.number(),
-    blendMode: zod.z.string(),
-    rotation: zod.z.number().optional()
-  })
-]);
-const TransitionSchema = zod.z.object({
-  timing: zod.z.string(),
-  duration: zod.z.number(),
-  delay: zod.z.number()
-});
-const getStateParamsSchema = (schema) => {
-  return zod.z.object({
-    value: schema,
-    in: TransitionSchema,
-    out: TransitionSchema
-  }).optional();
-};
-const ItemStateBaseSchema = zod.z.object({
-  width: getStateParamsSchema(zod.z.number()),
-  height: getStateParamsSchema(zod.z.number()),
-  angle: getStateParamsSchema(zod.z.number()),
-  top: getStateParamsSchema(zod.z.number()),
-  left: getStateParamsSchema(zod.z.number()),
-  scale: getStateParamsSchema(zod.z.number()),
-  blur: getStateParamsSchema(zod.z.number())
-});
-const MediaStateParamsSchema = zod.z.object({
-  opacity: getStateParamsSchema(zod.z.number()),
-  radius: getStateParamsSchema(zod.z.number()),
-  strokeWidth: getStateParamsSchema(zod.z.number()),
-  strokeFill: getStateParamsSchema(zod.z.array(FillLayerSchema))
-}).merge(ItemStateBaseSchema);
-const RectangleStateParamsSchema = zod.z.object({
-  strokeWidth: getStateParamsSchema(zod.z.number()),
-  radius: getStateParamsSchema(zod.z.number()),
-  fill: getStateParamsSchema(zod.z.array(FillLayerSchema)),
-  strokeFill: getStateParamsSchema(zod.z.array(FillLayerSchema)),
-  backdropBlur: getStateParamsSchema(zod.z.number())
-}).merge(ItemStateBaseSchema);
-const CustomItemStateParamsSchema = ItemStateBaseSchema;
-const EmbedStateParamsSchema = zod.z.object({
-  radius: getStateParamsSchema(zod.z.number()),
-  opacity: getStateParamsSchema(zod.z.number().nonnegative())
-}).merge(ItemStateBaseSchema);
-const RichTextStateParamsSchema = zod.z.object({
-  color: getStateParamsSchema(zod.z.string()),
-  letterSpacing: getStateParamsSchema(zod.z.number()),
-  wordSpacing: getStateParamsSchema(zod.z.number())
-}).merge(ItemStateBaseSchema);
-const GroupStateParamsSchema = zod.z.object({
-  opacity: getStateParamsSchema(zod.z.number().nonnegative()),
-  blur: getStateParamsSchema(zod.z.number().nonnegative())
-}).merge(ItemStateBaseSchema);
-const CompoundStateParamsSchema = zod.z.object({
-  opacity: getStateParamsSchema(zod.z.number().nonnegative())
-}).merge(ItemStateBaseSchema);
-const CodeEmbedStateParamsSchema = zod.z.object({
-  opacity: getStateParamsSchema(zod.z.number().nonnegative())
-}).merge(ItemStateBaseSchema);
-const ComponentStateParamsSchema = zod.z.object({
-  opacity: getStateParamsSchema(zod.z.number().nonnegative())
-}).merge(ItemStateBaseSchema);
-zod.z.union([
-  EmbedStateParamsSchema,
-  MediaStateParamsSchema,
-  RectangleStateParamsSchema,
-  RichTextStateParamsSchema,
-  CustomItemStateParamsSchema,
-  GroupStateParamsSchema,
-  CompoundStateParamsSchema,
-  CodeEmbedStateParamsSchema,
-  ComponentStateParamsSchema
-]);
-var TextAlign = /* @__PURE__ */ ((TextAlign2) => {
-  TextAlign2["Left"] = "left";
-  TextAlign2["Right"] = "right";
-  TextAlign2["Center"] = "center";
-  TextAlign2["Justify"] = "justify";
-  return TextAlign2;
-})(TextAlign || {});
-var TextTransform = /* @__PURE__ */ ((TextTransform2) => {
-  TextTransform2["None"] = "none";
-  TextTransform2["Uppercase"] = "uppercase";
-  TextTransform2["Lowercase"] = "lowercase";
-  return TextTransform2;
-})(TextTransform || {});
-var VerticalAlign = /* @__PURE__ */ ((VerticalAlign2) => {
-  VerticalAlign2["Super"] = "super";
-  VerticalAlign2["Sub"] = "sub";
-  VerticalAlign2["Unset"] = "unset";
-  return VerticalAlign2;
-})(VerticalAlign || {});
-var TextDecoration = /* @__PURE__ */ ((TextDecoration2) => {
-  TextDecoration2["Underline"] = "underline";
-  TextDecoration2["None"] = "none";
-  return TextDecoration2;
-})(TextDecoration || {});
-var AnchorSide = /* @__PURE__ */ ((AnchorSide2) => {
-  AnchorSide2["Top"] = "top";
-  AnchorSide2["Bottom"] = "bottom";
-  AnchorSide2["Center"] = "center";
-  return AnchorSide2;
-})(AnchorSide || {});
-var PositionType = /* @__PURE__ */ ((PositionType2) => {
-  PositionType2["SectionBased"] = "section-based";
-  PositionType2["ScreenBased"] = "screen-based";
-  return PositionType2;
-})(PositionType || {});
-var AreaAnchor = /* @__PURE__ */ ((AreaAnchor2) => {
-  AreaAnchor2["TopLeft"] = "top-left";
-  AreaAnchor2["TopCenter"] = "top-center";
-  AreaAnchor2["TopRight"] = "top-right";
-  AreaAnchor2["MiddleLeft"] = "middle-left";
-  AreaAnchor2["MiddleCenter"] = "middle-center";
-  AreaAnchor2["MiddleRight"] = "middle-right";
-  AreaAnchor2["BottomLeft"] = "bottom-left";
-  AreaAnchor2["BottomCenter"] = "bottom-center";
-  AreaAnchor2["BottomRight"] = "bottom-right";
-  return AreaAnchor2;
-})(AreaAnchor || {});
-var DimensionMode = /* @__PURE__ */ ((DimensionMode2) => {
-  DimensionMode2["ControlUnits"] = "control-units";
-  DimensionMode2["Relative"] = "relative";
-  return DimensionMode2;
-})(DimensionMode || {});
-const ItemAreaSchema = zod.z.object({
-  top: zod.z.number(),
-  left: zod.z.number(),
-  width: zod.z.number(),
-  height: zod.z.number(),
-  zIndex: zod.z.number(),
-  angle: zod.z.number(),
-  anchorSide: zod.z.nativeEnum(AnchorSide).optional(),
-  scale: zod.z.number().nonnegative(),
-  positionType: zod.z.nativeEnum(PositionType),
-  scaleAnchor: zod.z.nativeEnum(AreaAnchor)
-});
-const Link = zod.z.object({
-  url: zod.z.string().min(1),
-  target: zod.z.string().min(1)
-});
-const CompoundSettingsSchema = zod.z.object({
-  positionAnchor: zod.z.nativeEnum(AreaAnchor),
-  widthMode: zod.z.nativeEnum(DimensionMode),
-  heightMode: zod.z.nativeEnum(DimensionMode)
-});
-const ItemBaseSchema = zod.z.object({
-  id: zod.z.string().min(1),
-  area: zod.z.record(ItemAreaSchema),
-  hidden: zod.z.record(zod.z.boolean()),
-  link: Link.optional(),
-  compoundSettings: zod.z.record(CompoundSettingsSchema).optional(),
-  layoutParams: zod.z.record(zod.z.any()).optional()
-});
-var ArticleItemType = /* @__PURE__ */ ((ArticleItemType2) => {
-  ArticleItemType2["Image"] = "image";
-  ArticleItemType2["RichText"] = "richtext";
-  ArticleItemType2["Video"] = "video";
-  ArticleItemType2["Rectangle"] = "rectangle";
-  ArticleItemType2["VimeoEmbed"] = "vimeo-embed";
-  ArticleItemType2["YoutubeEmbed"] = "youtube-embed";
-  ArticleItemType2["Custom"] = "custom";
-  ArticleItemType2["Group"] = "group";
-  ArticleItemType2["CodeEmbed"] = "code-embed";
-  ArticleItemType2["Compound"] = "compound";
-  ArticleItemType2["Component"] = "component";
-  return ArticleItemType2;
-})(ArticleItemType || {});
-const pointerEvents$1 = zod.z.enum(["never", "when_visible", "always"]).optional();
-const RichTextEntitySchema = zod.z.object({
-  start: zod.z.number().nonnegative(),
-  end: zod.z.number().nonnegative(),
-  type: zod.z.string(),
-  data: zod.z.any().optional()
-});
-const RichTextStyleSchema = zod.z.object({
-  start: zod.z.number().nonnegative(),
-  end: zod.z.number().nonnegative(),
-  style: zod.z.string().min(1),
-  value: zod.z.string().optional()
-});
-const RichTextBlockSchema = zod.z.lazy(() => zod.z.object({
-  start: zod.z.number().nonnegative(),
-  end: zod.z.number().nonnegative(),
-  type: zod.z.string().min(1),
-  entities: zod.z.array(RichTextEntitySchema).optional(),
-  children: zod.z.array(RichTextBlockSchema).optional(),
-  data: zod.z.any().optional()
-}));
-const RichTextItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.RichText),
-  commonParams: zod.z.object({
-    text: zod.z.string(),
-    blocks: zod.z.array(RichTextBlockSchema).optional(),
-    pointerEvents: pointerEvents$1
-  }),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(
-    zod.z.object({
-      rangeStyles: zod.z.array(RichTextStyleSchema).optional(),
-      textAlign: zod.z.nativeEnum(TextAlign),
-      sizing: zod.z.string(),
-      blur: zod.z.number(),
-      fontSize: zod.z.number(),
-      lineHeight: zod.z.number(),
-      letterSpacing: zod.z.number(),
-      wordSpacing: zod.z.number(),
-      textTransform: zod.z.nativeEnum(TextTransform),
-      verticalAlign: zod.z.nativeEnum(VerticalAlign),
-      color: zod.z.string(),
-      typeFace: zod.z.string(),
-      fontStyle: zod.z.string(),
-      fontWeight: zod.z.number(),
-      fontVariant: zod.z.string(),
-      isDraggable: zod.z.boolean().optional()
-    })
-  ),
-  state: zod.z.record(RichTextStateParamsSchema)
-});
-const pointerEvents = zod.z.enum(["never", "when_visible", "always"]).optional();
-const FXControlSchema = zod.z.discriminatedUnion("type", [
-  zod.z.object({
-    type: zod.z.literal("float"),
-    shaderParam: zod.z.string(),
-    value: zod.z.number()
-  }),
-  zod.z.object({
-    type: zod.z.literal("int"),
-    shaderParam: zod.z.string(),
-    value: zod.z.number()
-  }),
-  zod.z.object({
-    type: zod.z.literal("vec2"),
-    shaderParam: zod.z.string(),
-    value: zod.z.tuple([zod.z.number(), zod.z.number()])
-  })
-]);
-const FXParams = zod.z.object({
-  url: zod.z.string().min(1),
-  hasGLEffect: zod.z.boolean().optional(),
-  fragmentShader: zod.z.string().nullable(),
-  FXControls: zod.z.array(FXControlSchema).optional()
-});
-const ImageItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.Image),
-  commonParams: zod.z.object({
-    pointerEvents
-  }).merge(FXParams),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(
-    zod.z.object({
-      opacity: zod.z.number().nonnegative(),
-      radius: zod.z.number(),
-      strokeWidth: zod.z.number(),
-      strokeFill: zod.z.array(FillLayerSchema),
-      blur: zod.z.number(),
-      isDraggable: zod.z.boolean().optional()
-    })
-  ),
-  state: zod.z.record(MediaStateParamsSchema)
-});
-const VideoItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.Video),
-  commonParams: zod.z.object({
-    coverUrl: zod.z.string().nullable(),
-    pointerEvents
-  }).merge(FXParams),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(
-    zod.z.object({
-      scrollPlayback: zod.z.object({
-        from: zod.z.number(),
-        to: zod.z.number()
-      }).nullable(),
-      opacity: zod.z.number().nonnegative(),
-      radius: zod.z.number(),
-      strokeWidth: zod.z.number(),
-      strokeFill: zod.z.array(FillLayerSchema),
-      blur: zod.z.number(),
-      isDraggable: zod.z.boolean().optional(),
-      play: zod.z.enum(["on-hover", "on-click", "auto"]),
-      muted: zod.z.boolean(),
-      controls: zod.z.boolean()
-    })
-  ),
-  state: zod.z.record(MediaStateParamsSchema)
-});
-const RectangleItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.Rectangle),
-  commonParams: zod.z.object({
-    ratioLock: zod.z.boolean(),
-    pointerEvents
-  }),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(
-    zod.z.object({
-      radius: zod.z.number(),
-      strokeWidth: zod.z.number(),
-      fill: zod.z.array(FillLayerSchema),
-      strokeFill: zod.z.array(FillLayerSchema),
-      blur: zod.z.number(),
-      backdropBlur: zod.z.number(),
-      blurMode: zod.z.enum(["default", "backdrop"]),
-      isDraggable: zod.z.boolean().optional()
-    })
-  ),
-  state: zod.z.record(RectangleStateParamsSchema)
-});
-const CustomItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.Custom),
-  commonParams: zod.z.object({
-    name: zod.z.string(),
-    pointerEvents
-  }),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(zod.z.object({
-    isDraggable: zod.z.boolean().optional()
-  })),
-  state: zod.z.record(CustomItemStateParamsSchema)
-});
-const VimeoEmbedItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.VimeoEmbed),
-  commonParams: zod.z.object({
-    url: zod.z.string().min(1),
-    coverUrl: zod.z.string().nullable(),
-    ratioLock: zod.z.boolean(),
-    pointerEvents
-  }),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(
-    zod.z.object({
-      radius: zod.z.number(),
-      blur: zod.z.number(),
-      opacity: zod.z.number().nonnegative(),
-      play: zod.z.union([zod.z.literal("on-hover"), zod.z.literal("on-click"), zod.z.literal("auto")]),
-      controls: zod.z.boolean(),
-      loop: zod.z.boolean(),
-      muted: zod.z.boolean(),
-      pictureInPicture: zod.z.boolean()
-    })
-  ),
-  state: zod.z.record(EmbedStateParamsSchema)
-});
-const YoutubeEmbedItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.YoutubeEmbed),
-  commonParams: zod.z.object({
-    url: zod.z.string().min(1),
-    coverUrl: zod.z.string().nullable(),
-    pointerEvents
-  }),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(
-    zod.z.object({
-      radius: zod.z.number(),
-      blur: zod.z.number(),
-      opacity: zod.z.number().nonnegative(),
-      play: zod.z.enum(["on-hover", "on-click", "auto"]),
-      controls: zod.z.boolean(),
-      loop: zod.z.boolean()
-    })
-  ),
-  state: zod.z.record(EmbedStateParamsSchema)
-});
-const CodeEmbedItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.CodeEmbed),
-  commonParams: zod.z.object({
-    html: zod.z.string(),
-    scale: zod.z.boolean(),
-    iframe: zod.z.boolean(),
-    pointerEvents
-  }),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(
-    zod.z.object({
-      areaAnchor: zod.z.nativeEnum(AreaAnchor),
-      opacity: zod.z.number().nonnegative(),
-      blur: zod.z.number(),
-      isDraggable: zod.z.boolean().optional()
-    })
-  ),
-  state: zod.z.record(CodeEmbedStateParamsSchema)
-});
-const ComponentItemSchema = ItemBaseSchema.extend({
-  type: zod.z.literal(ArticleItemType.Component),
-  commonParams: zod.z.object({
-    componentId: zod.z.string(),
-    content: zod.z.any().optional()
-  }),
-  sticky: zod.z.record(
-    zod.z.object({
-      from: zod.z.number(),
-      to: zod.z.number().optional()
-    }).nullable()
-  ),
-  layoutParams: zod.z.record(zod.z.object({
-    parameters: zod.z.any().optional(),
-    opacity: zod.z.number().nonnegative(),
-    blur: zod.z.number()
-  })),
-  state: zod.z.record(ComponentStateParamsSchema)
-});
-const ItemSchema = zod.z.lazy(() => zod.z.discriminatedUnion("type", [
-  ImageItemSchema,
-  VideoItemSchema,
-  RectangleItemSchema,
-  CustomItemSchema,
-  RichTextItemSchema,
-  VimeoEmbedItemSchema,
-  YoutubeEmbedItemSchema,
-  CodeEmbedItemSchema,
-  ComponentItemSchema,
-  ItemBaseSchema.extend({
-    type: zod.z.literal(ArticleItemType.Group),
-    commonParams: zod.z.object({
-      pointerEvents
-    }),
-    items: zod.z.array(ItemSchema),
-    sticky: zod.z.record(
-      zod.z.object({
-        from: zod.z.number(),
-        to: zod.z.number().optional()
-      }).nullable()
-    ),
-    layoutParams: zod.z.record(
-      zod.z.object({
-        opacity: zod.z.number().nonnegative(),
-        blur: zod.z.number()
-      })
-    ),
-    state: zod.z.record(GroupStateParamsSchema)
-  }),
-  ItemBaseSchema.extend({
-    type: zod.z.literal(ArticleItemType.Compound),
-    commonParams: zod.z.object({
-      overflow: zod.z.enum(["hidden", "visible"]),
-      pointerEvents
-    }),
-    items: zod.z.array(ItemSchema),
-    sticky: zod.z.record(
-      zod.z.object({
-        from: zod.z.number(),
-        to: zod.z.number().optional()
-      }).nullable()
-    ),
-    layoutParams: zod.z.record(
-      zod.z.object({
-        opacity: zod.z.number().nonnegative()
-      })
-    ),
-    state: zod.z.record(CompoundStateParamsSchema)
-  })
-]));
-const SectionHeightSchema = zod.z.object({
-  mode: zod.z.nativeEnum(SectionHeightMode),
-  units: zod.z.number().nonnegative(),
-  vhUnits: zod.z.number().nonnegative().optional()
-});
-const SectionVideoSchema = zod.z.object({
-  url: zod.z.string(),
-  size: zod.z.string(),
-  type: zod.z.literal("video"),
-  play: zod.z.enum(["on-click", "auto"]),
-  coverUrl: zod.z.string().nullable(),
-  position: zod.z.string(),
-  offsetX: zod.z.number().nullable()
-});
-const SectionImageSchema = zod.z.object({
-  url: zod.z.string(),
-  type: zod.z.literal("image"),
-  size: zod.z.string(),
-  position: zod.z.string(),
-  offsetX: zod.z.number().nullable()
-});
-const SectionMediaSchema = zod.z.discriminatedUnion("type", [SectionVideoSchema, SectionImageSchema]);
-const SectionSchema = zod.z.object({
-  id: zod.z.string().min(1),
-  items: zod.z.array(ItemSchema),
-  name: zod.z.string().optional(),
-  height: zod.z.record(SectionHeightSchema),
-  position: zod.z.record(zod.z.number()),
-  hidden: zod.z.record(zod.z.boolean()),
-  color: zod.z.record(zod.z.nullable(zod.z.string())),
-  media: zod.z.record(SectionMediaSchema).optional()
-});
-const ItemTriggerSchema = zod.z.object({
-  itemId: zod.z.string(),
-  type: zod.z.enum(["hover-in", "hover-out", "click"]),
-  from: zod.z.string(),
-  to: zod.z.string()
-});
-const ScrollTriggerSchema = zod.z.object({
-  position: zod.z.number(),
-  from: zod.z.string(),
-  to: zod.z.string(),
-  isReverse: zod.z.boolean()
-});
-const VideoInteractionActionSchema = zod.z.object({
-  type: zod.z.enum(["play", "pause"]),
-  itemId: zod.z.string()
-});
-const StateSchema = zod.z.object({
-  id: zod.z.string(),
-  actions: zod.z.array(VideoInteractionActionSchema).optional()
-});
-const InteractionSchema = zod.z.object({
-  id: zod.z.string(),
-  triggers: zod.z.array(zod.z.union([ItemTriggerSchema, ScrollTriggerSchema])),
-  states: zod.z.array(StateSchema),
-  startStateId: zod.z.string()
-});
-const ArticleSchema = zod.z.object({
-  id: zod.z.string().min(1),
-  sections: zod.z.array(SectionSchema),
-  interactions: zod.z.record(zod.z.array(InteractionSchema))
-});
-const LayoutSchema = zod.z.object({
-  id: zod.z.string(),
-  title: zod.z.string(),
-  startsWith: zod.z.number().nonnegative(),
-  exemplary: zod.z.number().positive()
-});
-var FontFileTypes = /* @__PURE__ */ ((FontFileTypes2) => {
-  FontFileTypes2["OTF"] = "otf";
-  FontFileTypes2["TTF"] = "ttf";
-  FontFileTypes2["WOFF"] = "woff";
-  FontFileTypes2["WOFF2"] = "woff2";
-  FontFileTypes2["EOT"] = "eot";
-  return FontFileTypes2;
-})(FontFileTypes || {});
-const ProjectSchema = zod.z.object({
-  id: zod.z.string().min(1),
-  html: zod.z.object({
-    head: zod.z.string(),
-    afterBodyOpen: zod.z.string(),
-    beforeBodyClose: zod.z.string()
-  }),
-  meta: zod.z.object({
-    title: zod.z.string().optional(),
-    description: zod.z.string().optional(),
-    opengraphThumbnail: zod.z.string().optional(),
-    keywords: zod.z.string().optional(),
-    favicon: zod.z.string().optional()
-  }),
-  layouts: zod.z.array(LayoutSchema),
-  pages: zod.z.array(zod.z.object({
-    title: zod.z.string(),
-    articleId: zod.z.string().min(1),
-    slug: zod.z.string(),
-    meta: zod.z.object({
-      title: zod.z.string().optional(),
-      description: zod.z.string().optional(),
-      opengraphThumbnail: zod.z.string().optional(),
-      keywords: zod.z.string().optional(),
-      enabled: zod.z.boolean()
-    }).optional(),
-    id: zod.z.string().min(1)
-  })),
-  fonts: zod.z.object({
-    google: zod.z.string(),
-    adobe: zod.z.string(),
-    custom: zod.z.array(zod.z.object({
-      name: zod.z.string().min(1),
-      style: zod.z.string().min(1),
-      weight: zod.z.number(),
-      files: zod.z.array(
-        zod.z.object({
-          type: zod.z.nativeEnum(FontFileTypes),
-          url: zod.z.string()
-        })
-      )
-    }))
-  })
-});
-var KeyframeType = /* @__PURE__ */ ((KeyframeType2) => {
-  KeyframeType2["Dimensions"] = "dimensions";
-  KeyframeType2["Position"] = "position";
-  KeyframeType2["Rotation"] = "rotation";
-  KeyframeType2["BorderRadius"] = "border-radius";
-  KeyframeType2["BorderWidth"] = "border-width";
-  KeyframeType2["Opacity"] = "opacity";
-  KeyframeType2["Scale"] = "scale";
-  KeyframeType2["TextColor"] = "text-color";
-  KeyframeType2["LetterSpacing"] = "letter-spacing";
-  KeyframeType2["WordSpacing"] = "word-spacing";
-  KeyframeType2["Blur"] = "blur";
-  KeyframeType2["BackdropBlur"] = "backdrop-blur";
-  KeyframeType2["FXParams"] = "fx-params";
-  KeyframeType2["BorderFill"] = "border-fill";
-  KeyframeType2["Fill"] = "fill";
-  return KeyframeType2;
-})(KeyframeType || {});
-const KeyframesBaseSchema = zod.z.object({
-  id: zod.z.string().min(1),
-  layoutId: zod.z.string().min(1),
-  itemId: zod.z.string().min(1),
-  position: zod.z.number()
-});
-const DimensionsKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.Dimensions),
-  value: zod.z.object({
-    width: zod.z.number().nonnegative(),
-    height: zod.z.number().nonnegative()
-  })
-});
-const PositionKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.Position),
-  value: zod.z.object({
-    top: zod.z.number(),
-    left: zod.z.number()
-  })
-});
-const RotationKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.Rotation),
-  value: zod.z.object({
-    angle: zod.z.number()
-  })
-});
-const BorderRadiusKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.BorderRadius),
-  value: zod.z.object({
-    radius: zod.z.number().nonnegative()
-  })
-});
-const BorderWidthKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.BorderWidth),
-  value: zod.z.object({
-    borderWidth: zod.z.number().nonnegative()
-  })
-});
-const BorderFillKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.BorderFill),
-  value: zod.z.array(FillLayerSchema)
-});
-const OpacityKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.Opacity),
-  value: zod.z.object({
-    opacity: zod.z.number().nonnegative()
-  })
-});
-const ScaleKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.Scale),
-  value: zod.z.object({
-    scale: zod.z.number().nonnegative()
-  })
-});
-const BlurKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.Blur),
-  value: zod.z.object({
-    blur: zod.z.number()
-  })
-});
-const BackdropBlurKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.BackdropBlur),
-  value: zod.z.object({
-    backdropBlur: zod.z.number()
-  })
-});
-const TextColorKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.TextColor),
-  value: zod.z.object({
-    color: zod.z.string()
-  })
-});
-const LetterSpacingKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.LetterSpacing),
-  value: zod.z.object({
-    letterSpacing: zod.z.number()
-  })
-});
-const WordSpacingKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.WordSpacing),
-  value: zod.z.object({
-    wordSpacing: zod.z.number()
-  })
-});
-const FXParamsKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.FXParams),
-  value: zod.z.record(zod.z.string(), zod.z.number())
-});
-const FillKeyframeSchema = KeyframesBaseSchema.extend({
-  type: zod.z.literal(KeyframeType.Fill),
-  value: zod.z.array(FillLayerSchema)
-});
-const KeyframeSchema = zod.z.discriminatedUnion("type", [
-  DimensionsKeyframeSchema,
-  PositionKeyframeSchema,
-  RotationKeyframeSchema,
-  BorderRadiusKeyframeSchema,
-  BorderWidthKeyframeSchema,
-  BorderFillKeyframeSchema,
-  OpacityKeyframeSchema,
-  ScaleKeyframeSchema,
-  BlurKeyframeSchema,
-  BackdropBlurKeyframeSchema,
-  TextColorKeyframeSchema,
-  LetterSpacingKeyframeSchema,
-  WordSpacingKeyframeSchema,
-  FXParamsKeyframeSchema,
-  FillKeyframeSchema
-]);
-const KeyframesSchema = zod.z.array(KeyframeSchema);
-class Client {
-  constructor(APIUrl, fetchImpl = fetch$1) {
-    this.fetchImpl = fetchImpl;
-    this.url = new url.URL(APIUrl);
-    if (!this.url.username) {
-      throw new Error("Project ID is missing in the URL.");
-    }
-    if (!this.url.password) {
-      throw new Error("API key is missing in the URL.");
-    }
-  }
-  static getPageMeta(projectMeta, pageMeta) {
-    return pageMeta.enabled ? {
-      title: pageMeta.title ? pageMeta.title : projectMeta.title ?? "",
-      description: pageMeta.description ? pageMeta.description : projectMeta.description ?? "",
-      keywords: pageMeta.keywords ? pageMeta.keywords : projectMeta.keywords ?? "",
-      opengraphThumbnail: pageMeta.opengraphThumbnail ? pageMeta.opengraphThumbnail : projectMeta.opengraphThumbnail ?? "",
-      favicon: projectMeta.favicon ?? ""
-    } : projectMeta;
-  }
-  async getPageData(pageSlug, buildMode = "default") {
-    try {
-      const project = await this.fetchProject(buildMode);
-      const articleId = this.findArticleIdByPageSlug(pageSlug, project.pages);
-      const { article, keyframes } = await this.fetchArticle(articleId, buildMode);
-      const page = project.pages.find((page2) => page2.slug === pageSlug);
-      const meta = Client.getPageMeta(project.meta, page == null ? void 0 : page.meta);
-      return {
-        project,
-        article,
-        keyframes,
-        meta
-      };
-    } catch (e) {
-      throw e;
-    }
-  }
-  async getProjectPagesPaths() {
-    try {
-      const { pages } = await this.fetchProject();
-      return pages.map((p) => p.slug);
-    } catch (e) {
-      throw e;
-    }
-  }
-  async getLayouts() {
-    try {
-      const { layouts } = await this.fetchProject();
-      return layouts;
-    } catch (e) {
-      throw e;
-    }
-  }
-  async fetchProject(buildMode = "default") {
-    const { username: projectId, password: apiKey, origin } = this.url;
-    const url$1 = new url.URL(`/projects/${projectId}?buildMode=${buildMode}`, origin);
-    const response = await this.fetchImpl(url$1.href, {
-      headers: {
-        Authorization: `Bearer ${apiKey}`
-      }
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to fetch project with id #${projectId}: ${response.statusText}`);
-    }
-    const data = await response.json();
-    const project = ProjectSchema.parse(data);
-    return project;
-  }
-  async fetchArticle(articleId, buildMode = "default") {
-    const { username: projectId, password: apiKey, origin } = this.url;
-    const url$1 = new url.URL(`/projects/${projectId}/articles/${articleId}?buildMode=${buildMode}`, origin);
-    const response = await this.fetchImpl(url$1.href, {
-      headers: {
-        Authorization: `Bearer ${apiKey}`
-      }
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to fetch article with id #${articleId}: ${response.statusText}`);
-    }
-    const data = await response.json();
-    const article = ArticleSchema.parse(data.article);
-    const keyframes = KeyframesSchema.parse(data.keyframes);
-    return { article, keyframes };
-  }
-  findArticleIdByPageSlug(slug, pages) {
-    const { username: projectId } = this.url;
-    const page = pages.find((page2) => page2.slug === slug);
-    if (!page) {
-      throw new Error(`Page with a slug ${slug} was not found in project with id #${projectId}`);
-    }
-    return page.articleId;
-  }
-}
-const FILE_TYPES_MAP = {
-  ttf: "truetype",
-  otf: "opentype"
-};
-class FontFaceGenerator {
-  constructor(fonts) {
-    this.fonts = fonts;
-  }
-  generate() {
-    return this.fonts.map((font) => {
-      const eotFile = font.files.find((file) => file.type === "eot");
-      const otherFiles = font.files.filter((file) => file.type !== "eot").map((file) => `url('${file.url}') format('${FILE_TYPES_MAP[file.type] || file.type}')`);
-      return `
-@font-face {
-  font-family: "${font.name}";
-  font-weight: ${font.weight};
-  font-style: ${font.style};
-  ${eotFile ? `src: url('${eotFile.url}');
-  ` : ""}src: ${otherFiles.join(", ")};
-}`;
-    }).join("\n");
-  }
-}
-function getLayoutStyles(layouts, layoutValues, mapToStyles) {
-  const mediaQueries = layouts.sort((a, b) => a.startsWith - b.startsWith).reduce(
-    (acc, layout) => {
-      const values = layoutValues.map((lv) => lv[layout.id]);
-      return `
-        ${acc}
-        ${layout.startsWith !== 0 ? `@media (min-width: ${layout.startsWith}px) {${mapToStyles(values, layout.exemplary)}}` : `${mapToStyles(values, layout.exemplary)}`}`;
-    },
-    ""
-  );
-  return mediaQueries;
-}
-function getLayoutMediaQuery(layoutId, layouts) {
-  const sorted = layouts.slice().sort((a, b) => a.startsWith - b.startsWith);
-  const layoutIndex = sorted.findIndex((l) => l.id === layoutId);
-  if (layoutIndex === -1) {
-    throw new Error(`No layout was found by the given id #${layoutId}`);
-  }
-  const current = sorted[layoutIndex];
-  const next = sorted[layoutIndex + 1];
-  if (!next) {
-    return `@media (min-width: ${current.startsWith}px)`;
-  }
-  return `@media (min-width: ${current.startsWith}px) and (max-width: ${next.startsWith - 1}px)`;
-}
-class Writer {
-  constructor(size) {
-    this.data = new Uint8Array(size);
-    this.idx = 0;
-    this.size = size;
-  }
-  getData() {
-    if (this.idx !== this.size) throw new Error("Mismatch between size reserved and sized used");
-    return this.data.slice(0, this.idx);
-  }
-  writeUint8(value) {
-    this.data.set([value], this.idx);
-    this.idx += 1;
-  }
-  writeUint16(value) {
-    const arr = new Uint16Array(1);
-    arr[0] = value;
-    const buffer = new Uint8Array(arr.buffer);
-    this.data.set([buffer[1], buffer[0]], this.idx);
-    this.idx += 2;
-  }
-  writeUint8Array(value) {
-    this.data.set(value, this.idx);
-    this.idx += value.length;
-  }
-}
-const getExtradata = (avccBox) => {
-  let i;
-  let size = 7;
-  for (i = 0; i < avccBox.SPS.length; i += 1) {
-    size += 2 + avccBox.SPS[i].length;
-  }
-  for (i = 0; i < avccBox.PPS.length; i += 1) {
-    size += 2 + avccBox.PPS[i].length;
-  }
-  const writer = new Writer(size);
-  writer.writeUint8(avccBox.configurationVersion);
-  writer.writeUint8(avccBox.AVCProfileIndication);
-  writer.writeUint8(avccBox.profile_compatibility);
-  writer.writeUint8(avccBox.AVCLevelIndication);
-  writer.writeUint8(avccBox.lengthSizeMinusOne + (63 << 2));
-  writer.writeUint8(avccBox.nb_SPS_nalus + (7 << 5));
-  for (i = 0; i < avccBox.SPS.length; i += 1) {
-    writer.writeUint16(avccBox.SPS[i].length);
-    writer.writeUint8Array(avccBox.SPS[i].nalu);
-  }
-  writer.writeUint8(avccBox.nb_PPS_nalus);
-  for (i = 0; i < avccBox.PPS.length; i += 1) {
-    writer.writeUint16(avccBox.PPS[i].length);
-    writer.writeUint8Array(avccBox.PPS[i].nalu);
-  }
-  return writer.getData();
-};
-const decodeVideo = (src, emitFrame, { VideoDecoder: VideoDecoder2, EncodedVideoChunk: EncodedVideoChunk2, debug }) => new Promise((resolve, reject) => {
-  if (debug) console.info("Decoding video from", src);
-  try {
-    const mp4boxfile = MP4Box__namespace.createFile();
-    let codec;
-    const decoder = new VideoDecoder2({
-      output: (frame) => {
-        createImageBitmap(frame, { resizeQuality: "low" }).then((bitmap) => {
-          emitFrame(bitmap);
-          frame.close();
-          if (decoder.decodeQueueSize <= 0) {
-            setTimeout(() => {
-              if (decoder.state !== "closed") {
-                decoder.close();
-                resolve();
-              }
-            }, 500);
-          }
-        });
-      },
-      error: (e) => {
-        console.error(e);
-        reject(e);
-      }
-    });
-    mp4boxfile.onReady = (info) => {
-      if (info && info.videoTracks && info.videoTracks[0]) {
-        [{ codec }] = info.videoTracks;
-        if (debug) console.info("Video with codec:", codec);
-        const avccBox = mp4boxfile.moov.traks[0].mdia.minf.stbl.stsd.entries[0].avcC;
-        const extradata = getExtradata(avccBox);
-        decoder.configure({ codec, description: extradata });
-        mp4boxfile.setExtractionOptions(info.videoTracks[0].id);
-        mp4boxfile.start();
-      } else reject(new Error("URL provided is not a valid mp4 video file."));
-    };
-    mp4boxfile.onSamples = (track_id, ref, samples) => {
-      for (let i = 0; i < samples.length; i += 1) {
-        const sample = samples[i];
-        const type = sample.is_sync ? "key" : "delta";
-        const chunk = new EncodedVideoChunk2({
-          type,
-          timestamp: sample.cts,
-          duration: sample.duration,
-          data: sample.data
-        });
-        decoder.decode(chunk);
-      }
-    };
-    fetch(src).then((res) => {
-      const reader = res.body.getReader();
-      let offset = 0;
-      function appendBuffers({ done, value }) {
-        if (done) {
-          mp4boxfile.flush();
-          return null;
-        }
-        const buf = value.buffer;
-        buf.fileStart = offset;
-        offset += buf.byteLength;
-        mp4boxfile.appendBuffer(buf);
-        return reader.read().then(appendBuffers);
-      }
-      return reader.read().then(appendBuffers);
-    });
-  } catch (e) {
-    reject(e);
-  }
-});
-const videoDecoder = (src, emitFrame, debug) => {
-  if (typeof VideoDecoder === "function" && typeof EncodedVideoChunk === "function") {
-    if (debug)
-      console.info("WebCodecs is natively supported, using native version...");
-    return decodeVideo(src, emitFrame, {
-      VideoDecoder,
-      EncodedVideoChunk,
-      debug
-    });
-  }
-  if (debug) console.info("WebCodecs is not available in this browser.");
-  return Promise.resolve();
-};
-class ScrollPlaybackVideoManager {
-  constructor(options) {
-    this.currentTime = 0;
-    this.targetTime = 0;
-    this.canvas = null;
-    this.context = null;
-    this.frames = [];
-    this.frameRate = 0;
-    this.transitioning = false;
-    this.debug = false;
-    this.frameThreshold = 0.1;
-    this.transitionSpeed = 10;
-    this.useWebCodecs = true;
-    this.resize = () => {
-      if (this.debug) console.info("ScrollVideo resizing...");
-      if (this.canvas) {
-        this.setCoverStyle(this.canvas);
-      } else if (this.video) {
-        this.setCoverStyle(this.video);
-      }
-      this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
-    };
-    this.decodeVideo = () => {
-      if (!this.video) return;
-      if (this.useWebCodecs && this.video.src) {
-        videoDecoder(
-          this.video.src,
-          (frame) => {
-            this.frames.push(frame);
-          },
-          this.debug
-        ).then(() => {
-          if (!this.video || !this.container) return;
-          if (this.frames.length === 0) {
-            if (this.debug) console.error("No frames were received from webCodecs");
-            return;
-          }
-          this.frameRate = this.frames.length / this.video.duration;
-          if (this.debug) console.info("Received", this.frames.length, "frames");
-          this.canvas = document.createElement("canvas");
-          this.context = this.canvas.getContext("2d");
-          this.video.style.display = "none";
-          this.container.appendChild(this.canvas);
-          this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
-        }).catch(() => {
-          if (this.debug) console.error("Error encountered while decoding video");
-          this.frames = [];
-          this.video.load();
-        });
-      }
-    };
-    this.resizeObserver = new ResizeObserver(() => {
-      this.resize();
-    });
-    const {
-      src,
-      videoContainer
-    } = options;
-    if (typeof document !== "object") {
-      console.error("ScrollVideo must be initiated in a DOM context");
-      return;
-    }
-    if (!videoContainer) {
-      console.error("scrollVideoContainer must be a valid DOM object");
-      return;
-    }
-    if (!src) {
-      console.error("Must provide valid video src to ScrollVideo");
-      return;
-    }
-    this.container = typeof videoContainer === "string" ? document.getElementById(videoContainer) : videoContainer;
-    this.resizeObserver.observe(this.container);
-    this.video = document.createElement("video");
-    this.video.src = src;
-    this.video.preload = "auto";
-    this.video.tabIndex = 0;
-    this.video.playsInline = true;
-    this.video.muted = true;
-    this.video.pause();
-    this.video.load();
-    this.container.appendChild(this.video);
-    const browserEngine = new UAParser().getEngine();
-    this.isSafari = browserEngine.name === "WebKit";
-    if (this.debug && this.isSafari) console.info("Safari browser detected");
-    this.video.addEventListener("loadedmetadata", () => this.setTargetTimePercent(0, true), { once: true });
-    this.video.addEventListener("progress", this.resize);
-    this.decodeVideo();
-  }
-  setCoverStyle(el) {
-    if (el && this.container) {
-      el.style.position = "absolute";
-      el.style.top = "50%";
-      el.style.left = "50%";
-      el.style.transform = "translate(-50%, -50%)";
-      const { width: containerWidth, height: containerHeight } = this.container.getBoundingClientRect();
-      const width = el.videoWidth || el.width;
-      const height = el.videoHeight || el.height;
-      if (containerWidth / containerHeight > width / height) {
-        el.style.width = "100%";
-        el.style.height = "auto";
-      } else {
-        el.style.height = "100%";
-        el.style.width = "auto";
-      }
-    }
-  }
-  paintCanvasFrame(frameNum) {
-    if (this.canvas) {
-      const frameIdx = Math.min(frameNum, this.frames.length - 1);
-      const currFrame = this.frames[frameIdx];
-      if (currFrame && this.container) {
-        if (this.debug) console.info("Painting frame", frameIdx);
-        this.canvas.width = currFrame.width;
-        this.canvas.height = currFrame.height;
-        const { width, height } = this.container.getBoundingClientRect();
-        this.resetCanvasDimensions(width, height, currFrame.width, currFrame.height);
-        this.context.drawImage(currFrame, 0, 0, currFrame.width, currFrame.height);
-      }
-    }
-  }
-  transitionToTargetTime(jump) {
-    if (!this.video) return;
-    if (this.debug) console.info("Transitioning targetTime:", this.targetTime, "currentTime:", this.currentTime);
-    if (isNaN(this.targetTime) || Math.abs(this.currentTime - this.targetTime) < this.frameThreshold) {
-      this.video.pause();
-      this.transitioning = false;
-      return;
-    }
-    if (this.targetTime > this.video.duration) {
-      this.targetTime = this.video.duration;
-    }
-    if (this.targetTime < 0) {
-      this.targetTime = 0;
-    }
-    const transitionForward = this.targetTime - this.currentTime;
-    if (this.canvas) {
-      this.currentTime += transitionForward / (256 / this.transitionSpeed);
-      if (jump) {
-        this.currentTime = this.targetTime;
-      }
-      this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
-    } else if (jump || this.isSafari || this.targetTime - this.currentTime < 0) {
-      this.video.pause();
-      this.currentTime += transitionForward / (64 / this.transitionSpeed);
-      if (jump) {
-        this.currentTime = this.targetTime;
-      }
-      this.video.currentTime = this.currentTime;
-    } else {
-      const playbackRate = Math.max(Math.min(transitionForward * 4, this.transitionSpeed, 16), 1);
-      if (this.debug) console.info("ScrollVideo playbackRate:", playbackRate);
-      if (!isNaN(playbackRate)) {
-        this.video.playbackRate = playbackRate;
-        this.video.play();
-      }
-      this.currentTime = this.video.currentTime;
-    }
-    if (typeof requestAnimationFrame === "function") {
-      requestAnimationFrame(() => this.transitionToTargetTime(jump));
-    }
-  }
-  resetCanvasDimensions(w, h, frameW, frameH) {
-    if (!this.canvas) return;
-    if (w / h > frameW / frameH) {
-      this.canvas.style.width = "100%";
-      this.canvas.style.height = "auto";
-    } else {
-      this.canvas.style.height = "100%";
-      this.canvas.style.width = "auto";
-    }
-  }
-  setTargetTimePercent(setPercentage, jump = true) {
-    if (!this.video) return;
-    this.targetTime = Math.max(Math.min(setPercentage, 1), 0) * (this.frames.length && this.frameRate ? this.frames.length / this.frameRate : this.video.duration);
-    if (!jump && Math.abs(this.currentTime - this.targetTime) < this.frameThreshold) return;
-    if (!jump && this.transitioning) return;
-    if (!this.canvas && !this.video.paused) this.video.play();
-    this.transitioning = true;
-    this.transitionToTargetTime(jump);
-  }
-  destroy() {
-    var _a;
-    this.resizeObserver.unobserve(this.container);
-    (_a = this.video) == null ? void 0 : _a.removeEventListener("progress", this.resize);
-    if (this.debug) console.info("Destroying ScrollVideo");
-    if (this.container) this.container.innerHTML = "";
-  }
-}
-const wrapper = "ControlSlider-module__wrapper___sHEkd";
-const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
-const sliderImage = "ControlSlider-module__sliderImage___9hRl-";
-const arrow = "ControlSlider-module__arrow___05ghY";
-const arrowVertical = "ControlSlider-module__arrowVertical___tBfVN";
-const nextArrow = "ControlSlider-module__nextArrow___-30Yc";
-const arrowInner = "ControlSlider-module__arrowInner___aEra3";
-const arrowIcon = "ControlSlider-module__arrowIcon___S4ztF";
-const arrowImg = "ControlSlider-module__arrowImg___2dwJW";
-const mirror = "ControlSlider-module__mirror___brd6U";
-const pagination = "ControlSlider-module__pagination___bicLF";
-const paginationInner = "ControlSlider-module__paginationInner___bT-P-";
-const paginationVertical = "ControlSlider-module__paginationVertical___zYqKw";
-const paginationItem = "ControlSlider-module__paginationItem___nTRbk";
-const dot = "ControlSlider-module__dot___p1Qun";
-const activeDot = "ControlSlider-module__activeDot___LHFaj";
-const paginationInsideBottom = "ControlSlider-module__paginationInsideBottom___R3FWn";
-const paginationInsideTop = "ControlSlider-module__paginationInsideTop___V-qb-";
-const paginationOutsideBottom = "ControlSlider-module__paginationOutsideBottom___14w8D";
-const paginationOutsideTop = "ControlSlider-module__paginationOutsideTop___SCLqB";
-const paginationInsideLeft = "ControlSlider-module__paginationInsideLeft___yOBRZ";
-const paginationInsideRight = "ControlSlider-module__paginationInsideRight___Rtt3o";
-const paginationOutsideLeft = "ControlSlider-module__paginationOutsideLeft___lahaw";
-const paginationOutsideRight = "ControlSlider-module__paginationOutsideRight___EtuQa";
-const imgWrapper = "ControlSlider-module__imgWrapper___UjEgB";
-const captionBlock = "ControlSlider-module__captionBlock___dJ6-j";
-const captionTextWrapper = "ControlSlider-module__captionTextWrapper___HFlpf";
-const captionText = "ControlSlider-module__captionText___uGBVc";
-const active = "ControlSlider-module__active___WZK4G";
-const withPointerEvents = "ControlSlider-module__withPointerEvents___t-18M";
-const topLeftAlignment = "ControlSlider-module__topLeftAlignment___zjnGM";
-const topCenterAlignment = "ControlSlider-module__topCenterAlignment___gD1xW";
-const topRightAlignment = "ControlSlider-module__topRightAlignment___NMapS";
-const middleLeftAlignment = "ControlSlider-module__middleLeftAlignment___OnUrY";
-const middleCenterAlignment = "ControlSlider-module__middleCenterAlignment___Tdkl0";
-const middleRightAlignment = "ControlSlider-module__middleRightAlignment___wEbfX";
-const bottomLeftAlignment = "ControlSlider-module__bottomLeftAlignment___cTP2-";
-const bottomCenterAlignment = "ControlSlider-module__bottomCenterAlignment___c54fB";
-const bottomRightAlignment = "ControlSlider-module__bottomRightAlignment___kEwrz";
-const clickOverlay = "ControlSlider-module__clickOverlay___DZA28";
-const contain = "ControlSlider-module__contain___pLyq7";
-const cover = "ControlSlider-module__cover___KdDat";
-const styles$3 = {
-  wrapper,
-  sliderItem,
-  sliderImage,
-  arrow,
-  arrowVertical,
-  nextArrow,
-  arrowInner,
-  arrowIcon,
-  arrowImg,
-  mirror,
-  pagination,
-  paginationInner,
-  paginationVertical,
-  paginationItem,
-  dot,
-  activeDot,
-  paginationInsideBottom,
-  paginationInsideTop,
-  paginationOutsideBottom,
-  paginationOutsideTop,
-  paginationInsideLeft,
-  paginationInsideRight,
-  paginationOutsideLeft,
-  paginationOutsideRight,
-  imgWrapper,
-  captionBlock,
-  captionTextWrapper,
-  captionText,
-  active,
-  withPointerEvents,
-  topLeftAlignment,
-  topCenterAlignment,
-  topRightAlignment,
-  middleLeftAlignment,
-  middleCenterAlignment,
-  middleRightAlignment,
-  bottomLeftAlignment,
-  bottomCenterAlignment,
-  bottomRightAlignment,
-  clickOverlay,
-  contain,
-  cover
-};
-const link$1 = "RichTextRenderer-module__link___BWeZ2";
-const styles$2 = {
-  link: link$1
-};
-const RichTextRenderer = ({ content }) => {
-  const getChildren = (children) => {
-    return children.map((child, i) => {
-      if (child.type === "link") {
-        return /* @__PURE__ */ jsxRuntime.jsx("a", { className: styles$2.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { style: getLeafCss(child), children: child.text }, i);
-    });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content.map((block, i) => {
-    const children = block.children;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: getChildren(children) }, i);
-  }) });
-};
-function getLeafCss(leaf) {
-  return {
-    ...leaf.fontFamily && { fontFamily: leaf.fontFamily },
-    ...leaf.fontWeight && { fontWeight: leaf.fontWeight },
-    ...leaf.fontStyle && { fontStyle: leaf.fontStyle },
-    ...leaf.textDecoration && { textDecoration: leaf.textDecoration },
-    ...leaf.textTransform && { textTransform: leaf.textTransform },
-    ...leaf.fontVariant && { fontVariant: leaf.fontVariant },
-    ...leaf.verticalAlign && {
-      verticalAlign: leaf.verticalAlign,
-      lineHeight: "0px"
-    }
-  };
-}
-function scalingValue(value, isEditor = false) {
-  return isEditor ? `calc(var(--cntrl-article-width) * ${value})` : `${value * 100}vw`;
-}
-const svg = "SvgImage-module__svg___q3xE-";
-const img = "SvgImage-module__img___VsTm-";
-const styles$1 = {
-  svg,
-  img
-};
-const SvgImage = ({ url: url2, fill = "#000000", hoverFill = "#CCCCCC", className = "" }) => {
-  const [supportsMask, setSupportsMask] = react.useState(true);
-  react.useEffect(() => {
-    if (typeof window !== "undefined" && window.CSS) {
-      const supported = CSS.supports("mask-image", 'url("")') || CSS.supports("-webkit-mask-image", 'url("")');
-      setSupportsMask(supported);
-    }
-  }, []);
-  if (!url2.endsWith(".svg") || !supportsMask) {
-    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: url2, alt: "", className: cn(styles$1.img, className) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      "data-supports-mask": supportsMask,
-      className: cn(styles$1.svg, className),
-      style: {
-        "--svg": `url(${url2})`,
-        "--fill": fill,
-        "--hover-fill": hoverFill
-      }
-    }
-  );
-};
-const alignmentClassName = {
-  "top-left": styles$3.topLeftAlignment,
-  "top-center": styles$3.topCenterAlignment,
-  "top-right": styles$3.topRightAlignment,
-  "middle-left": styles$3.middleLeftAlignment,
-  "middle-center": styles$3.middleCenterAlignment,
-  "middle-right": styles$3.middleRightAlignment,
-  "bottom-left": styles$3.bottomLeftAlignment,
-  "bottom-center": styles$3.bottomCenterAlignment,
-  "bottom-right": styles$3.bottomRightAlignment
-};
-function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
-  const [sliderRef, setSliderRef] = react.useState(null);
-  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = sliderStyles.caption;
-  const [sliderDimensions, setSliderDimensions] = react.useState(void 0);
-  const [wrapperRef, setWrapperRef] = react.useState(null);
-  const [currentSlideIndex, setCurrentSlideIndex] = react.useState(0);
-  const [key, setKey] = react.useState(0);
-  const { direction, transition, controls, pagination: pagination2, caption, triggers } = settings;
-  const prevSliderTypeRef = react.useRef(transition.type);
-  const { x: controlsOffsetX, y: controlsOffsetY } = settings.controls.offset;
-  const handleArrowClick = (dir) => {
-    if (sliderRef) {
-      sliderRef.go(dir);
-    }
-  };
-  react.useEffect(() => {
-    if (!wrapperRef) return;
-    const observer = new ResizeObserver((entries) => {
-      if (!sliderRef) return;
-      const [wrapper2] = entries;
-      setSliderDimensions({
-        width: Math.round(wrapper2.contentRect.width),
-        height: Math.round(wrapper2.contentRect.height)
-      });
-    });
-    observer.observe(wrapperRef);
-    return () => observer.unobserve(wrapperRef);
-  }, [wrapperRef]);
-  react.useEffect(() => {
-    if (!sliderRef || prevSliderTypeRef.current === transition.type) return;
-    setKey((prev) => prev + 1);
-    prevSliderTypeRef.current = transition.type;
-  }, [transition.type]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(styles$3.wrapper, { [styles$3.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: styles$3.sliderInner,
-      style: {
-        width: sliderDimensions ? sliderDimensions.width : "100%",
-        height: sliderDimensions ? sliderDimensions.height : "100%",
-        backgroundColor: transition.backgroundColor && transition.type === "fade in" ? transition.backgroundColor : "transparent"
-      },
-      children: [
-        settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(styles$3.captionBlock),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: styles$3.captionTextWrapper,
-                children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(styles$3.captionText, alignmentClassName[caption.alignment], {
-                      [styles$3.withPointerEvents]: index === currentSlideIndex && isEditor,
-                      [styles$3.active]: index === currentSlideIndex
-                    }),
-                    style: {
-                      fontFamily: fontSettings.fontFamily,
-                      fontWeight: fontSettings.fontWeight,
-                      fontStyle: fontSettings.fontStyle,
-                      width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
-                      letterSpacing: scalingValue(letterSpacing, isEditor),
-                      wordSpacing: scalingValue(wordSpacing, isEditor),
-                      textAlign,
-                      fontSize: scalingValue(fontSizeLineHeight.fontSize, isEditor),
-                      lineHeight: scalingValue(fontSizeLineHeight.lineHeight, isEditor),
-                      textTransform: textAppearance.textTransform ?? "none",
-                      textDecoration: textAppearance.textDecoration ?? "none",
-                      fontVariant: textAppearance.fontVariant ?? "normal",
-                      color,
-                      transitionDuration: transition.duration ? `${Math.round(parseInt(transition.duration) / 2)}ms` : "500ms"
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        "data-styles": "caption",
-                        className: styles$3.captionTextInner,
-                        style: {
-                          "--link-hover-color": caption.hover,
-                          position: "relative",
-                          top: scalingValue(caption.offset.y, isEditor),
-                          left: scalingValue(caption.offset.x, isEditor)
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: item.imageCaption })
-                      }
-                    )
-                  },
-                  index
-                ))
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactSplide.Splide,
-          {
-            onMove: (e) => {
-              setCurrentSlideIndex(e.index);
-            },
-            ref: setSliderRef,
-            options: {
-              arrows: false,
-              speed: transition.duration ? parseInt(transition.duration) : 500,
-              autoplay: isEditor ? false : triggers.autoPlay !== null,
-              ...triggers.autoPlay !== null && {
-                interval: parseInt(triggers.autoPlay) * 1e3
-              },
-              direction: direction === "horiz" || transition.type === "fade in" ? "ltr" : "ttb",
-              pagination: false,
-              drag: triggers.triggersList.drag,
-              perPage: 1,
-              width: sliderDimensions ? sliderDimensions.width : "100%",
-              height: sliderDimensions ? sliderDimensions.height : "100%",
-              type: transition.type === "fade in" ? "fade" : "loop",
-              rewind: true
-            },
-            children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: styles$3.sliderItem,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: styles$3.imgWrapper,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "img",
-                      {
-                        className: cn(styles$3.sliderImage, {
-                          [styles$3.contain]: item.image.objectFit === "contain",
-                          [styles$3.cover]: item.image.objectFit === "cover"
-                        }),
-                        src: item.image.url,
-                        alt: item.image.name ?? ""
-                      }
-                    )
-                  }
-                )
-              }
-            ) }, index))
-          },
-          key
-        ),
-        controls.isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(styles$3.arrow, {
-                [styles$3.arrowVertical]: direction === "vert"
-              }),
-              style: {
-                color: controls.color,
-                ["--arrow-hover-color"]: controls.hover
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    handleArrowClick("-1");
-                  },
-                  className: styles$3.arrowInner,
-                  style: {
-                    transform: `translate(${scalingValue(controlsOffsetX, isEditor)}, ${scalingValue(controlsOffsetY * (direction === "horiz" ? 1 : -1), isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
-                  },
-                  children: [
-                    controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                      SvgImage,
-                      {
-                        url: controls.arrowsImgUrl,
-                        fill: controls.color,
-                        hoverFill: controls.hover,
-                        className: cn(styles$3.arrowImg, styles$3.mirror)
-                      }
-                    ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(styles$3.arrow, styles$3.nextArrow, {
-                [styles$3.arrowVertical]: direction === "vert"
-              }),
-              style: {
-                color: controls.color,
-                ["--arrow-hover-color"]: controls.hover
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  className: styles$3.arrowInner,
-                  onClick: () => handleArrowClick("+1"),
-                  style: {
-                    transform: `translate(${scalingValue(controlsOffsetX * (direction === "horiz" ? -1 : 1), isEditor)}, ${scalingValue(controlsOffsetY, isEditor)}) scale(${settings.controls.scale / 100}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
-                  },
-                  children: [
-                    controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                      SvgImage,
-                      {
-                        url: controls.arrowsImgUrl,
-                        fill: controls.color,
-                        hoverFill: controls.hover,
-                        className: styles$3.arrowImg
-                      }
-                    ),
-                    !controls.arrowsImgUrl && /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
-                  ]
-                }
-              )
-            }
-          )
-        ] }),
-        triggers.triggersList.click && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: styles$3.clickOverlay,
-            onClick: () => {
-              if (sliderRef) {
-                sliderRef.go("+1");
-              }
-            }
-          }
-        ),
-        pagination2.isActive && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(styles$3.pagination, {
-              [styles$3.paginationInsideBottom]: pagination2.position === "inside-1" && direction === "horiz",
-              [styles$3.paginationInsideTop]: pagination2.position === "inside-2" && direction === "horiz",
-              [styles$3.paginationOutsideBottom]: pagination2.position === "outside-1" && direction === "horiz",
-              [styles$3.paginationOutsideTop]: pagination2.position === "outside-2" && direction === "horiz",
-              [styles$3.paginationInsideLeft]: pagination2.position === "inside-1" && direction === "vert",
-              [styles$3.paginationInsideRight]: pagination2.position === "inside-2" && direction === "vert",
-              [styles$3.paginationOutsideLeft]: pagination2.position === "outside-1" && direction === "vert",
-              [styles$3.paginationOutsideRight]: pagination2.position === "outside-2" && direction === "vert",
-              [styles$3.paginationVertical]: direction === "vert"
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: styles$3.paginationInner,
-                style: {
-                  backgroundColor: pagination2.colors[2],
-                  transform: `scale(${pagination2.scale / 100}) translate(${scalingValue(pagination2.offset.x, isEditor)}, ${scalingValue(pagination2.offset.y, isEditor)}) rotate(${direction === "horiz" ? "0deg" : "90deg"})`
-                },
-                children: content.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    onClick: () => {
-                      if (sliderRef) {
-                        sliderRef.go(index);
-                      }
-                    },
-                    className: cn(styles$3.paginationItem),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: cn(styles$3.dot, {
-                          [styles$3.activeDot]: index === currentSlideIndex
-                        }),
-                        style: {
-                          backgroundColor: index === currentSlideIndex ? pagination2.colors[0] : pagination2.colors[1],
-                          ["--pagination-hover-color"]: pagination2.hover
-                        }
-                      }
-                    )
-                  },
-                  index
-                ))
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) });
-}
-function ArrowIcon({ color, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z", id: "Shape-Copy", fill: color, transform: "translate(5, 9) rotate(-90) translate(-5, -9)" }) }) });
-}
-const ControlSliderComponent = {
-  element: ControlSlider,
-  id: "control-slider",
-  name: "Slider",
-  preview: {
-    type: "video",
-    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7EQ4ME6CP4KX7TJ4HPAXFEW.mp4"
-  },
-  defaultSize: {
-    width: 400,
-    height: 400
-  },
-  schema: {
-    type: "object",
-    properties: {
-      settings: {
-        layoutBased: true,
-        type: "object",
-        properties: {
-          triggers: {
-            name: "triggers",
-            icon: "target",
-            tooltip: "Triggers",
-            type: "object",
-            properties: {
-              triggersList: {
-                type: "object",
-                display: {
-                  type: "toggle-ratio-group"
-                },
-                properties: {
-                  click: {
-                    type: "boolean"
-                  },
-                  drag: {
-                    type: "boolean"
-                  }
-                }
-              },
-              autoPlay: {
-                type: ["string", "null"],
-                label: "Auto",
-                display: {
-                  type: "step-selector"
-                },
-                enum: [null, "1s", "2s", "3s", "4s", "5s"]
-              }
-            }
-          },
-          direction: {
-            name: "direction",
-            icon: "horizontal-resize",
-            tooltip: "Direction",
-            type: "string",
-            display: {
-              type: "ratio-group"
-            },
-            enum: ["horiz", "vert"]
-          },
-          transition: {
-            name: "transit",
-            icon: "transition",
-            tooltip: "Transition",
-            type: "object",
-            properties: {
-              type: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["slide", "fade in"]
-              },
-              backgroundColor: {
-                type: ["string", "null"],
-                name: "BG Color",
-                display: {
-                  visible: false,
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              },
-              duration: {
-                type: "string",
-                label: "hourglass-icon",
-                display: {
-                  type: "step-selector"
-                },
-                enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
-              }
-            }
-          },
-          controls: {
-            name: "controls",
-            icon: "controls",
-            tooltip: "Controls",
-            type: "object",
-            properties: {
-              isActive: {
-                type: "boolean",
-                display: {
-                  type: "setting-toggle"
-                }
-              },
-              arrowsImgUrl: {
-                type: ["string", "null"],
-                display: {
-                  type: "settings-image-input"
-                }
-              },
-              offset: {
-                type: "object",
-                display: {
-                  type: "offset-controls"
-                },
-                properties: {
-                  x: {
-                    type: "number"
-                  },
-                  y: {
-                    type: "number"
-                  }
-                }
-              },
-              scale: {
-                type: "number",
-                name: "scale",
-                min: 50,
-                max: 600,
-                display: {
-                  type: "range-control"
-                }
-              },
-              color: {
-                name: "color",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              },
-              hover: {
-                name: "hover",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              }
-            }
-          },
-          pagination: {
-            name: "nav",
-            icon: "pagination",
-            tooltip: "Navigation",
-            type: "object",
-            properties: {
-              isActive: {
-                type: "boolean",
-                display: {
-                  type: "setting-toggle"
-                }
-              },
-              position: {
-                name: "nav position",
-                display: {
-                  type: "socket",
-                  direction: "horizontal"
-                },
-                type: "string",
-                enum: ["outside-1", "outside-2", "inside-1", "inside-2"]
-              },
-              offset: {
-                type: "object",
-                display: {
-                  type: "offset-controls"
-                },
-                properties: {
-                  x: {
-                    type: "number"
-                  },
-                  y: {
-                    type: "number"
-                  }
-                }
-              },
-              scale: {
-                type: "number",
-                name: "scale",
-                min: 10,
-                max: 400,
-                display: {
-                  type: "range-control"
-                }
-              },
-              colors: {
-                display: {
-                  type: "settings-color-picker",
-                  format: "multiple"
-                },
-                name: "color",
-                type: "array",
-                items: {
-                  type: "string"
-                }
-              },
-              hover: {
-                name: "hover",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              }
-            }
-          },
-          caption: {
-            name: "Caption",
-            icon: "text-icon",
-            tooltip: "Caption",
-            type: "object",
-            properties: {
-              isActive: {
-                type: "boolean",
-                display: {
-                  type: "setting-toggle"
-                }
-              },
-              alignment: {
-                name: "Alignment",
-                type: "string",
-                display: {
-                  type: "align-grid"
-                },
-                enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
-              },
-              offset: {
-                type: "object",
-                display: {
-                  type: "offset-controls"
-                },
-                properties: {
-                  x: {
-                    type: "number"
-                  },
-                  y: {
-                    type: "number"
-                  }
-                }
-              },
-              hover: {
-                name: "hover",
-                type: "string",
-                display: {
-                  type: "settings-color-picker",
-                  format: "single"
-                }
-              }
-            }
-          }
-        },
-        default: {
-          triggers: {
-            triggersList: {
-              click: false,
-              drag: true
-            },
-            autoPlay: null
-          },
-          controls: {
-            isActive: true,
-            arrowsImgUrl: null,
-            offset: {
-              x: 0,
-              y: 0
-            },
-            scale: 100,
-            color: "#000000",
-            hover: "#cccccc"
-          },
-          transition: {
-            type: "slide",
-            duration: "500ms",
-            backgroundColor: null
-          },
-          pagination: {
-            isActive: true,
-            scale: 50,
-            position: "outside-1",
-            offset: {
-              x: 0,
-              y: 0
-            },
-            colors: ["#cccccc", "#cccccc", "#000000"],
-            hover: "#cccccc"
-          },
-          direction: "horiz",
-          caption: {
-            offset: {
-              x: 0,
-              y: 0
-            },
-            isActive: true,
-            alignment: "middle-center",
-            hover: "#cccccc"
-          }
-        },
-        displayRules: [
-          {
-            if: {
-              name: "direction",
-              value: "vert"
-            },
-            then: {
-              name: "properties.pagination.properties.position.display.direction",
-              value: "vertical"
-            }
-          },
-          {
-            if: {
-              name: "transition.type",
-              value: "fade in"
-            },
-            then: {
-              name: "properties.transition.properties.backgroundColor.display.visible",
-              value: true
-            }
-          }
-        ]
-      },
-      content: {
-        layoutBased: false,
-        type: "array",
-        settings: {
-          addItemFromFileExplorer: true
-        },
-        items: {
-          type: "object",
-          properties: {
-            image: {
-              type: "object",
-              display: {
-                type: "media-input",
-                minWidth: 48,
-                defaultWidth: 108,
-                maxWidth: 108
-              },
-              properties: {
-                url: {
-                  type: "string"
-                },
-                name: {
-                  type: "string"
-                },
-                objectFit: {
-                  type: "string",
-                  enum: ["cover", "contain"]
-                }
-              },
-              required: ["url", "name"]
-            },
-            imageCaption: {
-              display: {
-                type: "rich-text",
-                placeholder: "Add Caption...",
-                minWidth: 100,
-                defaultWidth: 300,
-                maxWidth: 500
-              }
-            }
-          },
-          required: ["image"]
-        },
-        default: [
-          {
-            image: {
-              objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png",
-              name: "Slider-1.png"
-            },
-            imageCaption: [
-              {
-                type: "paragraph",
-                children: [{ text: "" }]
-              }
-            ]
-          },
-          {
-            image: {
-              objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMTZA3RYMXKF0M095D6JD.png",
-              name: "Slider-2.png"
-            },
-            imageCaption: [
-              {
-                type: "paragraph",
-                children: [{ text: "" }]
-              }
-            ]
-          },
-          {
-            image: {
-              objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMVSCMPVJBG2WF5KJZYHZ.png",
-              name: "Slider-3.png"
-            },
-            imageCaption: [
-              {
-                type: "paragraph",
-                children: [{ text: "" }]
-              }
-            ]
-          }
-        ]
-      },
-      styles: {
-        layoutBased: true,
-        type: "object",
-        properties: {
-          caption: {
-            dataName: "caption",
-            type: "object",
-            properties: {
-              fontSettings: {
-                type: "object",
-                display: {
-                  type: "font-settings"
-                },
-                properties: {
-                  fontFamily: {
-                    type: "string"
-                  },
-                  fontWeight: {
-                    type: "number"
-                  },
-                  fontStyle: {
-                    type: "string"
-                  }
-                }
-              },
-              widthSettings: {
-                display: {
-                  type: "text-width-control"
-                },
-                type: "object",
-                properties: {
-                  width: {
-                    type: "number"
-                  },
-                  sizing: {
-                    type: "string",
-                    enum: ["auto", "manual"]
-                  }
-                }
-              },
-              fontSizeLineHeight: {
-                type: "object",
-                display: {
-                  type: "font-size-line-height"
-                },
-                properties: {
-                  fontSize: {
-                    type: "number"
-                  },
-                  lineHeight: {
-                    type: "number"
-                  }
-                }
-              },
-              letterSpacing: {
-                display: {
-                  type: "letter-spacing-input"
-                },
-                type: "number"
-              },
-              wordSpacing: {
-                display: {
-                  type: "word-spacing-input"
-                },
-                type: "number"
-              },
-              textAlign: {
-                display: {
-                  type: "text-align-control"
-                },
-                type: "string",
-                enum: ["left", "center", "right", "justify"]
-              },
-              textAppearance: {
-                display: {
-                  type: "text-appearance"
-                },
-                properties: {
-                  textTransform: {
-                    type: "string",
-                    enum: ["none", "uppercase", "lowercase", "capitalize"]
-                  },
-                  textDecoration: {
-                    type: "string",
-                    enum: ["none", "underline"]
-                  },
-                  fontVariant: {
-                    type: "string",
-                    enum: ["normal", "small-caps"]
-                  }
-                }
-              },
-              color: {
-                display: {
-                  type: "style-panel-color-picker"
-                },
-                type: "string"
-              }
-            }
-          }
-        },
-        default: {
-          caption: {
-            widthSettings: {
-              width: 0.13,
-              sizing: "auto"
-            },
-            fontSettings: {
-              fontFamily: "Arial",
-              fontWeight: 400,
-              fontStyle: "normal"
-            },
-            fontSizeLineHeight: {
-              fontSize: 0.02,
-              lineHeight: 0.02
-            },
-            letterSpacing: 0,
-            wordSpacing: 0,
-            textAlign: "left",
-            textAppearance: {
-              textTransform: "none",
-              textDecoration: "none",
-              fontVariant: "normal"
-            },
-            color: "#000000"
-          }
-        }
-      }
-    },
-    required: ["settings", "content", "styles"]
-  }
-};
-const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
-const image = "ImageRevealSlider-module__image___Qjt-e";
-const link = "ImageRevealSlider-module__link___N-iLG";
-const styles = {
-  imageRevealSlider,
-  image,
-  link
-};
-function isMouseOverImage(mouseX, mouseY, placedImages) {
-  for (const img2 of placedImages) {
-    const imgEl = new Image();
-    imgEl.src = img2.url;
-    const imgWidth = img2.width ? Number.parseFloat(img2.width) : imgEl.naturalWidth;
-    const imgHeight = imgEl.naturalHeight / imgEl.naturalWidth * imgWidth;
-    const halfW = imgWidth / 2;
-    const halfH = imgHeight / 2;
-    if (mouseX >= img2.x - halfW && mouseX <= img2.x + halfW && mouseY >= img2.y - halfH && mouseY <= img2.y + halfH) {
-      return true;
-    }
-  }
-  return false;
-}
-function getImageSize(url2) {
-  return new Promise((resolve) => {
-    const img2 = new Image();
-    img2.src = url2;
-    img2.onload = () => {
-      resolve({ width: img2.naturalWidth, height: img2.naturalHeight });
-    };
-  });
-}
-async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRange) {
-  let width;
-  let height;
-  if (sizeType === "custom") {
-    width = customWidth;
-    const size = await getImageSize(imgUrl);
-    height = size.height / size.width * width;
-  } else if (sizeType === "random") {
-    width = Math.random() * (randomRange.max - randomRange.min) + randomRange.min;
-    const size = await getImageSize(imgUrl);
-    height = size.height / size.width * width;
-  } else {
-    const size = await getImageSize(imgUrl);
-    width = size.width;
-    height = size.height;
-  }
-  return { width, height, finalWidth: `${width}px` };
-}
-function ImageRevealSlider({ settings, content, isEditor }) {
-  const divRef = react.useRef(null);
-  const [placedImages, setPlacedImages] = react.useState([]);
-  const [counter, setCounter] = react.useState(0);
-  const imageIdCounter = react.useRef(0);
-  const defaultImageCount = 1;
-  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
-  const { revealPosition, visible, target } = settings.position;
-  const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
-  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
-    const { width, height, finalWidth } = await calculateImageWidthHeight(
-      imgData.image.url,
-      sizeType,
-      customWidth,
-      randomRange
-    );
-    let x = 0, y = 0;
-    if (revealPosition === "same") {
-      x = containerWidth / 2;
-      y = containerHeight / 2;
-    } else {
-      x = position.x ?? Math.random() * containerWidth;
-      y = position.y ?? Math.random() * containerHeight;
-    }
-    const adjustedX = Math.min(Math.max(x, width / 2), containerWidth - width / 2);
-    const adjustedY = Math.min(Math.max(y, height / 2), containerHeight - height / 2);
-    return {
-      id: imageIdCounter.current++,
-      url: imgData.image.url,
-      link: imgData.link,
-      name: imgData.image.name,
-      x: adjustedX,
-      y: adjustedY,
-      width: finalWidth
-    };
-  };
-  const defaultContentUrls = react.useMemo(() => {
-    const defaultContentLength = Math.min(content.length, defaultImageCount);
-    return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
-  }, [content]);
-  react.useEffect(() => {
-    if (!divRef.current || content.length === 0) return;
-    const rect = divRef.current.getBoundingClientRect();
-    const containerWidth = rect.width;
-    const containerHeight = rect.height;
-    const defaultPlaced = [];
-    const placeImages = async () => {
-      for (let i = 0; i < defaultImageCount && i < content.length; i++) {
-        const imgData = content[i];
-        const newImg = await createNewImage(imgData, containerWidth, containerHeight);
-        defaultPlaced.push(newImg);
-      }
-      setPlacedImages(defaultPlaced);
-      setCounter(defaultImageCount % content.length);
-    };
-    placeImages();
-  }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
-  react.useEffect(() => {
-    if (visible === "last One") {
-      setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
-    }
-  }, [visible]);
-  const handleClick = async (e) => {
-    if (!divRef.current) return;
-    const rect = divRef.current.getBoundingClientRect();
-    const clickX = e.clientX - rect.left;
-    const clickY = e.clientY - rect.top;
-    if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
-    let x = 0, y = 0;
-    if (revealPosition === "on Click") {
-      x = clickX;
-      y = clickY;
-    } else if (revealPosition === "same") {
-      x = rect.width / 2;
-      y = rect.height / 2;
-    } else {
-      x = Math.random() * rect.width;
-      y = Math.random() * rect.height;
-    }
-    const imgData = content[counter];
-    const newImage = await createNewImage(imgData, rect.width, rect.height, { x, y });
-    setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
-    setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: divRef,
-      onClick: handleClick,
-      className: styles.imageRevealSlider,
-      style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
-      children: placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: styles.wrapper,
-          style: {
-            top: `${img2.y}px`,
-            left: `${img2.x}px`,
-            position: "absolute",
-            transform: "translate(-50%, -50%)",
-            width: img2.width ?? "auto",
-            height: "auto",
-            cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
-          },
-          children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: img2.url,
-              alt: img2.name,
-              className: styles.image
-            },
-            img2.id
-          ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: img2.url,
-              alt: img2.name,
-              className: styles.image
-            },
-            img2.id
-          )
-        },
-        img2.id
-      ))
-    }
-  );
-}
-const ControlImageRevealSliderComponent = {
-  element: ImageRevealSlider,
-  id: "control-image-reveal",
-  name: "Click Gallery",
-  preview: {
-    type: "video",
-    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7EQ3WSW43JG5YMC8B2HTPKT.mp4"
-  },
-  defaultSize: {
-    width: 700,
-    height: 400
-  },
-  schema: {
-    type: "object",
-    properties: {
-      settings: {
-        layoutBased: true,
-        type: "object",
-        properties: {
-          imageSize: {
-            name: "IMG SIZE",
-            icon: "size",
-            tooltip: "IMG SIZE",
-            type: "object",
-            properties: {
-              sizeType: {
-                name: "sizeType",
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["as Is", "custom", "random"]
-              },
-              imageWidth: {
-                type: "number",
-                label: "W",
-                display: {
-                  type: "numeric-input",
-                  visible: false
-                }
-              },
-              randomRangeImageWidth: {
-                type: "object",
-                display: {
-                  type: "random-range-controls",
-                  visible: false
-                },
-                properties: {
-                  min: {
-                    type: "number"
-                  },
-                  max: {
-                    type: "number"
-                  }
-                }
-              }
-            }
-          },
-          cursor: {
-            name: "cursor",
-            icon: "cursor",
-            tooltip: "cursor",
-            type: "object",
-            properties: {
-              cursorType: {
-                name: "cursorType",
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["system", "custom"]
-              },
-              defaultCursor: {
-                type: ["string", "null"],
-                display: {
-                  type: "settings-image-input",
-                  title: "Default",
-                  visible: false
-                }
-              },
-              hoverCursor: {
-                type: ["string", "null"],
-                display: {
-                  type: "settings-image-input",
-                  title: "Hover",
-                  visible: false
-                }
-              }
-            }
-          },
-          position: {
-            name: "position",
-            icon: "transition",
-            tooltip: "Position",
-            type: "object",
-            properties: {
-              revealPosition: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["random", "same", "on Click"]
-              },
-              visible: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["all", "last One"]
-              },
-              target: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["area", "image"]
-              }
-            }
-          }
-        },
-        default: {
-          imageSize: {
-            sizeType: "custom",
-            imageWidth: 500,
-            randomRangeImageWidth: {
-              min: 100,
-              max: 1e3
-            }
-          },
-          cursor: {
-            cursorType: "system",
-            defaultCursor: null,
-            hoverCursor: null
-          },
-          position: {
-            revealPosition: "random",
-            visible: "all",
-            target: "area"
-          }
-        },
-        displayRules: [
-          {
-            if: {
-              name: "imageSize.sizeType",
-              value: "custom"
-            },
-            then: {
-              name: "properties.imageSize.properties.imageWidth.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "imageSize.sizeType",
-              value: "random"
-            },
-            then: {
-              name: "properties.imageSize.properties.randomRangeImageWidth.display.visible",
-              value: true
-            }
-          },
-          {
-            if: [
-              { name: "position.target", value: "image" },
-              { name: "cursor.cursorType", value: "custom" }
-            ],
-            then: {
-              name: "properties.cursor.properties.defaultCursor.display.visible",
-              value: true
-            }
-          },
-          {
-            if: {
-              name: "cursor.cursorType",
-              value: "custom"
-            },
-            then: {
-              name: "properties.cursor.properties.hoverCursor.display.visible",
-              value: true
-            }
-          }
-        ]
-      },
-      content: {
-        layoutBased: false,
-        type: "array",
-        settings: {
-          addItemFromFileExplorer: true
-        },
-        items: {
-          type: "object",
-          properties: {
-            image: {
-              type: "object",
-              display: {
-                type: "media-input",
-                isObjectFitEditable: false,
-                minWidth: 48,
-                defaultWidth: 108,
-                maxWidth: 108
-              },
-              properties: {
-                url: {
-                  type: "string"
-                },
-                name: {
-                  type: "string"
-                },
-                objectFit: {
-                  type: "string",
-                  enum: ["cover", "contain"]
-                }
-              },
-              required: ["url", "name"]
-            },
-            link: {
-              type: "string",
-              display: {
-                type: "text-input",
-                placeholder: "Enter link...",
-                minWidth: 100,
-                defaultWidth: 300,
-                maxWidth: 500
-              }
-            }
-          },
-          required: ["image"]
-        },
-        default: [
-          {
-            image: {
-              objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQK9211QXBE9W284ZNKB8.png",
-              name: "Slider-1.png"
-            },
-            link: ""
-          },
-          {
-            image: {
-              objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQMFT72JD18WKP0Q2DVAT.png",
-              name: "Slider-2.png"
-            },
-            link: ""
-          },
-          {
-            image: {
-              objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQNEVRXPSRX5K1YTMJQY9.png",
-              name: "Slider-3.png"
-            },
-            link: ""
-          },
-          {
-            image: {
-              objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQP84JKRDT7WNWDQZR4Y9.png",
-              name: "Slider-4.png"
-            },
-            link: ""
-          }
-        ]
-      }
-    }
-  }
-};
-const components = [
-  ControlSliderComponent,
-  ControlImageRevealSliderComponent
-];
-exports.AnchorSide = AnchorSide;
-exports.AreaAnchor = AreaAnchor;
-exports.ArticleItemType = ArticleItemType;
-exports.CntrlClient = Client;
-exports.DimensionMode = DimensionMode;
-exports.FontFaceGenerator = FontFaceGenerator;
-exports.KeyframeType = KeyframeType;
-exports.PositionType = PositionType;
-exports.ScrollPlaybackVideoManager = ScrollPlaybackVideoManager;
-exports.SectionHeightMode = SectionHeightMode;
-exports.TextAlign = TextAlign;
-exports.TextDecoration = TextDecoration;
-exports.TextTransform = TextTransform;
-exports.VerticalAlign = VerticalAlign;
-exports.components = components;
-exports.getLayoutMediaQuery = getLayoutMediaQuery;
-exports.getLayoutStyles = getLayoutStyles;