npm - thread-ui - Versions diffs - 0.12.1 → 0.13.1 - Mend

thread-ui 0.12.1 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (196) hide show

package/README.md CHANGED Viewed

@@ -1,11 +1,13 @@
 # Thread UI
-Thread is a React component library I built to create my [personal website](https://fisherandrew.org). It's designed around a clean, token-based theme system with full SSR support, dark mode, and easy customization.
+Thread is a React component library I built to create my [personal website](https://fisherandrew.org). It's designed around a clean, token-based theme system with easy customization, light/dark mode and SSR support.
 ## Get Started
 All items work out of the box. Explore thread components at [thread.fisherandrew.org](https://thread.fisherandrew.org)!
+### Setup
 ```bash
 npm install thread-ui
 ```
@@ -23,10 +25,12 @@ import 'thread-ui/thread.css';
 ## Design System
-Thread UI uses a **layer-based elevation system**. Every component either sits on a named layer (canvas, inset, surface, elevated, overlay) or opts out entirely (transparent). The layer determines the component's background color, shadow depth, border treatment, and stacking order.
+Thread UI is built around a central `Theme` that defines token values across the library - colors, spacing, type scales. Thread's design language governs how these tokens are applied to communicate hierarchy and intent.
 ### Surface Layers
+Thread UI uses a **layer-based elevation system**. Every component either sits on a named layer (canvas, inset, surface, elevated, overlay) or opts out entirely (transparent). The layer determines the component's background color, shadow depth, border treatment, and stacking order.
 | Layer      | Purpose                                                                     |
 | ---------- | --------------------------------------------------------------------------- |
 | `canvas`   | Page background. The base everything sits on.                               |
@@ -43,7 +47,7 @@ Thread UI uses a **layer-based elevation system**. Every component either sits o
 <Card layer="surface" bg="elevated" shadow="md" structure="none" />
 ```
-### The Two Rules
+#### The Two Rules
 1. **Light mode communicates elevation through shadows.** Surface, elevated, and overlay share the same background color — shadows and z-index differentiate them.
 2. **Dark mode communicates elevation through lightness.** Each layer step up is slightly lighter. Shadows are nearly invisible against dark surfaces.
@@ -74,7 +78,9 @@ return <ThemeProvider theme={customTheme}>{children}</ThemeProvider>;
 ### Dark Mode
-Thread includes a built-in light/dark/system mode system. The `ThreadScript` component injects an inline script into your `<head>` that reads the user's saved preference from `localStorage` and sets `data-theme` on `:root` before the first paint — eliminating any flash of wrong-mode content.
+Thread includes built-in light/dark/system UI modes. Default UI behavior matches the system and works out of the box.
+To override the default mode, utilize `ThreadScript`. This injects an inline script into your `<head>` that reads the configured default mode, or even the user's saved preference in `localStorage` and sets `data-theme` on `:root` before the first paint — eliminating any flash of wrong-mode content.
 ```tsx
 // Next.js App Router
@@ -90,18 +96,22 @@ Thread includes a built-in light/dark/system mode system. The `ThreadScript` com
 ### SSR Compatible
-Component CSS is pre-generated using Panda CSS, so components render correctly server-side without any runtime style injection. Most components are SSR compatible, and all work out of the box with `Next.js`.
+Component CSS is pre-generated using Panda CSS, so components render correctly server-side without any runtime style injection. Most components are SSR compatible, and all client-side components and hooks are marked with `use client` and work out of the box with `Next.js`.
 ## Components
 ### UI Elements
-`Button` `Card` `Divider` `DotsLoader` `Icon` `IconButton` `Modal` `SkeletonLayoutLoader` `SkeletonLoader` `SpinLoader` `TabView` `Toggle`
+`Button` `Card` `Divider` `DotsLoader` `Icon` `IconButton` `Modal` `SkeletonLayoutLoader` `SkeletonLoader` `SpinLoader` `Toggle`
 ### Media Display
 `ImagePanel` `InfoCard` `MediaCard`
+### Content Display
+`Carousel` `Gallery` `Lightbox` `TabView`
 ### Typography Elements
 `Title` `H1` `H2` `H3` `Text` `Subtitle` `List` `OrderedList` `PageHeader`

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

	@@ -0,0 +1 @@
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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

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

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

	@@ -0,0 +1 @@
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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 {};