@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/headless/source/components/dataDisplay/chart/chartTheme.js

@@ -0,0 +1,78 @@
+const MAX_SERIES = 12;
+const FALLBACK_SERIES = ["#0072b2", "#e69f00", "#009e73", "#cc79a7", "#56b4e9", "#d55e00", "#7a7a7a"];
+function isDarkColour(colour) {
+  let rgb = null;
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(colour.trim());
+  if (hex) {
+    const digits = hex[1].length === 3 ? [...hex[1]].map((d) => d + d) : hex[1].match(/../g);
+    rgb = digits.map((pair) => parseInt(pair, 16));
+  } else {
+    const fn = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(colour.trim());
+    if (fn) rgb = [Number(fn[1]), Number(fn[2]), Number(fn[3])];
+  }
+  if (!rgb) return false;
+  const [r, g, b] = rgb.map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.2;
+}
+function readChartPalette(host) {
+  const css = getComputedStyle(host);
+  const value = (name, fallback) => css.getPropertyValue(name).trim() || fallback;
+  const series = [];
+  for (let index = 1; index <= MAX_SERIES; index += 1) {
+    const colour = css.getPropertyValue(`--smwb-chart-series-${index}`).trim();
+    if (colour) series.push(colour);
+  }
+  const surface = value("--smui-surfaceBackground", "#ffffff");
+  return {
+    dark: isDarkColour(surface),
+    text: value("--smui-onSurfaceColor", "#1c1b1f"),
+    muted: value("--smui-onSurfaceVariant", "#49454e"),
+    line: value("--smui-dividerColor", "rgba(0, 0, 0, 0.12)"),
+    surface,
+    primary: value("--smui-primaryColor", "#6750a4"),
+    success: value("--smui-successColor", "#2e7d32"),
+    warning: value("--smui-warningColor", "#ed6c02"),
+    error: value("--smui-errorColor", "#d32f2f"),
+    info: value("--smui-infoColor", "#0288d1"),
+    series: series.length > 0 ? series : FALLBACK_SERIES,
+    fontFamily: css.fontFamily || "sans-serif"
+  };
+}
+const samePalette = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+function chartTheme(palette) {
+  const axis = {
+    axisLine: { lineStyle: { color: palette.line } },
+    axisTick: { lineStyle: { color: palette.line } },
+    axisLabel: { color: palette.muted },
+    splitLine: { lineStyle: { color: [palette.line] } },
+    nameTextStyle: { color: palette.muted }
+  };
+  return {
+    darkMode: palette.dark,
+    color: palette.series,
+    backgroundColor: "transparent",
+    textStyle: { color: palette.text, fontFamily: palette.fontFamily },
+    title: { textStyle: { color: palette.text }, subtextStyle: { color: palette.muted } },
+    legend: { textStyle: { color: palette.muted }, pageTextStyle: { color: palette.muted } },
+    tooltip: {
+      backgroundColor: palette.surface,
+      borderColor: palette.line,
+      textStyle: { color: palette.text }
+    },
+    categoryAxis: axis,
+    valueAxis: axis,
+    logAxis: axis,
+    timeAxis: axis,
+    dataZoom: { textStyle: { color: palette.muted }, borderColor: palette.line }
+  };
+}
+export {
+  chartTheme,
+  isDarkColour,
+  readChartPalette,
+  samePalette
+};
+//# sourceMappingURL=chartTheme.js.map

package/dist/headless/source/components/dataDisplay/chart/chartTheme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/chart/chartTheme.ts"],
+  "sourcesContent": ["// The chart's colours come from the theme's CSS variables, read as computed\n// values \u2014 a canvas needs colours, not var() references \u2014 and turned into an\n// ECharts theme: axes, grid lines, legend and tooltip in the page's palette.\n\nimport type { EChartsOption } from \"echarts\";\n\n/** An ECharts option: what the chart shows. */\nexport type ChartOption = EChartsOption;\n\n/** The theme's colours as the chart draws them. */\nexport interface ChartPalette {\n  /** The surface is dark. */\n  dark: boolean;\n  /** Text: titles, tooltips. */\n  text: string;\n  /** Secondary text: axis labels, the legend. */\n  muted: string;\n  /** Axis and grid lines. */\n  line: string;\n  /** The surface under the chart: tooltips. */\n  surface: string;\n  primary: string;\n  success: string;\n  warning: string;\n  error: string;\n  info: string;\n  /**\n   * Series colours, in order: `--smwb-chart-series-1` \u2026 `-12`. The default set\n   * stays apart with colour-vision deficiencies.\n   */\n  series: string[];\n  /** The font of the text around the chart. */\n  fontFamily: string;\n}\n\nconst MAX_SERIES = 12;\nconst FALLBACK_SERIES = [\"#0072b2\", \"#e69f00\", \"#009e73\", \"#cc79a7\", \"#56b4e9\", \"#d55e00\", \"#7a7a7a\"];\n\n/** Darker than mid-grey: `#rgb`, `#rrggbb` and `rgb()`/`rgba()`; anything else counts as light. */\nexport function isDarkColour(colour: string): boolean {\n  let rgb: number[] | null = null;\n  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(colour.trim());\n  if (hex) {\n    const digits = hex[1]!.length === 3 ? [...hex[1]!].map((d) => d + d) : hex[1]!.match(/../g)!;\n    rgb = digits.map((pair) => parseInt(pair, 16));\n  } else {\n    const fn = /^rgba?\\(\\s*([\\d.]+)[\\s,]+([\\d.]+)[\\s,]+([\\d.]+)/i.exec(colour.trim());\n    if (fn) rgb = [Number(fn[1]), Number(fn[2]), Number(fn[3])];\n  }\n  if (!rgb) return false;\n  const [r, g, b] = rgb.map((channel) => {\n    const c = channel / 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  }) as [number, number, number];\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.2;\n}\n\n/** Reads the palette from the element's computed style. */\nexport function readChartPalette(host: HTMLElement): ChartPalette {\n  const css = getComputedStyle(host);\n  const value = (name: string, fallback: string): string => css.getPropertyValue(name).trim() || fallback;\n  const series: string[] = [];\n  for (let index = 1; index <= MAX_SERIES; index += 1) {\n    const colour = css.getPropertyValue(`--smwb-chart-series-${index}`).trim();\n    if (colour) series.push(colour);\n  }\n  const surface = value(\"--smui-surfaceBackground\", \"#ffffff\");\n  return {\n    dark: isDarkColour(surface),\n    text: value(\"--smui-onSurfaceColor\", \"#1c1b1f\"),\n    muted: value(\"--smui-onSurfaceVariant\", \"#49454e\"),\n    line: value(\"--smui-dividerColor\", \"rgba(0, 0, 0, 0.12)\"),\n    surface,\n    primary: value(\"--smui-primaryColor\", \"#6750a4\"),\n    success: value(\"--smui-successColor\", \"#2e7d32\"),\n    warning: value(\"--smui-warningColor\", \"#ed6c02\"),\n    error: value(\"--smui-errorColor\", \"#d32f2f\"),\n    info: value(\"--smui-infoColor\", \"#0288d1\"),\n    series: series.length > 0 ? series : FALLBACK_SERIES,\n    fontFamily: css.fontFamily || \"sans-serif\",\n  };\n}\n\nexport const samePalette = (a: ChartPalette, b: ChartPalette): boolean => JSON.stringify(a) === JSON.stringify(b);\n\n/** An ECharts theme in the palette: series colours, text, axes, grid lines, legend, tooltip. */\nexport function chartTheme(palette: ChartPalette): Record<string, unknown> {\n  const axis = {\n    axisLine: { lineStyle: { color: palette.line } },\n    axisTick: { lineStyle: { color: palette.line } },\n    axisLabel: { color: palette.muted },\n    splitLine: { lineStyle: { color: [palette.line] } },\n    nameTextStyle: { color: palette.muted },\n  };\n  return {\n    darkMode: palette.dark,\n    color: palette.series,\n    backgroundColor: \"transparent\",\n    textStyle: { color: palette.text, fontFamily: palette.fontFamily },\n    title: { textStyle: { color: palette.text }, subtextStyle: { color: palette.muted } },\n    legend: { textStyle: { color: palette.muted }, pageTextStyle: { color: palette.muted } },\n    tooltip: {\n      backgroundColor: palette.surface,\n      borderColor: palette.line,\n      textStyle: { color: palette.text },\n    },\n    categoryAxis: axis,\n    valueAxis: axis,\n    logAxis: axis,\n    timeAxis: axis,\n    dataZoom: { textStyle: { color: palette.muted }, borderColor: palette.line },\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/headless/source/components/dataDisplay/chart/index.js

@@ -0,0 +1,9 @@
+import { Chart, default as default2 } from "./chart";
+import { chartTheme, readChartPalette } from "./chartTheme";
+export {
+  Chart,
+  chartTheme,
+  default2 as default,
+  readChartPalette
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/dataDisplay/chart/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/chart/index.ts"],
+  "sourcesContent": ["export { Chart, default } from \"./chart\";\nexport type { ChartProps, ChartEventParams, ChartInstance, ChartModule } from \"./chart\";\nexport { chartTheme, readChartPalette } from \"./chartTheme\";\nexport type { ChartOption, ChartPalette } from \"./chartTheme\";\n"],
+  "mappings": "AAAA,SAAS,OAAO,WAAAA,gBAAe;AAE/B,SAAS,YAAY,wBAAwB;",
+  "names": ["default"]
+}

package/dist/headless/source/components/dataDisplay/chat/chat.jsx

@@ -1,4 +1,4 @@
-import { Show, createMemo, mergeProps } from "solid-js";
+import { Show, children, createMemo, mergeProps } from "solid-js";
 import cn from "clsx";
 import { FloatingButton } from "../../inputs/floatingButton";
 import { Icon } from "../../base/icon";
@@ -89,6 +89,7 @@ function Chat(props) {
     effectiveLayout: effectiveLayout(),
     showCloseButton: p.showCloseButton
   });
