thread-ui 0.12.0 → 0.13.0

package/README.md

@@ -96,12 +96,16 @@ Component CSS is pre-generated using Panda CSS, so components render correctly s
 
 ### UI Elements
 
-`Button` `Card` `Divider` `DotsLoader` `Icon` `IconButton` `Modal` `SkeletonLayoutLoader` `SkeletonLoader` `SpinLoader` `TabView` `Toggle`
+`Button` `Card` `Carousel` `Divider` `DotsLoader` `Gallery` `Icon` `IconButton` `Modal` `SkeletonLayoutLoader` `SkeletonLoader` `SpinLoader` `TabView` `Toggle`
 
 ### Media Display
 
 `ImagePanel` `InfoCard` `MediaCard`
 
+### Content Display
+
+`Lightbox`
+
 ### Typography Elements
 
 `Title` `H1` `H2` `H3` `Text` `Subtitle` `List` `OrderedList` `PageHeader`

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

@@ -0,0 +1,48 @@
+import { CarouselEmblaContext } from './carousel.types';
+export declare const CarouselProvider: {
+    ({ initialValue, children, }: {
+        initialValue: {
+            title?: import("react").ReactNode;
+            mdCols: import("../..").MediumColumnOptions;
+            lgCols: import("../..").LargeColumnOptions;
+            items: Record<string, {
+                title: string;
+                content: import("react").ReactNode;
+                id: import("./carousel.types").CarouselItemId;
+            }>;
+            itemOrder: import("./carousel.types").CarouselItemId[];
+            controlsPosition: import("./carousel.types").CarouselControlsPosition;
+            ItemWrapper: import("react").ComponentType<any> | undefined;
+        };
+        children: import("react").ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}, useCarouselContext: () => {
+    value: {
+        title?: import("react").ReactNode;
+        mdCols: import("../..").MediumColumnOptions;
+        lgCols: import("../..").LargeColumnOptions;
+        items: Record<string, {
+            title: string;
+            content: import("react").ReactNode;
+            id: import("./carousel.types").CarouselItemId;
+        }>;
+        itemOrder: import("./carousel.types").CarouselItemId[];
+        controlsPosition: import("./carousel.types").CarouselControlsPosition;
+        ItemWrapper: import("react").ComponentType<any> | undefined;
+    };
+    setValue: import("react").Dispatch<import("react").SetStateAction<{
+        title?: import("react").ReactNode;
+        mdCols: import("../..").MediumColumnOptions;
+        lgCols: import("../..").LargeColumnOptions;
+        items: Record<string, {
+            title: string;
+            content: import("react").ReactNode;
+            id: import("./carousel.types").CarouselItemId;
+        }>;
+        itemOrder: import("./carousel.types").CarouselItemId[];
+        controlsPosition: import("./carousel.types").CarouselControlsPosition;
+        ItemWrapper: import("react").ComponentType<any> | undefined;
+    }>>;
+};
+export declare const CarouselEmblaProvider: import("react").Provider<CarouselEmblaContext | undefined>, useCarouselEmblaContext: () => CarouselEmblaContext;

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

@@ -0,0 +1,5 @@
+'use client';
+import { createStatefulComponentContext, createComponentContext } from '../../../utils';
+export const [CarouselProvider, useCarouselContext] = createStatefulComponentContext('Carousel');
+export const [CarouselEmblaProvider, useCarouselEmblaContext] = createComponentContext('CarouselEmbla');
+//# sourceMappingURL=carousel-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-context.js","sourceRoot":"","sources":["../../../../src/components/content-display/carousel/carousel-context.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,8BAA8B,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGjF,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,GAClD,8BAA8B,CAAgB,UAAU,CAAC,CAAC;AAE3D,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,GAC5D,sBAAsB,CAAuB,eAAe,CAAC,CAAC"}

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

@@ -0,0 +1,18 @@
+import { CarouselProps } from './carousel.types';
+/**
+ * A scrollable carousel with optional navigation controls and responsive column configuration. Powered by [Embla Carousel](https://www.embla-carousel.com)
+ *
+ * Renders items in a single horizontally-scrollable track with forward/back controls.
+ * Column counts at `md` and `lg` breakpoints determine how many items are visible at once.
+ *
+ * @example
+ * ```tsx
+ * <Carousel
+ *   title="Featured"
+ *   items={[{ content: <Card /> }, { content: <Card /> }]}
+ *   mdCols={2}
+ *   lgCols={3}
+ * />
+ * ```
+ */
+export declare const Carousel: ({ title, items: itemList, controlsPosition, mdCols, lgCols, itemWrapper, }: CarouselProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { CarouselProvider, CarouselEmblaProvider } from './carousel-context';
+import { CarouselContent } from './components/carousel-content';
+/**
+ * A scrollable carousel with optional navigation controls and responsive column configuration. Powered by [Embla Carousel](https://www.embla-carousel.com)
+ *
+ * Renders items in a single horizontally-scrollable track with forward/back controls.
+ * Column counts at `md` and `lg` breakpoints determine how many items are visible at once.
+ *
+ * @example
+ * ```tsx
+ * <Carousel
+ *   title="Featured"
+ *   items={[{ content: <Card /> }, { content: <Card /> }]}
+ *   mdCols={2}
+ *   lgCols={3}
+ * />
+ * ```
+ */
+export const Carousel = ({ title, items: itemList, controlsPosition = 'above', mdCols, lgCols, itemWrapper, }) => {
+    // Embla Config
+    const [emblaRef, emblaApi] = useEmblaCarousel();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const onSelect = useCallback((api) => {
+        setSelectedIndex(api.selectedScrollSnap());
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi); // initial state
+        emblaApi.on('select', onSelect).on('reInit', onSelect);
+        return () => {
+            emblaApi.off('select', onSelect).off('reInit', onSelect);
+        };
+    }, [emblaApi, onSelect]);
+    const normalizedItems = useMemo(() => itemList.map((item, index) => ({
+        ...item,
+        id: String(index),
+    })), [itemList]);
+    const initialState = useMemo(() => {
+        const items = Object.fromEntries(normalizedItems.map((item) => [item.id, item]));
+        const itemOrder = normalizedItems.map((item) => item.id);
+        return {
+            title,
+            items,
+            itemOrder,
+            ItemWrapper: itemWrapper,
+            controlsPosition,
+            mdCols,
+            lgCols: lgCols ? lgCols : mdCols,
+        };
+    }, [title, normalizedItems, controlsPosition, mdCols, lgCols]);
+    const emblaValue = useMemo(() => ({
+        emblaRef,
+        emblaApi,
+        selectedIndex,
+        canScrollPrev,
+        canScrollNext,
+    }), [emblaRef, emblaApi, selectedIndex, canScrollPrev, canScrollNext]);
+    if (!itemList.length)
+        return null;
+    return (_jsx(CarouselProvider, { initialValue: initialState, children: _jsx(CarouselEmblaProvider, { value: emblaValue, children: _jsx(CarouselContent, {}) }) }));
+};
+//# sourceMappingURL=carousel.js.map

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

@@ -0,0 +1 @@
+{"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/carousel/carousel.types.d.ts

@@ -0,0 +1,47 @@
+import { ComponentType, ReactNode } from 'react';
+import { Prettify } from '../../../types';
+import { EmblaViewportRefType } from 'embla-carousel-react';
+import { EmblaCarouselType } from 'embla-carousel';
+import { LargeColumnOptions, MediumColumnOptions } from '../../../components';
+export type CarouselControlsPosition = 'above' | 'around' | 'below' | 'none';
+/** A single pane consumed and displayed by the `Carousel` component */
+export type CarouselItem = {
+    /** Optional title rendered with content */
+    title: string;
+    /** Content rendered in the carousel */
+    content: ReactNode;
+};
+export type CarouselItemId = string;
+type InternalCarouselItem = Prettify<CarouselItem & {
+    id: CarouselItemId;
+}>;
+export type CarouselProps = Prettify<{
+    /** Optional Title */
+    title?: string | ReactNode;
+    /** Items to render, in display order */
+    items: InternalCarouselItem[];
+    /** Location to Render Controls @default 'around' */
+    controlsPosition?: CarouselControlsPosition;
+    /** Optional Carousel Item Wrapper @default `Card` */
+    itemWrapper?: ComponentType<any>;
+    /** Number of Columns in Medium Viewport */
+    mdCols: MediumColumnOptions;
+    /** Number of Columns in Large Viewport */
+    lgCols?: LargeColumnOptions;
+}>;
+export type CarouselState = Prettify<Pick<CarouselProps, 'title' | 'mdCols'> & Required<Pick<CarouselProps, 'lgCols'>> & {
+    items: Record<CarouselItemId, InternalCarouselItem>;
+    itemOrder: CarouselItemId[];
+    controlsPosition: CarouselControlsPosition;
+    ItemWrapper: CarouselProps['itemWrapper'];
+}>;
+/** Live embla values, bridged out of embla's mutable api via its event loop.
+ *  Separate from CarouselState because these change externally, not via dispatch. */
+export type CarouselEmblaContext = {
+    emblaRef: EmblaViewportRefType;
+    emblaApi: EmblaCarouselType | undefined;
+    selectedIndex: number;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+};
+export {};

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const CarouselContent: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from '../../../../styled-system/css';
+import { Container } from '../../../../components/layouts';
+import { useCarouselContext } from '../carousel-context';
+import { CarouselHeader } from './carousel-header';
+import { CarouselControls, NextButton, PreviousButton } from './carousel-controls';
+import { CarouselItemsDisplay } from './carousel-items-display';
+const styles = {
+    belowControls: css({
+        width: '50px',
+        marginX: 'auto',
+        marginTop: '3',
+    }),
+    aroundWrapper: css({
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '1',
+    }),
+    buttonWrapper: css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }),
+};
+export const CarouselContent = () => {
+    const { value: { controlsPosition }, } = useCarouselContext();
+    if (controlsPosition === 'around') {
+        return (_jsxs(Container, { children: [_jsx(CarouselHeader, {}), _jsxs("div", { className: styles.aroundWrapper, children: [_jsx("div", { className: styles.buttonWrapper, children: _jsx(PreviousButton, {}) }), _jsx(CarouselItemsDisplay, {}), _jsx("div", { className: styles.buttonWrapper, children: _jsx(NextButton, {}) })] })] }));
+    }
+    return (_jsxs(Container, { children: [_jsx(CarouselHeader, {}), _jsx(CarouselItemsDisplay, {}), controlsPosition === 'below' && (_jsx("div", { className: styles.belowControls, children: _jsx(CarouselControls, {}) }))] }));
+};
+//# sourceMappingURL=carousel-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-content.js","sourceRoot":"","sources":["../../../../../src/components/content-display/carousel/components/carousel-content.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,MAAM,MAAM,GAAG;IACd,aAAa,EAAE,GAAG,CAAC;QAClB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,GAAG;KACd,CAAC;IACF,aAAa,EAAE,GAAG,CAAC;QAClB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,GAAG;KACR,CAAC;IACF,aAAa,EAAE,GAAG,CAAC;QAClB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACxB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IACnC,MAAM,EACL,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAC3B,GAAG,kBAAkB,EAAE,CAAC;IAEzB,IAAI,gBAAgB,KAAK,QAAQ,EAAE,CAAC;QACnC,OAAO,CACN,MAAC,SAAS,eACT,KAAC,cAAc,KAAG,EAClB,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aACnC,cAAK,SAAS,EAAE,MAAM,CAAC,aAAa,YACnC,KAAC,cAAc,KAAG,GACb,EACN,KAAC,oBAAoB,KAAG,EACxB,cAAK,SAAS,EAAE,MAAM,CAAC,aAAa,YACnC,KAAC,UAAU,KAAG,GACT,IACD,IACK,CACZ,CAAC;IACH,CAAC;IAED,OAAO,CACN,MAAC,SAAS,eACT,KAAC,cAAc,KAAG,EAClB,KAAC,oBAAoB,KAAG,EACvB,gBAAgB,KAAK,OAAO,IAAI,CAChC,cAAK,SAAS,EAAE,MAAM,CAAC,aAAa,YACnC,KAAC,gBAAgB,KAAG,GACf,CACN,IACU,CACZ,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/carousel/components/carousel-controls.d.ts

@@ -0,0 +1,3 @@
+export declare const PreviousButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const NextButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const CarouselControls: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from '../../../../styled-system/css';
+import { IconButton } from '../../../../components/ui';
+import { useCarouselEmblaContext } from '../carousel-context';
+const styles = {
+    container: css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '1',
+    }),
+};
+export const PreviousButton = () => {
+    const { emblaApi, canScrollPrev } = useCarouselEmblaContext();
+    const goToPrev = () => emblaApi?.scrollPrev();
+    return (_jsx(IconButton, { color: "neutral", name: "CaretLeft", size: "sm", onClick: goToPrev, disabled: !canScrollPrev }));
+};
+export const NextButton = () => {
+    const { emblaApi, canScrollPrev, canScrollNext } = useCarouselEmblaContext();
+    const goToNext = () => emblaApi?.scrollNext();
+    return (_jsx(IconButton, { color: "neutral", name: "CaretRight", size: "sm", onClick: goToNext, disabled: !canScrollNext }));
+};
+export const CarouselControls = () => {
+    return (_jsxs("div", { className: styles.container, children: [_jsx(PreviousButton, {}), _jsx(NextButton, {})] }));
+};
+//# sourceMappingURL=carousel-controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-controls.js","sourceRoot":"","sources":["../../../../../src/components/content-display/carousel/components/carousel-controls.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,GAAG;KACR,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IAClC,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAE9D,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC;IAE9C,OAAO,CACN,KAAC,UAAU,IACV,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,CAAC,aAAa,GACvB,CACF,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAE7E,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC;IAE9C,OAAO,CACN,KAAC,UAAU,IACV,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,CAAC,aAAa,GACvB,CACF,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACpC,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC/B,KAAC,cAAc,KAAG,EAClB,KAAC,UAAU,KAAG,IACT,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/carousel/components/carousel-header.d.ts

