diff --git a/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx b/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx
new file mode 100644
index 000000000000..80039504ba9b
--- /dev/null
+++ b/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx
@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Preview
+
+
+
+
+
+ This box should have BOTH a pink and blue border
+
+
diff --git a/lib/components/src/html.tsx b/lib/components/src/html.tsx
index 9b45fa7c582f..0b1e5f9de012 100644
--- a/lib/components/src/html.tsx
+++ b/lib/components/src/html.tsx
@@ -1,19 +1,5 @@
-import * as React from 'react';
-import * as rawComponents from './typography/DocumentFormatting';
+import { components as rawComponents } from './typography/DocumentFormatting';
export * from './typography/DocumentFormatting';
-export const components = Object.entries(rawComponents).reduce(
- (acc, [k, V]) => ({
- ...acc,
- [k.toLowerCase()]: ({ className, ...rest }: { className: string }) => {
- return (
-
- );
- },
- }),
- {}
-);
+export { rawComponents as components };
diff --git a/lib/components/src/typography/DocumentFormatting.tsx b/lib/components/src/typography/DocumentFormatting.tsx
index 6c136299e283..777c4b38c187 100644
--- a/lib/components/src/typography/DocumentFormatting.tsx
+++ b/lib/components/src/typography/DocumentFormatting.tsx
@@ -341,3 +341,43 @@ export const TT = styled.title<{}>(codeCommon);
*/
export const ResetWrapper = styled.div<{}>(withReset);
+
+const nameSpaceClassNames = ({ ...props }, key: string) => {
+ const classes = [props.class, props.className];
+ // eslint-disable-next-line no-param-reassign
+ delete props.class;
+
+ // eslint-disable-next-line no-param-reassign
+ props.className = ['sbdocs', `sbdocs-${key}`, ...classes].filter(Boolean).join(' ');
+
+ return props;
+};
+
+export const components = {
+ h1: (props => ) as typeof H1,
+ h2: (props => ) as typeof H2,
+ h3: (props => ) as typeof H3,
+ h4: (props => ) as typeof H4,
+ h5: (props => ) as typeof H5,
+ h6: (props => ) as typeof H6,
+ pre: (props => ) as typeof Pre,
+ a: (props => ) as typeof A,
+ hr: (props =>
) as typeof HR,
+ dl: (props =>
) as typeof DL,
+ blockquote: (props => (
+
+ )) as typeof Blockquote,
+ table: (props => ) as typeof Table,
+ img: (props => ) as typeof Img,
+ div: (props => ) as typeof Div,
+ span: (props => ) as typeof Span,
+ li: (props => ) as typeof LI,
+ ul: (props => ) as typeof UL,
+ ol: (props =>
) as typeof OL,
+ p: (props => ) as typeof P,
+ code: (props =>
) as typeof Code,
+ tt: (props => ) as typeof TT,
+ resetwrapper: (props => (
+
+ )) as typeof ResetWrapper,
+};