thread-ui 0.15.0 → 0.16.0

package/README.md

@@ -106,7 +106,7 @@ Component CSS is pre-generated using Panda CSS, so components render correctly s
 
 ### Media Display
 
-`ImagePanel` `InfoCard` `MediaCard`
+`ImagePanel` `InfoCard` `MediaCard` `MediaOverlay`
 
 ### Content Display
 

package/dist/components/content-display/carousel/carousel.js

@@ -5,6 +5,7 @@ import useEmblaCarousel from 'embla-carousel-react';
 import { Card } from '../../../components/ui';
 import { CarouselProvider, CarouselEmblaProvider } from './carousel-context';
 import { CarouselContent } from './components/carousel-content';
+import WheelGesturesPlugin from 'embla-carousel-wheel-gestures';
 // -- Item Wrapper Resolution --
 const FragmentWrapper = ({ children }) => _jsx(_Fragment, { children: children });
 const CardWrapper = ({ children, title }) => (_jsx(Card, { fullWidth: true, title: title ? { text: title } : undefined, size: "md", children: children }));
@@ -36,7 +37,7 @@ const resolveItemWrapper = (option) => {
  */
 export const Carousel = ({ title, subtitle, description, items: itemList, controlsPosition = 'above', mdCols, lgCols, itemWrapper = 'card', }) => {
     // Embla Config
-    const [emblaRef, emblaApi] = useEmblaCarousel();
+    const [emblaRef, emblaApi] = useEmblaCarousel({}, [WheelGesturesPlugin()]);
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [canScrollPrev, setCanScrollPrev] = useState(false);
     const [canScrollNext, setCanScrollNext] = useState(false);

package/dist/components/content-display/carousel/carousel.js.map

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

package/dist/components/content-display/gallery/components/item-display/gallery-item.js

@@ -41,6 +41,9 @@ const styles = {
                     borderColor: 'structure.subtle',
                 },
                 bare: {},
+                rounded: {
+                    borderRadius: 'lg',
+                },
             },
         },
         defaultVariants: {
@@ -49,11 +52,8 @@ const styles = {
     }),
 };
 export const GalleryItem = ({ itemId }) => {
-    const { value: { items, ItemWrapper, appearance }, } = useGalleryContext();
+    const { value: { items, appearance }, } = useGalleryContext();
     const item = items[itemId];
-    if (ItemWrapper) {
-        return (_jsx("div", { className: styles.container, children: _jsx(ItemWrapper, { children: item.content }) }));
-    }
     return (_jsx("div", { className: styles.container, children: _jsx("div", { className: styles.content({ appearance }), children: item.content }) }));
 };
 //# sourceMappingURL=gallery-item.js.map

