npm - thread-ui - Versions diffs - 0.13.0 → 0.14.0 - Mend

thread-ui 0.13.0 → 0.14.0

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 (166) 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,13 +96,13 @@ 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` `Carousel` `Divider` `DotsLoader` `Gallery` `Icon` `IconButton` `Modal` `SkeletonLayoutLoader` `SkeletonLoader` `SpinLoader` `TabView` `Toggle`
+`Button` `Card` `Divider` `DotsLoader` `Icon` `IconButton` `Modal` `SkeletonLayoutLoader` `SkeletonLoader` `SpinLoader` `Toggle`
 ### Media Display
@@ -104,7 +110,7 @@ Component CSS is pre-generated using Panda CSS, so components render correctly s
 ### Content Display
-`Lightbox`
+`Carousel` `Gallery` `Lightbox` `TabView`
 ### Typography Elements

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

@@ -2,47 +2,155 @@ import { CarouselEmblaContext } from './carousel.types';
 export declare const CarouselProvider: {
     ({ initialValue, children, }: {
         initialValue: {
-            title?: import("react").ReactNode;
+            title?: (string | import("react").ReactElement<{
+                align?: "left" | "center" | undefined;
+                inline?: boolean | undefined;
+                truncate?: boolean | undefined;
+                children: import("react").ReactNode;
+                color?: import("../../..").ColoredTextOptions | undefined;
+                subtitle?: import("react").ReactNode;
+            }, ((props: {
+                align?: "left" | "center" | undefined;
+                inline?: boolean | undefined;
+                truncate?: boolean | undefined;
+                children: import("react").ReactNode;
+                color?: import("../../..").ColoredTextOptions | undefined;
+                subtitle?: import("react").ReactNode;
+            }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+                align?: "left" | "center" | undefined;
+                inline?: boolean | undefined;
+                truncate?: boolean | undefined;
+                children: import("react").ReactNode;
+                color?: import("../../..").ColoredTextOptions | undefined;
+                subtitle?: import("react").ReactNode;
+            }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+                align?: "left" | "center" | undefined;
+                inline?: boolean | undefined;
+                truncate?: boolean | undefined;
+                children: import("react").ReactNode;
+                color?: import("../../..").ColoredTextOptions | undefined;
+                subtitle?: import("react").ReactNode;
+            }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+                align?: "left" | "center" | undefined;
+                inline?: boolean | undefined;
+                truncate?: boolean | undefined;
+                children: import("react").ReactNode;
+                color?: import("../../..").ColoredTextOptions | undefined;
+                subtitle?: import("react").ReactNode;
+            }) => import("react/jsx-runtime").JSX.Element)>) | undefined;
+            subtitle?: string | undefined;
             mdCols: import("../..").MediumColumnOptions;
             lgCols: import("../..").LargeColumnOptions;
             items: Record<string, {
-                title: string;
+                title?: string | undefined;
                 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;
+            ItemWrapper: import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
         };
         children: import("react").ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, useCarouselContext: () => {
     value: {
-        title?: import("react").ReactNode;
+        title?: (string | import("react").ReactElement<{
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }, ((props: {
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element)>) | undefined;
+        subtitle?: string | undefined;
         mdCols: import("../..").MediumColumnOptions;
         lgCols: import("../..").LargeColumnOptions;
         items: Record<string, {
-            title: string;
+            title?: string | undefined;
             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;
+        ItemWrapper: import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
     };
     setValue: import("react").Dispatch<import("react").SetStateAction<{
-        title?: import("react").ReactNode;
+        title?: (string | import("react").ReactElement<{
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }, ((props: {
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element) | ((props: {
+            align?: "left" | "center" | undefined;
+            inline?: boolean | undefined;
+            truncate?: boolean | undefined;
+            children: import("react").ReactNode;
+            color?: import("../../..").ColoredTextOptions | undefined;
+            subtitle?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element)>) | undefined;
+        subtitle?: string | undefined;
         mdCols: import("../..").MediumColumnOptions;
         lgCols: import("../..").LargeColumnOptions;
         items: Record<string, {
-            title: string;
+            title?: string | undefined;
             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;
+        ItemWrapper: import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
     }>>;
 };
 export declare const CarouselEmblaProvider: import("react").Provider<CarouselEmblaContext | undefined>, useCarouselEmblaContext: () => CarouselEmblaContext;

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

@@ -15,4 +15,4 @@ import { CarouselProps } from './carousel.types';
  * />
  * ```
  */
