thread-ui 0.13.1 → 0.14.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,15 +2,51 @@ import { GalleryEmblaContext } from './gallery.types';
 export declare const GalleryProvider: {
     ({ initialValue, children, }: {
         initialValue: {
-            title?: import("react").ReactNode;
-            appearance: import("./gallery.types").GalleryAppearanceOptions;
+            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;
             size: import("../../..").UtilitySizeOptions | "fill";
+            appearance: import("./gallery.types").GalleryAppearanceOptions;
             variableWidths: boolean;
             items: Record<import("./gallery.types").GalleryItemId, {
                 id: import("./gallery.types").GalleryItemId;
                 content: import("./gallery.types").GalleryItem;
             }>;
-            ItemWrapper: import("./gallery.types").GalleryProps["itemWrapper"];
+            ItemWrapper: import("react").ComponentType<any> | undefined;
             itemOrder: import("./gallery.types").GalleryItemId[];
         };
         children: import("react").ReactNode;
@@ -18,27 +54,99 @@ export declare const GalleryProvider: {
     displayName: string;
 }, useGalleryContext: () => {
     value: {
-        title?: import("react").ReactNode;
-        appearance: import("./gallery.types").GalleryAppearanceOptions;
+        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;
         size: import("../../..").UtilitySizeOptions | "fill";
+        appearance: import("./gallery.types").GalleryAppearanceOptions;
         variableWidths: boolean;
         items: Record<import("./gallery.types").GalleryItemId, {
             id: import("./gallery.types").GalleryItemId;
             content: import("./gallery.types").GalleryItem;
         }>;
-        ItemWrapper: import("./gallery.types").GalleryProps["itemWrapper"];
+        ItemWrapper: import("react").ComponentType<any> | undefined;
         itemOrder: import("./gallery.types").GalleryItemId[];
     };
     setValue: import("react").Dispatch<import("react").SetStateAction<{
-        title?: import("react").ReactNode;
-        appearance: import("./gallery.types").GalleryAppearanceOptions;
+        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;
         size: import("../../..").UtilitySizeOptions | "fill";
+        appearance: import("./gallery.types").GalleryAppearanceOptions;
         variableWidths: boolean;
         items: Record<import("./gallery.types").GalleryItemId, {
             id: import("./gallery.types").GalleryItemId;
             content: import("./gallery.types").GalleryItem;
         }>;
-        ItemWrapper: import("./gallery.types").GalleryProps["itemWrapper"];
+        ItemWrapper: import("react").ComponentType<any> | undefined;
         itemOrder: import("./gallery.types").GalleryItemId[];
     }>>;
 };

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

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

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

@@ -21,7 +21,7 @@ import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
  * />
  * ```
  */
-export const Gallery = ({ title, items: itemList, itemWrapper, size = 'lg', appearance = 'framed', startIndex = 0, variableWidths = false, }) => {
+export const Gallery = ({ title, subtitle, items: itemList, itemWrapper, size = 'lg', appearance = 'framed', startIndex = 0, variableWidths = false, }) => {
     const [emblaDisplayRef, emblaDisplayApi] = useEmblaCarousel({ startIndex });
     const [emblaItemTrackRef, emblaItemTrackApi] = useEmblaCarousel({
         startIndex,
@@ -55,6 +55,7 @@ export const Gallery = ({ title, items: itemList, itemWrapper, size = 'lg', appe
         const itemOrder = normalizedItems.map((item) => item.id);
         return {
             title,
+            subtitle,
             items,
             itemOrder,
             ItemWrapper: itemWrapper,