package/dist/components/content-display/gallery/components/item-display/gallery-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"gallery-item.js","sourceRoot":"","sources":["../../../../../../src/components/content-display/gallery/components/item-display/gallery-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAO1D,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,WAAW,EAAE,aAAa;QAC1B,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,sBAAsB;QACjC,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,0CAA0C,EAAE,6CAA6C;QACpG,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,4CAA4C,EAAE,6CAA6C;KACxG,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;QACZ,IAAI,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,2CAA2C,EAAE,6CAA6C;YAClG,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,MAAM;YAClB,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE;gBACR,QAAQ,EAAE,MAAM;gBAChB,SAAS,EAAE,MAAM;gBACjB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,SAAS;gBACpB,YAAY,EAAE,IAAI;aAClB;SACD;QACD,QAAQ,EAAE;YACT,UAAU,EAAE;gBACX,MAAM,EAAE;oBACP,eAAe,EAAE,UAAU;oBAC3B,YAAY,EAAE,IAAI;oBAClB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,kBAAkB;iBAC/B;gBACD,IAAI,EAAE,EAAE;aACR;SACD;QACD,eAAe,EAAE;YAChB,UAAU,EAAE,QAAQ;SACpB;KACD,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,MAAM,EAAoB,EAAE,EAAE;IAC3D,MAAM,EACL,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GACzC,GAAG,iBAAiB,EAAE,CAAC;IAExB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B,IAAI,WAAW,EAAE,CAAC;QACjB,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,KAAC,WAAW,cAAE,IAAI,CAAC,OAAO,GAAe,GACpC,CACN,CAAC;IACH,CAAC;IAED,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,YAAG,IAAI,CAAC,OAAO,GAAO,GAC/D,CACN,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"gallery-item.js","sourceRoot":"","sources":["../../../../../../src/components/content-display/gallery/components/item-display/gallery-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAO1D,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,WAAW,EAAE,aAAa;QAC1B,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,sBAAsB;QACjC,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,0CAA0C,EAAE,6CAA6C;QACpG,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,4CAA4C,EAAE,6CAA6C;KACxG,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;QACZ,IAAI,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,2CAA2C,EAAE,6CAA6C;YAClG,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,MAAM;YAClB,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE;gBACR,QAAQ,EAAE,MAAM;gBAChB,SAAS,EAAE,MAAM;gBACjB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,SAAS;gBACpB,YAAY,EAAE,IAAI;aAClB;SACD;QACD,QAAQ,EAAE;YACT,UAAU,EAAE;gBACX,MAAM,EAAE;oBACP,eAAe,EAAE,UAAU;oBAC3B,YAAY,EAAE,IAAI;oBAClB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,kBAAkB;iBAC/B;gBACD,IAAI,EAAE,EAAE;gBACR,OAAO,EAAE;oBACR,YAAY,EAAE,IAAI;iBAClB;aACD;SACD;QACD,eAAe,EAAE;YAChB,UAAU,EAAE,QAAQ;SACpB;KACD,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,MAAM,EAAoB,EAAE,EAAE;IAC3D,MAAM,EACL,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAC5B,GAAG,iBAAiB,EAAE,CAAC;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,YAAG,IAAI,CAAC,OAAO,GAAO,GAC/D,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/gallery/components/item-track/track-item.js

@@ -44,6 +44,7 @@ const styles = {
                     borderStyle: 'solid',
                 },
                 bare: {},
+                rounded: {},
             },
         },
         defaultVariants: {
@@ -52,9 +53,9 @@ const styles = {
     }),
 };
 export const TrackItem = ({ itemId }) => {
-    const { value: { items, appearance, variableWidths }, } = useGalleryContext();
+    const { value: { trackItems, appearance, variableWidths }, } = useGalleryContext();
     const { onTrackItemClick } = useGalleryEmblaContext();
-    const item = items[itemId];
+    const item = trackItems[itemId];
     return (_jsx("button", { className: styles.container({ variableWidths }), onClick: () => onTrackItemClick(itemId), children: _jsx("div", { className: styles.internalContent({ appearance }), children: item.content }) }));
 };
 //# sourceMappingURL=track-item.js.map