-export declare const Carousel: ({ title, items: itemList, controlsPosition, mdCols, lgCols, itemWrapper, }: CarouselProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Carousel: ({ title, subtitle, items: itemList, controlsPosition, mdCols, lgCols, itemWrapper, }: CarouselProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,9 +1,23 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
+import { Card } from '../../../components/ui';
 import { CarouselProvider, CarouselEmblaProvider } from './carousel-context';
 import { CarouselContent } from './components/carousel-content';
+// -- 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 }));
+const CardFrameWrapper = ({ children, title }) => (_jsx(Card, { fullWidth: true, flush: true, title: title ? { text: title } : undefined, size: "md", children: children }));
+const resolveItemWrapper = (option) => {
+    if (option === 'none')
+        return FragmentWrapper;
+    if (option === 'card')
+        return CardWrapper;
+    if (option === 'cardFrame')
+        return CardFrameWrapper;
+    return option;
+};
 /**
  * A scrollable carousel with optional navigation controls and responsive column configuration. Powered by [Embla Carousel](https://www.embla-carousel.com)
  *
@@ -20,7 +34,7 @@ import { CarouselContent } from './components/carousel-content';
  * />
  * ```
  */
-export const Carousel = ({ title, items: itemList, controlsPosition = 'above', mdCols, lgCols, itemWrapper, }) => {
+export const Carousel = ({ title, subtitle, items: itemList, controlsPosition = 'above', mdCols, lgCols, itemWrapper = 'card', }) => {
     // Embla Config
     const [emblaRef, emblaApi] = useEmblaCarousel();
     const [selectedIndex, setSelectedIndex] = useState(0);
@@ -49,14 +63,15 @@ export const Carousel = ({ title, items: itemList, controlsPosition = 'above', m
         const itemOrder = normalizedItems.map((item) => item.id);
         return {
             title,
+            subtitle,
             items,
             itemOrder,
-            ItemWrapper: itemWrapper,
+            ItemWrapper: resolveItemWrapper(itemWrapper),
             controlsPosition,
             mdCols,
             lgCols: lgCols ? lgCols : mdCols,
         };
-    }, [title, normalizedItems, controlsPosition, mdCols, lgCols]);
+    }, [title, normalizedItems, controlsPosition, mdCols, lgCols, itemWrapper]);
     const emblaValue = useMemo(() => ({
         emblaRef,
         emblaApi,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../../src/components/content-display/carousel/carousel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;~~AACb~~,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,~~EAAE~~,MAAM,OAAO,CAAC;~~AAClE~~,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EAAE,QAAQ,EACf,gBAAgB,GAAG,OAAO,EAC1B,MAAM,EACN,MAAM,EACN,WAAW,~~GACI~~,EAAE,EAAE;IACnB,eAAe;IACf,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,gBAAgB,EAAE,CAAC;IAEhD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,GAAsB,EAAE,EAAE;QACvD,gBAAgB,CAAC,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAC;QAC3C,gBAAgB,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAC;QACtC,gBAAgB,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;QACpC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC1D,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,MAAM,eAAe,GAAG,OAAO,CAC9B,GAAG,EAAE,CACJ,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC9B,GAAG,IAAI;QACP,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;KACjB,CAAC,CAAC,EACJ,CAAC,QAAQ,CAAC,CACV,CAAC;IAEF,MAAM,YAAY,GAAkB,OAAO,CAAC,GAAG,EAAE;QAChD,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAC/B,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CACpB,CAAC;QAC5B,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEzD,OAAO;YACN,KAAK;YACL,KAAK;YACL,SAAS;YACT,WAAW,EAAE,WAAW;~~YACxB~~,gBAAgB;YAChB,MAAM;YACN,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SAChC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;~~IAE/D~~,MAAM,UAAU,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACN,QAAQ;QACR,QAAQ;QACR,aAAa;QACb,aAAa;QACb,aAAa;KACb,CAAC,EACF,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC,CACjE,CAAC;IAEF,IAAI,CAAC,QAAQ,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAElC,OAAO,CACN,KAAC,gBAAgB,IAAC,YAAY,EAAE,YAAY,YAC3C,KAAC,qBAAqB,IAAC,KAAK,EAAE,UAAU,YACvC,KAAC,eAAe,KAAG,GACI,GACN,CACnB,CAAC;AACH,CAAC,CAAC"}
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 CHANGED Viewed

@@ -3,11 +3,12 @@ import { Prettify } from '../../../types';
 import { EmblaViewportRefType } from 'embla-carousel-react';
 import { EmblaCarouselType } from 'embla-carousel';
 import { LargeColumnOptions, MediumColumnOptions } from '../../../components';
+import { ContentTitle } from '../../../internal-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;
+    title?: string;
     /** Content rendered in the carousel */
     content: ReactNode;
 };
@@ -15,25 +16,25 @@ export type CarouselItemId = string;
 type InternalCarouselItem = Prettify<CarouselItem & {
     id: CarouselItemId;
 }>;
-export type CarouselProps = Prettify<{
-    /** Optional Title */
-    title?: string | ReactNode;
+type ItemWrapperComponent = ComponentType<any>;
+export type ItemWrapperOptions = 'none' | 'card' | 'cardFrame' | ItemWrapperComponent;
+export type CarouselProps = Prettify<ContentTitle & {
     /** Items to render, in display order */
-    items: InternalCarouselItem[];
+    items: CarouselItem[];
     /** Location to Render Controls @default 'around' */
     controlsPosition?: CarouselControlsPosition;
-    /** Optional Carousel Item Wrapper @default `Card` */
-    itemWrapper?: ComponentType<any>;
+    /** Optional Carousel Item Wrapper @default `cardOutline` */
+    itemWrapper?: ItemWrapperOptions;
     /** 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'>> & {
+export type CarouselState = Prettify<Pick<CarouselProps, 'title' | 'subtitle' | 'mdCols'> & Required<Pick<CarouselProps, 'lgCols'>> & {
     items: Record<CarouselItemId, InternalCarouselItem>;
     itemOrder: CarouselItemId[];
     controlsPosition: CarouselControlsPosition;
-    ItemWrapper: CarouselProps['itemWrapper'];
+    ItemWrapper: ItemWrapperComponent;
 }>;
 /** Live embla values, bridged out of embla's mutable api via its event loop.
  *  Separate from CarouselState because these change externally, not via dispatch. */

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

@@ -17,7 +17,7 @@ export const PreviousButton = () => {
     return (_jsx(IconButton, { color: "neutral", name: "CaretLeft", size: "sm", onClick: goToPrev, disabled: !canScrollPrev }));
 };
 export const NextButton = () => {
-    const { emblaApi, canScrollPrev, canScrollNext } = useCarouselEmblaContext();
+    const { emblaApi, canScrollNext } = useCarouselEmblaContext();
     const goToNext = () => emblaApi?.scrollNext();
     return (_jsx(IconButton, { color: "neutral", name: "CaretRight", size: "sm", onClick: goToNext, disabled: !canScrollNext }));
 };

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

	@@ -1 +1 @@
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"}
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,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,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 CHANGED Viewed

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

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

@@ -1,24 +1,17 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCarouselContext } from '../carousel-context';
-import { H2 } from '../../../../components/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from '../../../../styled-system/css';
+import { useCarouselContext } from '../carousel-context';
 import { CarouselControls } from './carousel-controls';
+import { ContentHeader } from '../../../../internal-components';
 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, {})] }));
