@mission-studio/puck 1.0.20 → 1.0.23

package/dist/index.js

@@ -288,25 +288,38 @@ function Heading({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tag, { id, style, children: resolvedText });
 }
 
-// components/page/Paragraph.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var sizeMap = {
+// components/page/primitives/Paragraph.ts
+var paragraphSizeMap = {
   sm: "0.875rem",
   base: "1rem",
   lg: "1.125rem",
   xl: "1.25rem"
 };
-var weightMap = {
+var paragraphWeightMap = {
   normal: 400,
   medium: 500,
   semibold: 600
 };
-var lineHeightMap = {
+var paragraphLineHeightMap = {
   tight: "1.4",
   normal: "1.6",
   relaxed: "1.75",
   loose: "2"
 };
+function getParagraphStyle(props) {
+  return {
+    fontSize: paragraphSizeMap[props.size],
+    fontWeight: paragraphWeightMap[props.weight],
+    color: props.color,
+    textAlign: props.align,
+    lineHeight: paragraphLineHeightMap[props.lineHeight],
+    maxWidth: props.maxWidth || void 0,
+    margin: 0
+  };
+}
+
+// components/page/next/Paragraph.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function isThemeableValue2(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
@@ -337,23 +350,32 @@ function Paragraph({
     return "";
   })();
   const resolvedColor = (() => {
-    if (!color) return resolveColor2("foreground");
-    if (typeof color === "string") return { color, opacity: 100 };
+    if (!color)
+      return hexToRgba(
+        resolveColor2("foreground").color,
+        resolveColor2("foreground").opacity
+      );
+    if (typeof color === "string") return color;
     if (isThemeableValue2(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
+      return color.useTheme ? hexToRgba(
+        resolveColor2(color.themeKey).color,
+        resolveColor2(color.themeKey).opacity
+      ) : hexToRgba(color.value.color, color.value.opacity);
     }
-    if ("color" in color) return color;
-    return resolveColor2("foreground");
+    if ("color" in color) return hexToRgba(color.color, color.opacity);
+    return hexToRgba(
+      resolveColor2("foreground").color,
+      resolveColor2("foreground").opacity
+    );
   })();
-  const style = {
-    fontSize: sizeMap[size],
-    fontWeight: weightMap[weight],
-    color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
-    textAlign: align,
-    lineHeight: lineHeightMap[lineHeight],
-    maxWidth: maxWidth || void 0,
-    margin: 0
-  };
+  const style = getParagraphStyle({
+    size,
+    weight,
+    color: resolvedColor,
+    align,
+    lineHeight,
+    maxWidth
+  });
   if (!resolvedText) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id, style, children: resolvedText });
 }