+  const triggerIcon = children(() => p.floatingTrigger && !p.embedded && !open() ? p.triggerIcon : void 0);
   return <div
     class={cn(
       "smwb-chat",
@@ -106,8 +107,8 @@ function Chat(props) {
     data-testid="chat-trigger"
     onClick={handleOpen}
   >
-          <Show when={p.triggerIcon} fallback={<Icon name="chat" size={24} />}>
-            {p.triggerIcon}
+          <Show when={triggerIcon()} fallback={<Icon name="chat" size={24} />}>
+            {triggerIcon()}
           </Show>
         </FloatingButton>
       </Show>

package/dist/headless/source/components/dataDisplay/chat/chat.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chat.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createMemo, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { FloatingButton } from \"../../inputs/floatingButton\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { ChatComposer } from \"./chatComposer\";\nimport { ChatHeader } from \"./chatHeader\";\nimport { ChatMessages } from \"./chatMessages\";\nimport { ChatShell } from \"./chatShell\";\nimport { createChatFileUpload } from \"./useChatFileUpload\";\nimport {\n  type ChatAnchor,\n  type ChatLayoutMode,\n  type ChatMessage,\n  type ChatMessageRenderContext,\n  type ChatThemeMode,\n  CHAT_EXPAND_LAYOUTS,\n} from \"./types\";\nimport { pickInitialLayout, resolveAllowedLayouts, shouldShowChatCloseButton } from \"./utils\";\n\nexport interface ChatProps extends ParentProps, Omit<ChatMessageRenderContext, \"showAvatars\" | \"showAttachments\"> {\n  class?: string | undefined;\n  messages: ChatMessage[];\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  headerTitle?: JSX.Element;\n  headerSubtitle?: JSX.Element;\n  headerActions?: JSX.Element;\n  footer?: JSX.Element;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  layout?: ChatLayoutMode | undefined;\n  defaultLayout?: ChatLayoutMode | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  open?: boolean | undefined;\n  defaultOpen?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  floatingTrigger?: boolean | undefined;\n  triggerIcon?: JSX.Element;\n  triggerLabel?: string | undefined;\n  onLoadMore?: (() => void | Promise<void>) | undefined;\n  hasMore?: boolean | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  composerPlaceholder?: string | undefined;\n  composerDisabled?: boolean | undefined;\n  composerShiftEnterNewline?: boolean | undefined;\n  composerCtrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  onUploadFiles?: ((files: File[]) => void | Promise<void>) | undefined;\n  fileUploadAccept?: Record<string, string[]> | string | undefined;\n  fileUploadMaxFiles?: number | undefined;\n  attachAriaLabel?: string | undefined;\n  loading?: boolean | undefined;\n  loadingMore?: boolean | undefined;\n  loadingSkeletonCount?: number | undefined;\n  renderMessage?: ((message: ChatMessage, ctx: ChatMessageRenderContext) => JSX.Element) | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  showCloseButton?: boolean | undefined;\n}\n\nexport function Chat(props: ChatProps): JSX.Element {\n  const p = mergeProps(\n    {\n      showAvatars: false,\n      showAttachments: false,\n      anchor: \"bottom-right\" as const,\n      themeMode: \"inherit\" as const,\n      defaultOpen: false,\n      floatingTrigger: false,\n      composerPlaceholder: \"message\",\n      composerShiftEnterNewline: true,\n      composerCtrlEnterNewline: true,\n      fileUpload: false,\n      embedded: false,\n      overlayContext: false,\n      showStatus: false,\n    },\n    props\n  );\n\n  const allowedLayouts = createMemo(() => resolveAllowedLayouts(p.allowedLayouts ?? CHAT_EXPAND_LAYOUTS));\n\n  const [open, setOpen] = createControllableState<boolean>({\n    value: () => p.open,\n    defaultValue: p.defaultOpen,\n    onChange: p.onOpenChange,\n  });\n\n  const [layout, setLayout] = createControllableState<ChatLayoutMode>({\n    value: () => p.layout,\n    defaultValue: pickInitialLayout(allowedLayouts(), p.defaultLayout),\n    onChange: p.onLayoutChange,\n  });\n\n  const effectiveLayout = (): ChatLayoutMode =>\n    p.embedded ? \"fullHeight\" : p.floatingTrigger ? (open() ? layout() : \"closed\") : layout();\n\n  const handleOpen = (): void => {\n    setOpen(true);\n    if (layout() === \"closed\") {\n      setLayout(pickInitialLayout(allowedLayouts(), p.defaultLayout));\n    }\n  };\n\n  const handleClose = (): void => {\n    setOpen(false);\n  };\n\n  const handleLayoutChange = (next: ChatLayoutMode): void => {\n    setOpen(true);\n    setLayout(next);\n  };\n\n  const fileUpload = createChatFileUpload({\n    enabled: () => p.fileUpload,\n    accept: p.fileUploadAccept,\n    maxFiles: p.fileUploadMaxFiles,\n    onUploadFiles: p.onUploadFiles,\n    disabled: () => Boolean(p.composerDisabled),\n  });\n\n  const attachInputId = createId();\n\n  const showComposer = (): boolean => Boolean(p.onSendMessage) || fileUpload.enabled();\n\n  const fileInput = (): JSX.Element => (\n    <Show when={fileUpload.enabled()}>\n      <input {...fileUpload.getInputProps({ id: attachInputId })} data-testid=\"chat-file-input\" />\n    </Show>\n  );\n\n  const resolvedFooter = (): JSX.Element =>\n    p.footer ??\n    p.children ??\n    (showComposer() ? (\n      <>\n        {fileInput()}\n        <ChatComposer\n          onSendMessage={p.onSendMessage}\n          placeholder={p.composerPlaceholder}\n          disabled={p.composerDisabled}\n          shiftEnterNewline={p.composerShiftEnterNewline}\n          ctrlEnterNewline={p.composerCtrlEnterNewline}\n          fileUpload={fileUpload.enabled()}\n          attachInputId={fileUpload.enabled() ? attachInputId : undefined}\n          attachAriaLabel={p.attachAriaLabel}\n        />\n      </>\n    ) : undefined);\n\n  const closeButtonVisible = (): boolean =>\n    shouldShowChatCloseButton({\n      floatingTrigger: p.floatingTrigger,\n      embedded: p.embedded,\n      overlayContext: p.overlayContext,\n      effectiveLayout: effectiveLayout(),\n      showCloseButton: p.showCloseButton,\n    });\n\n  return (\n    <div\n      class={cn(\n        \"smwb-chat\",\n        !p.embedded && `smwb-chat_${p.anchor}`,\n        p.embedded && \"smwb-chat_embedded\",\n        p.overlayContext && \"smwb-chat_overlay-context\",\n        p.class\n      )}\n      data-testid=\"chat\"\n    >\n      <Show when={p.floatingTrigger && !p.embedded && !open()}>\n        <FloatingButton\n          class=\"smwb-chat__trigger\"\n          aria-label={p.triggerLabel ?? \"Open chat\"}\n          data-testid=\"chat-trigger\"\n          onClick={handleOpen}\n        >\n          <Show when={p.triggerIcon} fallback={<Icon name=\"chat\" size={24} />}>\n            {p.triggerIcon}\n          </Show>\n        </FloatingButton>\n      </Show>\n      <ChatShell\n        layout={effectiveLayout()}\n        anchor={p.anchor}\n        themeMode={p.themeMode}\n        embedded={p.embedded}\n        overlayContext={p.overlayContext}\n        fileDropzoneRootProps={fileUpload.enabled() ? fileUpload.getRootProps() : undefined}\n        fileDropzoneActive={fileUpload.enabled() && fileUpload.isDragActive()}\n        header={\n          <ChatHeader\n            title={p.headerTitle}\n            subtitle={p.headerSubtitle}\n            actions={p.headerActions}\n            layout={effectiveLayout() === \"closed\" ? layout() : effectiveLayout()}\n            allowedLayouts={allowedLayouts()}\n            onLayoutChange={handleLayoutChange}\n            onClose={closeButtonVisible() ? handleClose : undefined}\n          />\n        }\n        footer={resolvedFooter()}\n      >\n        <ChatMessages\n          messages={p.messages}\n          showAvatars={p.showAvatars}\n          showAttachments={p.showAttachments}\n          showStatus={p.showStatus}\n          statusIcons={p.statusIcons}\n          renderStatus={p.renderStatus}\n          onLoadMore={p.onLoadMore}\n          hasMore={p.hasMore}\n          loading={p.loading}\n          loadingMore={p.loadingMore}\n          loadingSkeletonCount={p.loadingSkeletonCount}\n          renderMessage={p.renderMessage}\n        />\n      </ChatShell>\n    </div>\n  );\n}\n\nexport default Chat;\n"],"mappings":"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","names":[],"file":"chat.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chat.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createMemo, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { FloatingButton } from \"../../inputs/floatingButton\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { ChatComposer } from \"./chatComposer\";\nimport { ChatHeader } from \"./chatHeader\";\nimport { ChatMessages } from \"./chatMessages\";\nimport { ChatShell } from \"./chatShell\";\nimport { createChatFileUpload } from \"./useChatFileUpload\";\nimport {\n  type ChatAnchor,\n  type ChatLayoutMode,\n  type ChatMessage,\n  type ChatMessageRenderContext,\n  type ChatThemeMode,\n  CHAT_EXPAND_LAYOUTS,\n} from \"./types\";\nimport { pickInitialLayout, resolveAllowedLayouts, shouldShowChatCloseButton } from \"./utils\";\n\nexport interface ChatProps extends ParentProps, Omit<ChatMessageRenderContext, \"showAvatars\" | \"showAttachments\"> {\n  class?: string | undefined;\n  messages: ChatMessage[];\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  headerTitle?: JSX.Element;\n  headerSubtitle?: JSX.Element;\n  headerActions?: JSX.Element;\n  footer?: JSX.Element;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  layout?: ChatLayoutMode | undefined;\n  defaultLayout?: ChatLayoutMode | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  open?: boolean | undefined;\n  defaultOpen?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  floatingTrigger?: boolean | undefined;\n  triggerIcon?: JSX.Element;\n  triggerLabel?: string | undefined;\n  onLoadMore?: (() => void | Promise<void>) | undefined;\n  hasMore?: boolean | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  composerPlaceholder?: string | undefined;\n  composerDisabled?: boolean | undefined;\n  composerShiftEnterNewline?: boolean | undefined;\n  composerCtrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  onUploadFiles?: ((files: File[]) => void | Promise<void>) | undefined;\n  fileUploadAccept?: Record<string, string[]> | string | undefined;\n  fileUploadMaxFiles?: number | undefined;\n  attachAriaLabel?: string | undefined;\n  loading?: boolean | undefined;\n  loadingMore?: boolean | undefined;\n  loadingSkeletonCount?: number | undefined;\n  renderMessage?: ((message: ChatMessage, ctx: ChatMessageRenderContext) => JSX.Element) | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  showCloseButton?: boolean | undefined;\n}\n\nexport function Chat(props: ChatProps): JSX.Element {\n  const p = mergeProps(\n    {\n      showAvatars: false,\n      showAttachments: false,\n      anchor: \"bottom-right\" as const,\n      themeMode: \"inherit\" as const,\n      defaultOpen: false,\n      floatingTrigger: false,\n      composerPlaceholder: \"message\",\n      composerShiftEnterNewline: true,\n      composerCtrlEnterNewline: true,\n      fileUpload: false,\n      embedded: false,\n      overlayContext: false,\n      showStatus: false,\n    },\n    props\n  );\n\n  const allowedLayouts = createMemo(() => resolveAllowedLayouts(p.allowedLayouts ?? CHAT_EXPAND_LAYOUTS));\n\n  const [open, setOpen] = createControllableState<boolean>({\n    value: () => p.open,\n    defaultValue: p.defaultOpen,\n    onChange: p.onOpenChange,\n  });\n\n  const [layout, setLayout] = createControllableState<ChatLayoutMode>({\n    value: () => p.layout,\n    defaultValue: pickInitialLayout(allowedLayouts(), p.defaultLayout),\n    onChange: p.onLayoutChange,\n  });\n\n  const effectiveLayout = (): ChatLayoutMode =>\n    p.embedded ? \"fullHeight\" : p.floatingTrigger ? (open() ? layout() : \"closed\") : layout();\n\n  const handleOpen = (): void => {\n    setOpen(true);\n    if (layout() === \"closed\") {\n      setLayout(pickInitialLayout(allowedLayouts(), p.defaultLayout));\n    }\n  };\n\n  const handleClose = (): void => {\n    setOpen(false);\n  };\n\n  const handleLayoutChange = (next: ChatLayoutMode): void => {\n    setOpen(true);\n    setLayout(next);\n  };\n\n  const fileUpload = createChatFileUpload({\n    enabled: () => p.fileUpload,\n    accept: p.fileUploadAccept,\n    maxFiles: p.fileUploadMaxFiles,\n    onUploadFiles: p.onUploadFiles,\n    disabled: () => Boolean(p.composerDisabled),\n  });\n\n  const attachInputId = createId();\n\n  const showComposer = (): boolean => Boolean(p.onSendMessage) || fileUpload.enabled();\n\n  const fileInput = (): JSX.Element => (\n    <Show when={fileUpload.enabled()}>\n      <input {...fileUpload.getInputProps({ id: attachInputId })} data-testid=\"chat-file-input\" />\n    </Show>\n  );\n\n  const resolvedFooter = (): JSX.Element =>\n    p.footer ??\n    p.children ??\n    (showComposer() ? (\n      <>\n        {fileInput()}\n        <ChatComposer\n          onSendMessage={p.onSendMessage}\n          placeholder={p.composerPlaceholder}\n          disabled={p.composerDisabled}\n          shiftEnterNewline={p.composerShiftEnterNewline}\n          ctrlEnterNewline={p.composerCtrlEnterNewline}\n          fileUpload={fileUpload.enabled()}\n          attachInputId={fileUpload.enabled() ? attachInputId : undefined}\n          attachAriaLabel={p.attachAriaLabel}\n        />\n      </>\n    ) : undefined);\n\n  const closeButtonVisible = (): boolean =>\n    shouldShowChatCloseButton({\n      floatingTrigger: p.floatingTrigger,\n      embedded: p.embedded,\n      overlayContext: p.overlayContext,\n      effectiveLayout: effectiveLayout(),\n      showCloseButton: p.showCloseButton,\n    });\n\n  // The trigger icon is read once, and only while the trigger is drawn: markup\n  // passed as a prop is created anew on every read, and during hydration a copy\n  // the server never rendered has no DOM node.\n  const triggerIcon = children(() => (p.floatingTrigger && !p.embedded && !open() ? p.triggerIcon : undefined));\n\n  return (\n    <div\n      class={cn(\n        \"smwb-chat\",\n        !p.embedded && `smwb-chat_${p.anchor}`,\n        p.embedded && \"smwb-chat_embedded\",\n        p.overlayContext && \"smwb-chat_overlay-context\",\n        p.class\n      )}\n      data-testid=\"chat\"\n    >\n      <Show when={p.floatingTrigger && !p.embedded && !open()}>\n        <FloatingButton\n          class=\"smwb-chat__trigger\"\n          aria-label={p.triggerLabel ?? \"Open chat\"}\n          data-testid=\"chat-trigger\"\n          onClick={handleOpen}\n        >\n          <Show when={triggerIcon()} fallback={<Icon name=\"chat\" size={24} />}>\n            {triggerIcon()}\n          </Show>\n        </FloatingButton>\n      </Show>\n      <ChatShell\n        layout={effectiveLayout()}\n        anchor={p.anchor}\n        themeMode={p.themeMode}\n        embedded={p.embedded}\n        overlayContext={p.overlayContext}\n        fileDropzoneRootProps={fileUpload.enabled() ? fileUpload.getRootProps() : undefined}\n        fileDropzoneActive={fileUpload.enabled() && fileUpload.isDragActive()}\n        header={\n          <ChatHeader\n            title={p.headerTitle}\n            subtitle={p.headerSubtitle}\n            actions={p.headerActions}\n            layout={effectiveLayout() === \"closed\" ? layout() : effectiveLayout()}\n            allowedLayouts={allowedLayouts()}\n            onLayoutChange={handleLayoutChange}\n            onClose={closeButtonVisible() ? handleClose : undefined}\n          />\n        }\n        footer={resolvedFooter()}\n      >\n        <ChatMessages\n          messages={p.messages}\n          showAvatars={p.showAvatars}\n          showAttachments={p.showAttachments}\n          showStatus={p.showStatus}\n          statusIcons={p.statusIcons}\n          renderStatus={p.renderStatus}\n          onLoadMore={p.onLoadMore}\n          hasMore={p.hasMore}\n          loading={p.loading}\n          loadingMore={p.loadingMore}\n          loadingSkeletonCount={p.loadingSkeletonCount}\n          renderMessage={p.renderMessage}\n        />\n      </ChatShell>\n    </div>\n  );\n}\n\nexport default Chat;\n"],"mappings":"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","names":[],"file":"chat.jsx"}

