@gxpl/sdk 0.0.1

package/dist/index.mjs

@@ -0,0 +1,2713 @@
+import fetch$1 from "isomorphic-fetch";
+import { URL } from "url";
+import { z } from "zod";
+import UAParser from "ua-parser-js";
+import * as MP4Box from "mp4box";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from "react";
+import { Splide, SplideSlide } from "@splidejs/react-splide";
+import cn from "classnames";
+var SectionHeightMode = /* @__PURE__ */ ((SectionHeightMode2) => {
+  SectionHeightMode2["ControlUnits"] = "control-units";
+  SectionHeightMode2["ViewportHeightUnits"] = "viewport-height-units";
+  return SectionHeightMode2;
+})(SectionHeightMode || {});
+const ColorPointSchema = z.object({
+  id: z.string(),
+  value: z.string(),
+  position: z.number()
+});
+const FillLayerSchema = z.discriminatedUnion("type", [
+  z.object({
+    id: z.string(),
+    type: z.literal("solid"),
+    value: z.string(),
+    blendMode: z.string()
+  }),
+  z.object({
+    id: z.string(),
+    type: z.literal("linear-gradient"),
+    colors: z.array(ColorPointSchema),
+    start: z.tuple([z.number(), z.number()]),
+    end: z.tuple([z.number(), z.number()]),
+    angle: z.number(),
+    blendMode: z.string()
+  }),
+  z.object({
+    id: z.string(),
+    type: z.literal("radial-gradient"),
+    colors: z.array(ColorPointSchema),
+    center: z.tuple([z.number(), z.number()]),
+    diameter: z.number(),
+    angle: z.number(),
+    blendMode: z.string()
+  }),
+  z.object({
+    id: z.string(),
+    type: z.literal("conic-gradient"),
+    colors: z.array(ColorPointSchema),
+    center: z.tuple([z.number(), z.number()]),
+    angle: z.number(),
+    blendMode: z.string()
+  }),
+  z.object({
+    id: z.string(),
+    type: z.literal("image"),
+    src: z.string(),
+    behavior: z.string(),
+    backgroundSize: z.number(),
+    opacity: z.number(),
+    blendMode: z.string(),
+    rotation: z.number().optional()
+  })
+]);
+const TransitionSchema = z.object({
+  timing: z.string(),
+  duration: z.number(),
+  delay: z.number()
+});
+const getStateParamsSchema = (schema) => {
+  return z.object({
+    value: schema,
+    in: TransitionSchema,
+    out: TransitionSchema
+  }).optional();
+};
+const ItemStateBaseSchema = z.object({
+  width: getStateParamsSchema(z.number()),
+  height: getStateParamsSchema(z.number()),
+  angle: getStateParamsSchema(z.number()),
+  top: getStateParamsSchema(z.number()),
+  left: getStateParamsSchema(z.number()),
+  scale: getStateParamsSchema(z.number()),
+  blur: getStateParamsSchema(z.number())
+});
+const MediaStateParamsSchema = z.object({
+  opacity: getStateParamsSchema(z.number()),
+  radius: getStateParamsSchema(z.number()),
+  strokeWidth: getStateParamsSchema(z.number()),
+  strokeFill: getStateParamsSchema(z.array(FillLayerSchema))
+}).merge(ItemStateBaseSchema);
+const RectangleStateParamsSchema = z.object({
+  strokeWidth: getStateParamsSchema(z.number()),
+  radius: getStateParamsSchema(z.number()),
+  fill: getStateParamsSchema(z.array(FillLayerSchema)),
+  strokeFill: getStateParamsSchema(z.array(FillLayerSchema)),
+  backdropBlur: getStateParamsSchema(z.number())
+}).merge(ItemStateBaseSchema);
+const CustomItemStateParamsSchema = ItemStateBaseSchema;
+const EmbedStateParamsSchema = z.object({
+  radius: getStateParamsSchema(z.number()),
+  opacity: getStateParamsSchema(z.number().nonnegative())
+}).merge(ItemStateBaseSchema);
+const RichTextStateParamsSchema = z.object({
+  color: getStateParamsSchema(z.string()),
+  letterSpacing: getStateParamsSchema(z.number()),
+  wordSpacing: getStateParamsSchema(z.number())
+}).merge(ItemStateBaseSchema);
+const GroupStateParamsSchema = z.object({
+  opacity: getStateParamsSchema(z.number().nonnegative()),
+  blur: getStateParamsSchema(z.number().nonnegative())
+}).merge(ItemStateBaseSchema);
+const CompoundStateParamsSchema = z.object({
+  opacity: getStateParamsSchema(z.number().nonnegative())
+}).merge(ItemStateBaseSchema);
+const CodeEmbedStateParamsSchema = z.object({
+  opacity: getStateParamsSchema(z.number().nonnegative())
+}).merge(ItemStateBaseSchema);
+const ComponentStateParamsSchema = z.object({
+  opacity: getStateParamsSchema(z.number().nonnegative())
+}).merge(ItemStateBaseSchema);
+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 = z.object({
+  top: z.number(),
+  left: z.number(),
+  width: z.number(),
+  height: z.number(),
+  zIndex: z.number(),
+  angle: z.number(),
+  anchorSide: z.nativeEnum(AnchorSide).optional(),
+  scale: z.number().nonnegative(),
+  positionType: z.nativeEnum(PositionType),
+  scaleAnchor: z.nativeEnum(AreaAnchor)
+});
+const Link = z.object({
+  url: z.string().min(1),
+  target: z.string().min(1)
+});
+const CompoundSettingsSchema = z.object({
+  positionAnchor: z.nativeEnum(AreaAnchor),
+  widthMode: z.nativeEnum(DimensionMode),
+  heightMode: z.nativeEnum(DimensionMode)
+});
+const ItemBaseSchema = z.object({
+  id: z.string().min(1),
+  area: z.record(ItemAreaSchema),
+  hidden: z.record(z.boolean()),
+  link: Link.optional(),
+  compoundSettings: z.record(CompoundSettingsSchema).optional(),
+  layoutParams: z.record(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 = z.enum(["never", "when_visible", "always"]).optional();
+const RichTextEntitySchema = z.object({
+  start: z.number().nonnegative(),
+  end: z.number().nonnegative(),
+  type: z.string(),
+  data: z.any().optional()
+});
+const RichTextStyleSchema = z.object({
+  start: z.number().nonnegative(),
+  end: z.number().nonnegative(),
+  style: z.string().min(1),
+  value: z.string().optional()
+});
+const RichTextBlockSchema = z.lazy(() => z.object({
+  start: z.number().nonnegative(),
+  end: z.number().nonnegative(),
+  type: z.string().min(1),
+  entities: z.array(RichTextEntitySchema).optional(),
+  children: z.array(RichTextBlockSchema).optional(),
+  data: z.any().optional()
+}));
+const RichTextItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.RichText),
+  commonParams: z.object({
+    text: z.string(),
+    blocks: z.array(RichTextBlockSchema).optional(),
+    pointerEvents: pointerEvents$1
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(
+    z.object({
+      rangeStyles: z.array(RichTextStyleSchema).optional(),
+      textAlign: z.nativeEnum(TextAlign),
+      sizing: z.string(),
+      blur: z.number(),
+      fontSize: z.number(),
+      lineHeight: z.number(),
+      letterSpacing: z.number(),
+      wordSpacing: z.number(),
+      textTransform: z.nativeEnum(TextTransform),
+      verticalAlign: z.nativeEnum(VerticalAlign),
+      color: z.string(),
+      typeFace: z.string(),
+      fontStyle: z.string(),
+      fontWeight: z.number(),
+      fontVariant: z.string(),
+      isDraggable: z.boolean().optional()
+    })
+  ),
+  state: z.record(RichTextStateParamsSchema)
+});
+const pointerEvents = z.enum(["never", "when_visible", "always"]).optional();
+const FXControlSchema = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("float"),
+    shaderParam: z.string(),
+    value: z.number()
+  }),
+  z.object({
+    type: z.literal("int"),
+    shaderParam: z.string(),
+    value: z.number()
+  }),
+  z.object({
+    type: z.literal("vec2"),
+    shaderParam: z.string(),
+    value: z.tuple([z.number(), z.number()])
+  })
+]);
+const FXParams = z.object({
+  url: z.string().min(1),
+  hasGLEffect: z.boolean().optional(),
+  fragmentShader: z.string().nullable(),
+  FXControls: z.array(FXControlSchema).optional()
+});
+const ImageItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Image),
+  commonParams: z.object({
+    pointerEvents
+  }).merge(FXParams),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(
+    z.object({
+      opacity: z.number().nonnegative(),
+      radius: z.number(),
+      strokeWidth: z.number(),
+      strokeFill: z.array(FillLayerSchema),
+      blur: z.number(),
+      isDraggable: z.boolean().optional()
+    })
+  ),
+  state: z.record(MediaStateParamsSchema)
+});
+const VideoItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Video),
+  commonParams: z.object({
+    coverUrl: z.string().nullable(),
+    pointerEvents
+  }).merge(FXParams),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(
+    z.object({
+      scrollPlayback: z.object({
+        from: z.number(),
+        to: z.number()
+      }).nullable(),
+      opacity: z.number().nonnegative(),
+      radius: z.number(),
+      strokeWidth: z.number(),
+      strokeFill: z.array(FillLayerSchema),
+      blur: z.number(),
+      isDraggable: z.boolean().optional(),
+      play: z.enum(["on-hover", "on-click", "auto"]),
+      muted: z.boolean(),
+      controls: z.boolean()
+    })
+  ),
+  state: z.record(MediaStateParamsSchema)
+});
+const RectangleItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Rectangle),
+  commonParams: z.object({
+    ratioLock: z.boolean(),
+    pointerEvents
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(
+    z.object({
+      radius: z.number(),
+      strokeWidth: z.number(),
+      fill: z.array(FillLayerSchema),
+      strokeFill: z.array(FillLayerSchema),
+      blur: z.number(),
+      backdropBlur: z.number(),
+      blurMode: z.enum(["default", "backdrop"]),
+      isDraggable: z.boolean().optional()
+    })
+  ),
+  state: z.record(RectangleStateParamsSchema)
+});
+const CustomItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Custom),
+  commonParams: z.object({
+    name: z.string(),
+    pointerEvents
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(z.object({
+    isDraggable: z.boolean().optional()
+  })),
+  state: z.record(CustomItemStateParamsSchema)
+});
+const VimeoEmbedItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.VimeoEmbed),
+  commonParams: z.object({
+    url: z.string().min(1),
+    coverUrl: z.string().nullable(),
+    ratioLock: z.boolean(),
+    pointerEvents
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(
+    z.object({
+      radius: z.number(),
+      blur: z.number(),
+      opacity: z.number().nonnegative(),
+      play: z.union([z.literal("on-hover"), z.literal("on-click"), z.literal("auto")]),
+      controls: z.boolean(),
+      loop: z.boolean(),
+      muted: z.boolean(),
+      pictureInPicture: z.boolean()
+    })
+  ),
+  state: z.record(EmbedStateParamsSchema)
+});
+const YoutubeEmbedItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.YoutubeEmbed),
+  commonParams: z.object({
+    url: z.string().min(1),
+    coverUrl: z.string().nullable(),
+    pointerEvents
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(
+    z.object({
+      radius: z.number(),
+      blur: z.number(),
+      opacity: z.number().nonnegative(),
+      play: z.enum(["on-hover", "on-click", "auto"]),
+      controls: z.boolean(),
+      loop: z.boolean()
+    })
+  ),
+  state: z.record(EmbedStateParamsSchema)
+});
+const CodeEmbedItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.CodeEmbed),
+  commonParams: z.object({
+    html: z.string(),
+    scale: z.boolean(),
+    iframe: z.boolean(),
+    pointerEvents
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(
+    z.object({
+      areaAnchor: z.nativeEnum(AreaAnchor),
+      opacity: z.number().nonnegative(),
+      blur: z.number(),
+      isDraggable: z.boolean().optional()
+    })
+  ),
+  state: z.record(CodeEmbedStateParamsSchema)
+});
+const ComponentItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Component),
+  commonParams: z.object({
+    componentId: z.string(),
+    content: z.any().optional()
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable()
+  ),
+  layoutParams: z.record(z.object({
+    parameters: z.any().optional(),
+    opacity: z.number().nonnegative(),
+    blur: z.number()
+  })),
+  state: z.record(ComponentStateParamsSchema)
+});
+const ItemSchema = z.lazy(() => z.discriminatedUnion("type", [
+  ImageItemSchema,
+  VideoItemSchema,
+  RectangleItemSchema,
+  CustomItemSchema,
+  RichTextItemSchema,
+  VimeoEmbedItemSchema,
+  YoutubeEmbedItemSchema,
+  CodeEmbedItemSchema,
+  ComponentItemSchema,
+  ItemBaseSchema.extend({
+    type: z.literal(ArticleItemType.Group),
+    commonParams: z.object({
+      pointerEvents
+    }),
+    items: z.array(ItemSchema),
+    sticky: z.record(
+      z.object({
+        from: z.number(),
+        to: z.number().optional()
+      }).nullable()
+    ),
+    layoutParams: z.record(
+      z.object({
+        opacity: z.number().nonnegative(),
+        blur: z.number()
+      })
+    ),
+    state: z.record(GroupStateParamsSchema)
+  }),
+  ItemBaseSchema.extend({
+    type: z.literal(ArticleItemType.Compound),
+    commonParams: z.object({
+      overflow: z.enum(["hidden", "visible"]),
+      pointerEvents
+    }),
+    items: z.array(ItemSchema),
+    sticky: z.record(
+      z.object({
+        from: z.number(),
+        to: z.number().optional()
+      }).nullable()
+    ),
+    layoutParams: z.record(
+      z.object({
+        opacity: z.number().nonnegative()
+      })
+    ),
+    state: z.record(CompoundStateParamsSchema)
+  })
+]));
+const SectionHeightSchema = z.object({
+  mode: z.nativeEnum(SectionHeightMode),
+  units: z.number().nonnegative(),
+  vhUnits: z.number().nonnegative().optional()
+});
+const SectionVideoSchema = z.object({
+  url: z.string(),
+  size: z.string(),
+  type: z.literal("video"),
+  play: z.enum(["on-click", "auto"]),
+  coverUrl: z.string().nullable(),
+  position: z.string(),
+  offsetX: z.number().nullable()
+});
+const SectionImageSchema = z.object({
+  url: z.string(),
+  type: z.literal("image"),
+  size: z.string(),
+  position: z.string(),
+  offsetX: z.number().nullable()
+});
+const SectionMediaSchema = z.discriminatedUnion("type", [SectionVideoSchema, SectionImageSchema]);
+const SectionSchema = z.object({
+  id: z.string().min(1),
+  items: z.array(ItemSchema),
+  name: z.string().optional(),
+  height: z.record(SectionHeightSchema),
+  position: z.record(z.number()),
+  hidden: z.record(z.boolean()),
+  color: z.record(z.nullable(z.string())),
+  media: z.record(SectionMediaSchema).optional()
+});
+const ItemTriggerSchema = z.object({
+  itemId: z.string(),
+  type: z.enum(["hover-in", "hover-out", "click"]),
+  from: z.string(),
+  to: z.string()
+});
+const ScrollTriggerSchema = z.object({
+  position: z.number(),
+  from: z.string(),
+  to: z.string(),
+  isReverse: z.boolean()
+});
+const VideoInteractionActionSchema = z.object({
+  type: z.enum(["play", "pause"]),
+  itemId: z.string()
+});
+const StateSchema = z.object({
+  id: z.string(),
+  actions: z.array(VideoInteractionActionSchema).optional()
+});
+const InteractionSchema = z.object({
+  id: z.string(),
+  triggers: z.array(z.union([ItemTriggerSchema, ScrollTriggerSchema])),
+  states: z.array(StateSchema),
+  startStateId: z.string()
+});
+const ArticleSchema = z.object({
+  id: z.string().min(1),
+  sections: z.array(SectionSchema),
+  interactions: z.record(z.array(InteractionSchema))
+});
+const LayoutSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  startsWith: z.number().nonnegative(),
+  exemplary: 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 = z.object({
+  id: z.string().min(1),
+  html: z.object({
+    head: z.string(),
+    afterBodyOpen: z.string(),
+    beforeBodyClose: z.string()
+  }),
+  meta: z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    opengraphThumbnail: z.string().optional(),
+    keywords: z.string().optional(),
+    favicon: z.string().optional()
+  }),
+  layouts: z.array(LayoutSchema),
+  pages: z.array(z.object({
+    title: z.string(),
+    articleId: z.string().min(1),
+    slug: z.string(),
+    meta: z.object({
+      title: z.string().optional(),
+      description: z.string().optional(),
+      opengraphThumbnail: z.string().optional(),
+      keywords: z.string().optional(),
+      enabled: z.boolean()
+    }).optional(),
+    id: z.string().min(1)
+  })),
+  fonts: z.object({
+    google: z.string(),
+    adobe: z.string(),
+    custom: z.array(z.object({
+      name: z.string().min(1),
+      style: z.string().min(1),
+      weight: z.number(),
+      files: z.array(
+        z.object({
+          type: z.nativeEnum(FontFileTypes),
+          url: 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 = z.object({
+  id: z.string().min(1),
+  layoutId: z.string().min(1),
+  itemId: z.string().min(1),
+  position: z.number()
+});
+const DimensionsKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Dimensions),
+  value: z.object({
+    width: z.number().nonnegative(),
+    height: z.number().nonnegative()
+  })
+});
+const PositionKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Position),
+  value: z.object({
+    top: z.number(),
+    left: z.number()
+  })
+});
+const RotationKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Rotation),
+  value: z.object({
+    angle: z.number()
+  })
+});
+const BorderRadiusKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.BorderRadius),
+  value: z.object({
+    radius: z.number().nonnegative()
+  })
+});
+const BorderWidthKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.BorderWidth),
+  value: z.object({
+    borderWidth: z.number().nonnegative()
+  })
+});
+const BorderFillKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.BorderFill),
+  value: z.array(FillLayerSchema)
+});
+const OpacityKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Opacity),
+  value: z.object({
+    opacity: z.number().nonnegative()
+  })
+});
+const ScaleKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Scale),
+  value: z.object({
+    scale: z.number().nonnegative()
+  })
+});
+const BlurKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Blur),
+  value: z.object({
+    blur: z.number()
+  })
+});
+const BackdropBlurKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.BackdropBlur),
+  value: z.object({
+    backdropBlur: z.number()
+  })
+});
+const TextColorKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.TextColor),
+  value: z.object({
+    color: z.string()
+  })
+});
+const LetterSpacingKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.LetterSpacing),
+  value: z.object({
+    letterSpacing: z.number()
+  })
+});
+const WordSpacingKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.WordSpacing),
+  value: z.object({
+    wordSpacing: z.number()
+  })
+});
+const FXParamsKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.FXParams),
+  value: z.record(z.string(), z.number())
+});
+const FillKeyframeSchema = KeyframesBaseSchema.extend({
+  type: z.literal(KeyframeType.Fill),
+  value: z.array(FillLayerSchema)
+});
+const KeyframeSchema = z.discriminatedUnion("type", [
+  DimensionsKeyframeSchema,
+  PositionKeyframeSchema,
+  RotationKeyframeSchema,
+  BorderRadiusKeyframeSchema,
+  BorderWidthKeyframeSchema,
+  BorderFillKeyframeSchema,
+  OpacityKeyframeSchema,
+  ScaleKeyframeSchema,
+  BlurKeyframeSchema,
+  BackdropBlurKeyframeSchema,
+  TextColorKeyframeSchema,
+  LetterSpacingKeyframeSchema,
+  WordSpacingKeyframeSchema,
+  FXParamsKeyframeSchema,
+  FillKeyframeSchema
+]);
+const KeyframesSchema = z.array(KeyframeSchema);
+class Client {
+  constructor(APIUrl, fetchImpl = fetch$1) {
+    this.fetchImpl = fetchImpl;
+    this.url = new 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 = new URL(`/projects/${projectId}?buildMode=${buildMode}`, origin);
+    const response = await this.fetchImpl(url.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 = new URL(`/projects/${projectId}/articles/${articleId}?buildMode=${buildMode}`, origin);
+    const response = await this.fetchImpl(url.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.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__ */ jsx("a", { className: styles$2.link, href: child.value, target: child.target, children: getChildren(child.children) }, i);
+      }
+      return /* @__PURE__ */ jsx("span", { style: getLeafCss(child), children: child.text }, i);
+    });
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: content.map((block, i) => {
+    const children = block.children;
+    return /* @__PURE__ */ jsx("div", { children: getChildren(children) }, i);
+  }) });
+};
+function getLeafCss(leaf) {
+  return {
+    ...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, fill = "#000000", hoverFill = "#CCCCCC", className = "" }) => {
+  const [supportsMask, setSupportsMask] = useState(true);
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.CSS) {
+      const supported = CSS.supports("mask-image", 'url("")') || CSS.supports("-webkit-mask-image", 'url("")');
+      setSupportsMask(supported);
+    }
+  }, []);
+  if (!url.endsWith(".svg") || !supportsMask) {
+    return /* @__PURE__ */ jsx("img", { src: url, alt: "", className: cn(styles$1.img, className) });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-supports-mask": supportsMask,
+      className: cn(styles$1.svg, className),
+      style: {
+        "--svg": `url(${url})`,
+        "--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] = useState(null);
+  const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = sliderStyles.caption;
+  const [sliderDimensions, setSliderDimensions] = useState(void 0);
+  const [wrapperRef, setWrapperRef] = useState(null);
+  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
+  const [key, setKey] = useState(0);
+  const { direction, transition, controls, pagination: pagination2, caption, triggers } = settings;
+  const prevSliderTypeRef = useRef(transition.type);
+  const { x: controlsOffsetX, y: controlsOffsetY } = settings.controls.offset;
+  const handleArrowClick = (dir) => {
+    if (sliderRef) {
+      sliderRef.go(dir);
+    }
+  };
+  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]);
+  useEffect(() => {
+    if (!sliderRef || prevSliderTypeRef.current === transition.type) return;
+    setKey((prev) => prev + 1);
+    prevSliderTypeRef.current = transition.type;
+  }, [transition.type]);
+  return /* @__PURE__ */ jsx("div", { className: cn(styles$3.wrapper, { [styles$3.editor]: isEditor }), ref: setWrapperRef, children: /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            className: cn(styles$3.captionBlock),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$3.captionTextWrapper,
+                children: content.map((item, index) => /* @__PURE__ */ 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__ */ 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__ */ jsx(RichTextRenderer, { content: item.imageCaption })
+                      }
+                    )
+                  },
+                  index
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$3.sliderItem,
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: styles$3.imgWrapper,
+                    children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(styles$3.arrow, {
+                [styles$3.arrowVertical]: direction === "vert"
+              }),
+              style: {
+                color: controls.color,
+                ["--arrow-hover-color"]: controls.hover
+              },
+              children: /* @__PURE__ */ 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__ */ jsx(
+                      SvgImage,
+                      {
+                        url: controls.arrowsImgUrl,
+                        fill: controls.color,
+                        hoverFill: controls.hover,
+                        className: cn(styles$3.arrowImg, styles$3.mirror)
+                      }
+                    ),
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg, styles$3.mirror) })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                      SvgImage,
+                      {
+                        url: controls.arrowsImgUrl,
+                        fill: controls.color,
+                        hoverFill: controls.hover,
+                        className: styles$3.arrowImg
+                      }
+                    ),
+                    !controls.arrowsImgUrl && /* @__PURE__ */ jsx(ArrowIcon, { color: controls.color, className: cn(styles$3.arrowIcon, styles$3.arrowImg) })
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        triggers.triggersList.click && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles$3.clickOverlay,
+            onClick: () => {
+              if (sliderRef) {
+                sliderRef.go("+1");
+              }
+            }
+          }
+        ),
+        pagination2.isActive && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      if (sliderRef) {
+                        sliderRef.go(index);
+                      }
+                    },
+                    className: cn(styles$3.paginationItem),
+                    children: /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 10 18", className, children: /* @__PURE__ */ jsx("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: /* @__PURE__ */ 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",
+        items: {
+          type: "object",
+          properties: {
+            image: {
+              type: "object",
+              display: {
+                type: "media-input"
+              },
+              properties: {
+                url: {
+                  type: "string"
+                },
+                name: {
+                  type: "string"
+                },
+                objectFit: {
+                  type: "string",
+                  enum: ["cover", "contain"]
+                }
+              },
+              required: ["url", "name"]
+            },
+            imageCaption: {
+              display: {
+                type: "rich-text",
+                placeholder: "Add Caption..."
+              }
+            },
+            link: {
+              type: "object",
+              display: {
+                type: "text-input",
+                placeholder: "Add Caption..."
+              },
+              properties: {
+                text: {
+                  type: "string"
+                }
+              }
+            }
+          },
+          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(url) {
+  return new Promise((resolve) => {
+    const img2 = new Image();
+    img2.src = url;
+    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 = useRef(null);
+  const [placedImages, setPlacedImages] = useState([]);
+  const [counter, setCounter] = useState(0);
+  const imageIdCounter = 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 = useMemo(() => {
+    const defaultContentLength = Math.min(content.length, defaultImageCount);
+    return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
+  }, [content]);
+  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]);
+  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__ */ 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__ */ 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__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: img2.url,
+              alt: img2.name,
+              className: styles.image
+            },
+            img2.id
+          ) }) : /* @__PURE__ */ 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",
+        items: {
+          type: "object",
+          properties: {
+            image: {
+              type: "object",
+              display: {
+                type: "media-input",
+                isObjectFitEditable: false
+              },
+              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..."
+              }
+            }
+          },
+          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
+];
+export {
+  AnchorSide,
+  AreaAnchor,
+  ArticleItemType,
+  Client as CntrlClient,
+  DimensionMode,
+  FontFaceGenerator,
+  KeyframeType,
+  PositionType,
+  ScrollPlaybackVideoManager,
+  SectionHeightMode,
+  TextAlign,
+  TextDecoration,
+  TextTransform,
+  VerticalAlign,
+  components,
+  getLayoutMediaQuery,
+  getLayoutStyles
+};