@xyd-js/atlas 0.1.0-xyd.8 → 0.1.0-xyd.99

package/dist/styles.css

@@ -0,0 +1,89 @@
+@layer overrides {
+    :root {
+        --oas-method-get-color: #15803d;
+        --oas-method-get-bg: rgba(74, 222, 128, .2);
+        --oas-method-get-color--active: var(--white);
+        --oas-method-get-bg--active: #2ab673;
+
+        --oas-method-post-color: #1D4ED8;
+        --oas-method-post-bg: rgba(96, 165, 250, .2);
+        --oas-method-post-color--active: var(--white);
+        --oas-method-post-bg--active: #3064e3;
+
+        --oas-method-put-color: #C28C30;
+        --oas-method-put-bg: rgba(250, 204, 21, .2);
+        --oas-method-put-color--active: var(--white);
+        --oas-method-put-bg--active: #C28C30;
+
+        --oas-method-delete-color: #B91C1C;
+        --oas-method-delete-bg: rgba(248, 114, 114, 0.2);
+        --oas-method-delete-color--active: var(--white);
+        --oas-method-delete-bg--active: #cb3a32;
+
+        --oas-method-patch-color: #c2410c;
+        --oas-method-patch-bg: rgba(251, 146, 60, .2);
+        --oas-method-patch-color--active: var(--white);
+        --oas-method-patch-bg--active: #DA622B;
+    }
+
+    /* HTTP Method Colors */
+    [atlas-oas-method="GET"] {
+        --method-color: var(--oas-method-get-color);
+        --method-bg: var(--oas-method-get-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-get-bg--active);
+            --method-color: var(--oas-method-get-color--active);
+        }
+    }
+
+    [atlas-oas-method="POST"] {
+        --method-color: var(--oas-method-post-color);
+        --method-bg: var(--oas-method-post-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-post-bg--active);
+            --method-color: var(--oas-method-post-color--active);
+        }
+    }
+
+    [atlas-oas-method="PUT"] {
+        --method-color: var(--oas-method-put-color);
+        --method-bg: var(--oas-method-put-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-put-bg--active);
+            --method-color: var(--oas-method-put-color--active);
+        }
+    }
+
+    [atlas-oas-method="DELETE"] {
+        --method-color: var(--oas-method-delete-color);
+        --method-bg: var(--oas-method-delete-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-delete-bg--active);
+            --method-color: var(--oas-method-delete-color--active);
+        }
+    }
+
+    [atlas-oas-method="PATCH"] {
+        --method-color: var(--oas-method-patch-color);
+        --method-bg: var(--oas-method-patch-bg);
+
+        &[data-active="true"] {
+            --method-bg: var(--oas-method-patch-bg--active);
+            --method-color: var(--oas-method-patch-color--active);
+        }
+    }
+
+    [atlas-oas-method] {
+        color: var(--method-color);
+    }
+
+    [atlas-oas-method] xyd-badge {
+        background-color: var(--method-bg);
+        color: var(--method-color);
+        font-weight: var(--xyd-font-weight-bold);
+    }
+}

package/dist/tokens.css