package/dist/components/content-display/gallery/components/item-track/track-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"track-item.js","sourceRoot":"","sources":["../../../../../../src/components/content-display/gallery/components/item-track/track-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAO,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAOlF,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,IAAI,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE,GAAG;YACb,WAAW,EAAE,0CAA0C,EAAE,6CAA6C;YACtG,WAAW,EAAE,aAAa;YAC1B,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,OAAO;SACpB;QACD,QAAQ,EAAE;YACT,cAAc,EAAE;gBACf,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;gBAC3B,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;aAC3B;SACD;KACD,CAAC;IACF,eAAe,EAAE,GAAG,CAAC;QACpB,IAAI,EAAE;YACL,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,yCAAyC,EAAE;YACvE,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE;gBACR,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,SAAS;aACpB;SACD;QACD,QAAQ,EAAE;YACT,UAAU,EAAE;gBACX,MAAM,EAAE;oBACP,eAAe,EAAE,SAAS;oBAC1B,WAAW,EAAE,kBAAkB;oBAC/B,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,OAAO;iBACpB;gBACD,IAAI,EAAE,EAAE;aACR;SACD;QACD,eAAe,EAAE;YAChB,UAAU,EAAE,QAAQ;SACpB;KACD,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,MAAM,EAAkB,EAAE,EAAE;IACvD,MAAM,EACL,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,GAC5C,GAAG,iBAAiB,EAAE,CAAC;IACxB,MAAM,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,EAAE,CAAC;IAEtD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B,OAAO,CACN,iBACC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC,EAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,YAEvC,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,UAAU,EAAE,CAAC,YAAG,IAAI,CAAC,OAAO,GAAO,GACpE,CACT,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"track-item.js","sourceRoot":"","sources":["../../../../../../src/components/content-display/gallery/components/item-track/track-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAOlF,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,IAAI,EAAE;YACL,MAAM,EAAE,SAAS;YACjB,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE,GAAG;YACb,WAAW,EAAE,0CAA0C,EAAE,6CAA6C;YACtG,WAAW,EAAE,aAAa;YAC1B,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,OAAO;SACpB;QACD,QAAQ,EAAE;YACT,cAAc,EAAE;gBACf,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;gBAC3B,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;aAC3B;SACD;KACD,CAAC;IACF,eAAe,EAAE,GAAG,CAAC;QACpB,IAAI,EAAE;YACL,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,yCAAyC,EAAE;YACvE,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE;gBACR,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,SAAS;aACpB;SACD;QACD,QAAQ,EAAE;YACT,UAAU,EAAE;gBACX,MAAM,EAAE;oBACP,eAAe,EAAE,SAAS;oBAC1B,WAAW,EAAE,kBAAkB;oBAC/B,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,OAAO;iBACpB;gBACD,IAAI,EAAE,EAAE;gBACR,OAAO,EAAE,EAAE;aACX;SACD;QACD,eAAe,EAAE;YAChB,UAAU,EAAE,QAAQ;SACpB;KACD,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,MAAM,EAAkB,EAAE,EAAE;IACvD,MAAM,EACL,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,GACjD,GAAG,iBAAiB,EAAE,CAAC;IACxB,MAAM,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,EAAE,CAAC;IAEtD,MAAM,IAAI,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IAEhC,OAAO,CACN,iBACC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC,EAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,YAEvC,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,UAAU,EAAE,CAAC,YAAG,IAAI,CAAC,OAAO,GAAO,GACpE,CACT,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/gallery/gallery-context.d.ts

@@ -46,10 +46,13 @@ export declare const GalleryProvider: {
                 id: import("./gallery.types").GalleryItemId;
                 content: import("./gallery.types").GalleryItem;
             }>;
-            ItemWrapper: import("react").ComponentType<any> | undefined;
+            trackItems: Record<import("./gallery.types").GalleryItemId, {
+                id: import("./gallery.types").GalleryItemId;
+                content: import("./gallery.types").GalleryItem;
+            }>;
             itemOrder: import("./gallery.types").GalleryItemId[];
         };
-        syncedKeys?: ("title" | "size" | "items" | "appearance" | "subtitle" | "itemOrder" | "ItemWrapper" | "variableWidths")[] | undefined;
+        syncedKeys?: ("title" | "size" | "items" | "appearance" | "subtitle" | "itemOrder" | "trackItems" | "variableWidths")[] | undefined;
         children: import("react").ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -99,7 +102,10 @@ export declare const GalleryProvider: {
             id: import("./gallery.types").GalleryItemId;
             content: import("./gallery.types").GalleryItem;
         }>;
-        ItemWrapper: import("react").ComponentType<any> | undefined;
+        trackItems: Record<import("./gallery.types").GalleryItemId, {
+            id: import("./gallery.types").GalleryItemId;
+            content: import("./gallery.types").GalleryItem;
+        }>;
         itemOrder: import("./gallery.types").GalleryItemId[];
     };
     setValue: import("react").Dispatch<import("react").SetStateAction<{
@@ -147,7 +153,10 @@ export declare const GalleryProvider: {
             id: import("./gallery.types").GalleryItemId;
             content: import("./gallery.types").GalleryItem;
         }>;
-        ItemWrapper: import("react").ComponentType<any> | undefined;
+        trackItems: Record<import("./gallery.types").GalleryItemId, {
+            id: import("./gallery.types").GalleryItemId;
+            content: import("./gallery.types").GalleryItem;
+        }>;
         itemOrder: import("./gallery.types").GalleryItemId[];
     }>>;
 };

package/dist/components/content-display/gallery/gallery-display-constants.d.ts

