@simplybusiness/mobius 10.0.0 → 10.1.0

package/dist/cjs/components/TextOrHTML/TextOrHTML.js

@@ -62,15 +62,20 @@ Text.displayName = "Text";
 
 // src/components/TextOrHTML/TextOrHTML.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var isHTML = (text) => /^\s*<[a-z]/i.test(text);
 var TextOrHTML = ({
   ref,
   text,
   htmlClassName,
-  htmlElementType = "span",
+  htmlElementType,
   textWrapper = false,
+  autoDetect = false,
   ...textProps
 }) => {
-  const DangerousComponent = htmlElementType;
+  const textIsHTML = autoDetect && isHTML(text);
+  const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
+  const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
+  const DangerousComponent = resolvedElementType;
   const dangerousHTML = (0, import_react.useMemo)(() => ({ __html: text }), [text]);
   const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     DangerousComponent,
@@ -79,7 +84,7 @@ var TextOrHTML = ({
       dangerouslySetInnerHTML: dangerousHTML
     }
   );
-  if (textWrapper) {
+  if (shouldWrapInText) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { ref, ...textProps, children: dangerousElement });
   }
   return dangerousElement;

package/dist/cjs/components/TextOrHTML/TextOrHTML.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx"],
-  "sourcesContent": ["import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType = \"span\",\n  textWrapper = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const DangerousComponent = htmlElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (textWrapper) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\"\n  | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n) => {\n  if (variant) {\n    return [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant) ? variant : \"p\";\n  }\n  return elementType || \"p\";\n};\n\nconst Text = ({ ref, elementType: Component = \"p\", ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const elementType = getElementType(variant, Component);\n  const variantType = variant || elementType;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Component ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;;;ACAxB,oBAAuB;AAEvB,kBAAO;AAmDE;AAzBT,IAAM,iBAAiB,CACrB,SACA,gBACG;AACH,MAAI,SAAS;AACX,WAAO,CAAC,MAAM,MAAM,MAAM,IAAI,EAAE,SAAS,OAAO,IAAI,UAAU;AAAA,EAChE;AACA,SAAO,eAAe;AACxB;AAEA,IAAM,OAAO,CAAC,EAAE,KAAK,aAAa,YAAY,KAAK,GAAG,MAAM,MAAiB;AAE3E,QAAM,EAAE,SAAS,WAAW,SAAS,GAAG,WAAW,IAAI;AAGvD,QAAM,cAAc,eAAe,SAAS,SAAS;AACrD,QAAM,cAAc,WAAW;AAC/B,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,4CAAC,aAAU,KAAW,GAAG,YAAY,WAAW,SAAS;AAClE;AAEA,KAAK,cAAc;;;ADvBf,IAAAC,sBAAA;AAfJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,GAAG;AACL,MAAuB;AACrB,QAAM,qBAAqB;AAI3B,QAAM,oBAAgB,sBAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAE9D,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,aAAa;AACf,WACE,6CAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
+  "sourcesContent": ["import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst isHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsHTML = autoDetect && isHTML(text);\n  const shouldWrapInText = autoDetect\n    ? textWrapper || !textIsHTML\n    : textWrapper;\n  const resolvedElementType = htmlElementType ?? (textIsHTML ? \"div\" : \"span\");\n  const DangerousComponent = resolvedElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (shouldWrapInText) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\"\n  | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n) => {\n  if (variant) {\n    return [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant) ? variant : \"p\";\n  }\n  return elementType || \"p\";\n};\n\nconst Text = ({ ref, elementType: Component = \"p\", ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const elementType = getElementType(variant, Component);\n  const variantType = variant || elementType;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Component ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;;;ACAxB,oBAAuB;AAEvB,kBAAO;AAmDE;AAzBT,IAAM,iBAAiB,CACrB,SACA,gBACG;AACH,MAAI,SAAS;AACX,WAAO,CAAC,MAAM,MAAM,MAAM,IAAI,EAAE,SAAS,OAAO,IAAI,UAAU;AAAA,EAChE;AACA,SAAO,eAAe;AACxB;AAEA,IAAM,OAAO,CAAC,EAAE,KAAK,aAAa,YAAY,KAAK,GAAG,MAAM,MAAiB;AAE3E,QAAM,EAAE,SAAS,WAAW,SAAS,GAAG,WAAW,IAAI;AAGvD,QAAM,cAAc,eAAe,SAAS,SAAS;AACrD,QAAM,cAAc,WAAW;AAC/B,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,4CAAC,aAAU,KAAW,GAAG,YAAY,WAAW,SAAS;AAClE;AAEA,KAAK,cAAc;;;ADbf,IAAAC,sBAAA;AArCJ,IAAM,SAAS,CAAC,SAAiB,cAAc,KAAK,IAAI;AAgBxD,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,MAAuB;AACrB,QAAM,aAAa,cAAc,OAAO,IAAI;AAC5C,QAAM,mBAAmB,aACrB,eAAe,CAAC,aAChB;AACJ,QAAM,sBAAsB,oBAAoB,aAAa,QAAQ;AACrE,QAAM,qBAAqB;AAI3B,QAAM,oBAAgB,sBAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAE9D,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,kBAAkB;AACpB,WACE,6CAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
   "names": ["classNames", "import_jsx_runtime"]
 }

package/dist/cjs/components/TextOrHTML/index.js

@@ -64,15 +64,20 @@ Text.displayName = "Text";
 
 // src/components/TextOrHTML/TextOrHTML.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var isHTML = (text) => /^\s*<[a-z]/i.test(text);
 var TextOrHTML = ({
   ref,
   text,
   htmlClassName,
-  htmlElementType = "span",
+  htmlElementType,
   textWrapper = false,
+  autoDetect = false,
   ...textProps
 }) => {
-  const DangerousComponent = htmlElementType;
+  const textIsHTML = autoDetect && isHTML(text);
+  const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
+  const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
+  const DangerousComponent = resolvedElementType;
   const dangerousHTML = (0, import_react.useMemo)(() => ({ __html: text }), [text]);
   const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     DangerousComponent,
@@ -81,7 +86,7 @@ var TextOrHTML = ({
       dangerouslySetInnerHTML: dangerousHTML
     }
   );
-  if (textWrapper) {
+  if (shouldWrapInText) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { ref, ...textProps, children: dangerousElement });
   }
   return dangerousElement;

package/dist/cjs/components/TextOrHTML/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/TextOrHTML/index.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx"],
-  "sourcesContent": ["export * from \"./TextOrHTML\";\n", "import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType = \"span\",\n  textWrapper = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const DangerousComponent = htmlElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (textWrapper) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\"\n  | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n) => {\n  if (variant) {\n    return [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant) ? variant : \"p\";\n  }\n  return elementType || \"p\";\n};\n\nconst Text = ({ ref, elementType: Component = \"p\", ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const elementType = getElementType(variant, Component);\n  const variantType = variant || elementType;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Component ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAAwB;;;ACAxB,oBAAuB;AAEvB,kBAAO;AAmDE;AAzBT,IAAM,iBAAiB,CACrB,SACA,gBACG;AACH,MAAI,SAAS;AACX,WAAO,CAAC,MAAM,MAAM,MAAM,IAAI,EAAE,SAAS,OAAO,IAAI,UAAU;AAAA,EAChE;AACA,SAAO,eAAe;AACxB;AAEA,IAAM,OAAO,CAAC,EAAE,KAAK,aAAa,YAAY,KAAK,GAAG,MAAM,MAAiB;AAE3E,QAAM,EAAE,SAAS,WAAW,SAAS,GAAG,WAAW,IAAI;AAGvD,QAAM,cAAc,eAAe,SAAS,SAAS;AACrD,QAAM,cAAc,WAAW;AAC/B,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,4CAAC,aAAU,KAAW,GAAG,YAAY,WAAW,SAAS;AAClE;AAEA,KAAK,cAAc;;;ADvBf,IAAAC,sBAAA;AAfJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,GAAG;AACL,MAAuB;AACrB,QAAM,qBAAqB;AAI3B,QAAM,oBAAgB,sBAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAE9D,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,aAAa;AACf,WACE,6CAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
+  "sourcesContent": ["export * from \"./TextOrHTML\";\n", "import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst isHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsHTML = autoDetect && isHTML(text);\n  const shouldWrapInText = autoDetect\n    ? textWrapper || !textIsHTML\n    : textWrapper;\n  const resolvedElementType = htmlElementType ?? (textIsHTML ? \"div\" : \"span\");\n  const DangerousComponent = resolvedElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (shouldWrapInText) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\"\n  | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n) => {\n  if (variant) {\n    return [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant) ? variant : \"p\";\n  }\n  return elementType || \"p\";\n};\n\nconst Text = ({ ref, elementType: Component = \"p\", ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const elementType = getElementType(variant, Component);\n  const variantType = variant || elementType;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Component ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAAwB;;;ACAxB,oBAAuB;AAEvB,kBAAO;AAmDE;AAzBT,IAAM,iBAAiB,CACrB,SACA,gBACG;AACH,MAAI,SAAS;AACX,WAAO,CAAC,MAAM,MAAM,MAAM,IAAI,EAAE,SAAS,OAAO,IAAI,UAAU;AAAA,EAChE;AACA,SAAO,eAAe;AACxB;AAEA,IAAM,OAAO,CAAC,EAAE,KAAK,aAAa,YAAY,KAAK,GAAG,MAAM,MAAiB;AAE3E,QAAM,EAAE,SAAS,WAAW,SAAS,GAAG,WAAW,IAAI;AAGvD,QAAM,cAAc,eAAe,SAAS,SAAS;AACrD,QAAM,cAAc,WAAW;AAC/B,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,4CAAC,aAAU,KAAW,GAAG,YAAY,WAAW,SAAS;AAClE;AAEA,KAAK,cAAc;;;ADbf,IAAAC,sBAAA;AArCJ,IAAM,SAAS,CAAC,SAAiB,cAAc,KAAK,IAAI;AAgBxD,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,MAAuB;AACrB,QAAM,aAAa,cAAc,OAAO,IAAI;AAC5C,QAAM,mBAAmB,aACrB,eAAe,CAAC,aAChB;AACJ,QAAM,sBAAsB,oBAAoB,aAAa,QAAQ;AACrE,QAAM,qBAAqB;AAI3B,QAAM,oBAAgB,sBAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAE9D,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,kBAAkB;AACpB,WACE,6CAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
   "names": ["classNames", "import_jsx_runtime"]
 }

package/dist/cjs/components/index.js

@@ -5515,22 +5515,27 @@ var init_TextArea2 = __esm({
 });
 
 // src/components/TextOrHTML/TextOrHTML.tsx
-var import_react43, import_jsx_runtime69, TextOrHTML;
+var import_react43, import_jsx_runtime69, isHTML, TextOrHTML;
 var init_TextOrHTML = __esm({
   "src/components/TextOrHTML/TextOrHTML.tsx"() {
     "use strict";
     import_react43 = require("react");
     init_Text();
     import_jsx_runtime69 = require("react/jsx-runtime");
+    isHTML = (text) => /^\s*<[a-z]/i.test(text);
     TextOrHTML = ({
       ref,
       text,
       htmlClassName,
-      htmlElementType = "span",
+      htmlElementType,
       textWrapper = false,
+      autoDetect = false,
       ...textProps
     }) => {
-      const DangerousComponent = htmlElementType;
+      const textIsHTML = autoDetect && isHTML(text);
+      const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
+      const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
+      const DangerousComponent = resolvedElementType;
       const dangerousHTML = (0, import_react43.useMemo)(() => ({ __html: text }), [text]);
       const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         DangerousComponent,
@@ -5539,7 +5544,7 @@ var init_TextOrHTML = __esm({
           dangerouslySetInnerHTML: dangerousHTML
         }
       );
-      if (textWrapper) {
+      if (shouldWrapInText) {
         return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Text, { ref, ...textProps, children: dangerousElement });
       }
       return dangerousElement;