change bidirectional tag

package-lock.json

@@ -57,6 +57,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.9",
         "@types/react-syntax-highlighter": "^15.5.3"
       }
     },
@@ -3478,6 +3479,21 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
+      "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.18.1.tgz",
@@ -10546,11 +10562,23 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -19239,6 +19267,18 @@
         "loader-utils": "^2.0.0"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
+      "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+      "dev": true,
+      "requires": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      }
+    },
     "@testing-library/dom": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.18.1.tgz",
@@ -24518,11 +24558,23 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",

package.json

@@ -78,6 +78,7 @@
     ]
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@types/react-syntax-highlighter": "^15.5.3"
   }
 }

postcss.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    'postcss-focus-visible': {
+      replaceWith: '[data-focus-visible-added]',
+    },
     autoprefixer: {},
   },
 }

src/App.tsx

@@ -22,7 +22,7 @@ import {SecureLoading} from "./components/Loading";
 import DNS from "./views/DNS";
 import Activity from "./views/Activity";
 import Settings from "./views/Settings";
-
+import './styles/tailwind.css'
 
 const {Header, Content} = Layout;
 

src/components/ModeToggle.jsx

@@ -0,0 +1,54 @@
+function SunIcon(props) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
+      <path
+        strokeLinecap="round"
+        d="M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"
+      />
+    </svg>
+  )
+}
+
+function MoonIcon(props) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" />
+    </svg>
+  )
+}
+
+export function ModeToggle() {
+  function disableTransitionsTemporarily() {
+    document.documentElement.classList.add('[&_*]:!transition-none')
+    window.setTimeout(() => {
+      document.documentElement.classList.remove('[&_*]:!transition-none')
+    }, 0)
+  }
+
+  function toggleMode() {
+    disableTransitionsTemporarily()
+
+    let isDarkMode = document.documentElement.classList.toggle('dark')
+
+    if (document.documentElement.getAttribute("data-dark-mode") !== "false") {
+      delete window.localStorage.isDarkMode
+      document.documentElement.setAttribute('data-dark-mode', 'false');
+    } else {
+      window.localStorage.isDarkMode = isDarkMode
+      document.documentElement.setAttribute('data-dark-mode', 'true');
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
+      aria-label="Toggle dark mode"
+      onClick={toggleMode}
+    >
+      <SunIcon className="h-5 w-5 stroke-zinc-900 hidden dark:block" />
+      <MoonIcon className="dark:hidden h-5 w-5 stroke-white dark:block" />
+    </button>
+  )
+}

src/components/NameServerGroupUpdate.tsx

@@ -314,7 +314,7 @@ const NameServerGroupUpdate = () => {
     // @ts-ignore
     const renderNSList = (fields: FormListFieldData[], {add, remove}, {errors}) => (
         <>
-            <Row>Nameservers</Row>
+            <Row><label>Nameservers</label></Row>
             {!!fields.length && (
 
                 <Row align='middle'>
@@ -384,7 +384,7 @@ const NameServerGroupUpdate = () => {
             <Row>
                 <Space>
                     <Col>
-                        Match domains
+                        <label>Match domains</label>
                     </Col>
                     <Col>
                         <Tooltip title="Only queries to domains specified here will be resolved by these nameservers."

src/components/Navbar.tsx

@@ -13,6 +13,7 @@ import {RootState} from "typesafe-actions";
 import {actions as userActions} from "../store/user";
 import {useGetTokenSilently} from "../utils/token";
 import {actions as personalAccessTokenActions} from "../store/personal-access-token";
+import {ModeToggle} from "./ModeToggle";
 
 const {useBreakpoint} = Grid;
 
@@ -170,6 +171,9 @@ const Navbar = () => {
                               defaultSelectedKeys={[location.pathname]} items={menuItems}/>
                     </div>
                 </Col>
+                <Col style={{width: "3%"}}>
+                    <ModeToggle />
+                </Col>
                 {hideMenuUser &&
                     <Col>
                         <Dropdown overlay={menuUser} placement="bottomRight" trigger={['click']}>

src/components/UserEdit.tsx

@@ -89,7 +89,7 @@ const UserEdit = () => {
             groupsToCreate: groupsToCreate,
             auto_groups: autoGroups,
             is_service_user: isServiceUser,
-            is_blocked: values.is_blocked
+            is_blocked: !values.is_active
         } as UserToSave
     }
 
@@ -286,6 +286,7 @@ const UserEdit = () => {
                 role: user.role,
                 email: user.email,
                 is_blocked: user.is_blocked,
+                is_active: !user.is_blocked,
                 autoGroupsNames: currentGroups,
             })
         }
@@ -327,6 +328,7 @@ const UserEdit = () => {
                                   role: formUser.role,
                                   email: formUser.email,
                                   is_blocked: formUser.is_blocked,
+                                  is_active:  !formUser.is_blocked,
                                   autoGroupsNames: formUser.autoGroupsNames,
                               }}
                         >
@@ -389,8 +391,8 @@ const UserEdit = () => {
                                 <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
                                     <Form.Item
                                         valuePropName="checked"
-                                        name="is_blocked"
-                                        label="Block user"
+                                        name="is_active"
+                                        label="Active"
                                         style={{marginRight: "50px"}}
                                     >
                                         <Switch/>

src/components/popups/addpeer/addpeer/AddPeerPopup.tsx

@@ -10,7 +10,6 @@ import WindowsTab from "./WindowsTab";
 import MacTab from "./MacTab";
 import Link from "antd/lib/typography/Link";
 import DockerTab from "./DockerTab";
-import AndroidTab from "./AndroidTab";
 
 type Props = {
     greeting?: string;
@@ -52,11 +51,11 @@ export const AddPeerPopup: React.FC<Props> = ({
             label: <span><AppleFilled/>macOS</span>,
             children: <MacTab/>,
         },
-        {
+        /*{
             key: "4",
             label: <span><AndroidFilled/>Android</span>,
-            children: <AndroidTab/>,
-        },
+            children: <></>,
+        },*/
         {
             key: "5",
             label: <span><Icon component={DockerSVG}/>Docker</span>,

src/components/popups/addpeer/addpeer/AndroidTab.tsx

@@ -1,51 +0,0 @@
-import React, {useState} from 'react';
-
-import {Button, Image, Typography} from "antd";
-import TabSteps from "./TabSteps";
-import { StepCommand } from "./types"
-import googleplay from '../../../../assets/google-play-badge.png';
-const {Text} = Typography;
-
-export const AndroidTab = () => {
-
-    const [steps, setSteps] = useState([
-        {
-            key: 1,
-            title: 'Download and install the application from Google Play Store:',
-            commands: (
-                <a href="https://play.google.com/store/apps/details?id=io.netbird.client" target="_blank">
-                    <Image width="12em" preview={false} style={{marginTop: "5px"}} src={googleplay}/>
-                </a>
-            ),
-            copied: false
-        } as StepCommand,
-        {
-            key: 2,
-            title: 'Run the application and click on the "Connect" button in the middle of the screen',
-            commands: '',
-            copied: false,
-            showCopyButton: false
-        },
-        {
-            key: 3,
-            title: 'Sign up using your email address',
-            commands: '',
-            copied: false,
-            showCopyButton: false
-        }
-    ])
-
-    return (
-        <div style={{marginTop: 10}}>
-            <Text style={{fontWeight: "bold"}}>
-                Install on Android
-            </Text>
-            <div style={{marginTop: 5}}>
-                <TabSteps stepsItems={steps}/>
-            </div>
-
-        </div>
-    )
-}
-
-export default AndroidTab

src/styles/tailwind.css

@@ -0,0 +1,32 @@
+:root {
+  --shiki-color-text: theme('colors.white');
+  --shiki-token-constant: theme('colors.orange.300');
+  --shiki-token-string: theme('colors.orange.300');
+  --shiki-token-comment: theme('colors.zinc.500');
+  --shiki-token-keyword: theme('colors.sky.300');
+  --shiki-token-parameter: theme('colors.pink.300');
+  --shiki-token-function: theme('colors.violet.300');
+  --shiki-token-string-expression: theme('colors.orange.300');
+  --shiki-token-punctuation: theme('colors.zinc.200');
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.videowrapper {
+  float: none;
+  clear: both;
+  width: 100%;
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 25px;
+  height: 0;
+}
+.videowrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

src/views/AccessControl.tsx

@@ -430,9 +430,9 @@ export const AccessControl = () => {
                                     />
                                     <Column title="Direction" dataIndex="flow"
                                             render={(text, record: RuleDataTable, index) => {
-                                                const s = {minWidth: 50, textAlign: "center"} as React.CSSProperties
+                                                const s = {minWidth: 50, textAlign: "center", fontSize: "20pt", paddingBottom: "23px"} as React.CSSProperties
                                                 if (text === "bidirect")
-                                                    return <Tag color="processing" style={s}><img src={bidirect}/></Tag>
+                                                    return <Tag color="processing" style={s}>&harr;</Tag>
                                                 else if (text === "srcToDest") {
                                                     return <Tag color="green" style={s}><img src={outbound}/></Tag>
                                                 } else if (text === "destToSrc") {

src/views/Activity.tsx

@@ -212,8 +212,6 @@ export const Activity = () => {
             case "service.user.delete":
                 return renderMultiRowSpan(event.meta.name,"Service User")
             case "user.invite":
-            case "user.block":
-            case "user.unblock":
                 if (user) {
                     return renderMultiRowSpan(user.name ? user.name : user.id,user.email ? user.email : "User")
                 }

src/views/RegularUsers.tsx

@@ -268,10 +268,10 @@ export const RegularUsers = () => {
         if (block) {
             confirmModal.confirm({
                 icon: <ExclamationCircleOutlined/>,
-                title: "Are you sure you want to block " + user.name + "?",
+                title: "Are you sure you want to deactivate \"" + user.name + "\"?",
                 width: 600,
                 content: <Space direction="vertical" size="small">
-                    <Paragraph>Blocking this user will disconnect their devices and disable dashboard access.</Paragraph>
+                    <Paragraph>Disabling this user will disconnect their devices and block dashboard access.</Paragraph>
                 </Space>,
                 onOk() {
                     let userToSave = createUserToSave(user, block)
@@ -313,7 +313,7 @@ export const RegularUsers = () => {
                         <Paragraph>Manage users and their
                             permissions.{(window.location.hostname == "app.netbird.io") ? "Same-domain email users are added automatically on first sign-in." : ""}</Paragraph>
                         <Space direction="vertical" size="large" style={{display: 'flex'}}>
-                            <Row gutter={[16, 24]}>
+                            <Row gutter={[16, 24]} style={{paddingBottom: "0px"}}>
                                 <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
                                     <Input allowClear value={textToSearch} onPressEnter={searchDataTable}
                                            placeholder="Search..." onChange={onChangeTextToSearch}/>
@@ -380,12 +380,6 @@ export const RegularUsers = () => {
                                                     </div>
                                                 }
 
-                                                if ((record as User).status === "blocked") {
-                                                    return <div>{btn}
-                                                        <Tag color="red">blocked</Tag>
-                                                    </div>
-                                                }
-
                                                 return btn
                                             }}
                                     />
@@ -401,12 +395,12 @@ export const RegularUsers = () => {
                                             onFilter={(value: string | number | boolean, record) => (record as any).role.includes(value)}
                                             sorter={(a, b) => ((a as any).role.localeCompare((b as any).role))}/>
                                     {isAdmin && (
-                                        <Column title="Block user" align="center" width="150px" dataIndex="is_blocked"
+                                        <Column title="Active" align="center" width="150px" dataIndex="is_blocked"
                                                 render={(e, record: UserDataTable, index) => {
-                                                    let witch = <Switch size={"small"} checked={e}
+                                                    let witch = <Switch size={"small"} checked={!e}
                                                                         disabled={record.is_current}
                                                                         onClick={(active: boolean) => {
-                                                                            handleBlockUser(active, record)
+                                                                            handleBlockUser(!active, record)
                                                                         }}
                                                     />
 

src/views/SetupKeys.tsx

@@ -329,9 +329,9 @@ export const SetupKeys = () => {
                     <Col span={24}>
                         <Title level={4}>Setup Keys</Title>
                         <Paragraph
-                            style={{
-                                color: dataTable.length ? "black" : "#818183",
-                            }}
+                            // style={{
+                            //     color: dataTable.length ? "black" : "#818183",
+                            // }}
                         >
                             A list of all the setup keys in your account including their name, state, type and
                             expiration.

tailwind.config.js

@@ -1,11 +1,41 @@
 module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: "class", // or 'media' or 'class'
   theme: {
-    extend: {}
+    fontSize: {
+      '2xs': ['0.75rem', { lineHeight: '1.25rem' }],
+      xs: ['0.8125rem', { lineHeight: '1.5rem' }],
+      sm: ['0.875rem', { lineHeight: '1.5rem' }],
+      base: ['1rem', { lineHeight: '1.75rem' }],
+      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+      '5xl': ['3rem', { lineHeight: '1' }],
+      '6xl': ['3.75rem', { lineHeight: '1' }],
+      '7xl': ['4.5rem', { lineHeight: '1' }],
+      '8xl': ['6rem', { lineHeight: '1' }],
+      '9xl': ['8rem', { lineHeight: '1' }],
+    },
+    typography: require('./typography'),
+    extend: {
+      boxShadow: {
+        glow: '0 0 4px rgb(0 0 0 / 0.1)',
+      },
+      maxWidth: {
+        lg: '33rem',
+        '2xl': '40rem',
+        '3xl': '50rem',
+        '5xl': '66rem',
+      },
+      opacity: {
+        1: '0.01',
+        2.5: '0.025',
+        7.5: '0.075',
+        15: '0.15',
+      },
+    },
   },
-  variants: {
-    extend: {}
-  },
-  plugins: []
+  plugins: [require('@tailwindcss/typography')],
 };

typography.js

@@ -0,0 +1,357 @@
+module.exports = ({ theme }) => ({
+  DEFAULT: {
+    css: {
+      '--tw-prose-body': theme('colors.zinc.700'),
+      '--tw-prose-headings': theme('colors.zinc.900'),
+      '--tw-prose-links': theme('colors.orange.500'),
+      '--tw-prose-links-hover': theme('colors.orange.600'),
+      '--tw-prose-links-underline': theme('colors.orange.500 / 0.3'),
+      '--tw-prose-bold': theme('colors.zinc.900'),
+      '--tw-prose-counters': theme('colors.zinc.500'),
+      '--tw-prose-bullets': theme('colors.zinc.300'),
+      '--tw-prose-hr': theme('colors.zinc.900 / 0.05'),
+      '--tw-prose-quotes': theme('colors.zinc.900'),
+      '--tw-prose-quote-borders': theme('colors.zinc.200'),
+      '--tw-prose-captions': theme('colors.zinc.500'),
+      '--tw-prose-code': theme('colors.zinc.900'),
+      '--tw-prose-code-bg': theme('colors.zinc.100'),
+      '--tw-prose-code-ring': theme('colors.zinc.300'),
+      '--tw-prose-th-borders': theme('colors.zinc.300'),
+      '--tw-prose-td-borders': theme('colors.zinc.200'),
+
+      '--tw-prose-invert-body': theme('colors.zinc.400'),
+      '--tw-prose-invert-headings': theme('colors.white'),
+      '--tw-prose-invert-links': theme('colors.orange.400'),
+      '--tw-prose-invert-links-hover': theme('colors.orange.500'),
+      '--tw-prose-invert-links-underline': theme('colors.orange.500 / 0.3'),
+      '--tw-prose-invert-bold': theme('colors.white'),
+      '--tw-prose-invert-counters': theme('colors.zinc.400'),
+      '--tw-prose-invert-bullets': theme('colors.zinc.600'),
+      '--tw-prose-invert-hr': theme('colors.white / 0.05'),
+      '--tw-prose-invert-quotes': theme('colors.zinc.100'),
+      '--tw-prose-invert-quote-borders': theme('colors.zinc.700'),
+      '--tw-prose-invert-captions': theme('colors.zinc.400'),
+      '--tw-prose-invert-code': theme('colors.white'),
+      '--tw-prose-invert-code-bg': theme('colors.zinc.700 / 0.15'),
+      '--tw-prose-invert-code-ring': theme('colors.white / 0.1'),
+      '--tw-prose-invert-th-borders': theme('colors.zinc.600'),
+      '--tw-prose-invert-td-borders': theme('colors.zinc.700'),
+
+      // Base
+      color: 'var(--tw-prose-body)',
+      fontSize: theme('fontSize.sm')[0],
+      lineHeight: theme('lineHeight.7'),
+
+      // Layout
+      '> *': {
+        maxWidth: theme('maxWidth.2xl'),
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        '@screen lg': {
+          maxWidth: theme('maxWidth.3xl'),
+          marginLeft: `calc(50% - min(50%, ${theme('maxWidth.lg')}))`,
+          marginRight: `calc(50% - min(50%, ${theme('maxWidth.lg')}))`,
+        },
+      },
+
+      // Text
+      p: {
+        marginTop: theme('spacing.6'),
+        marginBottom: theme('spacing.6'),
+      },
+      '[class~="lead"]': {
+        fontSize: theme('fontSize.base')[0],
+        ...theme('fontSize.base')[1],
+      },
+
+      // Lists
+      ol: {
+        listStyleType: 'decimal',
+        marginTop: theme('spacing.5'),
+        marginBottom: theme('spacing.5'),
+        paddingLeft: '1.625rem',
+      },
+      'ol[type="A"]': {
+        listStyleType: 'upper-alpha',
+      },
+      'ol[type="a"]': {
+        listStyleType: 'lower-alpha',
+      },
+      'ol[type="A" s]': {
+        listStyleType: 'upper-alpha',
+      },
+      'ol[type="a" s]': {
+        listStyleType: 'lower-alpha',
+      },
+      'ol[type="I"]': {
+        listStyleType: 'upper-roman',
+      },
+      'ol[type="i"]': {
+        listStyleType: 'lower-roman',
+      },
+      'ol[type="I" s]': {
+        listStyleType: 'upper-roman',
+      },
+      'ol[type="i" s]': {
+        listStyleType: 'lower-roman',
+      },
+      'ol[type="1"]': {
+        listStyleType: 'decimal',
+      },
+      ul: {
+        listStyleType: 'disc',
+        marginTop: theme('spacing.5'),
+        marginBottom: theme('spacing.5'),
+        paddingLeft: '1.625rem',
+      },
+      li: {
+        marginTop: theme('spacing.2'),
+        marginBottom: theme('spacing.2'),
+      },
+      ':is(ol, ul) > li': {
+        paddingLeft: theme('spacing[1.5]'),
+      },
+      'ol > li::marker': {
+        fontWeight: '400',
+        color: 'var(--tw-prose-counters)',
+      },
+      'ul > li::marker': {
+        color: 'var(--tw-prose-bullets)',
+      },
+      '> ul > li p': {
+        marginTop: theme('spacing.3'),
+        marginBottom: theme('spacing.3'),
+      },
+      '> ul > li > *:first-child': {
+        marginTop: theme('spacing.5'),
+      },
+      '> ul > li > *:last-child': {
+        marginBottom: theme('spacing.5'),
+      },
+      '> ol > li > *:first-child': {
+        marginTop: theme('spacing.5'),
+      },
+      '> ol > li > *:last-child': {
+        marginBottom: theme('spacing.5'),
+      },
+      'ul ul, ul ol, ol ul, ol ol': {
+        marginTop: theme('spacing.3'),
+        marginBottom: theme('spacing.3'),
+      },
+
+      // Horizontal rules
+      hr: {
+        borderColor: 'var(--tw-prose-hr)',
+        borderTopWidth: 1,
+        marginTop: theme('spacing.16'),
+        marginBottom: theme('spacing.16'),
+        maxWidth: 'none',
+        marginLeft: `calc(-1 * ${theme('spacing.4')})`,
+        marginRight: `calc(-1 * ${theme('spacing.4')})`,
+        '@screen sm': {
+          marginLeft: `calc(-1 * ${theme('spacing.6')})`,
+          marginRight: `calc(-1 * ${theme('spacing.6')})`,
+        },
+        '@screen lg': {
+          marginLeft: `calc(-1 * ${theme('spacing.8')})`,
+          marginRight: `calc(-1 * ${theme('spacing.8')})`,
+        },
+      },
+
+      // Quotes
+      blockquote: {
+        fontWeight: '500',
+        fontStyle: 'italic',
+        color: 'var(--tw-prose-quotes)',
+        borderLeftWidth: '0.25rem',
+        borderLeftColor: 'var(--tw-prose-quote-borders)',
+        quotes: '"\\201C""\\201D""\\2018""\\2019"',
+        marginTop: theme('spacing.8'),
+        marginBottom: theme('spacing.8'),
+        paddingLeft: theme('spacing.5'),
+      },
+      'blockquote p:first-of-type::before': {
+        content: 'open-quote',
+      },
+      'blockquote p:last-of-type::after': {
+        content: 'close-quote',
+      },
+
+      // Headings
+      h1: {
+        color: 'var(--tw-prose-headings)',
+        fontWeight: '700',
+        fontSize: theme('fontSize.2xl')[0],
+        ...theme('fontSize.2xl')[1],
+        marginBottom: theme('spacing.2'),
+      },
+      h2: {
+        color: 'var(--tw-prose-headings)',
+        fontWeight: '600',
+        fontSize: theme('fontSize.lg')[0],
+        ...theme('fontSize.lg')[1],
+        marginTop: theme('spacing.16'),
+        marginBottom: theme('spacing.2'),
+      },
+      h3: {
+        color: 'var(--tw-prose-headings)',
+        fontSize: theme('fontSize.base')[0],
+        ...theme('fontSize.base')[1],
+        fontWeight: '600',
+        marginTop: theme('spacing.10'),
+        marginBottom: theme('spacing.2'),
+      },
+
+      // Media
+      'img, video, figure': {
+        marginTop: theme('spacing.8'),
+        marginBottom: theme('spacing.8'),
+      },
+      'figure > *': {
+        marginTop: '0',
+        marginBottom: '0',
+      },
+      figcaption: {
+        color: 'var(--tw-prose-captions)',
+        fontSize: theme('fontSize.xs')[0],
+        ...theme('fontSize.xs')[1],
+        marginTop: theme('spacing.2'),
+      },
+
+      // Tables
+      table: {
+        width: '100%',
+        tableLayout: 'auto',
+        textAlign: 'left',
+        marginTop: theme('spacing.8'),
+        marginBottom: theme('spacing.8'),
+        lineHeight: theme('lineHeight.6'),
+      },
+      thead: {
+        borderBottomWidth: '1px',
+        borderBottomColor: 'var(--tw-prose-th-borders)',
+      },
+      'thead th': {
+        color: 'var(--tw-prose-headings)',
+        fontWeight: '600',
+        verticalAlign: 'bottom',
+        paddingRight: theme('spacing.2'),
+        paddingBottom: theme('spacing.2'),
+        paddingLeft: theme('spacing.2'),
+      },
+      'thead th:first-child': {
+        paddingLeft: '0',
+      },
+      'thead th:last-child': {
+        paddingRight: '0',
+      },
+      'tbody tr': {
+        borderBottomWidth: '1px',
+        borderBottomColor: 'var(--tw-prose-td-borders)',
+      },
+      'tbody tr:last-child': {
+        borderBottomWidth: '0',
+      },
+      'tbody td': {
+        verticalAlign: 'baseline',
+      },
+      tfoot: {
+        borderTopWidth: '1px',
+        borderTopColor: 'var(--tw-prose-th-borders)',
+      },
+      'tfoot td': {
+        verticalAlign: 'top',
+      },
+      ':is(tbody, tfoot) td': {
+        paddingTop: theme('spacing.2'),
+        paddingRight: theme('spacing.2'),
+        paddingBottom: theme('spacing.2'),
+        paddingLeft: theme('spacing.2'),
+      },
+      ':is(tbody, tfoot) td:first-child': {
+        paddingLeft: '0',
+      },
+      ':is(tbody, tfoot) td:last-child': {
+        paddingRight: '0',
+      },
+
+      // Inline elements
+      a: {
+        color: 'var(--tw-prose-links)',
+        textDecoration: 'underline transparent',
+        fontWeight: '500',
+        transitionProperty: 'color, text-decoration-color',
+        transitionDuration: theme('transitionDuration.DEFAULT'),
+        transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
+        '&:hover': {
+          color: 'var(--tw-prose-links-hover)',
+          textDecorationColor: 'var(--tw-prose-links-underline)',
+        },
+      },
+      ':is(h1, h2, h3) a': {
+        fontWeight: 'inherit',
+      },
+      strong: {
+        color: 'var(--tw-prose-bold)',
+        fontWeight: '600',
+      },
+      ':is(a, blockquote, thead th) strong': {
+        color: 'inherit',
+      },
+      code: {
+        color: 'var(--tw-prose-code)',
+        borderRadius: theme('borderRadius.lg'),
+        paddingTop: theme('padding.1'),
+        paddingRight: theme('padding[1.5]'),
+        paddingBottom: theme('padding.1'),
+        paddingLeft: theme('padding[1.5]'),
+        boxShadow: 'inset 0 0 0 1px var(--tw-prose-code-ring)',
+        backgroundColor: 'var(--tw-prose-code-bg)',
+        fontSize: theme('fontSize.2xs'),
+      },
+      ':is(a, h1, h2, h3, blockquote, thead th) code': {
+        color: 'inherit',
+      },
+      'h2 code': {
+        fontSize: theme('fontSize.base')[0],
+        fontWeight: 'inherit',
+      },
+      'h3 code': {
+        fontSize: theme('fontSize.sm')[0],
+        fontWeight: 'inherit',
+      },
+
+      // Overrides
+      ':is(h1, h2, h3) + *': {
+        marginTop: '0',
+      },
+      '> :first-child': {
+        marginTop: '0 !important',
+      },
+      '> :last-child': {
+        marginBottom: '0 !important',
+      },
+    },
+  },
+  invert: {
+    css: {
+      '--tw-prose-body': 'var(--tw-prose-invert-body)',
+      '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
+      '--tw-prose-links': 'var(--tw-prose-invert-links)',
+      '--tw-prose-links-hover': 'var(--tw-prose-invert-links-hover)',
+      '--tw-prose-links-underline': 'var(--tw-prose-invert-links-underline)',
+      '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
+      '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
+      '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
+      '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
+      '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
+      '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
+      '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
+      '--tw-prose-code': 'var(--tw-prose-invert-code)',
+      '--tw-prose-code-bg': 'var(--tw-prose-invert-code-bg)',
+      '--tw-prose-code-ring': 'var(--tw-prose-invert-code-ring)',
+      '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
+      '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
+    },
+  },
+})