@popsure/dirty-swan 0.51.3 → 0.52.0

package/dist/esm/components/markdown/index.stories.js

@@ -1,61 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Markdown } from './index.js';
-import '../../tslib.es6-5bc94358.js';
-import '../../style-inject.es-1f59c1d0.js';
-import 'devlop';
-import 'vfile/do-not-use-conditional-minpath';
-import 'vfile/do-not-use-conditional-minproc';
-import 'vfile/do-not-use-conditional-minurl';
-import 'unist-util-visit-parents/do-not-use-color';
-import '../../_commonjsHelpers-e7f67fd8.js';
-
-var story = {
-    title: 'JSX/Markdown',
-    component: Markdown,
-    argTypes: {
-        children: {
-            description: 'MD content to be rendered in the component.',
-        },
-        className: {
-            description: 'This property allows to add custom styles to the component.',
-        },
-        renderRawMarkdownChild: {
-            description: 'This property allows to render the raw markdown child as a component.',
-        },
-        openLinksInNewTab: {
-            description: 'Wether link components rendered inside Markdown should open in a new tab (`target="_blank"`).',
-        },
-        styling: {
-            desription: 'This property allows to customize the styling of the markdown content.',
-        }
-    },
-    args: {
-        children: '## Title \n This is **our content**.',
-        className: '',
-        renderRawMarkdownChild: false,
-        openLinksInNewTab: false,
-        styling: {},
-    },
-    parameters: {
-        componentSubtitle: (jsxs(Fragment, { children: ["Display markdown text based on ", jsx("a", { href: "https://github.com/remarkjs/react-markdown", target: '_blank', rel: "noreferrer", children: "react-markdown" }), " with custom styling."] })),
-    },
-};
-var MarkdownStory = function (_a) {
-    var children = _a.children, className = _a.className;
-    return (jsx(Markdown, { className: className, children: children }));
-};
-MarkdownStory.storyName = "Markdown";
-var AvailableMDComponents = function (_a) {
-    var className = _a.className;
-    return (jsx(Markdown, { className: className, children: "\n## Headers\nThe header options range from h1 to h4.\n\n```\n# H1\n## H2\n### H3\n#### H4\n```\n\n# H1 Lorem ipsum non sunt qui sunt\n\n## H2 Lorem ipsum non sunt qui sunt\n\n### H3 Lorem ipsum non sunt qui sunt\n\n#### H4 Lorem ipsum non sunt qui sunt\n\n## Emphasis\n\n```\nEmphasis or italics, use *asterisk* or _underscore_.\nStrong emphasis or bold, use **asterisks** or __underscores__.\nCombined emphasis, use **_asterisks and underscores_**.\n```\n\nEmphasis or italics, use _asterisk_ or _underscore_.\n\nStrong emphasis or bold, use **asterisks** or **underscores**.\n\nCombined emphasis, use **_asterisks and underscores_**.\n\n## Lists\n\n```\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses\n```\n\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n\n- Unordered list can use asterisks\n- Or minuses\n- Or pluses\n\n## Links\n\nFor links markdown syntax should be used.\n\n```\n[This is an inline link](https://feather-insurance.com)\n```\n\n[This is an inline link](https://feather-insurance.com)\n\n## Inline code block\n\nInline code block can be set by using backtick or ```\n\n```\nIt is usefull to define a `variable` inside a text\n```\n\nIt is usefull to define a `variable` inside a text\n\n## Quote\n\nYou can use quote markdown by using `>` at the beginning of your text\n\n```\n> The busy man is least busy with living. - Seneca\n```\n\n> The busy man is least busy with living. - Seneca\n\n## Images\n\nImages markdown syntax is the following\n```\n![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)\n```\n\n![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)\n\n## Tables\n\nDefining a table in markdown is a bit tricky. You can use websites such as [tablesgenerator.com](https://www.tablesgenerator.com/markdown_tables) for help\n\n```\n| Department | Yearly spend | Category |\n|------------|--------------|----------|\n| Marketing  | 150k\u20AC        | `c`    |\n| Sales      | 200k\u20AC        | `e`    |\n| Product    | 84k\u20AC         | `f`    |\n```\n\n| Department | Yearly spend | Category |\n|------------|--------------|----------|\n| Marketing  | 150k\u20AC        | `c`    |\n| Sales      | 200k\u20AC        | `e`    |\n| Product    | 84k\u20AC         | `f`    |\n\n" }));
-};
-var AddingCustomComponents = function (_a) {
-    var className = _a.className, openLinksInNewTab = _a.openLinksInNewTab, renderRawMarkdownChild = _a.renderRawMarkdownChild;
-    return (jsx(Markdown, { className: className, openLinksInNewTab: openLinksInNewTab, styling: {
-            h6: 'tc-red-500'
-        }, renderRawMarkdownChild: renderRawMarkdownChild, children: "###### This is a custom H6 that will always be red" }));
-};
-
-export default story;
-export { AddingCustomComponents, AvailableMDComponents, MarkdownStory };
-//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/markdown/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/markdown/index.stories.tsx"],"sourcesContent":["import { render } from 'sass';\nimport { Markdown, MarkdownProps } from '.';\n\nconst story = {\n  title: 'JSX/Markdown',\n  component: Markdown,\n  argTypes: {\n    \n    children: {\n      description: 'MD content to be rendered in the component.',\n    },\n    className: {\n      description: 'This property allows to add custom styles to the component.',\n    },\n    renderRawMarkdownChild: {\n      description: 'This property allows to render the raw markdown child as a component.',\n    },\n    openLinksInNewTab: {\n      description: 'Wether link components rendered inside Markdown should open in a new tab (`target=\"_blank\"`).',\n    },\n    styling: {\n      desription: 'This property allows to customize the styling of the markdown content.',\n    }\n  },\n  args: {\n    children: '## Title \\n This is **our content**.',\n    className: '',\n    renderRawMarkdownChild: false,\n    openLinksInNewTab: false,\n    styling: {},\n  },\n  parameters: {\n    componentSubtitle: (\n      <>\n        Display markdown text based on <a href=\"https://github.com/remarkjs/react-markdown\" target='_blank' rel=\"noreferrer\">react-markdown</a> with custom styling.\n      </>\n    ),\n  },\n};\n\nexport const MarkdownStory = ({ children, className }: MarkdownProps) => (\n  <Markdown className={className}>\n    {children}\n  </Markdown>\n);\n\nMarkdownStory.storyName = \"Markdown\";\n\nexport const AvailableMDComponents = ({ className }: MarkdownProps) => (\n  <Markdown className={className}>\n    {`\n## Headers\nThe header options range from h1 to h4.\n\n\\`\\`\\`\n# H1\n## H2\n### H3\n#### H4\n\\`\\`\\`\n\n# H1 Lorem ipsum non sunt qui sunt\n\n## H2 Lorem ipsum non sunt qui sunt\n\n### H3 Lorem ipsum non sunt qui sunt\n\n#### H4 Lorem ipsum non sunt qui sunt\n\n## Emphasis\n\n\\`\\`\\`\nEmphasis or italics, use *asterisk* or _underscore_.\nStrong emphasis or bold, use **asterisks** or __underscores__.\nCombined emphasis, use **_asterisks and underscores_**.\n\\`\\`\\`\n\nEmphasis or italics, use _asterisk_ or _underscore_.\n\nStrong emphasis or bold, use **asterisks** or **underscores**.\n\nCombined emphasis, use **_asterisks and underscores_**.\n\n## Lists\n\n\\`\\`\\`\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses\n\\`\\`\\`\n\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n\n- Unordered list can use asterisks\n- Or minuses\n- Or pluses\n\n## Links\n\nFor links markdown syntax should be used.\n\n\\`\\`\\`\n[This is an inline link](https://feather-insurance.com)\n\\`\\`\\`\n\n[This is an inline link](https://feather-insurance.com)\n\n## Inline code block\n\nInline code block can be set by using backtick or \\`\\`\\`\n\n\\`\\`\\`\nIt is usefull to define a \\`variable\\` inside a text\n\\`\\`\\`\n\nIt is usefull to define a \\`variable\\` inside a text\n\n## Quote\n\nYou can use quote markdown by using \\`>\\` at the beginning of your text\n\n\\`\\`\\`\n> The busy man is least busy with living. - Seneca\n\\`\\`\\`\n\n> The busy man is least busy with living. - Seneca\n\n## Images\n\nImages markdown syntax is the following\n\\`\\`\\`\n![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)\n\\`\\`\\`\n\n![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)\n\n## Tables\n\nDefining a table in markdown is a bit tricky. You can use websites such as [tablesgenerator.com](https://www.tablesgenerator.com/markdown_tables) for help\n\n\\`\\`\\`\n| Department | Yearly spend | Category |\n|------------|--------------|----------|\n| Marketing  | 150k€        | \\`c\\`    |\n| Sales      | 200k€        | \\`e\\`    |\n| Product    | 84k€         | \\`f\\`    |\n\\`\\`\\`\n\n| Department | Yearly spend | Category |\n|------------|--------------|----------|\n| Marketing  | 150k€        | \\`c\\`    |\n| Sales      | 200k€        | \\`e\\`    |\n| Product    | 84k€         | \\`f\\`    |\n\n`}\n  </Markdown>\n);\n\nexport const AddingCustomComponents = ({ \n  className,\n  openLinksInNewTab,\n  renderRawMarkdownChild\n }: MarkdownProps) => (\n  <Markdown\n    className={className}\n    openLinksInNewTab={openLinksInNewTab}\n    styling={{\n      h6: 'tc-red-500'\n    }}\n    renderRawMarkdownChild={renderRawMarkdownChild}\n\n  >\n    ###### This is a custom H6 that will always be red\n  </Markdown>\n);\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QAER,QAAQ,EAAE;YACR,WAAW,EAAE,6CAA6C;SAC3D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,6DAA6D;SAC3E;QACD,sBAAsB,EAAE;YACtB,WAAW,EAAE,uEAAuE;SACrF;QACD,iBAAiB,EAAE;YACjB,WAAW,EAAE,+FAA+F;SAC7G;QACD,OAAO,EAAE;YACP,UAAU,EAAE,wEAAwE;SACrF;KACF;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,sCAAsC;QAChD,SAAS,EAAE,EAAE;QACb,sBAAsB,EAAE,KAAK;QAC7B,iBAAiB,EAAE,KAAK;QACxB,OAAO,EAAE,EAAE;KACZ;IACD,UAAU,EAAE;QACV,iBAAiB,GACfA,+DACiCC,WAAG,IAAI,EAAC,4CAA4C,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,+BAAmB,6BACtI,CACJ;KACF;EACD;IAEW,aAAa,GAAG,UAAC,EAAsC;QAApC,QAAQ,cAAA,EAAE,SAAS,eAAA;IAAsB,QACvEA,IAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,YAC3B,QAAQ,GACA;AAH4D,EAIvE;AAEF,aAAa,CAAC,SAAS,GAAG,UAAU,CAAC;IAExB,qBAAqB,GAAG,UAAC,EAA4B;QAA1B,SAAS,eAAA;IAAsB,QACrEA,IAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,YAC3B,4hFAgHJ,GACY;AAnH0D,EAoHrE;IAEW,sBAAsB,GAAG,UAAC,EAItB;QAHf,SAAS,eAAA,EACT,iBAAiB,uBAAA,EACjB,sBAAsB,4BAAA;IACF,QACpBA,IAAC,QAAQ,IACP,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE;YACP,EAAE,EAAE,YAAY;SACjB,EACD,sBAAsB,EAAE,sBAAsB,mEAIrC;AAXS;;;;;"}