@@ -1014,7 +1036,7 @@ function VideoEmbed({
 
 // components/page/Icon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var sizeMap2 = {
+var sizeMap = {
   sm: { size: "16px", strokeWidth: 2 },
   md: { size: "24px", strokeWidth: 2 },
   lg: { size: "32px", strokeWidth: 1.5 },
@@ -1232,7 +1254,7 @@ function Icon({
     return resolveColor2("primary");
   })();
   const IconComponent = icons[name.toLowerCase()] || icons.check;
-  const { size: iconSize, strokeWidth } = sizeMap2[size];
+  const { size: iconSize, strokeWidth } = sizeMap[size];
   const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
   const wrapperStyle = {
     display: "flex",
@@ -1576,7 +1598,7 @@ function Divider({
 
 // components/page/Spacer.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var sizeMap3 = {
+var sizeMap2 = {
   xs: "8px",
   sm: "16px",
   md: "24px",
@@ -1587,7 +1609,7 @@ var sizeMap3 = {
 };
 function Spacer({ size = "md", id }) {
   const style = {
-    height: sizeMap3[size],
+    height: sizeMap2[size],
     width: "100%"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
@@ -1600,7 +1622,7 @@ var alignmentMap = {
   center: "text-center",
   right: "text-right"
 };
-var sizeMap4 = {
+var sizeMap3 = {
   small: "text-2xl",
   "medium-small": "text-3xl",
   medium: "text-4xl",
@@ -1689,7 +1711,7 @@ function TextBlock({
         resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "h2",
           {
-            className: cn("font-bold", sizeMap4[textSize]),
+            className: cn("font-bold", sizeMap3[textSize]),
             style: gradientStyle,
             children: resolvedTitle
           }
@@ -1743,7 +1765,7 @@ function CustomImage({
 // components/page/FeaturesList.tsx
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var sizeMap5 = {
+var sizeMap4 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
   large: { icon: 48, title: "text-xl", desc: "text-lg" }
@@ -1755,7 +1777,7 @@ function FeaturesList({
   iconColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap5[size];
+  const sizeConfig = sizeMap4[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react.icons[formatted] || null;
@@ -1812,7 +1834,7 @@ function FeaturesList({
 // components/page/FeatureGrid.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var sizeMap6 = {
+var sizeMap5 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
   large: { icon: 48, title: "text-xl", desc: "text-lg" }
@@ -1828,7 +1850,7 @@ function FeatureGrid({
   textColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap6[size];
+  const sizeConfig = sizeMap5[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react2.icons[formatted] || null;
@@ -2095,7 +2117,7 @@ var widthMap3 = {
   medium: "max-w-lg",
   large: "max-w-2xl"
 };
-var sizeMap7 = {
+var sizeMap6 = {
   small: "px-3 py-1.5 text-sm",
   medium: "px-4 py-2 text-base",
   large: "px-6 py-3 text-lg"
@@ -2140,7 +2162,7 @@ function Popup({
       onClick: handleOpen,
       className: cn(
         "flex items-center gap-2 rounded-full font-medium",
-        sizeMap7[size]
+        sizeMap6[size]
       ),
       style: { backgroundColor: buttonColor, color: textColor },
       children: [

package/dist/index.mjs

@@ -14,8 +14,9 @@ import {
   spacingScale
 } from "./chunk-A3QDUUOF.mjs";
 import {
-  Heading
-} from "./chunk-A2J2E524.mjs";
+  Heading,
+  Paragraph
+} from "./chunk-WFLVAZV2.mjs";
 import {
   Button,
   Card,
@@ -29,7 +30,6 @@ import {
   Icon,
   Image,
   ImageCarousel,
-  Paragraph,
   Popup,
   Section,
   Spacer,
@@ -37,17 +37,17 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-X6VGLL5Y.mjs";
+} from "./chunk-MWW5LYLN.mjs";
 import {
   ThemeProvider,
   getShadowCSS,
   shadowPresets,
   useTheme
 } from "./chunk-PJXZC564.mjs";
+import "./chunk-QSWQDR6M.mjs";
 import {
   DEFAULT_THEME
 } from "./chunk-C6V3YUPF.mjs";
-import "./chunk-QSWQDR6M.mjs";
 export {
   Button,
   Card,

package/dist/renderer.d.mts

@@ -1,17 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { n as EntryBoundValue, j as ThemeableColorValue, C as ColorValue } from './types-D-CIduaE.mjs';
-export { P as PageTheme, T as ThemeBorderKey, a as ThemeBorders, b as ThemeColorKey, c as ThemeColors, d as ThemeShadowKey, e as ThemeShadows, f as ThemeSpacing, g as ThemeSpacingKey, h as ThemeTypography, i as ThemeableBorderRadiusValue, k as ThemeableShadowValue, l as ThemeableSpacingValue } from './types-D-CIduaE.mjs';
-import { ReactNode } from 'react';
-import { R as ResponsiveVisibility } from './ResponsiveToggleField-BihXsGIJ.mjs';
-export { D as DEFAULT_THEME, T as ThemeProvider, u as useTheme } from './ResponsiveToggleField-BihXsGIJ.mjs';
-import { PuckContext } from '@measured/puck';
-
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
-type HeadingWeight = "normal" | "medium" | "semibold" | "bold" | "extrabold";
-type HeadingAlign = "left" | "center" | "right";
-type HeadingLetterSpacing = "tight" | "normal" | "wide";
-type HeadingLineHeight = "tight" | "normal" | "relaxed";
+import { n as EntryBoundValue, j as ThemeableColorValue, m as ColorValue } from './types-HQ6hIbYr.mjs';
+export { P as PageTheme, T as ThemeBorderKey, a as ThemeBorders, b as ThemeColorKey, c as ThemeColors, d as ThemeShadowKey, e as ThemeShadows, f as ThemeSpacing, g as ThemeSpacingKey, h as ThemeTypography, i as ThemeableBorderRadiusValue, k as ThemeableShadowValue, l as ThemeableSpacingValue } from './types-HQ6hIbYr.mjs';
+import { H as HeadingLevel, J as HeadingSize, K as HeadingWeight, L as HeadingAlign, M as HeadingLetterSpacing, N as HeadingLineHeight, O as ParagraphSize, Q as ParagraphWeight, R as ParagraphAlign, U as ParagraphLineHeight } from './Popup-llKrR-vO.mjs';
+export { B as Button, a as ButtonProps, C as Card, b as CardProps, c as CarouselImage, d as Columns, e as ColumnsProps, f as Container, g as ContainerProps, h as CustomImage, i as CustomImageProps, D as Divider, j as DividerProps, F as FeatureGrid, k as FeatureGridProps, l as FeaturesList, m as FeaturesListProps, n as Footer, o as FooterProps, I as Icon, p as IconProps, q as Image, r as ImageCarousel, s as ImageCarouselProps, t as ImageProps, P as Popup, u as PopupProps, S as Section, v as SectionProps, w as Spacer, x as SpacerProps, T as TextBlock, y as TextBlockProps, z as Topbar, A as TopbarProps, V as VideoEmbed, E as VideoEmbedProps, G as availableIcons } from './Popup-llKrR-vO.mjs';
+export { D as DEFAULT_THEME, T as ThemeProvider, u as useTheme } from './defaults-j55hBQHu.mjs';
+import 'react';
+import './ResponsiveToggleField-65CqZEK-.mjs';
+import '@measured/puck';
 
 type HeadingProps = {
     text?: EntryBoundValue<string> | string;
@@ -30,11 +25,11 @@ declare function Heading({ text, level, size, weight, color, align, letterSpacin
 
 type ParagraphProps = {
     text?: EntryBoundValue<string> | string;
-    size?: "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold";
+    size?: ParagraphSize;
+    weight?: ParagraphWeight;
     color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right" | "justify";
-    lineHeight?: "tight" | "normal" | "relaxed" | "loose";
+    align?: ParagraphAlign;
+    lineHeight?: ParagraphLineHeight;
     maxWidth?: string;
     id?: string;
     puck?: unknown;
@@ -42,255 +37,4 @@ type ParagraphProps = {
 };
 declare function Paragraph({ text, size, weight, color, align, lineHeight, maxWidth, id, }: ParagraphProps): react_jsx_runtime.JSX.Element | null;
 
-type ButtonProps = {
-    text?: EntryBoundValue<string> | string;
-    href?: string;
-    target?: "_self" | "_blank";
-    variant?: "solid" | "outline" | "ghost" | "link";
-    size?: "sm" | "md" | "lg" | "xl";
-    color?: ThemeableColorValue | ColorValue | string;
-    textColor?: ThemeableColorValue | ColorValue | string;
-    borderRadius?: "none" | "sm" | "md" | "lg" | "full";
-    fullWidth?: boolean;
-    align?: "left" | "center" | "right";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Button({ text, href, target, variant, size, color, textColor, borderRadius, fullWidth, align, id, }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-type ImageProps = {
-    src?: EntryBoundValue<string> | string;
-    alt?: string;
-    width?: "auto" | "full" | "sm" | "md" | "lg" | "xl";
-    aspectRatio?: "auto" | "1:1" | "4:3" | "16:9" | "21:9";
-    objectFit?: "contain" | "cover" | "fill" | "none";
-    borderRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
-    shadow?: "none" | "sm" | "md" | "lg" | "xl";
-    align?: "left" | "center" | "right";
-    caption?: EntryBoundValue<string> | string;
-    captionColor?: ThemeableColorValue | ColorValue | string;
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Image({ src, alt, width, aspectRatio, objectFit, borderRadius, shadow, align, caption, captionColor, id, }: ImageProps): react_jsx_runtime.JSX.Element;
-
-type CarouselImage = {
-    src: string;
-    alt?: string;
-};
-type ImageCarouselProps = {
-    images?: CarouselImage[];
-    aspectRatio?: "16:9" | "4:3" | "1:1" | "21:9";
-    borderRadius?: "none" | "sm" | "md" | "lg";
-    showDots?: boolean;
-    showArrows?: boolean;
-    arrowColor?: ThemeableColorValue | ColorValue | string;
-    dotColor?: ThemeableColorValue | ColorValue | string;
-    autoPlay?: boolean;
-    autoPlayInterval?: number;
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function ImageCarousel({ images, aspectRatio, borderRadius, showDots, showArrows, arrowColor, dotColor, id, }: ImageCarouselProps): react_jsx_runtime.JSX.Element;
-
-type VideoEmbedProps = {
-    url?: EntryBoundValue<string> | string;
-    aspectRatio?: "16:9" | "4:3" | "1:1" | "21:9";
-    borderRadius?: "none" | "sm" | "md" | "lg";
-    autoplay?: boolean;
-    muted?: boolean;
-    loop?: boolean;
-    align?: "left" | "center" | "right";
-    maxWidth?: "sm" | "md" | "lg" | "xl" | "full";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function VideoEmbed({ url, aspectRatio, borderRadius, autoplay, muted, loop, align, maxWidth, id, }: VideoEmbedProps): react_jsx_runtime.JSX.Element;
-
-type IconProps = {
-    name?: string;
-    size?: "sm" | "md" | "lg" | "xl" | "2xl";
-    color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Icon({ name, size, color, align, id, }: IconProps): react_jsx_runtime.JSX.Element;
-declare const availableIcons: string[];
-
-type PuckProps = {
-    puck?: PuckContext;
-    editMode?: boolean;
-    id?: string;
-};
-
-type SectionProps = {
-    children?: ReactNode;
-    verticalPadding?: number;
-    horizontalPadding?: number;
-    gap?: number;
-    backgroundColor?: ThemeableColorValue | ColorValue | string;
-    backgroundImage?: string;
-    shadow?: string;
-    borderRadius?: number;
-    contentMaxWidth?: string;
-    anchorLink?: string;
-    visibility?: ResponsiveVisibility;
-} & PuckProps;
-declare function Section({ children: _children, verticalPadding, horizontalPadding, gap, backgroundColor, backgroundImage, shadow, borderRadius, contentMaxWidth, anchorLink, visibility, puck, }: SectionProps): react_jsx_runtime.JSX.Element;
-
-type ContainerProps = {
-    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-    padding?: "none" | "sm" | "md" | "lg" | "xl";
-    paddingX?: "none" | "sm" | "md" | "lg" | "xl";
-    paddingY?: "none" | "sm" | "md" | "lg" | "xl";
-    backgroundColor?: ThemeableColorValue | ColorValue | string;
-    centered?: boolean;
-} & PuckProps;
-declare function Container({ maxWidth, padding, paddingX, paddingY, backgroundColor, centered, id, puck, }: ContainerProps): react_jsx_runtime.JSX.Element;
-
-type ColumnsProps = {
-    columns?: 2 | 3 | 4;
-    gap?: "none" | "sm" | "md" | "lg" | "xl";
-    verticalAlign?: "top" | "center" | "bottom" | "stretch";
-    stackOnMobile?: boolean;
-} & PuckProps;
-declare function Columns({ columns, gap, verticalAlign, stackOnMobile, id, puck, }: ColumnsProps): react_jsx_runtime.JSX.Element;
-
-type CardProps = {
-    backgroundColor?: ThemeableColorValue | ColorValue | string;
-    borderColor?: ThemeableColorValue | ColorValue | string;
-    borderWidth?: "none" | "thin" | "medium" | "thick";
-    borderRadius?: "none" | "sm" | "md" | "lg" | "xl";
-    shadow?: "none" | "sm" | "md" | "lg" | "xl";
-    padding?: "none" | "sm" | "md" | "lg" | "xl";
-} & PuckProps;
-declare function Card({ backgroundColor, borderColor, borderWidth, borderRadius, shadow, padding, id, puck, }: CardProps): react_jsx_runtime.JSX.Element;
-
-type DividerProps = {
-    style?: "solid" | "dashed" | "dotted";
-    thickness?: "thin" | "medium" | "thick";
-    color?: ThemeableColorValue | ColorValue | string;
-    width?: "full" | "3/4" | "1/2" | "1/4";
-    align?: "left" | "center" | "right";
-    spacing?: "sm" | "md" | "lg" | "xl";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Divider({ style: lineStyle, thickness, color, width, align, spacing, id, }: DividerProps): react_jsx_runtime.JSX.Element;
-
-type SpacerProps = {
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Spacer({ size, id }: SpacerProps): react_jsx_runtime.JSX.Element;
-
-type TextBlockProps = {
-    title?: EntryBoundValue<string> | string;
-    subtitle?: EntryBoundValue<string> | string;
-    body?: EntryBoundValue<string> | string;
-    alignment?: "left" | "center" | "right";
-    textSize?: "small" | "medium-small" | "medium" | "large" | "xlarge";
-    textColor?: ThemeableColorValue | ColorValue | string;
-    subtitleBodyColor?: ThemeableColorValue | ColorValue | string;
-    useGradientText?: boolean;
-    gradientColor1?: ThemeableColorValue | ColorValue | string;
-    gradientColor2?: ThemeableColorValue | ColorValue | string;
-    anchorLink?: string;
-    puck?: unknown;
-    editMode?: boolean;
-    id?: string;
-};
-declare function TextBlock({ title, subtitle, body, alignment, textSize, textColor, subtitleBodyColor, useGradientText, gradientColor1, gradientColor2, anchorLink, }: TextBlockProps): react_jsx_runtime.JSX.Element;
-
-type CustomImageProps = {
-    image?: string;
-    alt?: string;
-    maxWidth?: number;
-    alignment?: "left" | "center" | "right";
-    fitContent?: boolean;
-} & PuckProps;
-declare function CustomImage({ image, alt, maxWidth, alignment, fitContent, }: CustomImageProps): react_jsx_runtime.JSX.Element;
-
-type Feature$1 = {
-    icon?: string;
-    image?: string;
-    title?: string;
-    description?: string;
-};
-type FeaturesListProps = {
-    features?: Feature$1[];
-    align?: "left" | "center" | "right";
-    size?: "small" | "medium" | "large";
-    iconColor?: string;
-    anchorLink?: string;
-} & Record<string, unknown>;
-declare function FeaturesList({ features, align, size, iconColor, anchorLink, }: FeaturesListProps): react_jsx_runtime.JSX.Element;
-
-type Feature = {
-    icon?: string;
-    image?: string;
-    title?: string;
-    description?: string;
-};
-type FeatureGridProps = {
-    heading?: string;
-    description?: string;
-    features?: Feature[];
-    columns?: 2 | 3 | 4;
-    align?: "left" | "center" | "right";
-    size?: "small" | "medium" | "large";
-    iconColor?: string;
-    textColor?: string;
-    anchorLink?: string;
-} & Record<string, unknown>;
-declare function FeatureGrid({ heading, description, features, columns, align, size, iconColor, textColor, anchorLink, }: FeatureGridProps): react_jsx_runtime.JSX.Element;
-
-type FooterProps = {
-    logo?: string;
-    copyright?: string;
-    backgroundColor?: string;
-    textColor?: string;
-    facebookUrl?: string;
-    instagramUrl?: string;
-    twitterUrl?: string;
-    tiktokUrl?: string;
-} & Record<string, unknown> & PuckProps;
-declare function Footer({ logo, copyright, backgroundColor, textColor, facebookUrl, instagramUrl, twitterUrl, puck, }: FooterProps): react_jsx_runtime.JSX.Element;
-
-type NavItem = {
-    name: string;
-    url: string;
-    linkType?: "internal" | "external" | "scrollTo";
-};
-type TopbarProps = {
-    logo?: string;
-    logoUrl?: string;
-    navItems?: NavItem[];
-    backgroundColor?: string;
-    textColor?: string;
-    maxWidth?: string;
-} & Record<string, unknown> & PuckProps;
-declare function Topbar({ logo, logoUrl, navItems, backgroundColor, textColor, maxWidth, puck, }: TopbarProps): react_jsx_runtime.JSX.Element;
-
-type PopupProps = {
-    ctaText?: string;
-    buttonColor?: string;
-    textColor?: string;
-    icon?: string;
-    iconPosition?: "left" | "right";
-    size?: "small" | "medium" | "large";
-    width?: "small" | "medium" | "large";
-    textLink?: boolean;
-} & Record<string, unknown> & PuckProps;
-declare function Popup({ ctaText, buttonColor, textColor, icon, iconPosition, size, width, textLink, puck, }: PopupProps): react_jsx_runtime.JSX.Element;
-
-export { Button, type ButtonProps, Card, type CardProps, type CarouselImage, Columns, type ColumnsProps, Container, type ContainerProps, CustomImage, type CustomImageProps, Divider, type DividerProps, FeatureGrid, type FeatureGridProps, FeaturesList, type FeaturesListProps, Footer, type FooterProps, Heading, type HeadingProps, Icon, type IconProps, Image, ImageCarousel, type ImageCarouselProps, type ImageProps, Paragraph, type ParagraphProps, Popup, type PopupProps, Section, type SectionProps, Spacer, type SpacerProps, TextBlock, type TextBlockProps, ThemeableColorValue, Topbar, type TopbarProps, VideoEmbed, type VideoEmbedProps, availableIcons };
+export { Heading, type HeadingProps, Paragraph, type ParagraphProps, ThemeableColorValue };