@@ -1,3 +1,4 @@
+import { ThreadCssName } from '../../../theme/css-name-configurations/theme-css-names';
 export declare const GALLERY_DISPLAY_CONSTANTS: {
     readonly displayItemHeight: "100%";
     readonly displayItemSpacing: "1rem";
@@ -6,4 +7,4 @@ export declare const GALLERY_DISPLAY_CONSTANTS: {
     readonly itemTrackSpacing: "0.8rem";
 };
 export type DisplayConstantsKeys = keyof typeof GALLERY_DISPLAY_CONSTANTS;
-export declare const GALLERY_DISPLAY_CONSTANT_NAMES: Record<DisplayConstantsKeys, string>;
+export declare const GALLERY_DISPLAY_CONSTANT_NAMES: Record<DisplayConstantsKeys, ThreadCssName>;

package/dist/components/content-display/gallery/gallery-display-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"gallery-display-constants.js","sourceRoot":"","sources":["../../../../src/components/content-display/gallery/gallery-display-constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACxC,iBAAiB,EAAE,MAAM;IACzB,kBAAkB,EAAE,MAAM;IAC1B,gBAAgB,EAAE,MAAM;IACxB,eAAe,EAAE,MAAM;IACvB,gBAAgB,EAAE,QAAQ;CACgB,CAAC;AAI5C,MAAM,CAAC,MAAM,8BAA8B,GAAyC;IACnF,iBAAiB,EAAE,sCAAsC;IACzD,kBAAkB,EAAE,uCAAuC;IAC3D,gBAAgB,EAAE,qCAAqC;IACvD,eAAe,EAAE,oCAAoC;IACrD,gBAAgB,EAAE,qCAAqC;CACvD,CAAC"}
+{"version":3,"file":"gallery-display-constants.js","sourceRoot":"","sources":["../../../../src/components/content-display/gallery/gallery-display-constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACxC,iBAAiB,EAAE,MAAM;IACzB,kBAAkB,EAAE,MAAM;IAC1B,gBAAgB,EAAE,MAAM;IACxB,eAAe,EAAE,MAAM;IACvB,gBAAgB,EAAE,QAAQ;CACgB,CAAC;AAI5C,MAAM,CAAC,MAAM,8BAA8B,GAAgD;IAC1F,iBAAiB,EAAE,sCAAsC;IACzD,kBAAkB,EAAE,uCAAuC;IAC3D,gBAAgB,EAAE,qCAAqC;IACvD,eAAe,EAAE,oCAAoC;IACrD,gBAAgB,EAAE,qCAAqC;CACvD,CAAC"}

package/dist/components/content-display/gallery/gallery.d.ts

@@ -15,4 +15,4 @@ import { GalleryProps } from './gallery.types';
  * />
  * ```
  */
-export declare const Gallery: ({ title, subtitle, items: itemList, itemWrapper, size, appearance, startIndex, variableWidths, }: GalleryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Gallery: ({ title, subtitle, items: itemList, size, appearance, startIndex, variableWidths, trackItems: trackItemList, }: GalleryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/content-display/gallery/gallery.js

@@ -21,7 +21,7 @@ import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
  * />
  * ```
  */
-export const Gallery = ({ title, subtitle, items: itemList, itemWrapper, size = 'lg', appearance = 'framed', startIndex = 0, variableWidths = false, }) => {
+export const Gallery = ({ title, subtitle, items: itemList, size = 'lg', appearance = 'framed', startIndex = 0, variableWidths = false, trackItems: trackItemList, }) => {
     const [emblaDisplayRef, emblaDisplayApi] = useEmblaCarousel({ startIndex });
     const [emblaItemTrackRef, emblaItemTrackApi] = useEmblaCarousel({
         startIndex,
@@ -50,20 +50,25 @@ export const Gallery = ({ title, subtitle, items: itemList, itemWrapper, size =
         content: item,
         id: index,
     })), [itemList]);
+    const normalizedTrackItems = useMemo(() => (trackItemList ?? itemList).map((item, index) => ({
+        content: item,
+        id: index,
+    })), [trackItemList, itemList]);
     const initialState = useMemo(() => {
         const items = Object.fromEntries(normalizedItems.map((item) => [item.id, item]));
+        const trackItems = Object.fromEntries(normalizedTrackItems.map((item) => [item.id, item]));
         const itemOrder = normalizedItems.map((item) => item.id);
         return {
             title,
             subtitle,
             items,
+            trackItems,
             itemOrder,
-            ItemWrapper: itemWrapper,
             size,
             appearance,
             variableWidths,
         };
-    }, [title, normalizedItems, size]);
+    }, [title, normalizedItems, normalizedTrackItems, size]);
     const emblaValue = useMemo(() => ({
         emblaDisplayRef,
         emblaDisplayApi,

package/dist/components/content-display/gallery/gallery.js.map

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

package/dist/components/content-display/gallery/gallery.types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode } from 'react';
 import { Prettify, UtilitySizeOptions } from '../../../types';
 import { EmblaViewportRefType } from 'embla-carousel-react';
 import { EmblaCarouselType } from 'embla-carousel';
@@ -10,15 +10,16 @@ export type GalleryItem = ReactNode;
  * Controls the visual treatment of gallery item containers.
  * - `'framed'` — Adds background, border, and border-radius to each item.
  * - `'bare'` — Renders items without any decorative container styles.
+ * - `'rounded'` — No background or border, but rounds the clip box so overlaid media keeps rounded corners.
  */
-export type GalleryAppearanceOptions = 'framed' | 'bare';
+export type GalleryAppearanceOptions = 'framed' | 'bare' | 'rounded';
 export type GalleryProps = Prettify<ContentTitle & {
     /** Visual treatment for item containers @default `'framed'` */
     appearance?: GalleryAppearanceOptions;
-    /** Array of React nodes to render as slides, in display order */
+    /** Array of items to render as slides, in display order */
     items: GalleryItem[];
-    /** Optional component used to wrap each item, replacing the default container */
-    itemWrapper?: ComponentType<any>;
+    /** Alternate content for the gallery track — must match `items` by index */
+    trackItems?: GalleryItem[];
     /** Controls the gallery's dimensional presets @default `'lg'` */
     size?: UtilitySizeOptions | 'fill';
     /** Index of Item Gallery opens at Start @default 0 */
@@ -32,7 +33,7 @@ type InternalGalleryItem = {
 };
 export type GalleryState = Prettify<Pick<GalleryProps, 'title' | 'subtitle'> & Required<Pick<GalleryProps, 'size' | 'appearance' | 'variableWidths'>> & {
     items: Record<GalleryItemId, InternalGalleryItem>;
-    ItemWrapper: GalleryProps['itemWrapper'];
+    trackItems: Record<GalleryItemId, InternalGalleryItem>;
     itemOrder: GalleryItemId[];
 }>;
 export type GalleryEmblaContext = {

package/dist/components/content-display/lightbox/components/lightbox-content.js

@@ -13,7 +13,7 @@ const styles = {
     }),
 };
 export const LightBoxContent = () => {
-    const { items, itemWrapper, appearance, startIndex, variableWidths } = useLightboxContext();
-    return (_jsx("div", { className: styles.container, children: _jsx(Gallery, { startIndex: startIndex, title: _jsx(LightboxTitle, {}), items: items, itemWrapper: itemWrapper, size: "fill", appearance: appearance, variableWidths: variableWidths }) }));
+    const { items, trackItems, appearance, startIndex, variableWidths } = useLightboxContext();
+    return (_jsx("div", { className: styles.container, children: _jsx(Gallery, { startIndex: startIndex, title: _jsx(LightboxTitle, {}), items: items, trackItems: trackItems, size: "fill", appearance: appearance, variableWidths: variableWidths }) }));
 };
 //# sourceMappingURL=lightbox-content.js.map

package/dist/components/content-display/lightbox/components/lightbox-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"lightbox-content.js","sourceRoot":"","sources":["../../../../../src/components/content-display/lightbox/components/lightbox-content.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;QACvC,QAAQ,EAAE,QAAQ;KAClB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAE5F,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,KAAC,OAAO,IACP,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAC,aAAa,KAAG,EACxB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,GAC7B,GACG,CACN,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"lightbox-content.js","sourceRoot":"","sources":["../../../../../src/components/content-display/lightbox/components/lightbox-content.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;QACvC,QAAQ,EAAE,QAAQ;KAClB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAE3F,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC/B,KAAC,OAAO,IACP,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAC,aAAa,KAAG,EACxB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,GAC7B,GACG,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/lightbox/lightbox-context.d.ts

@@ -8,12 +8,13 @@ export declare const LightboxProvider: import("react").Provider<{
         subtitle?: import("react").ReactNode;
     }, ((props: import("../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element) | ((props: import("../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element) | ((props: import("../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element) | ((props: import("../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element)>) | undefined;
     items: import("../gallery/gallery.types").GalleryItem[];
-    itemWrapper?: import("react").ComponentType<any> | undefined;
     startIndex?: number | undefined;
+    trackItems?: import("../gallery/gallery.types").GalleryItem[] | undefined;
     onClose: () => void;
     isOpen: boolean;
     appearance?: import("../gallery/gallery.types").GalleryAppearanceOptions | undefined;
     variableWidths?: boolean | undefined;
+    scrimLevel?: import("../../..").ScrimScaleOptions | undefined;
 } | undefined>, useLightboxContext: () => {
     title?: (string | import("react").ReactElement<{
         align?: "left" | "center" | undefined;
@@ -52,10 +53,11 @@ export declare const LightboxProvider: import("react").Provider<{
         subtitle?: import("react").ReactNode;
     }) => import("react/jsx-runtime").JSX.Element)>) | undefined;
     items: import("../gallery/gallery.types").GalleryItem[];
-    itemWrapper?: import("react").ComponentType<any> | undefined;
     startIndex?: number | undefined;
+    trackItems?: import("../gallery/gallery.types").GalleryItem[] | undefined;
     onClose: () => void;
     isOpen: boolean;
     appearance?: import("../gallery/gallery.types").GalleryAppearanceOptions | undefined;
     variableWidths?: boolean | undefined;
+    scrimLevel?: import("../../..").ScrimScaleOptions | undefined;
 };

package/dist/components/content-display/lightbox/lightbox.d.ts

@@ -14,4 +14,4 @@ import { LightboxProps } from './lightbox.types';
  * />
  * ```
  */
-export declare const Lightbox: ({ title, items, itemWrapper, isOpen, onClose, startIndex, appearance, variableWidths, }: LightboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Lightbox: ({ title, items, isOpen, onClose, startIndex, appearance, variableWidths, scrimLevel, trackItems, }: LightboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/content-display/lightbox/lightbox.js

@@ -1,18 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ModalPrimitive } from '../../../internal-components';
 import { LightboxProvider } from './lightbox-context';
-import { css } from '../../../styled-system/css';
+import { cva } from '../../../styled-system/css';
 import { LightBoxContent } from './components/lightbox-content';
 const styles = {
-    overlay: css({
-        position: 'fixed',
-        inset: 0,
-        background: 'scrim',
-        display: 'flex',
-        justifyContent: 'center',
-        zIndex: 'modal',
-        alignItems: 'center',
-        padding: '6',
+    overlay: cva({
+        base: {
+            position: 'fixed',
+            inset: 0,
+            background: 'scrim.heavy',
+            display: 'flex',
+            justifyContent: 'center',
+            zIndex: 'modal',
+            alignItems: 'center',
+            padding: '6',
+        },
+        variants: {
+            scrimLevel: {
+                light: { background: 'scrim.light' },
+                medium: { background: 'scrim.medium' },
+                heavy: { background: 'scrim.heavy' },
+            },
+        },
+        defaultVariants: {
+            scrimLevel: 'heavy',
+        },
     }),
 };
 /**
@@ -30,17 +42,17 @@ const styles = {
  * />
  * ```
  */
-export const Lightbox = ({ title, items, itemWrapper, isOpen, onClose, startIndex, appearance = 'bare', variableWidths = true, }) => {
+export const Lightbox = ({ title, items, isOpen, onClose, startIndex, appearance = 'rounded', variableWidths = true, scrimLevel = 'heavy', trackItems, }) => {
     const initialValue = {
         title,
         items,
-        itemWrapper,
         isOpen,
         onClose,
         startIndex,
         appearance,
         variableWidths,
+        trackItems,
     };
-    return (_jsx(LightboxProvider, { value: initialValue, children: _jsx(ModalPrimitive, { overlayClassName: styles.overlay, isOpen: isOpen, onClose: onClose, children: _jsx(LightBoxContent, {}) }) }));
+    return (_jsx(LightboxProvider, { value: initialValue, children: _jsx(ModalPrimitive, { overlayClassName: styles.overlay({ scrimLevel }), isOpen: isOpen, onClose: onClose, children: _jsx(LightBoxContent, {}) }) }));
 };
 //# sourceMappingURL=lightbox.js.map

package/dist/components/content-display/lightbox/lightbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"lightbox.js","sourceRoot":"","sources":["../../../../src/components/content-display/lightbox/lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,GAAG,CAAC;QACZ,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,CAAC;QACR,UAAU,EAAE,OAAO;QACnB,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,OAAO;QACf,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,GAAG;KACZ,CAAC;CACF,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GAAG,MAAM,EACnB,cAAc,GAAG,IAAI,GACN,EAAE,EAAE;IACnB,MAAM,YAAY,GAAkB;QACnC,KAAK;QACL,KAAK;QACL,WAAW;QACX,MAAM;QACN,OAAO;QACP,UAAU;QACV,UAAU;QACV,cAAc;KACd,CAAC;IAEF,OAAO,CACN,KAAC,gBAAgB,IAAC,KAAK,EAAE,YAAY,YACpC,KAAC,cAAc,IAAC,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,YACjF,KAAC,eAAe,KAAG,GACH,GACC,CACnB,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"lightbox.js","sourceRoot":"","sources":["../../../../src/components/content-display/lightbox/lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAO,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,GAAG,CAAC;QACZ,IAAI,EAAE;YACL,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,CAAC;YACR,UAAU,EAAE,aAAa;YACzB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,OAAO;YACf,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,GAAG;SACZ;QACD,QAAQ,EAAE;YACT,UAAU,EAAE;gBACX,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE;gBACpC,MAAM,EAAE,EAAE,UAAU,EAAE,cAAc,EAAE;gBACtC,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE;aACpC;SACD;QACD,eAAe,EAAE;YAChB,UAAU,EAAE,OAAO;SACnB;KACD,CAAC;CACF,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GAAG,SAAS,EACtB,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,OAAO,EACpB,UAAU,GACK,EAAE,EAAE;IACnB,MAAM,YAAY,GAAkB;QACnC,KAAK;QACL,KAAK;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,UAAU;QACV,cAAc;QACd,UAAU;KACV,CAAC;IAEF,OAAO,CACN,KAAC,gBAAgB,IAAC,KAAK,EAAE,YAAY,YACpC,KAAC,cAAc,IACd,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,EAChD,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,YAEhB,KAAC,eAAe,KAAG,GACH,GACC,CACnB,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/lightbox/lightbox.types.d.ts

@@ -1,4 +1,4 @@
-import { Prettify } from '../../../types';
+import { Prettify, ScrimScaleOptions } from '../../../types';
 import { GalleryProps } from '../gallery';
 import { ModalProps } from '../../../components/ui';
 import { GalleryAppearanceOptions } from '../gallery/gallery.types';
@@ -7,5 +7,7 @@ export type LightboxProps = Prettify<Omit<GalleryProps, 'size' | 'subtitle' | 'a
     appearance?: GalleryAppearanceOptions;
     /** Control Auto-Width within track thumbnails @default `true` */
     variableWidths?: boolean;
+    /** Scrim Background Opacity @default `heavy` */
+    scrimLevel?: ScrimScaleOptions;
 }>;
 export type LightboxState = LightboxProps;

package/dist/components/media-display/index.d.ts

@@ -1,3 +1,4 @@
 export * from './image-panel';
 export * from './info-card';
 export * from './media-card';
+export * from './media-overlay';

package/dist/components/media-display/index.js

@@ -1,4 +1,5 @@
 export * from './image-panel';
 export * from './info-card';
 export * from './media-card';
+export * from './media-overlay';
 //# sourceMappingURL=index.js.map

package/dist/components/media-display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/media-display/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/media-display/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}

package/dist/components/media-display/media-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export type { MediaOverlayProps } from './media-overlay.types';
+export { MediaOverlay } from './media-overlay';

package/dist/components/media-display/media-overlay/index.js

@@ -0,0 +1,2 @@
+export { MediaOverlay } from './media-overlay';
+//# sourceMappingURL=index.js.map

package/dist/components/media-display/media-overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/media-display/media-overlay/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/media-display/media-overlay/media-overlay.d.ts

@@ -0,0 +1,15 @@
+import { MediaOverlayProps } from './media-overlay.types';
+/**
+ * Renders an overlay layer on top of arbitrary media, with a configurable scrim, placement, and size caps.
+ *
+ * @example
+ * <MediaOverlay
+ *   scrimLevel="medium"
+ *   placement="bottom"
+ *   maxHeight="50%"
+ *   overlay={<Title>Caption</Title>}
+ * >
+ *   <img src="/photo.jpg" alt="Photo" />
+ * </MediaOverlay>
+ */
+export declare const MediaOverlay: ({ children, overlay, scrimLevel, placement, fit, maxHeight, maxWidth, }: MediaOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/media-display/media-overlay/media-overlay.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from '../../../styled-system/css';
+const MAX_HEIGHT_CSS_NAME = '--thread-media-overlay-max-height';
+const MAX_WIDTH_CSS_NAME = '--thread-media-overlay-max-width';
+const styles = {
+    root: cva({
+        base: {
+            position: 'relative',
+            overflow: 'hidden',
+            borderRadius: 'inherit',
+            _hover: {
+                '& [data-overlay]': {
+                    opacity: 1,
+                },
+            },
+        },
+        variants: {
+            fit: {
+                contain: {
+                    '& > :first-child': {
+                        display: 'block',
+                        width: '100%',
+                        height: '100%',
+                    },
+                },
+                fill: {
+                    display: 'inline-flex',
+                    height: '100%',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                },
+            },
+        },
+        defaultVariants: {
+            fit: 'contain',
+        },
+    }),
+    overlay: cva({
+        base: {
+            position: 'absolute',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+            padding: 'md',
+            opacity: 0,
+            transition: 'opacity 200ms ease',
+            color: 'white',
+            borderRadius: 'inherit',
+            maxHeight: 'var(--thread-media-overlay-max-height, 100%)',
+            maxWidth: 'var(--thread-media-overlay-max-width, 100%)',
+            overflow: 'hidden',
+        },
+        variants: {
+            scrimLevel: {
+                none: { background: 'transparent' },
+                light: { background: 'scrim.light' },
+                medium: { background: 'scrim.medium' },
+                heavy: { background: 'scrim.heavy' },
+            },
+            placement: {
+                full: { inset: 0 },
+                top: { top: 0, left: 0, right: 0 },
+                bottom: { bottom: 0, left: 0, right: 0 },
+                left: { top: 0, bottom: 0, left: 0 },
+                right: { top: 0, bottom: 0, right: 0 },
+            },
+        },
+        defaultVariants: {
+            placement: 'full',
+        },
+    }),
+};
+/**
+ * Renders an overlay layer on top of arbitrary media, with a configurable scrim, placement, and size caps.
+ *
+ * @example
+ * <MediaOverlay
+ *   scrimLevel="medium"
+ *   placement="bottom"
+ *   maxHeight="50%"
+ *   overlay={<Title>Caption</Title>}
+ * >
+ *   <img src="/photo.jpg" alt="Photo" />
+ * </MediaOverlay>
+ */
+export const MediaOverlay = ({ children, overlay, scrimLevel = 'medium', placement, fit = 'contain', maxHeight, maxWidth, }) => {
+    return (_jsxs("div", { className: styles.root({ fit }), children: [children, _jsx("div", { "data-overlay": true, className: styles.overlay({ scrimLevel, placement }), style: {
+                    ...(maxHeight ? { [MAX_HEIGHT_CSS_NAME]: maxHeight } : {}),
+                    ...(maxWidth ? { [MAX_WIDTH_CSS_NAME]: maxWidth } : {}),
+                }, children: overlay })] }));
+};
+//# sourceMappingURL=media-overlay.js.map

package/dist/components/media-display/media-overlay/media-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-overlay.js","sourceRoot":"","sources":["../../../../src/components/media-display/media-overlay/media-overlay.tsx"],"names":[],"mappings":"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"}

package/dist/components/media-display/media-overlay/media-overlay.types.d.ts

@@ -0,0 +1,19 @@
+import { ScrimScaleOptions } from '../../../types';
+import { ReactNode } from 'react';
+export type OverlayPlacementOptions = 'full' | 'top' | 'bottom' | 'left' | 'right';
+export type MediaOverlayProps = {
+    /** The media (or any content) rendered underneath the overlay. */
+    children: ReactNode;
+    /** The content rendered in the overlay layer on top of the media. */
+    overlay: ReactNode;
+    /** Scrim Background Opacity @default `medium` */
+    scrimLevel?: 'none' | ScrimScaleOptions;
+    /** Scrim Overlay Position @default `full` */
+    placement?: OverlayPlacementOptions;
+    /** Caps overlay height. Any CSS length. @default `100%` */
+    maxHeight?: string;
+    /** Caps overlay width. Any CSS length. @default `100%` */
+    maxWidth?: string;
+    /** Media sizing mode. @default `contain` */
+    fit?: 'contain' | 'fill';
+};

package/dist/components/media-display/media-overlay/media-overlay.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=media-overlay.types.js.map

package/dist/components/media-display/media-overlay/media-overlay.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-overlay.types.js","sourceRoot":"","sources":["../../../../src/components/media-display/media-overlay/media-overlay.types.ts"],"names":[],"mappings":""}