@@ -0,0 +1,60 @@
+:root {
+  /* Ref tokens - Base values */
+  --XydAtlas-Ref-Palette-White: #FFFFFF;
+
+  --XydAtlas-Ref-Palette-Primary-60: #7051d4;
+  --XydAtlas-Ref-Palette-Primary-70: #6045b9;
+  --XydAtlas-Ref-Palette-Primary-80: #4f399e;
+
+  --XydAtlas-Ref-Palette-Neutral-10: #F8F9FA;
+  --XydAtlas-Ref-Palette-Neutral-20: #F1F3F5;
+  --XydAtlas-Ref-Palette-Neutral-30: #E9ECEF;
+  --XydAtlas-Ref-Palette-Neutral-40: #DEE2E6;
+  --XydAtlas-Ref-Palette-Neutral-70: #6C757D;
+  --XydAtlas-Ref-Palette-Neutral-80: #495057;
+  --XydAtlas-Ref-Palette-Neutral-100: #212529;
+
+  /* System tokens - Semantic values */
+  --XydAtlas-Sys-Color-Primary: var(--XydAtlas-Ref-Palette-Primary-60);
+  --XydAtlas-Sys-Color-Primary--hover: var(--XydAtlas-Ref-Palette-Primary-70);
+  --XydAtlas-Sys-Color-Primary--active: var(--XydAtlas-Ref-Palette-Primary-80);
+  
+  --XydAtlas-Sys-Color-Surface: var(--XydAtlas-Ref-Palette-Neutral-10);
+  --XydAtlas-Sys-Color-Surface--hover: var(--XydAtlas-Ref-Palette-Neutral-20);
+  --XydAtlas-Sys-Color-Surface--active: var(--XydAtlas-Ref-Palette-Neutral-30);
+  
+  --XydAtlas-Sys-Color-Text-Primary: var(--XydAtlas-Ref-Palette-Neutral-100);
+  --XydAtlas-Sys-Color-Text-Secondary: var(--XydAtlas-Ref-Palette-Neutral-80);
+  --XydAtlas-Sys-Color-Text-Tertiary: var(--XydAtlas-Ref-Palette-Neutral-70);
+  
+  --XydAtlas-Sys-Color-Border: var(--XydAtlas-Ref-Palette-Neutral-30);
+  --XydAtlas-Sys-Color-Border--hover: var(--XydAtlas-Ref-Palette-Neutral-40);
+  --XydAtlas-Sys-Color-Border--active: var(--XydAtlas-Ref-Palette-Primary-60);
+
+  /* Component tokens - Specific component values */
+  /* ApiRef Properties */
+  --XydAtlas-Component-ApiRef-Properties__color-description: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-ApiRef-Properties__color-propName: var(--XydAtlas-Sys-Color-Text-Primary);
+  --XydAtlas-Component-ApiRef-Properties__color-propType: var(--XydAtlas-Sys-Color-Text-Tertiary);
+  --XydAtlas-Component-ApiRef-Properties__color--active: var(--XydAtlas-Sys-Color-Primary);
+  --XydAtlas-Component-ApiRef-Properties__color-border: var(--XydAtlas-Sys-Color-Border);
+
+  /* ApiRef Item */
+  --XydAtlas-Component-ApiRef-Item__color-border: var(--XydAtlas-Sys-Color-Border);
+  --XydAtlas-Component-ApiRef-Item__color-navbar: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-ApiRef-Item__background-navbar: var(--XydAtlas-Ref-Palette-Neutral-10);
+
+  /* Code Sample */
+  --XydAtlas-Component-Code-Sample__color-border: var(--XydAtlas-Sys-Color-Border);
+  --XydAtlas-Component-Code-Sample__color: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-Code-Sample__color--active: var(--XydAtlas-Sys-Color-Primary);
+  --XydAtlas-Component-Code-Sample__color-background: var(--XydAtlas-Sys-Color-Surface--hover);
+  --XydAtlas-Component-Code-Sample__color-markBorder--active: var(--XydAtlas-Sys-Color-Primary);
+  --XydAtlas-Component-Code-Sample__color-markBackground--active: var(--XydAtlas-Sys-Color-Surface--hover);
+
+  /* Code Sample Buttons */
+  --XydAtlas-Component-Code-SampleButtons__color-containerBackground: var(--XydAtlas-Sys-Color-Surface);
+  --XydAtlas-Component-Code-SampleButtons__color-background--active: var(--XydAtlas-Ref-Palette-White);
+  --XydAtlas-Component-Code-SampleButtons__color: var(--XydAtlas-Ref-Palette-Neutral-40);
+  --XydAtlas-Component-Code-SampleButtons__color--active: var(--XydAtlas-Sys-Color-Text-Primary);
+} 