+    const { value: { controlsPosition, title, subtitle }, } = useCarouselContext();
+    const headerControls = controlsPosition === 'above' ? _jsx(CarouselControls, {}) : undefined;
+    return (_jsx(ContentHeader, { className: styles.titleBlock, title: title, subtitle: subtitle, secondaryContent: headerControls }));
 };
 //# sourceMappingURL=carousel-header.js.map

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"carousel-header.js","sourceRoot":"","sources":["../../../../../src/components/content-display/carousel/components/carousel-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,MAAM,GAAG;IACd,UAAU,EAAE,GAAG,CAAC;QACf,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,QAAQ,EAAE,GAC5C,GAAG,kBAAkB,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvF,OAAO,CACN,KAAC,aAAa,IACb,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,cAAc,GAC/B,CACF,CAAC;AACH,CAAC,CAAC"}

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

@@ -1,7 +1,6 @@
 '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({
@@ -35,9 +34,6 @@ const styles = {
 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 }) }));
+    return (_jsx("div", { className: styles.wrapper({ mdCols, lgCols }), children: _jsx(ItemWrapper, { title: item.title, children: item.content }) }));
 };
 //# sourceMappingURL=carousel-item.js.map

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

	@@ -1 +1 @@
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"}
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,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,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,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,YACjD,KAAC,WAAW,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,YAAG,IAAI,CAAC,OAAO,GAAe,GACvD,CACN,CAAC;AACH,CAAC,CAAC"}

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

@@ -1,11 +1,11 @@
 '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';
+import { ContentHeader } from '../../../../internal-components';
 const styles = {
     container: cva({
         base: {
@@ -56,9 +56,8 @@ const styles = {
     }),
 };
 export const GalleryContent = () => {
-    const { value: { size, title }, } = useGalleryContext();
-    const titleDisplay = typeof title === 'string' ? _jsx(H2, { children: title }) : title;
+    const { value: { size, title, subtitle }, } = useGalleryContext();
     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, {}) })] })] }));
+    return (_jsxs("div", { className: styles.container({ size }), style: cssVariables, children: [_jsx(ContentHeader, { title: title, subtitle: subtitle }), _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 CHANGED Viewed

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"gallery-content.js","sourceRoot":"","sources":["../../../../../src/components/content-display/gallery/components/gallery-content.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC/C,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;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,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,QAAQ,EAAE,GAChC,GAAG,iBAAiB,EAAE,CAAC;IAExB,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,aAC9D,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EACnD,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"}