package/dist/headless/source/components/dataDisplay/chat/chatHeader.jsx

@@ -1,4 +1,4 @@
-import { For, Show } from "solid-js";
+import { For, Show, children } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { ChatIconButton } from "./chatIconButton";
@@ -14,15 +14,17 @@ const layoutAriaLabels = {
   fullscreen: "Fullscreen"
 };
 function ChatHeader(props) {
+  const title = children(() => props.title);
+  const subtitle = children(() => props.subtitle);
   const layoutActions = () => getChatLayoutActions(props.allowedLayouts ?? ["floating"], props.layout);
   const showLayoutActions = () => Boolean(props.onLayoutChange) && layoutActions().length > 0;
   return <div class={cn("smwb-chat-header", props.class)} data-testid="chat-header">
       <div class="smwb-chat-header__main">
-        <Show when={props.title}>
-          <div class="smwb-chat-header__title">{props.title}</div>
+        <Show when={title()}>
+          <div class="smwb-chat-header__title">{title()}</div>
         </Show>
-        <Show when={props.subtitle}>
-          <div class="smwb-chat-header__subtitle">{props.subtitle}</div>
+        <Show when={subtitle()}>
+          <div class="smwb-chat-header__subtitle">{subtitle()}</div>
         </Show>
       </div>
       <div class="smwb-chat-header__actions">

package/dist/headless/source/components/dataDisplay/chat/chatHeader.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatHeader.tsx"],"sourcesContent":["import { type JSX, For, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport type { ChatLayoutMode } from \"./types\";\nimport { getChatLayoutActions } from \"./utils\";\n\nexport interface ChatHeaderProps {\n  class?: string | undefined;\n  title?: JSX.Element;\n  subtitle?: JSX.Element;\n  actions?: JSX.Element;\n  layout?: ChatLayoutMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  onClose?: (() => void) | undefined;\n}\n\nconst layoutIcons: Record<Exclude<ChatLayoutMode, \"closed\">, string> = {\n  floating: \"picture_in_picture\",\n  fullHeight: \"fit_screen\",\n  fullscreen: \"open_in_full\",\n};\n\nconst layoutAriaLabels: Record<Exclude<ChatLayoutMode, \"closed\">, string> = {\n  floating: \"Floating window\",\n  fullHeight: \"Full height\",\n  fullscreen: \"Fullscreen\",\n};\n\nexport function ChatHeader(props: ChatHeaderProps): JSX.Element {\n  const layoutActions = (): Exclude<ChatLayoutMode, \"closed\">[] =>\n    getChatLayoutActions(props.allowedLayouts ?? [\"floating\"], props.layout);\n  const showLayoutActions = (): boolean => Boolean(props.onLayoutChange) && layoutActions().length > 0;\n\n  return (\n    <div class={cn(\"smwb-chat-header\", props.class)} data-testid=\"chat-header\">\n      <div class=\"smwb-chat-header__main\">\n        <Show when={props.title}>\n          <div class=\"smwb-chat-header__title\">{props.title}</div>\n        </Show>\n        <Show when={props.subtitle}>\n          <div class=\"smwb-chat-header__subtitle\">{props.subtitle}</div>\n        </Show>\n      </div>\n      <div class=\"smwb-chat-header__actions\">\n        {props.actions}\n        <Show when={showLayoutActions()}>\n          <For each={layoutActions()}>\n            {(mode) => (\n              <ChatIconButton\n                aria-pressed={props.layout === mode}\n                aria-label={layoutAriaLabels[mode]}\n                data-testid={`chat-layout-${mode}`}\n                onClick={() => props.onLayoutChange?.(mode)}\n              >\n                <Icon name={layoutIcons[mode]} size={18} />\n              </ChatIconButton>\n            )}\n          </For>\n        </Show>\n        <Show when={props.onClose}>\n          <ChatIconButton aria-label=\"Close chat\" data-testid=\"chat-close\" onClick={() => props.onClose?.()}>\n            <Icon name=\"close\" size={18} />\n          </ChatIconButton>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport default ChatHeader;\n"],"mappings":"AAAA,SAAmB,KAAK,YAAY;AACpC,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAE/B,SAAS,4BAA4B;AAarC,MAAM,cAAiE;AAAA,EACrE,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,MAAM,mBAAsE;AAAA,EAC1E,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;AAEO,SAAS,WAAW,OAAqC;AAC9D,QAAM,gBAAgB,MACpB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU,GAAG,MAAM,MAAM;AACzE,QAAM,oBAAoB,MAAe,QAAQ,MAAM,cAAc,KAAK,cAAc,EAAE,SAAS;AAEnG,SACE,CAAC,IAAI,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG,YAAY,cAAc;AAAA,MACzE,CAAC,IAAI,MAAM,yBAAyB;AAAA,QAClC,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,IAAI,MAAM,2BAA2B,MAAM,MAAM,EAAjD,IAAuD;AAAA,QAC1D,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,IAAI,MAAM,8BAA8B,MAAM,SAAS,EAAvD,IAA6D;AAAA,QAChE,EAFC,KAEM;AAAA,MACT,EAPC,IAOK;AAAA,MACN,CAAC,IAAI,MAAM,4BAA4B;AAAA,SACpC,MAAM,QAAQ;AAAA,QACf,CAAC,KAAK,MAAM,kBAAkB,GAAG;AAAA,UAC/B,CAAC,IAAI,MAAM,cAAc,GAAG;AAAA,aACzB,CAAC,SACA,CAAC;AAAA,IACC,cAAc,MAAM,WAAW;AAAA,IAC/B,YAAY,iBAAiB,IAAI;AAAA,IACjC,aAAa,eAAe,IAAI;AAAA,IAChC,SAAS,MAAM,MAAM,iBAAiB,IAAI;AAAA,GAC3C;AAAA,gBACC,CAAC,KAAK,MAAM,YAAY,IAAI,GAAG,MAAM,IAAI,EAAE;AAAA,cAC7C,EAPC,gBAQD;AAAA,UACJ,EAXC,IAWK;AAAA,QACR,EAbC,KAaM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,UACzB,CAAC,eAAe,WAAW,aAAa,YAAY,aAAa,SAAS,MAAM,MAAM,UAAU,GAAG;AAAA,YACjG,CAAC,KAAK,KAAK,QAAQ,MAAM,IAAI,EAAE;AAAA,UACjC,EAFC,eAEgB;AAAA,QACnB,EAJC,KAIM;AAAA,MACT,EArBC,IAqBK;AAAA,IACR,EA/BC;AAiCL;AAEA,IAAO,qBAAQ;","names":[],"file":"chatHeader.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatHeader.tsx"],"sourcesContent":["import { type JSX, For, Show, children } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { ChatIconButton } from \"./chatIconButton\";\nimport type { ChatLayoutMode } from \"./types\";\nimport { getChatLayoutActions } from \"./utils\";\n\nexport interface ChatHeaderProps {\n  class?: string | undefined;\n  title?: JSX.Element;\n  subtitle?: JSX.Element;\n  actions?: JSX.Element;\n  layout?: ChatLayoutMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  onClose?: (() => void) | undefined;\n}\n\nconst layoutIcons: Record<Exclude<ChatLayoutMode, \"closed\">, string> = {\n  floating: \"picture_in_picture\",\n  fullHeight: \"fit_screen\",\n  fullscreen: \"open_in_full\",\n};\n\nconst layoutAriaLabels: Record<Exclude<ChatLayoutMode, \"closed\">, string> = {\n  floating: \"Floating window\",\n  fullHeight: \"Full height\",\n  fullscreen: \"Fullscreen\",\n};\n\nexport function ChatHeader(props: ChatHeaderProps): JSX.Element {\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const title = children(() => props.title);\n  const subtitle = children(() => props.subtitle);\n  const layoutActions = (): Exclude<ChatLayoutMode, \"closed\">[] =>\n    getChatLayoutActions(props.allowedLayouts ?? [\"floating\"], props.layout);\n  const showLayoutActions = (): boolean => Boolean(props.onLayoutChange) && layoutActions().length > 0;\n\n  return (\n    <div class={cn(\"smwb-chat-header\", props.class)} data-testid=\"chat-header\">\n      <div class=\"smwb-chat-header__main\">\n        <Show when={title()}>\n          <div class=\"smwb-chat-header__title\">{title()}</div>\n        </Show>\n        <Show when={subtitle()}>\n          <div class=\"smwb-chat-header__subtitle\">{subtitle()}</div>\n        </Show>\n      </div>\n      <div class=\"smwb-chat-header__actions\">\n        {props.actions}\n        <Show when={showLayoutActions()}>\n          <For each={layoutActions()}>\n            {(mode) => (\n              <ChatIconButton\n                aria-pressed={props.layout === mode}\n                aria-label={layoutAriaLabels[mode]}\n                data-testid={`chat-layout-${mode}`}\n                onClick={() => props.onLayoutChange?.(mode)}\n              >\n                <Icon name={layoutIcons[mode]} size={18} />\n              </ChatIconButton>\n            )}\n          </For>\n        </Show>\n        <Show when={props.onClose}>\n          <ChatIconButton aria-label=\"Close chat\" data-testid=\"chat-close\" onClick={() => props.onClose?.()}>\n            <Icon name=\"close\" size={18} />\n          </ChatIconButton>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport default ChatHeader;\n"],"mappings":"AAAA,SAAmB,KAAK,MAAM,gBAAgB;AAC9C,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAE/B,SAAS,4BAA4B;AAarC,MAAM,cAAiE;AAAA,EACrE,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,MAAM,mBAAsE;AAAA,EAC1E,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACd;AAEO,SAAS,WAAW,OAAqC;AAG9D,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,WAAW,SAAS,MAAM,MAAM,QAAQ;AAC9C,QAAM,gBAAgB,MACpB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU,GAAG,MAAM,MAAM;AACzE,QAAM,oBAAoB,MAAe,QAAQ,MAAM,cAAc,KAAK,cAAc,EAAE,SAAS;AAEnG,SACE,CAAC,IAAI,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG,YAAY,cAAc;AAAA,MACzE,CAAC,IAAI,MAAM,yBAAyB;AAAA,QAClC,CAAC,KAAK,MAAM,MAAM,GAAG;AAAA,UACnB,CAAC,IAAI,MAAM,2BAA2B,MAAM,EAAE,EAA7C,IAAmD;AAAA,QACtD,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,UACtB,CAAC,IAAI,MAAM,8BAA8B,SAAS,EAAE,EAAnD,IAAyD;AAAA,QAC5D,EAFC,KAEM;AAAA,MACT,EAPC,IAOK;AAAA,MACN,CAAC,IAAI,MAAM,4BAA4B;AAAA,SACpC,MAAM,QAAQ;AAAA,QACf,CAAC,KAAK,MAAM,kBAAkB,GAAG;AAAA,UAC/B,CAAC,IAAI,MAAM,cAAc,GAAG;AAAA,aACzB,CAAC,SACA,CAAC;AAAA,IACC,cAAc,MAAM,WAAW;AAAA,IAC/B,YAAY,iBAAiB,IAAI;AAAA,IACjC,aAAa,eAAe,IAAI;AAAA,IAChC,SAAS,MAAM,MAAM,iBAAiB,IAAI;AAAA,GAC3C;AAAA,gBACC,CAAC,KAAK,MAAM,YAAY,IAAI,GAAG,MAAM,IAAI,EAAE;AAAA,cAC7C,EAPC,gBAQD;AAAA,UACJ,EAXC,IAWK;AAAA,QACR,EAbC,KAaM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,UACzB,CAAC,eAAe,WAAW,aAAa,YAAY,aAAa,SAAS,MAAM,MAAM,UAAU,GAAG;AAAA,YACjG,CAAC,KAAK,KAAK,QAAQ,MAAM,IAAI,EAAE;AAAA,UACjC,EAFC,eAEgB;AAAA,QACnB,EAJC,KAIM;AAAA,MACT,EArBC,IAqBK;AAAA,IACR,EA/BC;AAiCL;AAEA,IAAO,qBAAQ;","names":[],"file":"chatHeader.jsx"}