package/dist/xydPlugin.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from '@xyd-js/plugins';
+
+declare function XydAtlasPlugin(): Plugin;
+
+export { XydAtlasPlugin as default };

package/dist/xydPlugin.js

@@ -0,0 +1,2 @@
+import{SurfaceTarget as e}from"@xyd-js/framework";import{a as t,c as r}from"./Update-0XruJHjj-COLbZvRj.js";import i from"react";import"radix-ui";import"lucide-react";function a(e){var a,o=(null===(a=null==e?void 0:e.pageMeta)||void 0===a?void 0:a.openapi)||"",n=o.includes("#")?o.split("#"):["",o],u=t(n,2);u[0];var l=u[1],s=(void 0===l?"":l).split(" "),d=t(s,1)[0],m=void 0===d?"":d;if(!m)return null;if(m.includes("components/schemas"))return null;var p=m.toUpperCase();return"DELETE"===m&&(p="DEL"),i.createElement("div",{"data-active":(null==e?void 0:e.active)?"true":void 0,"atlas-oas-method":m},i.createElement(r,{size:"xs"},p))}function o(){return function(t){return{name:"atlas-xyd-plugin",customComponents:{AtlasSidebarItemRight:{component:a,surface:e.SidebarItemRight}}}}}export{o as default};
+//# sourceMappingURL=xydPlugin.js.map

package/dist/xydPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xydPlugin.js","sources":["../packages/xyd-plugin/SidebarItem.tsx","../packages/xyd-plugin/index.ts"],"sourcesContent":["import React from \"react\"\n\nimport { Badge } from \"@xyd-js/components/writer\"\n\nexport function SidebarItemRight(props: any) {\n    const openapi = props?.pageMeta?.openapi || \"\"\n    const [_, region = \"\"] = openapi.includes(\"#\") ? openapi.split(\"#\") : [\"\", openapi]\n    const [method = \"\"] = region.split(\" \")\n\n    if (!method) {\n        return null\n    }\n    if (method.includes(\"components/schemas\")) {\n        return null\n    }\n\n    let methodText = method.toUpperCase()\n    if (method === \"DELETE\") {\n        methodText = \"DEL\"\n    }\n\n    return <div data-active={props?.active ? \"true\" : undefined} atlas-oas-method={method}>\n        <Badge size=\"xs\">\n            {methodText}\n        </Badge>\n    </div>\n}","import { Settings } from \"@xyd-js/core\"\nimport { Plugin } from \"@xyd-js/plugins\"\nimport { SurfaceTarget } from \"@xyd-js/framework\"\n\nimport { SidebarItemRight } from \"./SidebarItem\"\n\nexport default function XydAtlasPlugin(): Plugin {\n    return function (settings: Settings) {\n        return {\n            name: \"atlas-xyd-plugin\",\n            customComponents: {\n                AtlasSidebarItemRight: {\n                    component: SidebarItemRight,\n                    surface: SurfaceTarget.SidebarItemRight,\n                }\n            }\n        }\n    }\n}\n\n"],"names":["SidebarItemRight","props","openapi","_a","pageMeta","_ref","includes","split","_ref2","_slicedToArray","_ref2$","_region$split","_region$split2$","method","methodText","toUpperCase","React","createElement","active","undefined","Badge","size","XydAtlasPlugin","settings","name","customComponents","AtlasSidebarItemRight","component","surface","SurfaceTarget"],"mappings":"sKAIM,SAAUA,EAAiBC,SACvBC,GAAyB,QAAfC,EAAAF,aAAK,EAALA,EAAOG,gBAAQ,IAAAD,OAAA,EAAAA,EAAED,UAAW,GAC5CG,EAAyBH,EAAQI,SAAS,KAAOJ,EAAQK,MAAM,KAAO,CAAC,GAAIL,GAAQM,EAAAC,EAAAJ,EAAA,GAA3EG,EAAA,GAAAE,IAAAA,EAAAF,EAAA,GACRG,QADgB,IAAAD,EAAG,GAAEA,GACQH,MAAM,KAAIK,EAAAH,EAAAE,EAAA,GAAA,GAAhCE,OAAM,IAAAD,EAAG,GAAEA,EAElB,IAAKC,EACD,OAAO,KAEX,GAAIA,EAAOP,SAAS,sBAChB,OAAO,KAGX,IAAIQ,EAAaD,EAAOE,cAKxB,MAJe,WAAXF,IACAC,EAAa,OAGVE,EAAAC,cAAA,MAAA,CAAK,eAAahB,aAAK,EAALA,EAAOiB,QAAS,YAASC,EAAW,mBAAkBN,GAC3EG,EAAAC,cAACG,EAAK,CAACC,KAAK,MACPP,GAGb,CCpBc,SAAUQ,IACpB,OAAO,SAAUC,GACb,MAAO,CACHC,KAAM,mBACNC,iBAAkB,CACdC,sBAAuB,CACnBC,UAAW3B,EACX4B,QAASC,EAAc7B,oBAK3C"}

