@wistia/ui 0.20.9 → 0.20.10-beta.1bf75ea0.e893702

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { Color } from 'culori/fn';
 import * as Ariakit from '@ariakit/react';
 import * as styled_components from 'styled-components';
 import { Schema } from 'yup';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { Options } from 'react-markdown';
 import * as _radix_ui_react_dropdown_menu from '@radix-ui/react-dropdown-menu';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { PopoverContentProps } from '@radix-ui/react-popover';
@@ -2748,16 +2748,23 @@ declare const Mark: {
     displayName: string;
 };
 
-type MarkdownTextSize = 'body-2' | 'body-3';
+type MarkdownTextSize = 'body2' | 'body3';
 
-type MarkdownProps = ComponentProps<typeof ReactMarkdown> & {
+type MarkdownProps = Omit<ComponentProps<typeof ReactMarkdown>, 'rehypePlugins'> & {
     /**
      * A string of markdown to render.
      */
     children: string;
+    /**
+     * If true, allows HTML in markdown to be rendered. By default, HTML is escaped and rendered as plain text.
+     */
+    renderHtml?: boolean;
+    /**
+     * A list of rehype plugins to apply to the markdown.
+     */
+    rehypePlugins?: Options['rehypePlugins'];
     /**
      * Adjusts the type scale based on the font size of the `<p>` element.
-     * Supports responsive values.
      */
     textSize?: MarkdownTextSize | ResponsiveObject<MarkdownTextSize>;
 };
@@ -2765,7 +2772,7 @@ type MarkdownProps = ComponentProps<typeof ReactMarkdown> & {
  * This is a simple wrapper around `react-markdown` that applies some basic styles.
  */
 declare const Markdown: {
-    ({ children, textSize, ...otherProps }: MarkdownProps): JSX.Element;
+    ({ children, textSize, renderHtml, rehypePlugins: userRehypePlugins, ...otherProps }: MarkdownProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.9
+ * @license @wistia/ui v0.20.10-beta.1bf75ea0.e893702
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -16112,11 +16112,16 @@ Mark.displayName = "Mark_UI";
 // src/components/Markdown/Markdown.tsx
 import { styled as styled76 } from "styled-components";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 
 // src/css/baseMarkdownCss.tsx
 import { css as css39 } from "styled-components";
-var baseMarkdownCss = (textSize = "body-2") => css39`
-  --wui-markdown-base-unit: var(--wui-typography-${textSize}-size);
+var textSizeToTokenMap = {
+  body2: "--wui-typography-body-2-size",
+  body3: "--wui-typography-body-3-size"
+};
+var baseMarkdownCss = (textSize = "body2") => css39`
+  --wui-markdown-base-unit: var(${textSizeToTokenMap[textSize]});
 
   font-size: var(--wui-markdown-base-unit);
 
@@ -16240,18 +16245,27 @@ var StyledMarkdownWrapper = styled76.div`
 `;
 var Markdown = ({
   children,
-  textSize = "body-2",
+  textSize = "body2",
+  renderHtml = false,
+  rehypePlugins: userRehypePlugins,
   ...otherProps
 }) => {
   const responsiveTextSize = useResponsiveProp(textSize);
-  return /* @__PURE__ */ jsx313(
-    StyledMarkdownWrapper,
+  const rehypePlugins = [];
+  if (renderHtml) {
+    rehypePlugins.push(rehypeRaw);
+  }
+  if (userRehypePlugins) {
+    rehypePlugins.push(...userRehypePlugins);
+  }
+  return /* @__PURE__ */ jsx313(StyledMarkdownWrapper, { $textSize: responsiveTextSize, children: /* @__PURE__ */ jsx313(
+    ReactMarkdown,
     {
-      $textSize: responsiveTextSize,
       ...otherProps,
-      children: /* @__PURE__ */ jsx313(ReactMarkdown, { children })
+      rehypePlugins,
+      children
     }
-  );
+  ) });
 };
 Markdown.displayName = "Markdown_UI";