uibee 2.17.3 → 2.17.5

package/dist/src/components/markdownrender/markdownRender.d.ts

@@ -1,7 +1,7 @@
 import { Components } from 'react-markdown';
-import 'highlight.js/styles/github-dark.css';
-export default function MarkdownRender({ MDstr, components, className }: {
+export default function MarkdownRender({ MDstr, components, className, size }: {
     MDstr: string;
     components?: Components;
     className?: string;
+    size?: 'sm' | 'base' | 'lg' | 'xl';
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/markdownrender/markdownRender.js

@@ -1,14 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeHighlight from 'rehype-highlight';
-import 'highlight.js/styles/github-dark.css';
-const defaultComponents = {
-    h1: ({ ...props }) => _jsx("h2", { ...props }),
-    pre({ children }) {
-        return (_jsx("pre", { className: 'inline-block rounded-lg overflow-auto whitespace-pre-wrap wrap-break-word w-full', children: children }));
-    },
-};
-export default function MarkdownRender({ MDstr, components, className }) {
-    return (_jsx("div", { className: className ?? 'prose prose-sm prose-custom max-w-none', children: _jsx(Markdown, { components: { ...defaultComponents, ...components }, remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], children: MDstr.replace(/\\n/g, '\n') }) }));
+import { ExternalLink } from 'lucide-react';
+function makeDefaultComponents() {
+    return {
+        h1: ({ ...props }) => _jsx("h2", { ...props }),
+        input({ type, checked }) {
+            if (type !== 'checkbox')
+                return _jsx("input", { type: type });
+            return (_jsx("span", { "data-task-checkbox": true, className: `inline-flex items-center justify-center w-4 h-4 rounded-xs border-2 shrink-0 align-middle
+                        ${checked ? 'bg-login border-login' : 'border-login/50'}`, children: checked && (_jsx("svg", { viewBox: '0 0 10 8', className: 'w-2.5 h-2.5 fill-none stroke-white stroke-2', children: _jsx("polyline", { points: '1,4 4,7 9,1', strokeLinecap: 'round', strokeLinejoin: 'round' }) })) }));
+        },
+        a({ href, children }) {
+            return (_jsxs("a", { href: href, target: '_blank', rel: 'noopener noreferrer', className: 'inline-flex items-center gap-1 text-login hover:text-login/80 underline underline-offset-2 transition-colors', children: [children, _jsx(ExternalLink, { className: 'w-3 h-3 shrink-0 opacity-70' })] }));
+        },
+        pre({ children }) {
+            return (_jsx("pre", { className: 'block rounded-lg overflow-auto whitespace-pre-wrap wrap-break-word w-full', children: children }));
+        },
+    };
+}
+export default function MarkdownRender({ MDstr, components, className, size }) {
+    const sizeClass = size === 'sm' ? 'prose-sm' : size === 'lg' ? 'prose-lg' : size === 'xl' ? 'prose-xl' : '';
+    return (_jsx("div", { className: className ?? `prose ${sizeClass} prose-custom max-w-none`, children: _jsx(Markdown, { components: { ...makeDefaultComponents(), ...components }, remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], children: MDstr.replace(/\\n/g, '\n') }) }));
 }

package/dist/src/globals.css

@@ -847,6 +847,205 @@
     font-size: 1.2rem;
     font-weight: 500;
   }
+  .prose-lg {
+    font-size: 1.125rem;
+    line-height: 1.7777778;
+    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.3333333em;
+      margin-bottom: 1.3333333em;
+    }
+    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 1.2222222em;
+      line-height: 1.4545455;
+      margin-top: 1.0909091em;
+      margin-bottom: 1.0909091em;
+    }
+    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.6666667em;
+      margin-bottom: 1.6666667em;
+      padding-inline-start: 1em;
+    }
+    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 2.6666667em;
+      margin-top: 0;
+      margin-bottom: 0.8333333em;
+      line-height: 1;
+    }
+    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 1.6666667em;
+      margin-top: 1.8666667em;
+      margin-bottom: 1.0666667em;
+      line-height: 1.3333333;
+    }
+    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 1.3333333em;
+      margin-top: 1.6666667em;
+      margin-bottom: 0.6666667em;
+      line-height: 1.5;
+    }
+    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.7777778em;
+      margin-bottom: 0.4444444em;
+      line-height: 1.5555556;
+    }
+    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.7777778em;
+      margin-bottom: 1.7777778em;
+    }
+    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.7777778em;
+      margin-bottom: 1.7777778em;
+    }
+    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.7777778em;
+      margin-bottom: 1.7777778em;
+    }
+    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.8888889em;
+      border-radius: 0.3125rem;
+      padding-top: 0.2222222em;
+      padding-inline-end: 0.4444444em;
+      padding-bottom: 0.2222222em;
+      padding-inline-start: 0.4444444em;
+    }
+    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.8888889em;
+    }
+    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.8666667em;
+    }
+    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.875em;
+    }
+    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.8888889em;
+      line-height: 1.75;
+      margin-top: 2em;
+      margin-bottom: 2em;
+      border-radius: 0.375rem;
+      padding-top: 1em;
+      padding-inline-end: 1.5em;
+      padding-bottom: 1em;
+      padding-inline-start: 1.5em;
+    }
+    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.3333333em;
+      margin-bottom: 1.3333333em;
+      padding-inline-start: 1.5555556em;
+    }
+    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.3333333em;
+      margin-bottom: 1.3333333em;
+      padding-inline-start: 1.5555556em;
+    }
+    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.6666667em;
+      margin-bottom: 0.6666667em;
+    }
+    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0.4444444em;
+    }
+    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0.4444444em;
+    }
+    :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.8888889em;
+      margin-bottom: 0.8888889em;
+    }
+    :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.3333333em;
+    }
+    :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.3333333em;
+    }
+    :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.3333333em;
+    }
+    :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.3333333em;
+    }
+    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.8888889em;
+      margin-bottom: 0.8888889em;
+    }
+    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.3333333em;
+      margin-bottom: 1.3333333em;
+    }
+    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.3333333em;
+    }
+    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.6666667em;
+      padding-inline-start: 1.5555556em;
+    }
+    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 3.1111111em;
+      margin-bottom: 3.1111111em;
+    }
+    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.8888889em;
+      line-height: 1.5;
+    }
+    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-end: 0.75em;
+      padding-bottom: 0.75em;
+      padding-inline-start: 0.75em;
+    }
+    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0;
+    }
+    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-end: 0;
+    }
+    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-top: 0.75em;
+      padding-inline-end: 0.75em;
+      padding-bottom: 0.75em;
+      padding-inline-start: 0.75em;
+    }
+    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0;
+    }
+    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-end: 0;
+    }
+    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.7777778em;
+      margin-bottom: 1.7777778em;
+    }
+    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.8888889em;
+      line-height: 1.5;
+      margin-top: 1em;
+    }
+    :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 0;
+    }
+  }
   .prose-sm {
     font-size: 0.875rem;
     line-height: 1.7142857;
@@ -1046,6 +1245,238 @@
       margin-bottom: 0;
     }
   }