@@ -0,0 +1 @@
+export declare const CarouselHeader: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCarouselContext } from '../carousel-context';
+import { H2 } from '../../../../components/typography';
+import { css } from '../../../../styled-system/css';
+import { CarouselControls } from './carousel-controls';
+const styles = {
+    titleBlock: css({
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '4',
+    }),
+};
+export const CarouselHeader = () => {
+    const { value: { controlsPosition, title }, } = useCarouselContext();
+    if (!title && controlsPosition !== 'above') {
+        return null;
+    }
+    const titleDisplay = typeof title === 'string' ? _jsx(H2, { inline: true, children: title }) : title;
+    return (_jsxs("div", { className: styles.titleBlock, children: [title && titleDisplay, controlsPosition === 'above' && _jsx(CarouselControls, {})] }));
+};
+//# sourceMappingURL=carousel-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-header.js","sourceRoot":"","sources":["../../../../../src/components/content-display/carousel/components/carousel-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,MAAM,GAAG;IACd,UAAU,EAAE,GAAG,CAAC;QACf,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,eAAe;QAC/B,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,GAAG;KACjB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IAClC,MAAM,EACL,KAAK,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAClC,GAAG,kBAAkB,EAAE,CAAC;IAEzB,IAAI,CAAC,KAAK,IAAI,gBAAgB,KAAK,OAAO,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,YAAY,GAAc,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,EAAE,IAAC,MAAM,kBAAE,KAAK,GAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAE5F,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAC/B,KAAK,IAAI,YAAY,EACrB,gBAAgB,KAAK,OAAO,IAAI,KAAC,gBAAgB,KAAG,IAChD,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/carousel/components/carousel-item.d.ts