package/dist/headless/source/components/dataDisplay/chat/chatMessageBubble.jsx

@@ -1,4 +1,4 @@
-import { Show } from "solid-js";
+import { Show, children } from "solid-js";
 import cn from "clsx";
 import { Typography } from "../typography";
 import { ChatAttachments } from "./chatAttachments";
@@ -6,6 +6,7 @@ import { ChatMessageAvatar } from "./chatMessageAvatar";
 import { ChatMessageStatus } from "./chatMessageStatus";
 import { formatChatTimestamp } from "./utils";
 function ChatMessageBubble(props) {
+  const text = children(() => props.text);
   const time = () => formatChatTimestamp(props.timestamp);
   const deliveryStatus = () => props.status ?? props.message.status;
   const statusToShow = () => props.showStatus && props.align === "end" ? deliveryStatus() : void 0;
@@ -20,8 +21,8 @@ function ChatMessageBubble(props) {
           </Typography>
         </Show>
         <div class={cn("smwb-chat-message__bubble", props.bubbleClass)}>
-          <Show when={props.text}>
-            <div class="smwb-chat-message__text">{props.text}</div>
+          <Show when={text()}>
+            <div class="smwb-chat-message__text">{text()}</div>
           </Show>
           <ChatAttachments attachments={props.attachments} enabled={props.showAttachments} />
         </div>

package/dist/headless/source/components/dataDisplay/chat/chatMessageBubble.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatMessageBubble.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../typography\";\nimport { ChatAttachments } from \"./chatAttachments\";\nimport { ChatMessageAvatar } from \"./chatMessageAvatar\";\nimport { ChatMessageStatus } from \"./chatMessageStatus\";\nimport type {\n  ChatAttachment,\n  ChatAuthor,\n  ChatMessage,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n  ChatMessageStatus as ChatMessageStatusValue,\n} from \"./types\";\nimport { formatChatTimestamp } from \"./utils\";\n\nexport interface ChatMessageBubbleProps {\n  class?: string | undefined;\n  align: \"start\" | \"end\";\n  message: ChatMessage;\n  author?: ChatAuthor | undefined;\n  text?: JSX.Element;\n  attachments?: ChatAttachment[] | undefined;\n  timestamp?: string | Date | undefined;\n  status?: ChatMessageStatusValue | undefined;\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  showStatus?: boolean | undefined;\n  statusIcons?: (ChatMessageStatusIcons & Record<string, string | undefined>) | undefined;\n  renderStatus?: ((ctx: ChatMessageStatusRenderContext) => JSX.Element) | undefined;\n  bubbleClass?: string | undefined;\n}\n\nexport function ChatMessageBubble(props: ChatMessageBubbleProps): JSX.Element {\n  const time = (): string => formatChatTimestamp(props.timestamp);\n  const deliveryStatus = (): ChatMessageStatusValue | undefined => props.status ?? props.message.status;\n  const statusToShow = (): ChatMessageStatusValue | undefined =>\n    props.showStatus && props.align === \"end\" ? deliveryStatus() : undefined;\n\n  return (\n    <div class={cn(\"smwb-chat-message\", `smwb-chat-message_${props.align}`, props.class)} data-testid={`chat-message-${props.align}`}>\n      <Show when={props.align === \"start\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n      <div class=\"smwb-chat-message__content\">\n        <Show when={props.author?.name}>\n          <Typography variant=\"caption\" class=\"smwb-chat-message__author\">\n            {props.author?.name}\n          </Typography>\n        </Show>\n        <div class={cn(\"smwb-chat-message__bubble\", props.bubbleClass)}>\n          <Show when={props.text}>\n            <div class=\"smwb-chat-message__text\">{props.text}</div>\n          </Show>\n          <ChatAttachments attachments={props.attachments} enabled={props.showAttachments} />\n        </div>\n        <Show when={time() || statusToShow()}>\n          <div class=\"smwb-chat-message__meta\" data-testid=\"chat-message-meta\">\n            <Show when={time()}>\n              <Typography variant=\"caption\" class=\"smwb-chat-message__time\">\n                {time()}\n              </Typography>\n            </Show>\n            <Show when={statusToShow()}>\n              {(status) => (\n                <ChatMessageStatus\n                  message={props.message}\n                  status={status()}\n                  statusIcons={props.statusIcons}\n                  renderStatus={props.renderStatus}\n                />\n              )}\n            </Show>\n          </div>\n        </Show>\n      </div>\n      <Show when={props.align === \"end\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n    </div>\n  );\n}\n\nexport default ChatMessageBubble;\n"],"mappings":"AAAA,SAAmB,YAAY;AAC/B,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AASlC,SAAS,2BAA2B;AAmB7B,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,OAAO,MAAc,oBAAoB,MAAM,SAAS;AAC9D,QAAM,iBAAiB,MAA0C,MAAM,UAAU,MAAM,QAAQ;AAC/F,QAAM,eAAe,MACnB,MAAM,cAAc,MAAM,UAAU,QAAQ,eAAe,IAAI;AAEjE,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,qBAAqB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG,aAAa,gBAAgB,MAAM,KAAK,IAAI;AAAA,MAChI,CAAC,KAAK,MAAM,MAAM,UAAU,SAAS;AAAA,QACnC,CAAC,kBAAkB,QAAQ,MAAM,QAAQ,SAAS,MAAM,aAAa,EAAE;AAAA,MACzE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,6BAA6B;AAAA,QACtC,CAAC,KAAK,MAAM,MAAM,QAAQ,MAAM;AAAA,UAC9B,CAAC,WAAW,QAAQ,UAAU,MAAM,4BAA4B;AAAA,aAC7D,MAAM,QAAQ,KAAK;AAAA,UACtB,EAFC,WAEY;AAAA,QACf,EAJC,KAIM;AAAA,QACP,CAAC,IAAI,OAAO,GAAG,6BAA6B,MAAM,WAAW,GAAG;AAAA,UAC9D,CAAC,KAAK,MAAM,MAAM,MAAM;AAAA,YACtB,CAAC,IAAI,MAAM,2BAA2B,MAAM,KAAK,EAAhD,IAAsD;AAAA,UACzD,EAFC,KAEM;AAAA,UACP,CAAC,gBAAgB,aAAa,MAAM,aAAa,SAAS,MAAM,iBAAiB,EAAE;AAAA,QACrF,EALC,IAKK;AAAA,QACN,CAAC,KAAK,MAAM,KAAK,KAAK,aAAa,GAAG;AAAA,UACpC,CAAC,IAAI,MAAM,0BAA0B,YAAY,oBAAoB;AAAA,YACnE,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,cAClB,CAAC,WAAW,QAAQ,UAAU,MAAM,0BAA0B;AAAA,iBAC3D,KAAK,EAAE;AAAA,cACV,EAFC,WAEY;AAAA,YACf,EAJC,KAIM;AAAA,YACP,CAAC,KAAK,MAAM,aAAa,GAAG;AAAA,eACzB,CAAC,WACA,CAAC;AAAA,IACC,SAAS,MAAM;AAAA,IACf,QAAQ,OAAO;AAAA,IACf,aAAa,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,EACtB,GACA;AAAA,YACJ,EATC,KASM;AAAA,UACT,EAhBC,IAgBK;AAAA,QACR,EAlBC,KAkBM;AAAA,MACT,EA/BC,IA+BK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,UAAU,OAAO;AAAA,QACjC,CAAC,kBAAkB,QAAQ,MAAM,QAAQ,SAAS,MAAM,aAAa,EAAE;AAAA,MACzE,EAFC,KAEM;AAAA,IACT,EAvCC;AAyCL;AAEA,IAAO,4BAAQ;","names":[],"file":"chatMessageBubble.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatMessageBubble.tsx"],"sourcesContent":["import { type JSX, Show, children } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../typography\";\nimport { ChatAttachments } from \"./chatAttachments\";\nimport { ChatMessageAvatar } from \"./chatMessageAvatar\";\nimport { ChatMessageStatus } from \"./chatMessageStatus\";\nimport type {\n  ChatAttachment,\n  ChatAuthor,\n  ChatMessage,\n  ChatMessageStatusIcons,\n  ChatMessageStatusRenderContext,\n  ChatMessageStatus as ChatMessageStatusValue,\n} from \"./types\";\nimport { formatChatTimestamp } from \"./utils\";\n\nexport interface ChatMessageBubbleProps {\n  class?: string | undefined;\n  align: \"start\" | \"end\";\n  message: ChatMessage;\n  author?: ChatAuthor | undefined;\n  text?: JSX.Element;\n  attachments?: ChatAttachment[] | undefined;\n  timestamp?: string | Date | undefined;\n  status?: ChatMessageStatusValue | undefined;\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  showStatus?: boolean | undefined;\n  statusIcons?: (ChatMessageStatusIcons & Record<string, string | undefined>) | undefined;\n  renderStatus?: ((ctx: ChatMessageStatusRenderContext) => JSX.Element) | undefined;\n  bubbleClass?: string | undefined;\n}\n\nexport function ChatMessageBubble(props: ChatMessageBubbleProps): JSX.Element {\n  // Read the text once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const text = children(() => props.text);\n  const time = (): string => formatChatTimestamp(props.timestamp);\n  const deliveryStatus = (): ChatMessageStatusValue | undefined => props.status ?? props.message.status;\n  const statusToShow = (): ChatMessageStatusValue | undefined =>\n    props.showStatus && props.align === \"end\" ? deliveryStatus() : undefined;\n\n  return (\n    <div class={cn(\"smwb-chat-message\", `smwb-chat-message_${props.align}`, props.class)} data-testid={`chat-message-${props.align}`}>\n      <Show when={props.align === \"start\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n      <div class=\"smwb-chat-message__content\">\n        <Show when={props.author?.name}>\n          <Typography variant=\"caption\" class=\"smwb-chat-message__author\">\n            {props.author?.name}\n          </Typography>\n        </Show>\n        <div class={cn(\"smwb-chat-message__bubble\", props.bubbleClass)}>\n          <Show when={text()}>\n            <div class=\"smwb-chat-message__text\">{text()}</div>\n          </Show>\n          <ChatAttachments attachments={props.attachments} enabled={props.showAttachments} />\n        </div>\n        <Show when={time() || statusToShow()}>\n          <div class=\"smwb-chat-message__meta\" data-testid=\"chat-message-meta\">\n            <Show when={time()}>\n              <Typography variant=\"caption\" class=\"smwb-chat-message__time\">\n                {time()}\n              </Typography>\n            </Show>\n            <Show when={statusToShow()}>\n              {(status) => (\n                <ChatMessageStatus\n                  message={props.message}\n                  status={status()}\n                  statusIcons={props.statusIcons}\n                  renderStatus={props.renderStatus}\n                />\n              )}\n            </Show>\n          </div>\n        </Show>\n      </div>\n      <Show when={props.align === \"end\"}>\n        <ChatMessageAvatar author={props.author} enabled={props.showAvatars} />\n      </Show>\n    </div>\n  );\n}\n\nexport default ChatMessageBubble;\n"],"mappings":"AAAA,SAAmB,MAAM,gBAAgB;AACzC,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AASlC,SAAS,2BAA2B;AAmB7B,SAAS,kBAAkB,OAA4C;AAG5E,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,MAAc,oBAAoB,MAAM,SAAS;AAC9D,QAAM,iBAAiB,MAA0C,MAAM,UAAU,MAAM,QAAQ;AAC/F,QAAM,eAAe,MACnB,MAAM,cAAc,MAAM,UAAU,QAAQ,eAAe,IAAI;AAEjE,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,qBAAqB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG,aAAa,gBAAgB,MAAM,KAAK,IAAI;AAAA,MAChI,CAAC,KAAK,MAAM,MAAM,UAAU,SAAS;AAAA,QACnC,CAAC,kBAAkB,QAAQ,MAAM,QAAQ,SAAS,MAAM,aAAa,EAAE;AAAA,MACzE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,6BAA6B;AAAA,QACtC,CAAC,KAAK,MAAM,MAAM,QAAQ,MAAM;AAAA,UAC9B,CAAC,WAAW,QAAQ,UAAU,MAAM,4BAA4B;AAAA,aAC7D,MAAM,QAAQ,KAAK;AAAA,UACtB,EAFC,WAEY;AAAA,QACf,EAJC,KAIM;AAAA,QACP,CAAC,IAAI,OAAO,GAAG,6BAA6B,MAAM,WAAW,GAAG;AAAA,UAC9D,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,YAClB,CAAC,IAAI,MAAM,2BAA2B,KAAK,EAAE,EAA5C,IAAkD;AAAA,UACrD,EAFC,KAEM;AAAA,UACP,CAAC,gBAAgB,aAAa,MAAM,aAAa,SAAS,MAAM,iBAAiB,EAAE;AAAA,QACrF,EALC,IAKK;AAAA,QACN,CAAC,KAAK,MAAM,KAAK,KAAK,aAAa,GAAG;AAAA,UACpC,CAAC,IAAI,MAAM,0BAA0B,YAAY,oBAAoB;AAAA,YACnE,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,cAClB,CAAC,WAAW,QAAQ,UAAU,MAAM,0BAA0B;AAAA,iBAC3D,KAAK,EAAE;AAAA,cACV,EAFC,WAEY;AAAA,YACf,EAJC,KAIM;AAAA,YACP,CAAC,KAAK,MAAM,aAAa,GAAG;AAAA,eACzB,CAAC,WACA,CAAC;AAAA,IACC,SAAS,MAAM;AAAA,IACf,QAAQ,OAAO;AAAA,IACf,aAAa,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,EACtB,GACA;AAAA,YACJ,EATC,KASM;AAAA,UACT,EAhBC,IAgBK;AAAA,QACR,EAlBC,KAkBM;AAAA,MACT,EA/BC,IA+BK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,UAAU,OAAO;AAAA,QACjC,CAAC,kBAAkB,QAAQ,MAAM,QAAQ,SAAS,MAAM,aAAa,EAAE;AAAA,MACzE,EAFC,KAEM;AAAA,IACT,EAvCC;AAyCL;AAEA,IAAO,4BAAQ;","names":[],"file":"chatMessageBubble.jsx"}