+  .prose-xl {
+    font-size: 1.25rem;
+    line-height: 1.8;
+    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.2em;
+      margin-bottom: 1.2em;
+    }
+    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 1.2em;
+      line-height: 1.5;
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.6em;
+      margin-bottom: 1.6em;
+      padding-inline-start: 1.0666667em;
+    }
+    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 2.8em;
+      margin-top: 0;
+      margin-bottom: 0.8571429em;
+      line-height: 1;
+    }
+    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 1.8em;
+      margin-top: 1.5555556em;
+      margin-bottom: 0.8888889em;
+      line-height: 1.1111111;
+    }
+    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 1.5em;
+      margin-top: 1.6em;
+      margin-bottom: 0.6666667em;
+      line-height: 1.3333333;
+    }
+    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.8em;
+      margin-bottom: 0.6em;
+      line-height: 1.6;
+    }
+    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.9em;
+      border-radius: 0.3125rem;
+      padding-top: 0.25em;
+      padding-inline-end: 0.4em;
+      padding-bottom: 0.25em;
+      padding-inline-start: 0.4em;
+    }
+    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.9em;
+    }
+    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.8611111em;
+    }
+    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.9em;
+    }
+    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.9em;
+      line-height: 1.7777778;
+      margin-top: 2em;
+      margin-bottom: 2em;
+      border-radius: 0.5rem;
+      padding-top: 1.1111111em;
+      padding-inline-end: 1.3333333em;
+      padding-bottom: 1.1111111em;
+      padding-inline-start: 1.3333333em;
+    }
+    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.2em;
+      margin-bottom: 1.2em;
+      padding-inline-start: 1.6em;
+    }
+    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.2em;
+      margin-bottom: 1.2em;
+      padding-inline-start: 1.6em;
+    }
+    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.6em;
+      margin-bottom: 0.6em;
+    }
+    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0.4em;
+    }
+    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0.4em;
+    }
+    :where(.prose-xl > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.8em;
+      margin-bottom: 0.8em;
+    }
+    :where(.prose-xl > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.2em;
+    }
+    :where(.prose-xl > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.2em;
+    }
+    :where(.prose-xl > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.2em;
+    }
+    :where(.prose-xl > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.2em;
+    }
+    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.8em;
+      margin-bottom: 0.8em;
+    }
+    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.2em;
+      margin-bottom: 1.2em;
+    }
+    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.2em;
+    }
+    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.6em;
+      padding-inline-start: 1.6em;
+    }
+    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 2.8em;
+      margin-bottom: 2.8em;
+    }
+    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.9em;
+      line-height: 1.5555556;
+    }
+    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-end: 0.6666667em;
+      padding-bottom: 0.8888889em;
+      padding-inline-start: 0.6666667em;
+    }
+    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0;
+    }
+    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-end: 0;
+    }
+    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-top: 0.8888889em;
+      padding-inline-end: 0.6666667em;
+      padding-bottom: 0.8888889em;
+      padding-inline-start: 0.6666667em;
+    }
+    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0;
+    }
+    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-end: 0;
+    }
+    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-size: 0.9em;
+      line-height: 1.5555556;
+      margin-top: 1em;
+    }
+    :where(.prose-xl > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(.prose-xl > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 0;
+    }
+  }
+  .prose-custom {
+    line-height: 24px;
+    --tw-prose-body: var(--color-login-text);
+    --tw-prose-headings: var(--color-login-text);
+    --tw-prose-lead: var(--color-login-300);
+    --tw-prose-links: var(--color-login);
+    --tw-prose-bold: #fff;
+    --tw-prose-counters: var(--color-login);
+    --tw-prose-bullets: var(--color-login);
+    --tw-prose-hr: var(--color-login-300);
+    --tw-prose-quotes: var(--color-login-text);
+    --tw-prose-quote-borders: var(--color-login);
+    --tw-prose-captions: var(--color-login-300);
+    --tw-prose-code: var(--color-login-text);
+    --tw-prose-pre-code: var(--color-login-text);
+    --tw-prose-pre-bg: var(--color-login-900);
+    --tw-prose-th-borders: var(--color-login-500);
+    --tw-prose-td-borders: var(--color-login-500);
+    & p {
+      margin-top: 0.25rem;
+      margin-bottom: 0.75rem;
+    }
+    & li {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    & ul:has(> li > span[data-task-checkbox]) {
+      padding-left: 0;
+    }
+    & li:has(> span[data-task-checkbox]) {
+      list-style: none;
+    }
+  }
   .-mt-0\.5 {
     margin-top: calc(var(--spacing) * -0.5);
   }
@@ -1110,9 +1541,6 @@
   .hidden {
     display: none;
   }
-  .inline-block {
-    display: inline-block;
-  }
   .inline-flex {
     display: inline-flex;
   }
@@ -1128,6 +1556,9 @@
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -1197,6 +1628,9 @@
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
+  .w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -1548,6 +1982,9 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-login {
+    border-color: var(--color-login);
+  }
   .border-login-50 {
     border-color: var(--color-login-50);
   }
@@ -1581,6 +2018,12 @@
       border-color: color-mix(in oklab, var(--color-login-600) 50%, transparent);
     }
   }