package/dist/esm/lib/components/markdown/config.d.ts

@@ -1,22 +0,0 @@
-export interface MarkdownStyling {
-    a: string;
-    p: string;
-    h1: string;
-    h2: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h6: string;
-    ol: string;
-    ul: string;
-    strong: string;
-    em: string;
-    table: string;
-    th: string;
-    tr: string;
-    td: string;
-    blockquote: string;
-    code: string;
-    pre: string;
-}
-export declare const defaultStyling: MarkdownStyling;

package/dist/esm/lib/components/markdown/index.d.ts

@@ -1,10 +0,0 @@
-import { MarkdownStyling } from './config';
-export interface MarkdownProps {
-    children: string;
-    className?: string;
-    openLinksInNewTab?: boolean;
-    styling?: Partial<MarkdownStyling>;
-    renderRawMarkdownChild?: boolean;
-}
-declare const Markdown: ({ children: rawMarkdownChild, className, openLinksInNewTab, styling: rawStyling, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-export { Markdown };

package/dist/esm/lib/components/markdown/index.stories.d.ts

@@ -1,39 +0,0 @@
-import { MarkdownProps } from '.';
-declare const story: {
-    title: string;
-    component: ({ children: rawMarkdownChild, className, openLinksInNewTab, styling: rawStyling, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-    argTypes: {
-        children: {
-            description: string;
-        };
-        className: {
-            description: string;
-        };
-        renderRawMarkdownChild: {
-            description: string;
-        };
-        openLinksInNewTab: {
-            description: string;
-        };
-        styling: {
-            desription: string;
-        };
-    };
-    args: {
-        children: string;
-        className: string;
-        renderRawMarkdownChild: boolean;
-        openLinksInNewTab: boolean;
-        styling: {};
-    };
-    parameters: {
-        componentSubtitle: JSX.Element;
-    };
-};
-export declare const MarkdownStory: {
-    ({ children, className }: MarkdownProps): JSX.Element;
-    storyName: string;
-};
-export declare const AvailableMDComponents: ({ className }: MarkdownProps) => JSX.Element;
-export declare const AddingCustomComponents: ({ className, openLinksInNewTab, renderRawMarkdownChild }: MarkdownProps) => JSX.Element;
-export default story;

package/src/lib/components/markdown/config.ts

@@ -1,45 +0,0 @@
-import styles from './styles.module.scss';
-
-export interface MarkdownStyling {
-  a: string;
-  p: string;
-  h1: string;
-  h2: string;
-  h3: string;
-  h4: string;
-  h5: string;
-  h6: string;
-  ol: string;
-  ul: string;
-  strong: string;
-  em: string;
-  table: string;
-  th: string;
-  tr: string;
-  td: string;
-  blockquote: string;
-  code: string;
-  pre: string;
-}
-
-export const defaultStyling: MarkdownStyling = {
-  a: 'p-a',
-  p: 'p-p mt8',
-  h1: 'p-h1 p--serif mt32',
-  h2: 'p-h2 mt24',
-  h3: 'p-h3 mt16',
-  h4: 'p-h4 mt8',
-  h5: 'p-h5 mt8',
-  h6: 'p-h6 mt8',
-  ol: `p-p ${styles.olist} mt8`,
-  ul: `p-p ${styles.ulist} mt8`,
-  strong: 'fw-bold',
-  em: 'fs-italic',
-  table: `w100 mt24 ${styles.table}`,
-  th: 'p-h4',
-  tr: styles.row,
-  td: 'px8 py8 tc-grey-700',
-  blockquote: 'bg-grey-200 my24 px24 pt16 pb24 br8',
-  code: styles.code,
-  pre: `d-block tc-grey-200 bg-grey-900 px16 py16 my16 br8 ${styles.pre}`,
-};

package/src/lib/components/markdown/index.stories.tsx

@@ -1,185 +0,0 @@
-import { render } from 'sass';
-import { Markdown, MarkdownProps } from '.';
-
-const story = {
-  title: 'JSX/Markdown',
-  component: Markdown,
-  argTypes: {
-    
-    children: {
-      description: 'MD content to be rendered in the component.',
-    },
-    className: {
-      description: 'This property allows to add custom styles to the component.',
-    },
-    renderRawMarkdownChild: {
-      description: 'This property allows to render the raw markdown child as a component.',
-    },
-    openLinksInNewTab: {
-      description: 'Wether link components rendered inside Markdown should open in a new tab (`target="_blank"`).',
-    },
-    styling: {
-      desription: 'This property allows to customize the styling of the markdown content.',
-    }
-  },
-  args: {
-    children: '## Title \n This is **our content**.',
-    className: '',
-    renderRawMarkdownChild: false,
-    openLinksInNewTab: false,
-    styling: {},
-  },
-  parameters: {
-    componentSubtitle: (
-      <>
-        Display markdown text based on <a href="https://github.com/remarkjs/react-markdown" target='_blank' rel="noreferrer">react-markdown</a> with custom styling.
-      </>
-    ),
-  },
-};
-
-export const MarkdownStory = ({ children, className }: MarkdownProps) => (
-  <Markdown className={className}>
-    {children}
-  </Markdown>
-);
-
-MarkdownStory.storyName = "Markdown";
-
-export const AvailableMDComponents = ({ className }: MarkdownProps) => (
-  <Markdown className={className}>
-    {`
-## Headers
-The header options range from h1 to h4.
-
-\`\`\`
-# H1
-## H2
-### H3
-#### H4
-\`\`\`
-
-# H1 Lorem ipsum non sunt qui sunt
-
-## H2 Lorem ipsum non sunt qui sunt
-
-### H3 Lorem ipsum non sunt qui sunt
-
-#### H4 Lorem ipsum non sunt qui sunt
-
-## Emphasis
-
-\`\`\`
-Emphasis or italics, use *asterisk* or _underscore_.
-Strong emphasis or bold, use **asterisks** or __underscores__.
-Combined emphasis, use **_asterisks and underscores_**.
-\`\`\`
-
-Emphasis or italics, use _asterisk_ or _underscore_.
-
-Strong emphasis or bold, use **asterisks** or **underscores**.
-
-Combined emphasis, use **_asterisks and underscores_**.
-
-## Lists
-
-\`\`\`
-1. First ordered list item
-2. Another item
-3. Actual numbers don't matter, just that it's a number
-4. And another item.
-
-* Unordered list can use asterisks
-- Or minuses
-+ Or pluses
-\`\`\`
-
-1. First ordered list item
-2. Another item
-3. Actual numbers don't matter, just that it's a number
-4. And another item.
-
-- Unordered list can use asterisks
-- Or minuses
-- Or pluses
-
-## Links
-
-For links markdown syntax should be used.
-
-\`\`\`
-[This is an inline link](https://feather-insurance.com)
-\`\`\`
-
-[This is an inline link](https://feather-insurance.com)
-
-## Inline code block
-
-Inline code block can be set by using backtick or \`\`\`
-
-\`\`\`
-It is usefull to define a \`variable\` inside a text
-\`\`\`
-
-It is usefull to define a \`variable\` inside a text
-
-## Quote
-
-You can use quote markdown by using \`>\` at the beginning of your text
-
-\`\`\`
-> The busy man is least busy with living. - Seneca
-\`\`\`
-
-> The busy man is least busy with living. - Seneca
-
-## Images
-
-Images markdown syntax is the following
-\`\`\`
-![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)
-\`\`\`
-
-![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)
-
-## Tables
-
-Defining a table in markdown is a bit tricky. You can use websites such as [tablesgenerator.com](https://www.tablesgenerator.com/markdown_tables) for help
-
-\`\`\`
-| Department | Yearly spend | Category |
-|------------|--------------|----------|
-| Marketing  | 150k€        | \`c\`    |
-| Sales      | 200k€        | \`e\`    |
-| Product    | 84k€         | \`f\`    |
-\`\`\`
-
-| Department | Yearly spend | Category |
-|------------|--------------|----------|
-| Marketing  | 150k€        | \`c\`    |
-| Sales      | 200k€        | \`e\`    |
-| Product    | 84k€         | \`f\`    |
-
-`}
-  </Markdown>
-);
-
-export const AddingCustomComponents = ({ 
-  className,
-  openLinksInNewTab,
-  renderRawMarkdownChild
- }: MarkdownProps) => (
-  <Markdown
-    className={className}
-    openLinksInNewTab={openLinksInNewTab}
-    styling={{
-      h6: 'tc-red-500'
-    }}
-    renderRawMarkdownChild={renderRawMarkdownChild}
-
-  >
-    ###### This is a custom H6 that will always be red
-  </Markdown>
-);
-
-export default story;

package/src/lib/components/markdown/index.tsx

@@ -1,163 +0,0 @@
-import { ReactNode } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkDirective from 'remark-directive';
-import remarkGfm from 'remark-gfm';
-
-import { MarkdownStyling, defaultStyling } from './config';
-
-type ComponentProps = {
-  children?: ReactNode;
-}
-
-export interface MarkdownProps {
-  children: string;
-  className?: string;
-  openLinksInNewTab?: boolean;
-  styling?: Partial<MarkdownStyling>;
-  renderRawMarkdownChild?: boolean;
-}
-
-const Markdown = ({
-  children: rawMarkdownChild,
-  className = '',
-  openLinksInNewTab = false,
-  styling: rawStyling,
-  renderRawMarkdownChild = false
-}: MarkdownProps) => {
-  const styling = { ...defaultStyling, ...rawStyling };
-
-  if (renderRawMarkdownChild) {
-    return <>{rawMarkdownChild}</>;
-  }
-
-  const Link = ({ children, href }: ComponentProps & { href?: string }) =>
-    openLinksInNewTab ? (
-      <a href={href} className={styling.a} target="_blank" rel="noreferrer">
-        {children}
-      </a>
-    ) : (
-      <a href={href} className={styling.a}>
-        {children}
-      </a>
-    );
-
-  const Paragraph = ({ children }: ComponentProps) => (
-    <p className={styling.p}>{children}</p>
-  );
-
-  const Heading = ({
-    children,
-    node,
-  }: ComponentProps & { node?: { tagName: string } }) => {
-    switch (node?.tagName) {
-      case 'h1':
-        return <h1 className={styling.h1}>{children}</h1>;
-      case 'h2':
-        return <h2 className={styling.h2}>{children}</h2>;
-      case 'h3':
-        return <h3 className={styling.h3}>{children}</h3>;
-      case 'h4':
-        return <h4 className={styling.h4}>{children}</h4>;
-      case 'h5':
-        return <h5 className={styling.h5}>{children}</h5>;
-      case 'h6':
-        return <h6 className={styling.h6}>{children}</h6>;
-      default:
-        return <p>{children}</p>;
-    }
-  };
-
-  const UList = ({ children }: ComponentProps) => {
-    return <ul className={styling.ul}>{children}</ul>;
-  };
-
-  const OList = ({ children }: ComponentProps) => {
-    return <ol className={styling.ol}>{children}</ol>;
-  };
-
-  const Strong = ({ children }: ComponentProps) => {
-    return <strong className={styling.strong}>{children}</strong>;
-  };
-
-  const Emphasis = ({ children }: ComponentProps) => {
-    return <em className={styling.em}>{children}</em>;
-  };
-
-  const Table = ({ children }: ComponentProps) => {
-    return <table className={styling.table}>{children}</table>;
-  };
-
-  const TableRow = ({ children }: ComponentProps) => {
-    return <tr className={styling.tr}>{children}</tr>;
-  };
-
-  const TableCell = ({ children }: ComponentProps) => {
-    return <td className={styling.td}>{children}</td>;
-  };
-
-  const TableHeader = ({ children }: ComponentProps) => {
-    return <th className={styling.th}>{children}</th>;
-  };
-
-  const Image = ({
-    src,
-    alt,
-    ...props
-  }: {
-    src?: string | undefined;
-    alt?: string | undefined;
-  }) => {
-    return (
-      <a href={src} target="_blank" rel="noreferrer noreferrer">
-        <img style={{ maxWidth: '100%' }} src={src} alt={alt} {...props} />
-      </a>
-    );
-  };
-
-  const BlockQuote = ({ children }: ComponentProps) => {
-    return <blockquote className={styling.blockquote}>{children}</blockquote>;
-  };
-
-  const Pre = ({ children }: ComponentProps) => {
-    return <pre className={styling.pre}>{children}</pre>;
-  };
-
-  const Code = ({ children }: ComponentProps) => {
-    return <code className={styling.code}>{children}</code>;
-  };
-
-  return (
-    <ReactMarkdown
-      className={className}
-      components={{
-        a: Link,
-        p: Paragraph,
-        h1: Heading,
-        h2: Heading,
-        h3: Heading,
-        h4: Heading,
-        h5: Heading,
-        h6: Heading,
-        ol: OList,
-        ul: UList,
-        strong: Strong,
-        em: Emphasis,
-        table: Table,
-        th: TableHeader,
-        tr: TableRow,
-        td: TableCell,
-        blockquote: BlockQuote,
-        img: Image,
-        code: Code,
-        pre: Pre,
-      }}
-      rehypePlugins={[rehypeRaw]}
-      remarkPlugins={[remarkDirective, remarkGfm]}
-    >
-      {rawMarkdownChild}
-    </ReactMarkdown>
-  );
-};
-
-export { Markdown };

package/src/lib/components/markdown/styles.module.scss

@@ -1,37 +0,0 @@
-@use "../../scss/public/colors" as *;
-
-.ulist {
-  list-style-type: disc;
-  list-style-position: outside;
-  padding-left: 16px;
-
-  > li {
-    padding-left: 8px;
-  }
-}
-
-.olist {
-  list-style-type: decimal;
-  list-style-position: inside;
-}
-
-.table td,
-.table th {
-  border: 1px solid $ds-grey-300;
-}
-
-.pre {
-  line-height: 24px;
-}
-
-.code {
-  font-family: monospace;
-  padding: 2px 4px;
-}
-
-:not(.pre) > .code {
-  border: 1px solid $ds-grey-400;
-  background-color: $ds-grey-200;
-  color: $ds-red-500;
-  border-radius: 4px;
-}