package/dist/headless/source/components/dataDisplay/chat/chatShell.jsx

@@ -1,4 +1,4 @@
-import { Show, createEffect, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, children, createEffect, mergeProps, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 function ChatShell(props) {
@@ -27,31 +27,35 @@ function ChatShell(props) {
       document.body.style.overflow = prev;
     });
   });
-  const panel = () => <div
-    {...local.fileDropzoneRootProps ?? {}}
-    class={cn(
-      "smwb-chat-shell",
-      `smwb-chat-shell_${local.layout}`,
-      !local.embedded && `smwb-chat-shell_${local.anchor}`,
-      {
-        "smwb-dark": local.themeMode === "dark",
-        "smwb-chat-shell_embedded": local.embedded,
-        "smwb-chat-shell_overlay-context": local.overlayContext,
-        "smwb-chat-dropzone_active": local.fileDropzoneActive
-      },
-      local.class
-    )}
-    data-testid="chat-shell"
-    data-layout={local.layout}
-  >
-      <Show when={local.header}>
-        <div class="smwb-chat-shell__header">{local.header}</div>
-      </Show>
-      <div class="smwb-chat-shell__body">{local.children}</div>
-      <Show when={local.footer}>
-        <div class="smwb-chat-shell__footer">{local.footer}</div>
-      </Show>
-    </div>;
+  const panel = () => {
+    const header = children(() => local.header);
+    const footer = children(() => local.footer);
+    return <div
+      {...local.fileDropzoneRootProps ?? {}}
+      class={cn(
+        "smwb-chat-shell",
+        `smwb-chat-shell_${local.layout}`,
+        !local.embedded && `smwb-chat-shell_${local.anchor}`,
+        {
+          "smwb-dark": local.themeMode === "dark",
+          "smwb-chat-shell_embedded": local.embedded,
+          "smwb-chat-shell_overlay-context": local.overlayContext,
+          "smwb-chat-dropzone_active": local.fileDropzoneActive
+        },
+        local.class
+      )}
+      data-testid="chat-shell"
+      data-layout={local.layout}
+    >
+        <Show when={header()}>
+          <div class="smwb-chat-shell__header">{header()}</div>
+        </Show>
+        <div class="smwb-chat-shell__body">{local.children}</div>
+        <Show when={footer()}>
+          <div class="smwb-chat-shell__footer">{footer()}</div>
+        </Show>
+      </div>;
+  };
   return <Show when={local.layout !== "closed"}>
       <Show when={local.layout === "fullscreen"} fallback={panel()}>
         <Portal mount={isServer ? void 0 : document.body}>{panel()}</Portal>