@@ -0,0 +1,6 @@
+import { CarouselItemId } from '../carousel.types';
+type CarouselItemProps = {
+    itemId: CarouselItemId;
+};
+export declare const CarouselItem: ({ itemId }: CarouselItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from '../../../../styled-system/css';
+import { Card } from '../../../../components/ui';
+import { useCarouselContext } from '../carousel-context';
+const styles = {
+    wrapper: cva({
+        base: {
+            flexGrow: 0,
+            flexShrink: 0,
+            minWidth: '0',
+            paddingLeft: { base: '3', md: '4' },
+        },
+        variants: {
+            mdCols: {
+                1: { flexBasis: { base: '100%', md: '100%' } },
+                2: { flexBasis: { base: '100%', md: '50%' } },
+                3: { flexBasis: { base: '100%', md: '33.333%' } },
+            },
+            lgCols: {
+                1: { flexBasis: { lg: '100%' } },
+                2: { flexBasis: { lg: '50%' } },
+                3: { flexBasis: { lg: '33.333%' } },
+                4: { flexBasis: { lg: '25%' } },
+                5: { flexBasis: { lg: '20%' } },
+                6: { flexBasis: { lg: '16.666%' } },
+            },
+        },
+        defaultVariants: {
+            mdCols: 3,
+            lgCols: 3,
+        },
+    }),
+};
+export const CarouselItem = ({ itemId }) => {
+    const { value: { items, ItemWrapper, mdCols, lgCols }, } = useCarouselContext();
+    const item = items[itemId];
+    if (ItemWrapper) {
+        return (_jsx("div", { className: styles.wrapper({ mdCols, lgCols }), children: _jsx(ItemWrapper, { children: item.content }) }));
+    }
+    return (_jsx("div", { className: styles.wrapper({ mdCols, lgCols }), children: _jsx(Card, { fullWidth: true, title: { text: item.title }, size: "md", children: item.content }) }));
+};
+//# sourceMappingURL=carousel-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-item.js","sourceRoot":"","sources":["../../../../../src/components/content-display/carousel/components/carousel-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAO,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,GAAG,CAAC;QACZ,IAAI,EAAE;YACL,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,QAAQ,EAAE,GAAG;YACb,WAAW,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE;SACnC;QACD,QAAQ,EAAE;YACT,MAAM,EAAE;gBACP,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;gBAC9C,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;gBAC7C,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE;aACjD;YACD,MAAM,EAAE;gBACP,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;gBAChC,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;gBAC/B,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE;gBACnC,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;gBAC/B,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;gBAC/B,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE;aACnC;SACD;QACD,eAAe,EAAE;YAChB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,CAAC;SACT;KACD,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAqB,EAAE,EAAE;IAC7D,MAAM,EACL,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,GAC7C,GAAG,kBAAkB,EAAE,CAAC;IAEzB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B,IAAI,WAAW,EAAE,CAAC;QACjB,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,YACjD,KAAC,WAAW,cAAE,IAAI,CAAC,OAAO,GAAe,GACpC,CACN,CAAC;IACH,CAAC;IAED,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,YACjD,KAAC,IAAI,IAAC,SAAS,QAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,IAAI,YACpD,IAAI,CAAC,OAAO,GACP,GACF,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/carousel/components/carousel-items-display.d.ts

@@ -0,0 +1 @@
+export declare const CarouselItemsDisplay: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '../../../../styled-system/css';
+import { useCarouselContext, useCarouselEmblaContext } from '../carousel-context';
+import { CarouselItem } from './carousel-item';
+const styles = {
+    viewport: css({ width: '100%', overflow: 'hidden' }),
+    track: css({
+        display: 'flex',
+        marginLeft: { base: '-3', md: '-4' },
+        touchAction: 'pan-y pinch-zoom',
+    }),
+};
+export const CarouselItemsDisplay = () => {
+    const { value: { itemOrder }, } = useCarouselContext();
+    const { emblaRef } = useCarouselEmblaContext();
+    return (_jsx("div", { ref: emblaRef, className: styles.viewport, children: _jsx("div", { className: styles.track, children: itemOrder.map((itemId) => (_jsx(CarouselItem, { itemId: itemId }, itemId))) }) }));
+};
+//# sourceMappingURL=carousel-items-display.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-items-display.js","sourceRoot":"","sources":["../../../../../src/components/content-display/carousel/components/carousel-items-display.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,MAAM,GAAG;IACd,QAAQ,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACpD,KAAK,EAAE,GAAG,CAAC;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE;QACpC,WAAW,EAAE,kBAAkB;KAC/B,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACxC,MAAM,EACL,KAAK,EAAE,EAAE,SAAS,EAAE,GACpB,GAAG,kBAAkB,EAAE,CAAC;IAEzB,MAAM,EAAE,QAAQ,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAE/C,OAAO,CACN,cAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7C,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAC1B,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC1B,KAAC,YAAY,IAAc,MAAM,EAAE,MAAM,IAAtB,MAAM,CAAoB,CAC7C,CAAC,GACG,GACD,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/content-display/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export type { CarouselProps } from './carousel.types';
+export { Carousel } from './carousel';

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const GalleryContent: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cva } from '../../../../styled-system/css';
+import { H2 } from '../../../../components/typography';
+import { useGalleryContext } from '../gallery-context';
+import { GALLERY_DISPLAY_CONSTANT_NAMES, GALLERY_DISPLAY_CONSTANTS, } from '../gallery-display-constants';
+import { GalleryItemsDisplay } from './item-display/gallery-items-display';
+import { ItemTrack } from './item-track/item-track';
+const styles = {
+    container: cva({
+        base: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+        },
+        variants: {
+            size: {
+                sm: { height: '300px' },
+                md: { height: '500px' },
+                lg: { height: '700px' },
+                fill: { height: '100%' },
+            },
+        },
+    }),
+    internalContent: css({
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        flex: '1',
+        gap: '3',
+        minHeight: 0,
+    }),
+    displayContent: css({
+        width: '100%',
+        flex: '1',
+        minHeight: 0,
+        overflow: 'hidden',
+    }),
+    trackContent: cva({
+        base: {
+            width: '100%',
+        },
+        variants: {
+            size: {
+                sm: {
+                    height: '60px',
+                },
+                md: {
+                    height: '75px',
+                },
+                lg: {
+                    height: '100px',
+                },
+            },
+        },
+    }),
+};
+export const GalleryContent = () => {
+    const { value: { size, title }, } = useGalleryContext();
+    const titleDisplay = typeof title === 'string' ? _jsx(H2, { children: title }) : title;
+    const cssVariables = Object.fromEntries(Object.entries(GALLERY_DISPLAY_CONSTANT_NAMES).map(([key, cssVar]) => [cssVar, GALLERY_DISPLAY_CONSTANTS[key]]));
+    return (_jsxs("div", { className: styles.container({ size }), style: cssVariables, children: [title && titleDisplay, _jsxs("div", { className: styles.internalContent, children: [_jsx("div", { className: styles.displayContent, children: _jsx(GalleryItemsDisplay, {}) }), _jsx("div", { className: styles.trackContent({ size: size === 'fill' ? 'lg' : size }), children: _jsx(ItemTrack, {}) })] })] }));
+};
+//# sourceMappingURL=gallery-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-content.js","sourceRoot":"","sources":["../../../../../src/components/content-display/gallery/components/gallery-content.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAEN,8BAA8B,EAC9B,yBAAyB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,IAAI,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,MAAM;SACb;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;gBACvB,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;gBACvB,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;gBACvB,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;aACxB;SACD;KACD,CAAC;IACF,eAAe,EAAE,GAAG,CAAC;QACpB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,SAAS,EAAE,CAAC;KACZ,CAAC;IACF,cAAc,EAAE,GAAG,CAAC;QACnB,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,QAAQ;KAClB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;QACjB,IAAI,EAAE;YACL,KAAK,EAAE,MAAM;SACb;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE;oBACH,MAAM,EAAE,MAAM;iBACd;gBACD,EAAE,EAAE;oBACH,MAAM,EAAE,MAAM;iBACd;gBACD,EAAE,EAAE;oBACH,MAAM,EAAE,OAAO;iBACf;aACD;SACD;KACD,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IAClC,MAAM,EACL,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GACtB,GAAG,iBAAiB,EAAE,CAAC;IAExB,MAAM,YAAY,GAAc,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,EAAE,cAAE,KAAK,GAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAErF,MAAM,YAAY,GAA2B,MAAM,CAAC,WAAW,CAC7D,MAAM,CAAC,OAAO,CAAC,8BAA8B,CAAsC,CAAC,GAAG,CACvF,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAC3D,CACD,CAAC;IAEF,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,aAC7D,KAAK,IAAI,YAAY,EACtB,eAAK,SAAS,EAAE,MAAM,CAAC,eAAe,aACrC,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YACpC,KAAC,mBAAmB,KAAG,GAClB,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,YAC3E,KAAC,SAAS,KAAG,GACR,IACD,IACD,CACN,CAAC;AACH,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+export declare const GalleryHeader: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '../../../../styled-system/css';
+import { useGalleryContext } from '../gallery-context';
+import { H2 } from '../../../../components/typography';
+const styles = {
+    container: css({
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    }),
+};
+export const GalleryHeader = () => {
+    const { value: { title }, } = useGalleryContext();
+    const titleDisplay = typeof title === 'string' ? _jsx(H2, { inline: true, children: title }) : title;
+    return _jsx("div", { className: styles.container, children: title && titleDisplay });
+};
+//# sourceMappingURL=gallery-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-header.js","sourceRoot":"","sources":["../../../../../src/components/content-display/gallery/components/gallery-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAE7C,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;QACb,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,eAAe;KAC/B,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IACjC,MAAM,EACL,KAAK,EAAE,EAAE,KAAK,EAAE,GAChB,GAAG,iBAAiB,EAAE,CAAC;IAExB,MAAM,YAAY,GAAc,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,EAAE,IAAC,MAAM,kBAAE,KAAK,GAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAE5F,OAAO,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,KAAK,IAAI,YAAY,GAAO,CAAC;AACxE,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+import { GalleryItemId } from '../../gallery.types';
+type GalleryItemProps = {
+    itemId: GalleryItemId;
+};
+export declare const GalleryItem: ({ itemId }: GalleryItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cva } from '../../../../../styled-system/css';
+import { useGalleryContext } from '../../gallery-context';
+const styles = {
+    container: css({
+        borderColor: 'transparent',
+        borderWidth: 'lg',
+        borderStyle: 'solid',
+        transform: 'translate3d(0, 0, 0)',
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'var(--thread-gallery-display-item-width)', // Tracks with GALLERY_DISPLAY_CONSTANT_NAMES
+        minWidth: 0,
+        paddingLeft: 'var(--thread-gallery-display-item-spacing)', // Tracks with GALLERY_DISPLAY_CONSTANT_NAMES
+    }),
+    content: cva({
+        base: {
+            width: '100%',
+            height: 'var(--thread-gallery-display-item-height)', // Tracks with GALLERY_DISPLAY_CONSTANT_NAMES
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            userSelect: 'none',
+            overflow: 'hidden',
+            '& img': {
+                maxWidth: '100%',
+                maxHeight: '100%',
+                width: 'auto',
+                height: 'auto',
+                objectFit: 'contain',
+                borderRadius: 'lg',
+            },
+        },
+        variants: {
+            appearance: {
+                framed: {
+                    backgroundColor: 'elevated',
+                    borderRadius: 'lg',
+                    borderWidth: 'md',
+                    borderColor: 'structure.subtle',
+                },
+                bare: {},
+            },
+        },
+        defaultVariants: {
+            appearance: 'framed',
+        },
+    }),
+};
+export const GalleryItem = ({ itemId }) => {
+    const { value: { items, ItemWrapper, 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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+export declare const GalleryItemsDisplay: () => import("react/jsx-runtime").JSX.Element;