package/index.ts

@@ -1,2 +1,2 @@
-
 export * from "./src/components/Atlas"
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/atlas",
-  "version": "0.1.0-xyd.8",
+  "version": "0.1.0-xyd.99",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -8,60 +8,59 @@
   "exports": {
     "./package.json": "./package.json",
     "./index.css": "./dist/index.css",
+    "./tokens.css": "./dist/tokens.css",
     ".": {
       "import": "./dist/index.js"
+    },
+    "./xydPlugin": {
+      "import": "./dist/xydPlugin.js"
     }
   },
   "dependencies": {
-    "@code-hike/lighter": "^1.0.0",
-    "@radix-ui/react-tabs": "^1.1.1",
+    "@code-hike/lighter": "^1.0.3",
+    "radix-ui": "^1.4.2",
     "codehike": "^1.0.2",
     "lucide-react": "^0.447.0",
-    "@xyd-js/uniform": "0.1.0-xyd.7"
+    "@xyd-js/uniform": "0.1.0-xyd.98",
+    "@xyd-js/components": "0.1.0-xyd.94"
   },
   "peerDependencies": {
-    "react": "^19.0.0"
+    "react": "^19.1.0",
+    "@xyd-js/framework": "0.1.0-xyd.115",
+    "@xyd-js/plugins": "0.1.0-xyd.83",
+    "@xyd-js/core": "0.1.0-xyd.96"
   },
   "devDependencies": {
-    "@linaria/atomic": "^6.2.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "@linaria/core": "^6.2.0",
-    "@babel/preset-typescript": "^7.26.0",
     "@babel/preset-react": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-flow": "^7.25.9",
-    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@wyw-in-js/rollup": "^0.5.5",
     "@wyw-in-js/vite": "^0.5.5",
-    "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-onboarding": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
     "@storybook/react": "^8.4.5",
     "@storybook/react-vite": "^8.4.5",
     "@storybook/test": "^8.4.5",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
-    "postcss-import": "^16.1.0",
     "rollup": "^4.27.4",
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "tsup": "^8.3.0",
     "rimraf": "^3.0.2",
-    "prop-types": "^15.8.1",
     "storybook": "^8.4.5",
-    "@xyd-js/gql": "0.1.0-xyd.5"
+    "vite": "^7.0.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "unist-util-visit": "^5.0.0",
+    "@mdx-js/mdx": "^3.1.0"
   },
   "scripts": {
     "clean": "rimraf build",
     "prebuild": "pnpm clean",
     "build": "rollup -c rollup.config.js",
+    "dev": "rollup -c rollup.config.js --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   }

package/packages/xyd-plugin/SidebarItem.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { Badge } from "@xyd-js/components/writer"
+
+export function SidebarItemRight(props: any) {
+    const openapi = props?.pageMeta?.openapi || ""
+    const [_, region = ""] = openapi.includes("#") ? openapi.split("#") : ["", openapi]
+    const [method = ""] = region.split(" ")
+
+    if (!method) {
+        return null
+    }
+    if (method.includes("components/schemas")) {
+        return null
+    }
+
+    let methodText = method.toUpperCase()
+    if (method === "DELETE") {
+        methodText = "DEL"
+    }
+
+    return <div data-active={props?.active ? "true" : undefined} atlas-oas-method={method}>
+        <Badge size="xs">
+            {methodText}
+        </Badge>
+    </div>
+}

package/packages/xyd-plugin/index.ts

@@ -0,0 +1,20 @@
+import { Settings } from "@xyd-js/core"
+import { Plugin } from "@xyd-js/plugins"
+import { SurfaceTarget } from "@xyd-js/framework"
+
+import { SidebarItemRight } from "./SidebarItem"
+
+export default function XydAtlasPlugin(): Plugin {
+    return function (settings: Settings) {
+        return {
+            name: "atlas-xyd-plugin",
+            customComponents: {
+                AtlasSidebarItemRight: {
+                    component: SidebarItemRight,
+                    surface: SurfaceTarget.SidebarItemRight,
+                }
+            }
+        }
+    }
+}
+

package/rollup.config.js

@@ -1,3 +1,6 @@
+import fs from 'fs';
+import {createRequire} from 'module';
+
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
@@ -6,7 +9,6 @@ import {terser} from 'rollup-plugin-terser';
 import babel from '@rollup/plugin-babel';
 import css from 'rollup-plugin-css-only';
 import wyw from '@wyw-in-js/rollup';
-import {createRequire} from 'module';
 
 const require = createRequire(import.meta.url);
 const {
@@ -21,20 +23,35 @@ const external = [
     ...Object.keys(devDependencies),
 ];
 
+// Function to copy tokens.css to dist
+function copyCss(names) {
+    return {
+        name: `copy-${names.join('-')}-css`,
+        writeBundle() {
+            names.forEach(name => {
+                const css = fs.readFileSync(`src/styles/${name}.css`, 'utf8');
+                fs.mkdirSync('dist', { recursive: true });
+                fs.writeFileSync(`dist/${name}.css`, css);
+            });
+        }
+    };
+}
+
 export default [
     {
-        input: 'index.ts',
-        output: {
-            dir: 'dist',
-            format: 'esm',
-            sourcemap: true,
+        input: {
+            index: 'index.ts',
+            xydPlugin: 'packages/xyd-plugin/index.ts',
         },
+        output: [
+            {
+                dir: 'dist',
+                format: 'esm',
+                sourcemap: true,
+                entryFileNames: '[name].js'
+            }
+        ],
         plugins: [
-            // alias({ TODO: finish?
-            //     entries: [
-            //         {find: '@', replacement: resolve(__dirname, 'src')}
-            //     ]
-            // }),
             wyw({
                 include: ['**/*.{ts,tsx}'],
                 babelOptions: {
@@ -43,10 +60,28 @@ export default [
                         '@babel/preset-react'
                     ],
                 },
+                // classNameSlug: (hash, title, {file}) => {
+                //     // Get the full path after 'src/components/'
+                //     const pathParts = file.split('/');
+                //     const componentsIndex = pathParts.indexOf('components');
+                //     if (componentsIndex === -1) return `XydAtlas-Component-${title}`;
+                    
+                //     // Get everything after 'components' directory
+                //     const componentPath = pathParts
+                //         .slice(componentsIndex + 1)
+                //         .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
+                //         .join('-');
+                    
+                //     // Use the title as the style name (it's already the variable name)
+                //     const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
+                    
+                //     return `XydAtlas-Component-${componentPath}__${styleName}`;
+                // }
             }),
             css({
                 output: 'index.css',
             }),
+            copyCss(['tokens', 'styles']),
             resolve(),
             commonjs(),
             typescript({
@@ -67,10 +102,19 @@ export default [
     {
         input: 'index.ts',
         output: {
-            dir: 'dist',
+            file: 'dist/index.d.ts',
             format: 'es',
         },
         plugins: [dts()],
         external
     },
+    {
+        input: 'packages/xyd-plugin/index.ts',
+        output: {
+            file: 'dist/xydPlugin.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    }
 ];

package/src/components/ApiRef/ApiRefItem/ApiRefItem.styles.tsx

@@ -1,70 +1,102 @@
-import {css} from "@linaria/core";
-
-export const $title = {
-    host: css`
-        font-size: 30px;
-        font-weight: 400;
-    `,
-    link: css`
-    `,
-}
-
-export const $navbar = {
-    host: css`
-    `,
-    container: css`
-        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%);
-
-        padding: 8px;
-
-        border: 1px solid var(--atlas-comp-apiref-item-border-color);
-        border-radius: 8px;
-
-        font-size: 13px;
-    `,
-    label: css`
-        color: var(--atlas-comp-apiref-item-navbar-color);
-
-        margin-right: 4px;
-    `,
-}
-
-export const $refItem = {
-    host: css`
+import { css } from "@linaria/core";
+
+export const ApiRefItemTitleHost = css`
+    font-weight: var(--xyd-font-weight-normal);
+`;
+
+export const ApiRefItemTitleLink = css`
+`;
+
+export const ApiRefItemNavbarHost = css`
+    margin: 20px 0px;
+`;
+
+export const ApiRefItemNavbarContainer = css`
+    background: linear-gradient(45deg, var(--XydAtlas-Component-ApiRef-Item__background-navbar) 0%, var(--XydAtlas-Component-ApiRef-Item__background-navbar) 100%);
+    padding: 8px;
+    border: 1px solid var(--XydAtlas-Component-ApiRef-Item__color-border);
+    border-radius: 8px;
+    display: flex;
+    gap: 4px;
+    overflow: scroll;
+`;
+
+export const ApiRefItemNavbarLabel = css`
+    color: var(--XydAtlas-Component-ApiRef-Item__color-navbar);
+    margin-right: 4px;
+`;
+
+export const ApiRefItemNavbarSubtitle = css`
+    display: flex;
+    letter-spacing: 1px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+`;
+
+export const ApiRefItemHost = css`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding-bottom: 25px;
+
+    &[data-has-examples="true"] {
+        atlas-apiref-item-showcase {
+            display: grid;
+            gap: 100px;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+
+            @media (max-width: 767px) {
+                grid-template-columns: 1fr;
+            }
+        }
+    }
+`;
+
+export const ApiRefItemGrid = css`
+    align-items: normal;
+`;
+
+export const ApiRefItemDefinitionsHost = css`
+`;
+
+export const ApiRefItemDefinitionsItem = css`
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    margin-bottom: 25px;
+
+    margin-top: var(--space-xxlarge);
+
+    [part="controls"] {
         display: flex;
-        flex-direction: column;
+        align-items: center;
         gap: 16px;
+    }
+
+    > [part="header"] {
+        h2, h3, h4, h5, h6 {
+            margin: 0;
+        }
+
+        border-bottom: 1px solid var(--XydAtlas-Component-ApiRef-Item__color-border);
 
-        padding-bottom: 25px;
-    `,
-    grid: css`
         display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        align-items: normal;
-        gap: 100px;
-    `,
-}
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        gap: 16px;
 
-export const $properties = {
-    host: css`
+        > :first-child {
+            justify-self: start;
+        }
 
-    `,
-    item: css`
-        display: flex;
-        flex-direction: column;
-        gap: 25px;
-
-        margin-bottom: 25px;
-    `,
-}
-
-export const $subtitle = {
-    host: css`
-        font-size: 15px;
-        font-weight: 600;
-    `,
-    link: css`
-        text-decoration: none;
-    `,
-}
+        > :not(:first-child) {
+            justify-self: end;
+        }
+    }
+`;
 
+export const DefinitionBody = css`
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+`