@openpawlabs/diy-guides-ui 1.3.1 → 1.5.0

package/dist/components/GuideStep/GuideStep.d.ts

@@ -2,16 +2,22 @@ import { type ReactNode } from "react";
 import { type GuideColor } from "../../types/colors";
 /**
  * Optional, editor-only media affordances. Presence switches `GuideStep.Media`
- * into edit mode: an empty-state add target, click-to-replace on the main image,
- * a remove control per thumbnail, a "+" tile to append, and (with `onReorderImage`)
- * drag-to-reorder thumbnails. All members are intent callbacks — the library
- * performs no file or menu logic. Omit entirely for the read-only reader experience.
+ * into edit mode: an empty-state add target, an "Edit annotations" / "Adjust crop"
+ * overlay on the main image, a remove control per thumbnail, a "+" tile to append,
+ * and (with `onReorderImage`) drag-to-reorder thumbnails. All members are intent
+ * callbacks — the library performs no file or menu logic. Omit entirely for the
+ * read-only reader experience.
  */
 export interface GuideStepMediaEditing {
     /** Append a new image (e.g. open a file picker). Drives the empty target and "+" tile. */
     onAddImage?: () => void;
-    /** Replace the image at `index` (fired by clicking the main image). */
-    onReplaceImage?: (index: number) => void;
+    /** Edit annotations for the image at `index` (fired from the main image overlay). */
+    onEditAnnotations?: (index: number) => void;
+    /**
+     * Adjust the crop / display region for the image at `index`. When set, an
+     * "Adjust crop" action appears in the main image overlay beside "Edit annotations".
+     */
+    onEditCrop?: (index: number) => void;
     /** Remove the image at `index` (fired by a thumbnail's remove control). */
     onRemoveImage?: (index: number) => void;
     /**
@@ -41,7 +47,7 @@ export interface GuideStepProps {
     completable?: boolean;
     /**
      * Editor-only media affordances. When provided, the media area becomes
-     * editable (add / replace / remove / select). Leave undefined for readers.
+     * editable (add / annotate / remove / select). Leave undefined for readers.
      */
     mediaEditing?: GuideStepMediaEditing;
     /** Step body — requires `GuideStep.Media` (≥1 image) and `GuideStep.Bullets` (≥1 bullet). */

package/dist/components/GuideStep/GuideStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GuideStep.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GuideStep.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.tsx"],"names":[],"mappings":"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"}

package/dist/components/GuideStep/GuideStep.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GuideStep.stories.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAyE5D,QAAA,MAAM,IAAI;;;;oBA4MQ,CAAC;;;;qBAIT,CAAN;mBAEgB,CAAC;;;;;;;;;;;;;;;;;CAtMa,CAAC;AAEnC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiDxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA2GhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAC"}
+{"version":3,"file":"GuideStep.stories.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAyE5D,QAAA,MAAM,IAAI;;;;oBAyOmB,CAAC;;;;qBAIqB,CAAC;mBAItC,CAAb;;;;;;;;;;;;;;;;;CArOiC,CAAC;AAEnC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiDxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAyHhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAC"}

package/dist/components/MediaFigure/MediaCropEditor.d.ts

@@ -0,0 +1,27 @@
+import { type MediaDisplayRegion } from "../../utils/mediaCrop";
+export interface MediaCropEditorProps {
+    /** Image source to crop. */
+    src: string;
+    /**
+     * Current 4:3 region in source pixels. When omitted, the editor starts from the
+     * largest centered region (the same view the fixed frame center-crops to).
+     */
+    region?: MediaDisplayRegion;
+    /** Reports a new region (source pixels) when the user finishes a drag. */
+    onChange: (region: MediaDisplayRegion) => void;
+    className?: string;
+}
+/**
+ * Interactive crop tool: shows the full source image with a draggable, 4:3-locked
+ * selection that maps directly to a {@link MediaDisplayRegion} in source pixels.
+ * Drag the box to move it, drag a corner to resize. The component owns all
+ * pixel geometry and reports the chosen region — selection chrome and persistence
+ * stay with the consumer (see the authoring tool's crop modal).
+ *
+ * Once the source loads, the editor publishes its aspect ratio as the
+ * `--crop-aspect` custom property on its root, so a sized container can fit the
+ * whole image without scrolling — e.g.
+ * `width: min(100cqw, calc(100cqh * var(--crop-aspect)))`.
+ */
+export declare function MediaCropEditor({ src, region, onChange, className, }: MediaCropEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=MediaCropEditor.d.ts.map

package/dist/components/MediaFigure/MediaCropEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCropEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaCropEditor.tsx"],"names":[],"mappings":"AAUA,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AA2E/B,MAAM,WAAW,oBAAoB;IACnC,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,+BA6ItB"}

package/dist/components/MediaFigure/MediaCropEditor.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { MediaCropEditor } from "./MediaCropEditor";
+declare const meta: {
+    title: string;
+    component: typeof MediaCropEditor;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        src: string;
+        onChange: () => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=MediaCropEditor.stories.d.ts.map

package/dist/components/MediaFigure/MediaCropEditor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCropEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaCropEditor.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AA0BpD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAQ8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAqCrB,CAAC"}

package/dist/components/MediaFigure/MediaCropEditor.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MediaCropEditor.test.d.ts.map

package/dist/components/MediaFigure/MediaCropEditor.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCropEditor.test.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaCropEditor.test.tsx"],"names":[],"mappings":""}

package/dist/components/MediaFigure/MediaFigure.d.ts

@@ -45,6 +45,32 @@ export interface RectangleAnnotation extends MediaAnnotationBase {
 }
 export type MediaAnnotation = PointAnnotation | CircleAnnotation | RectangleAnnotation;
 export type { MediaDisplayRegion };
+/** Active annotation tool: `select` edits existing markers; the rest draw a new shape. */
+export type AnnotationTool = "select" | "point" | "circle" | "rectangle";
+/**
+ * Editor-only annotation affordances. Passing this turns the figure into an
+ * interactive annotation canvas — click or drag to draw, click to select, drag to
+ * move, and drag the handles to resize (the lightbox is disabled). The library owns
+ * all frame-percentage geometry and reports intent through these callbacks; tool
+ * selection, color choice, and persistence stay with the consumer. Editing relies on
+ * stable annotation `id`s so selection and updates can target a specific marker.
+ */
+export interface MediaAnnotationEditing {
+    /** Active tool (controlled). */
+    tool: AnnotationTool;
+    /** Color applied to newly drawn annotations. */
+    color: GuideColor;
+    /** Selected annotation id, or `null` when nothing is selected (controlled). */
+    selectedId?: string | null;
+    /** Selection changed to an annotation `id`, or `null` when cleared. */
+    onSelect?: (id: string | null) => void;
+    /** A new annotation was drawn. It carries no `id` — the consumer assigns one. */
+    onAdd?: (annotation: MediaAnnotation) => void;
+    /** The annotation with `id` was moved or resized. */
+    onChange?: (id: string, annotation: MediaAnnotation) => void;
+    /** The selected annotation was deleted via `Delete` / `Backspace`. */
+    onRemove?: (id: string) => void;
+}
 export interface MediaFigureProps {
     /** Image, video, or 3D model source URL. */
     src: string;
@@ -57,6 +83,17 @@ export interface MediaFigureProps {
      * scaled to fill the frame without re-encoding the image.
      */
     displayRegion?: MediaDisplayRegion;
+    /**
+     * Let readers click an image to open it full size in a modal lightbox. Applies
+     * only to `type="image"`; turn it off in editing contexts where the click drives
+     * another action. @default true
+     */
+    zoomable?: boolean;
+    /**
+     * Editor-only annotation affordances. When set, the figure becomes an interactive
+     * annotation canvas (the lightbox is disabled). Leave undefined for readers.
+     */
+    annotationEditing?: MediaAnnotationEditing;
     className?: string;
 }
 /**
@@ -65,6 +102,8 @@ export interface MediaFigureProps {
  * `displayRegion` selects a source-pixel crop. Point markers use
  * {@link GuideColor} values so they can be visually linked to matching `GuideStep`
  * bullets; circles and rectangles use the same color for their outline and fill.
+ * Image figures are zoomable by default: clicking opens the full-size source in a
+ * modal lightbox (see `zoomable`).
  */
-export declare function MediaFigure({ src, type, annotations, displayRegion, className, }: MediaFigureProps): import("react").JSX.Element;
+export declare function MediaFigure({ src, type, annotations, displayRegion, zoomable, annotationEditing, className, }: MediaFigureProps): import("react").JSX.Element;
 //# sourceMappingURL=MediaFigure.d.ts.map

package/dist/components/MediaFigure/MediaFigure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaFigure.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,gDAAgD;AAChD,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uFAAuF;IACvF,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,mFAAmF;AACnF,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,CAAC,EAAE,MAAM,CAAC;IACV,qEAAqE;IACrE,CAAC,EAAE,MAAM,CAAC;IACV,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,2EAA2E;AAC3E,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;IAC3D,IAAI,EAAE,QAAQ,CAAC;IACf,6EAA6E;IAC7E,CAAC,EAAE,MAAM,CAAC;IACV,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAC;IACV,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,kFAAkF;AAClF,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,IAAI,EAAE,WAAW,CAAC;IAClB,qFAAqF;IACrF,EAAE,EAAE,MAAM,CAAC;IACX,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,wFAAwF;IACxF,EAAE,EAAE,MAAM,CAAC;IACX,uFAAuF;IACvF,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,eAAe,GACvB,eAAe,GACf,gBAAgB,GAChB,mBAAmB,CAAC;AAExB,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAiFnC,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACnC,oFAAoF;IACpF,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC;;;OAGG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAc,EACd,WAAgB,EAChB,aAAa,EACb,SAAS,GACV,EAAE,gBAAgB,+BAclB"}
+{"version":3,"file":"MediaFigure.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.tsx"],"names":[],"mappings":"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"}

package/dist/components/MediaFigure/MediaFigure.stories.d.ts

@@ -16,6 +16,9 @@ declare const meta: {
             control: "inline-radio";
             options: string[];
         };
+        zoomable: {
+            control: "boolean";
+        };
     };
     args: {
         src: string;
@@ -24,10 +27,12 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Lightbox: Story;
 export declare const WithPointAnnotations: Story;
 export declare const WithShapeAnnotations: Story;
 export declare const Video: Story;
 export declare const Model3D: Story;
 export declare const TallImageCenterCrop: Story;
 export declare const DisplayRegion: Story;
+export declare const AnnotationEditor: Story;
 //# sourceMappingURL=MediaFigure.stories.d.ts.map

package/dist/components/MediaFigure/MediaFigure.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaFigure.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA0C5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAa0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAqBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA2ClC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAiBjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC"}
+{"version":3,"file":"MediaFigure.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EACL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAgEvB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CAc0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAqBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA2ClC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAiBjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAKF,eAAO,MAAM,gBAAgB,EAAE,KA0F9B,CAAC"}

package/dist/components/MediaFigure/MediaFigureAnnotationEditor.d.ts

@@ -0,0 +1,13 @@
+import type { MediaAnnotation, MediaAnnotationEditing } from "./MediaFigure";
+export interface MediaFigureAnnotationEditorProps {
+    annotations: MediaAnnotation[];
+    editing: MediaAnnotationEditing;
+}
+/**
+ * Interactive overlay that turns {@link MediaFigure} annotations into a drawing
+ * canvas: click or drag to add, click to select, drag to move, and drag the
+ * handles to resize. All geometry is computed in frame percentages and reported
+ * through the editing callbacks — selection, color, and persistence stay external.
+ */
+export declare function MediaFigureAnnotationEditor({ annotations, editing, }: MediaFigureAnnotationEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=MediaFigureAnnotationEditor.d.ts.map

package/dist/components/MediaFigure/MediaFigureAnnotationEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFigureAnnotationEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigureAnnotationEditor.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGV,eAAe,EACf,sBAAsB,EAGvB,MAAM,eAAe,CAAC;AAkJvB,MAAM,WAAW,gCAAgC;IAC/C,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,OAAO,EAAE,sBAAsB,CAAC;CACjC;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,WAAW,EACX,OAAO,GACR,EAAE,gCAAgC,+BA4OlC"}

package/dist/components/MediaFigure/index.d.ts

@@ -1,5 +1,7 @@
 export { MediaFigure } from "./MediaFigure";
-export type { MediaFigureProps, MediaAnnotation, MediaDisplayRegion, PointAnnotation, CircleAnnotation, RectangleAnnotation, } from "./MediaFigure";
+export type { MediaFigureProps, MediaAnnotation, MediaAnnotationEditing, AnnotationTool, MediaDisplayRegion, PointAnnotation, CircleAnnotation, RectangleAnnotation, } from "./MediaFigure";
 export { MediaFigureThumbnail } from "./MediaFigureThumbnail";
 export type { MediaFigureThumbnailProps } from "./MediaFigureThumbnail";
+export { MediaCropEditor } from "./MediaCropEditor";
+export type { MediaCropEditorProps } from "./MediaCropEditor";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MediaFigure/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}