package/dist/headless/source/components/dataDisplay/chat/chatShell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatShell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport type { ChatAnchor, ChatLayoutMode, ChatThemeMode } from \"./types\";\n\nexport interface ChatShellProps extends ParentProps {\n  class?: string | undefined;\n  layout: ChatLayoutMode;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  header?: JSX.Element;\n  footer?: JSX.Element;\n  fileDropzoneRootProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined;\n  fileDropzoneActive?: boolean | undefined;\n}\n\nexport function ChatShell(props: ChatShellProps): JSX.Element {\n  const merged = mergeProps(\n    { anchor: \"bottom-right\" as const, themeMode: \"inherit\" as const, embedded: false, overlayContext: false, fileDropzoneActive: false },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"layout\",\n    \"anchor\",\n    \"themeMode\",\n    \"embedded\",\n    \"overlayContext\",\n    \"header\",\n    \"footer\",\n    \"children\",\n    \"fileDropzoneRootProps\",\n    \"fileDropzoneActive\",\n  ]);\n\n  // Lock body scroll while a fullscreen chat is mounted.\n  createEffect(() => {\n    if (local.layout !== \"fullscreen\") return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = prev;\n    });\n  });\n\n  const panel = (): JSX.Element => (\n    <div\n      {...(local.fileDropzoneRootProps ?? {})}\n      class={cn(\n        \"smwb-chat-shell\",\n        `smwb-chat-shell_${local.layout}`,\n        !local.embedded && `smwb-chat-shell_${local.anchor}`,\n        {\n          \"smwb-dark\": local.themeMode === \"dark\",\n          \"smwb-chat-shell_embedded\": local.embedded,\n          \"smwb-chat-shell_overlay-context\": local.overlayContext,\n          \"smwb-chat-dropzone_active\": local.fileDropzoneActive,\n        },\n        local.class\n      )}\n      data-testid=\"chat-shell\"\n      data-layout={local.layout}\n    >\n      <Show when={local.header}>\n        <div class=\"smwb-chat-shell__header\">{local.header}</div>\n      </Show>\n      <div class=\"smwb-chat-shell__body\">{local.children}</div>\n      <Show when={local.footer}>\n        <div class=\"smwb-chat-shell__footer\">{local.footer}</div>\n      </Show>\n    </div>\n  );\n\n  return (\n    <Show when={local.layout !== \"closed\"}>\n      <Show when={local.layout === \"fullscreen\"} fallback={panel()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>{panel()}</Portal>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatShell;\n"],"mappings":"AAAA,SAAqC,MAAM,cAAc,YAAY,WAAW,kBAAkB;AAClG,SAAS,QAAQ,gBAAgB;AACjC,OAAO,QAAQ;AAgBR,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS;AAAA,IACb,EAAE,QAAQ,gBAAyB,WAAW,WAAoB,UAAU,OAAO,gBAAgB,OAAO,oBAAoB,MAAM;AAAA,IACpI;AAAA,EACF;AACA,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,MAAM,WAAW,aAAc;AACnC,UAAM,OAAO,SAAS,KAAK,MAAM;AACjC,aAAS,KAAK,MAAM,WAAW;AAC/B,cAAU,MAAM;AACd,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,CAAC;AAAA,EACH,CAAC;AAED,QAAM,QAAQ,MACZ,CAAC;AAAA,QACM,MAAM,yBAAyB,CAAC;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,MAAM;AAAA,MAC/B,CAAC,MAAM,YAAY,mBAAmB,MAAM,MAAM;AAAA,MAClD;AAAA,QACE,aAAa,MAAM,cAAc;AAAA,QACjC,4BAA4B,MAAM;AAAA,QAClC,mCAAmC,MAAM;AAAA,QACzC,6BAA6B,MAAM;AAAA,MACrC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ,aAAa,MAAM;AAAA,GACpB;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,QACxB,CAAC,IAAI,MAAM,2BAA2B,MAAM,OAAO,EAAlD,IAAwD;AAAA,MAC3D,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,yBAAyB,MAAM,SAAS,EAAlD,IAAwD;AAAA,MACzD,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,QACxB,CAAC,IAAI,MAAM,2BAA2B,MAAM,OAAO,EAAlD,IAAwD;AAAA,MAC3D,EAFC,KAEM;AAAA,IACT,EAxBC;AA2BH,SACE,CAAC,KAAK,MAAM,MAAM,WAAW,UAAU;AAAA,MACrC,CAAC,KAAK,MAAM,MAAM,WAAW,cAAc,UAAU,MAAM,GAAG;AAAA,QAC5D,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,OAAgB,MAAM,EAAE,EAAvE,OAAgF;AAAA,MACnF,EAFC,KAEM;AAAA,IACT,EAJC;AAML;AAEA,IAAO,oBAAQ;","names":[],"file":"chatShell.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chatShell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport type { ChatAnchor, ChatLayoutMode, ChatThemeMode } from \"./types\";\n\nexport interface ChatShellProps extends ParentProps {\n  class?: string | undefined;\n  layout: ChatLayoutMode;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  header?: JSX.Element;\n  footer?: JSX.Element;\n  fileDropzoneRootProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined;\n  fileDropzoneActive?: boolean | undefined;\n}\n\nexport function ChatShell(props: ChatShellProps): JSX.Element {\n  const merged = mergeProps(\n    { anchor: \"bottom-right\" as const, themeMode: \"inherit\" as const, embedded: false, overlayContext: false, fileDropzoneActive: false },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"layout\",\n    \"anchor\",\n    \"themeMode\",\n    \"embedded\",\n    \"overlayContext\",\n    \"header\",\n    \"footer\",\n    \"children\",\n    \"fileDropzoneRootProps\",\n    \"fileDropzoneActive\",\n  ]);\n\n  // Lock body scroll while a fullscreen chat is mounted.\n  createEffect(() => {\n    if (local.layout !== \"fullscreen\") return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = prev;\n    });\n  });\n\n  const panel = (): JSX.Element => {\n    // Read the header and the footer once, where the panel is drawn: markup\n    // passed as a prop is created anew on every read, and during hydration a\n    // copy the server never rendered has no DOM node.\n    const header = children(() => local.header);\n    const footer = children(() => local.footer);\n    return (\n      <div\n        {...(local.fileDropzoneRootProps ?? {})}\n        class={cn(\n          \"smwb-chat-shell\",\n          `smwb-chat-shell_${local.layout}`,\n          !local.embedded && `smwb-chat-shell_${local.anchor}`,\n          {\n            \"smwb-dark\": local.themeMode === \"dark\",\n            \"smwb-chat-shell_embedded\": local.embedded,\n            \"smwb-chat-shell_overlay-context\": local.overlayContext,\n            \"smwb-chat-dropzone_active\": local.fileDropzoneActive,\n          },\n          local.class\n        )}\n        data-testid=\"chat-shell\"\n        data-layout={local.layout}\n      >\n        <Show when={header()}>\n          <div class=\"smwb-chat-shell__header\">{header()}</div>\n        </Show>\n        <div class=\"smwb-chat-shell__body\">{local.children}</div>\n        <Show when={footer()}>\n          <div class=\"smwb-chat-shell__footer\">{footer()}</div>\n        </Show>\n      </div>\n    );\n  };\n\n  return (\n    <Show when={local.layout !== \"closed\"}>\n      <Show when={local.layout === \"fullscreen\"} fallback={panel()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>{panel()}</Portal>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatShell;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,cAAc,YAAY,WAAW,kBAAkB;AAC5G,SAAS,QAAQ,gBAAgB;AACjC,OAAO,QAAQ;AAgBR,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS;AAAA,IACb,EAAE,QAAQ,gBAAyB,WAAW,WAAoB,UAAU,OAAO,gBAAgB,OAAO,oBAAoB,MAAM;AAAA,IACpI;AAAA,EACF;AACA,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,MAAM,WAAW,aAAc;AACnC,UAAM,OAAO,SAAS,KAAK,MAAM;AACjC,aAAS,KAAK,MAAM,WAAW;AAC/B,cAAU,MAAM;AACd,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,CAAC;AAAA,EACH,CAAC;AAED,QAAM,QAAQ,MAAmB;AAI/B,UAAM,SAAS,SAAS,MAAM,MAAM,MAAM;AAC1C,UAAM,SAAS,SAAS,MAAM,MAAM,MAAM;AAC1C,WACE,CAAC;AAAA,UACM,MAAM,yBAAyB,CAAC;AAAA,MACrC,OAAO;AAAA,QACL;AAAA,QACA,mBAAmB,MAAM,MAAM;AAAA,QAC/B,CAAC,MAAM,YAAY,mBAAmB,MAAM,MAAM;AAAA,QAClD;AAAA,UACE,aAAa,MAAM,cAAc;AAAA,UACjC,4BAA4B,MAAM;AAAA,UAClC,mCAAmC,MAAM;AAAA,UACzC,6BAA6B,MAAM;AAAA,QACrC;AAAA,QACA,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,MACZ,aAAa,MAAM;AAAA,KACpB;AAAA,QACC,CAAC,KAAK,MAAM,OAAO,GAAG;AAAA,UACpB,CAAC,IAAI,MAAM,2BAA2B,OAAO,EAAE,EAA9C,IAAoD;AAAA,QACvD,EAFC,KAEM;AAAA,QACP,CAAC,IAAI,MAAM,yBAAyB,MAAM,SAAS,EAAlD,IAAwD;AAAA,QACzD,CAAC,KAAK,MAAM,OAAO,GAAG;AAAA,UACpB,CAAC,IAAI,MAAM,2BAA2B,OAAO,EAAE,EAA9C,IAAoD;AAAA,QACvD,EAFC,KAEM;AAAA,MACT,EAxBC;AAAA,EA0BL;AAEA,SACE,CAAC,KAAK,MAAM,MAAM,WAAW,UAAU;AAAA,MACrC,CAAC,KAAK,MAAM,MAAM,WAAW,cAAc,UAAU,MAAM,GAAG;AAAA,QAC5D,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,OAAgB,MAAM,EAAE,EAAvE,OAAgF;AAAA,MACnF,EAFC,KAEM;AAAA,IACT,EAJC;AAML;AAEA,IAAO,oBAAQ;","names":[],"file":"chatShell.jsx"}