+  .border-login\/50 {
+    border-color: color-mix(in srgb, #fd8738 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login) 50%, transparent);
+    }
+  }
   .border-orange-400\/25 {
     border-color: color-mix(in srgb, oklch(75% 0.183 55.934) 25%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1859,9 +2302,15 @@
   .stroke-red-400 {
     stroke: var(--color-red-400);
   }
+  .stroke-white {
+    stroke: var(--color-white);
+  }
   .stroke-yellow-400 {
     stroke: var(--color-yellow-400);
   }
+  .stroke-2 {
+    stroke-width: 2;
+  }
   .stroke-\[3\.5px\] {
     stroke-width: 3.5px;
   }
@@ -1979,6 +2428,9 @@
   .text-right {
     text-align: right;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -2167,6 +2619,12 @@
   .no-underline {
     text-decoration-line: none;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .placeholder-login-200 {
     &::placeholder {
       color: var(--color-login-200);
@@ -2184,6 +2642,9 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2333,24 +2794,6 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .prose-custom {
-    --tw-prose-body: var(--color-login-text);
-    --tw-prose-headings: var(--color-login-text);
-    --tw-prose-lead: var(--color-login-300);
-    --tw-prose-links: var(--color-login);
-    --tw-prose-bold: var(--color-login-text);
-    --tw-prose-counters: var(--color-login-400);
-    --tw-prose-bullets: var(--color-login-400);
-    --tw-prose-hr: var(--color-login-300);
-    --tw-prose-quotes: var(--color-login-text);
-    --tw-prose-quote-borders: var(--color-login-300);
-    --tw-prose-captions: var(--color-login-300);
-    --tw-prose-code: var(--color-login-text);
-    --tw-prose-pre-code: var(--color-login-text);
-    --tw-prose-pre-bg: var(--color-login-800);
-    --tw-prose-th-borders: var(--color-login-500);
-    --tw-prose-td-borders: var(--color-login-500);
-  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -2775,6 +3218,16 @@
       }
     }
   }
+  .hover\:text-login\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: color-mix(in srgb, #fd8738 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-login) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-red-200 {
     &:hover {
       @media (hover: hover) {
@@ -3000,6 +3453,81 @@
   --color-login-50: #ffffff;
   --color-login-text: #0e0e0e;
 }
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
+  color: #ff7b72;
+}
+.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
+  color: #d2a8ff;
+}
+.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id {
+  color: #79c0ff;
+}
+.hljs-regexp, .hljs-string, .hljs-meta .hljs-string {
+  color: #a5d6ff;
+}
+.hljs-built_in, .hljs-symbol {
+  color: #ffa657;
+}
+.hljs-comment, .hljs-code, .hljs-formula {
+  color: #8b949e;
+}
+.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo {
+  color: #7ee787;
+}
+.hljs-subst {
+  color: #c9d1d9;
+}
+.hljs-section {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.hljs-bullet {
+  color: #f2cc60;
+}
+.hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #c9d1d9;
+  font-weight: bold;
+}
+.hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+.hljs {
+  background: transparent;
+}
+pre code.hljs {
+  padding: 0;
+}
 @keyframes jump {
   40% {
     transform: translateY(-0.3rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.17.3",
+  "version": "2.17.5",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/markdownrender/markdownRender.tsx

@@ -1,28 +1,60 @@
 import Markdown, { Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
-import 'highlight.js/styles/github-dark.css'
+import { ExternalLink } from 'lucide-react'
 
-const defaultComponents: Components = {
-    h1: ({...props}) => <h2 {...props} />,
-    pre({ children }) {
-        return (
-            <pre className='inline-block rounded-lg overflow-auto whitespace-pre-wrap wrap-break-word w-full'>
-                {children}
-            </pre>
-        )
-    },
-}
+function makeDefaultComponents(): Components {
+    return {
+        h1: ({...props}) => <h2 {...props} />,
+        input({ type, checked }) {
+            if (type !== 'checkbox') return <input type={type} />
+            return (
+                <span
+                    data-task-checkbox
+                    className={`inline-flex items-center justify-center w-4 h-4 rounded-xs border-2 shrink-0 align-middle
+                        ${checked ? 'bg-login border-login' : 'border-login/50'}`}
+                >
+                    {checked && (
+                        <svg viewBox='0 0 10 8' className='w-2.5 h-2.5 fill-none stroke-white stroke-2'>
+                            <polyline points='1,4 4,7 9,1' strokeLinecap='round' strokeLinejoin='round' />
+                        </svg>
+                    )}
+                </span>
+            )
+        },
+        a({ href, children }) {
+            return (
+                <a
+                    href={href}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='inline-flex items-center gap-1 text-login hover:text-login/80 underline underline-offset-2 transition-colors'
+                >
+                    {children}
+                    <ExternalLink className='w-3 h-3 shrink-0 opacity-70' />
+                </a>
+            )
+        },
+        pre({ children }) {
+            return (
+                <pre className='block rounded-lg overflow-auto whitespace-pre-wrap wrap-break-word w-full'>
+                    {children}
+                </pre>
+            )
+        },
+    }}
 
-export default function MarkdownRender({ MDstr, components, className }: {
+export default function MarkdownRender({ MDstr, components, className, size }: {
     MDstr: string
     components?: Components
     className?: string
+    size?: 'sm' | 'base' | 'lg' | 'xl'
 }) {
+    const sizeClass = size === 'sm' ? 'prose-sm' : size === 'lg' ? 'prose-lg' : size === 'xl' ? 'prose-xl' : ''
     return (
-        <div className={className ?? 'prose prose-sm prose-custom max-w-none'}>
+        <div className={className ?? `prose ${sizeClass} prose-custom max-w-none`}>
             <Markdown
-                components={{ ...defaultComponents, ...components }}
+                components={{ ...makeDefaultComponents(), ...components }}
                 remarkPlugins={[remarkGfm]}
                 rehypePlugins={[rehypeHighlight]}
             >

package/src/globals.css

@@ -100,22 +100,51 @@
 }
 
 @utility prose-custom {
+    line-height: 24px;
     --tw-prose-body: var(--color-login-text);
     --tw-prose-headings: var(--color-login-text);
     --tw-prose-lead: var(--color-login-300);
     --tw-prose-links: var(--color-login);
-    --tw-prose-bold: var(--color-login-text);
-    --tw-prose-counters: var(--color-login-400);
-    --tw-prose-bullets: var(--color-login-400);
+    --tw-prose-bold: #fff;
+    --tw-prose-counters: var(--color-login);
+    --tw-prose-bullets: var(--color-login);
     --tw-prose-hr: var(--color-login-300);
     --tw-prose-quotes: var(--color-login-text);
-    --tw-prose-quote-borders: var(--color-login-300);
+    --tw-prose-quote-borders: var(--color-login);
     --tw-prose-captions: var(--color-login-300);
     --tw-prose-code: var(--color-login-text);
     --tw-prose-pre-code: var(--color-login-text);
-    --tw-prose-pre-bg: var(--color-login-800);
+    --tw-prose-pre-bg: var(--color-login-900);
     --tw-prose-th-borders: var(--color-login-500);
     --tw-prose-td-borders: var(--color-login-500);
+
+    & p {
+        margin-top: 0.25rem;
+        margin-bottom: 0.75rem;
+    }
+
+    & li {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    & ul:has(> li > span[data-task-checkbox]) {
+        padding-left: 0;
+    }
+
+    & li:has(> span[data-task-checkbox]) {
+        list-style: none;
+    }
+}
+
+@import 'highlight.js/styles/github-dark.css';
+
+.hljs {
+    background: transparent;
+}
+
+pre code.hljs {
+    padding: 0;
 }
 
 @keyframes jump {