package/dist/headless/source/components/dataDisplay/chip/chip.jsx

@@ -1,9 +1,15 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 import { callHandler } from "../../../primitives/callHandler";
+function DeleteIcon(props) {
+  const icon = children(() => props.icon);
+  return <Show when={icon()} fallback={<Icon name="cancel" size={18} fill={1} />}>
+      {icon()}
+    </Show>;
+}
 function Chip(props) {
   const merged = mergeProps(
     {
@@ -35,6 +41,7 @@ function Chip(props) {
     "deleteAriaLabel",
     "ref"
   ]);
+  const icon = children(() => local.icon);
   let rippleActions;
   const onPointerDown = (event) => {
     if (!local.disabled) {
@@ -55,8 +62,8 @@ function Chip(props) {
   );
   const clickable = () => !!local.onClick && !local.disabled;
   const inner = () => <>
-      <Show when={local.icon}>
-        <span class="smwb-chip__icon">{local.icon}</span>
+      <Show when={icon()}>
+        <span class="smwb-chip__icon">{icon()}</span>
       </Show>
       <span class="smwb-chip__label">{local.label}</span>
       <Show when={local.onDelete}>
@@ -68,9 +75,7 @@ function Chip(props) {
     onClick={local.onDelete}
     onMouseDown={onDeleteMouseDown}
   >
-          <Show when={local.deleteIcon} fallback={<Icon name="cancel" size={18} fill={1} />}>
-            {local.deleteIcon}
-          </Show>
+          <DeleteIcon icon={local.deleteIcon} />
         </button>
       </Show>
       <Ripple actionRef={(actions) => rippleActions = actions} />

package/dist/headless/source/components/dataDisplay/chip/chip.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={local.icon}>\n        <span class=\"smwb-chip__icon\">{local.icon}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <Show when={local.deleteIcon} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n            {local.deleteIcon}\n          </Show>\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"mappings":"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","names":[],"file":"chip.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\n/**\n * The delete control's icon: a custom one or the default. It is read here, only\n * when the control renders — markup created and not rendered has no server node\n * to hydrate against either.\n */\nfunction DeleteIcon(props: { icon: JSX.Element }): JSX.Element {\n  const icon = children(() => props.icon);\n  return (\n    <Show when={icon()} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n      {icon()}\n    </Show>\n  );\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\n  ]);\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for the <Show> test has no server DOM\n  // node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={icon()}>\n        <span class=\"smwb-chip__icon\">{icon()}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <DeleteIcon icon={local.deleteIcon} />\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"mappings":"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","names":[],"file":"chip.jsx"}

package/dist/headless/source/components/dataDisplay/descriptionList/descriptionList.jsx

@@ -0,0 +1,42 @@
+import { For, createMemo, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function DescriptionItem(props) {
+  const [local, rest] = splitProps(props, ["class", "term", "children", "ref"]);
+  return <div {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-description-list__item", local.class)}>
+      <dt class="smwb-description-list__term">{local.term}</dt>
+      <dd class="smwb-description-list__details">{local.children}</dd>
+    </div>;
+}
+function DescriptionList(props) {
+  const merged = mergeProps({ layout: "auto" }, props);
+  const [local, rest] = splitProps(merged, ["class", "style", "items", "layout", "termWidth", "dense", "children", "ref"]);
+  const items = createMemo(() => local.items ?? []);
+  const style = () => {
+    if (local.termWidth === void 0) return local.style;
+    const width = typeof local.termWidth === "number" ? `${local.termWidth}px` : local.termWidth;
+    if (typeof local.style === "string") return `${local.style};--smwb-description-term:${width}`;
+    return { ...local.style, "--smwb-description-term": width };
+  };
+  return <dl
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn(
+      "smwb-description-list",
+      `smwb-description-list_${local.layout}`,
+      { "smwb-description-list_dense": local.dense },
+      local.class
+    )}
+    style={style()}
+  >
+      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>
+      {local.children}
+    </dl>;
+}
+var descriptionList_default = DescriptionList;
+export {
+  DescriptionItem,
+  DescriptionList,
+  descriptionList_default as default
+};
+//# sourceMappingURL=descriptionList.jsx.map

package/dist/headless/source/components/dataDisplay/descriptionList/descriptionList.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DescriptionListEntry {\n  term: JSX.Element;\n  description: JSX.Element;\n}\n\n/**\n * `auto`: the term beside its description while the list's container is at\n * least 420px wide, above it when narrower (a container query). `row` and\n * `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nexport interface DescriptionItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The field's name. */\n  term: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** One pair: the term and, as children, its description. */\nexport function DescriptionItem(props: ParentProps<DescriptionItemProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"term\", \"children\", \"ref\"]);\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-description-list__item\", local.class)}>\n      <dt class=\"smwb-description-list__term\">{local.term}</dt>\n      <dd class=\"smwb-description-list__details\">{local.children}</dd>\n    </div>\n  );\n}\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport function DescriptionList(props: ParentProps<DescriptionListProps>): JSX.Element {\n  const merged = mergeProps({ layout: \"auto\" as DescriptionListLayout }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"items\", \"layout\", \"termWidth\", \"dense\", \"children\", \"ref\"]);\n\n  // Read the items once: an inline array is re-evaluated on every read, creating\n  // the markup in it again, and during hydration the extra copies have no server\n  // DOM nodes to adopt.\n  const items = createMemo(() => local.items ?? []);\n\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.termWidth === undefined) return local.style;\n    const width = typeof local.termWidth === \"number\" ? `${local.termWidth}px` : local.termWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-description-term:${width}`;\n    return { ...local.style, \"--smwb-description-term\": width };\n  };\n\n  return (\n    <dl\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-description-list\",\n        `smwb-description-list_${local.layout}`,\n        { \"smwb-description-list_dense\": local.dense },\n        local.class\n      )}\n      style={style()}\n    >\n      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>\n      {local.children}\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"mappings":"AAAA,SAAqC,KAAK,YAAY,YAAY,kBAAkB;AACpF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAgC7B,SAAS,gBAAgB,OAAuD;AACrF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,QAAQ,YAAY,KAAK,CAAC;AAC5E,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,+BAA+B,MAAM,KAAK,GAAG;AAAA,MAC/F,CAAC,GAAG,MAAM,+BAA+B,MAAM,KAAK,EAAnD,GAAwD;AAAA,MACzD,CAAC,GAAG,MAAM,kCAAkC,MAAM,SAAS,EAA1D,GAA+D;AAAA,IAClE,EAHC;AAKL;AAGO,SAAS,gBAAgB,OAAuD;AACrF,QAAM,SAAS,WAAW,EAAE,QAAQ,OAAgC,GAAG,KAAK;AAC5E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,SAAS,SAAS,UAAU,aAAa,SAAS,YAAY,KAAK,CAAC;AAKvH,QAAM,QAAQ,WAAW,MAAM,MAAM,SAAS,CAAC,CAAC;AAEhD,QAAM,QAAQ,MAA8C;AAC1D,QAAI,MAAM,cAAc,OAAW,QAAO,MAAM;AAChD,UAAM,QAAQ,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM;AACnF,QAAI,OAAO,MAAM,UAAU,SAAU,QAAO,GAAG,MAAM,KAAK,4BAA4B,KAAK;AAC3F,WAAO,EAAE,GAAG,MAAM,OAAO,2BAA2B,MAAM;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,yBAAyB,MAAM,MAAM;AAAA,MACrC,EAAE,+BAA+B,MAAM,MAAM;AAAA,MAC7C,MAAM;AAAA,IACR;AAAA,IACA,OAAO,MAAM;AAAA,GACd;AAAA,MACC,CAAC,IAAI,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,gBAAgB,MAAM,KAAK,OAAO,KAAK,YAAY,EAAnD,iBAAsE,EAArG,IAA2G;AAAA,OAC3G,MAAM,SAAS;AAAA,IAClB,EAbC;AAeL;AAEA,IAAO,0BAAQ;","names":[],"file":"descriptionList.jsx"}

package/dist/headless/source/components/dataDisplay/descriptionList/index.js

@@ -0,0 +1,7 @@
+import { DescriptionList, DescriptionItem, default as default2 } from "./descriptionList";
+export {
+  DescriptionItem,
+  DescriptionList,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/dataDisplay/descriptionList/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/descriptionList/index.ts"],
+  "sourcesContent": ["export { DescriptionList, DescriptionItem, default } from \"./descriptionList\";\nexport type {\n  DescriptionListProps,\n  DescriptionItemProps,\n  DescriptionListEntry,\n  DescriptionListLayout,\n} from \"./descriptionList\";\n"],
+  "mappings": "AAAA,SAAS,iBAAiB,iBAAiB,WAAAA,gBAAe;",
+  "names": ["default"]
+}