@chassis-ui/docs 0.1.9 → 0.2.0

package/src/layouts/header/Navigation.astro

@@ -17,7 +17,7 @@ interface Props {
   title: string
 }
 
-const { layout, title } = Astro.props
+const { layout } = Astro.props
 const { pathname } = Astro.url
 const isActive = (path: string) => {
   if (path === '/') {
@@ -31,8 +31,8 @@ const isActive = (path: string) => {
 }
 ---
 
-<header class="navbar navbar-expand-large cxd-navbar sticky-top">
-  <nav class="container-2xlarge" aria-label="Main navigation">
+<header class="navbar large:navbar-expand cxd-navbar sticky-top">
+  <nav class="container 2xlarge" aria-label="Main navigation">
     {
       layout === 'docs' && (
         <div class="cxd-navbar-toggle">
@@ -47,14 +47,14 @@ const isActive = (path: string) => {
             <svg class="icon icon-large" aria-hidden="true">
               <use href="#bars-solid" />
             </svg>
-            <span class="d-none fs-6 pe-2xsmall">Browse</span>
+            <span class="d-none large:d-inline fs-6 pe-2xsmall">Browse</span>
           </button>
         </div>
       )
     }
-    {layout !== 'docs' && <div class="d-large-none" style="width: 4.25rem;" />}
+    {layout !== 'docs' && <div class="large:d-none" style="width: 4.25rem;" />}
 
-    <a class="navbar-brand me-large-medium" href="/" aria-label="Chassis">
+    <a class="navbar-brand large:me-medium" href="/" aria-label="Chassis">
       <img src="/static/images/site-logo.svg" alt="Chassis UI" width="123" height="32" />
     </a>
 
@@ -62,7 +62,7 @@ const isActive = (path: string) => {
       <div class="cxd-search" id="docsearch"></div>
 
       <button
-        class="navbar-toggler d-flex d-large-none order-3 p-xsmall"
+        class="navbar-toggler d-flex large:d-none order-3 p-xsmall"
         type="button"
         data-cx-toggle="offcanvas"
         data-cx-target="#cxdNavbar"
@@ -74,7 +74,8 @@ const isActive = (path: string) => {
     </div>
 
     <div
-      class="offcanvas-large offcanvas-end flex-grow-1"
+      class="offcanvas large:offcanvas offcanvas-end flex-grow-1"
+      role="dialog"
       tabindex="-1"
       id="cxdNavbar"
       aria-labelledby="cxdNavbarOffcanvasLabel"
@@ -89,53 +90,45 @@ const isActive = (path: string) => {
           data-cx-target="#cxdNavbar"></button>
       </div>
 
-      <div class="offcanvas-body p-large pt-0 p-large-0">
-        <hr class="d-large-none text-white-50" />
-        <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 mx-large-medium">
+      <div class="offcanvas-body p-large pt-0 large:p-0">
+        <hr class="large:d-none" />
+        <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 large:mx-medium">
           <NavLink active={isActive('/tokens')} href="/tokens">Tokens</NavLink>
           <NavLink active={isActive('/figma')} href="/figma">Figma</NavLink>
           <NavLink active={isActive('/css')} href="/css">CSS</NavLink>
           <NavLink active={isActive('/assets')} href="/assets">Assets</NavLink>
           <NavLink active={isActive('/icons')} href="/icons">Icons</NavLink>
-          <li class="nav-item dropdown ms-medium">
-            <a
-              class="nav-link dropdown-toggle"
-              href="/#"
-              role="button"
-              data-cx-toggle="dropdown"
-              aria-expanded="false">More</a
-            >
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="/examples">Examples</a></li>
-              <li><a class="dropdown-item" href="/blog">Blog</a></li>
-            </ul>
+          <li class="nav-item col-12 large:col-auto large:d-flex">
+            <div class="vr d-none large:d-flex my-auto large:mx-2"></div>
+            <hr class="large:d-none" />
           </li>
+          <NavLink active={isActive('/examples')} href="/examples">Examples</NavLink>
         </ul>
 
-        <hr class="d-large-none" />
+        <hr class="large:d-none" />
 
-        <ul class="navbar-nav flex-row flex-wrap ms-medium-auto align-items-center">
+        <ul class="navbar-nav flex-row flex-wrap medium:ms-auto align-items-center">
           <NavLink
-            class="nav-link px-0 px-large-2"
+            class="nav-link px-0 large:px-2"
             href={getConfig().github_org}
             target="_blank"
             rel="noopener"
           >
             <svg class="icon"><title>GitHub</title><use href="#github-brand"></use></svg>
-            <small class="d-large-none ms-xsmall">GitHub</small>
+            <small class="large:d-none ms-xsmall">GitHub</small>
           </NavLink>
           <NavLink
-            class="nav-link px-0 px-large-2"
+            class="nav-link px-0 large:px-2"
             href={`https://x.com/${getConfig().x}`}
             target="_blank"
             rel="noopener"
           >
             <svg class="icon"><title>X</title><use href="#x-twitter-brand"></use></svg>
-            <small class="d-large-none ms-xsmall">X</small>
+            <small class="large:d-none ms-xsmall">X</small>
           </NavLink>
-          <li class="nav-item col-12 col-large-auto">
-            <div class="vr d-none d-large-flex h-100 mx-large-2 text-white"></div>
-            <hr class="d-large-none" />
+          <li class="nav-item col-12 large:col-auto">
+            <div class="vr d-none large:d-flex h-100 large:mx-2"></div>
+            <hr class="large:d-none" />
           </li>
 
           <li class="nav-item dropdown">

package/src/layouts/header/Skippy.astro

@@ -16,7 +16,7 @@ const { layout } = Astro.props
 ---
 
 <div class="skippy visually-hidden-focusable overflow-hidden">
-  <div class="container-xlarge">
+  <div class="container xlarge">
     <a class="d-inline-flex p-xsmall m-xsmall" href="#content">Skip to main content</a>
     {
       layout === 'docs' && (

package/src/libs/utils.ts

@@ -107,9 +107,12 @@ export function getSiteUrl(config: any) {
     return `http://${host}:${port}`
   }
 
-  // Vercel Production: Live production deployment
+  // Vercel Production: Prefer config.baseURL because it already has the correct
+  // path-prefixed chassis-ui.com URL (e.g. https://chassis-ui.com/tokens/).
+  // VERCEL_PROJECT_PRODUCTION_URL is the sub-project's own custom domain
+  // (e.g. tokens.chassis-ui.com) which is NOT the canonical URL we want in sitemaps.
   if (process.env.VERCEL_ENV === 'production') {
-    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+    return config.baseURL || `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
   }
 
   // Vercel Preview: Branch deployments and previews

package/src/scss/_callouts.scss

@@ -3,7 +3,7 @@
 //
 
 .cxd-callout {
-  --#{$prefix}link-main-color-rgb: var(--cxd-callout-link);
+  --#{$prefix}link-main-color: var(--cxd-callout-link);
   --#{$prefix}code-color: var(--cxd-callout-code-color);
 
   padding: 1.25rem;

package/src/scss/_docsearch.scss

@@ -1,53 +1,68 @@
 // stylelint-disable selector-class-pattern
 
 :root {
+  /* Colors */
   --docsearch-primary-color: var(--cx-primary);
+  --docsearch-soft-primary-color: var(--cx-primary-fg-subtle);
+  --docsearch-subtle-color: var(--cx-border-subtle);
   --docsearch-text-color: var(--cx-fg-main);
-  --docsearch-spacing: var(--cx-space-medium);
-  // --docsearch-icon-stroke-width: 1.4;
-  --docsearch-highlight-color: var(--cx-primary);
-  --docsearch-muted-color: var(--cx-fg-subtle);
+  --docsearch-error-color: var(--cx-danger-fg-main);
+  --docsearch-success-color: var(--cx-success-fg-main);
+  --docsearch-secondary-text-color: var(--cx-fg-subtle);
+  --docsearch-background-color: var(--cx-bg-main);
+  --docsearch-icon-color: var(--cx-fg-subtle);
   --docsearch-container-background: var(--cx-black-dim-main);
   --docsearch-logo-color: var(--cx-primary);
-  // --docsearch-modal-width: 560px;
+  --docsearch-muted-color: var(--cx-fg-subtle);
+  --docsearch-muted-color-darker: var(--cx-fg-slight);
+
+  /* Spacing & Layout */
+  --docsearch-spacing: var(--cx-space-medium);
+  --docsearch-border-radius: var(--cx-border-radius-medium);
+  --docsearch-icon-stroke-width: var(--cx-border-width-medium);
+
+  /* Highlights & Focus */
+  --docsearch-focus-color: var(--cx-primary);
+  --docsearch-highlight-color: var(--cx-primary);
+
+  /* Button */
+  --docsearch-search-button-background: var(--cx-bg-main);
+  --docsearch-search-button-text-color: var(--cx-fg-subtle);
+
+  /* Modal */
+  --docsearch-modal-width: 640px;
   // --docsearch-modal-height: 600px;
+  // --docsearch-modal-variable-height: 60dvh;
   --docsearch-modal-background: var(--cx-bg-even);
-  --docsearch-modal-shadow: var(--cx-box-shadow-large); // inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-modal-shadow: var(--cx-box-shadow-large);
+
+  /* Searchbox */
   // --docsearch-searchbox-height: 56px;
-  --docsearch-searchbox-background: var(--cx-bg-main);
-  --docsearch-searchbox-focus-background: var(--cx-bg-hover);
-  // --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+  // --docsearch-searchbox-initial-height: 56px;
+  --docsearch-searchbox-background: var(--cx-bg-even);
+  --docsearch-searchbox-focus-background: var(--cx-bg-main);
+  // --docsearch-actions-width: 99px;
+  // --docsearch-actions-height: 44px;
+
+  /* Hit */
   // --docsearch-hit-height: 56px;
   --docsearch-hit-color: var(--cx-fg-main);
-  --docsearch-hit-active-color: var(--cx-primary-fg-solid);
+  --docsearch-hit-highlight-color: var(--cx-bg-highlight);
   --docsearch-hit-background: var(--cx-bg-main);
-  --docsearch-hit-shadow: none;
-  // --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  // --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-  // --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 1px 0 rgba(30, 35, 90, .4);
-  // --docsearch-footer-height: 44px;
+
+  /* Key */
+  --docsearch-key-background: var(--cx-bg-main);
+  --docsearch-key-color: var(--cx-fg-subtle);
+  --docsearch-key-pressed-shadow: var(--cx-box-shadow-small);
+
+  /* Footer */
+  --docsearch-footer-height: 52px;
   --docsearch-footer-background: var(--cx-bg-evident);
-  --docsearch-footer-shadow: none; // inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-}
+  --docsearch-footer-shadow: var(--cx-box-shadow-small);
 
-@include color-mode(dark, true) {
-  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
-  // in html[data-theme="dark"] selector
-  // and are slightly modified for formatting purpose
-  // --docsearch-text-color: var(--cx-fg-main);
-  // --docsearch-container-background: var(--cx-dim-main);
-  // --docsearch-modal-background: var(--cx-bg-even);
-  // --docsearch-modal-shadow: var(--cx-box-shadow-large); // inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  // --docsearch-searchbox-background: var(--cx-bg-main, #fc0);
-  // --docsearch-searchbox-focus-background: var(--cx-bg-hover, #fc0);
-  // --docsearch-hit-color: #bec3c9;
-  // --docsearch-hit-shadow: none;
-  // --docsearch-hit-background: #090a11;
-  // --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  // --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-  // --docsearch-footer-background: #1e2136;
-  // --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-  // --docsearch-muted-color: #7f8497;
+  /* Dropdown Menu */
+  --docsearch-dropdown-menu-background: var(--docsearch-hit-background);
+  --docsearch-dropdown-menu-item-hover-background: var(--docsearch-modal-background);
 }
 
 .cxd-search {
@@ -61,17 +76,11 @@
   }
   @include media-breakpoint-up(2xlarge) {
     left: 50%;
-    width: 280px;
-    margin-left: 12rem;
+    margin-left: 16rem;
   }
-
-
 }
 
 .DocSearch-Container {
-  // --docsearch-muted-color: var(--cx-fg-subtle);
-  // --docsearch-hit-shadow: none;
-
   position: fixed;
   z-index: 2000; // Make sure to be over all components showcased in the documentation
   cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
@@ -82,15 +91,8 @@
 }
 
 .DocSearch-Button {
-  --docsearch-searchbox-background: var(--cx-bg-main);
-  --docsearch-searchbox-color: var(--cx-fg-subtle);
-  --docsearch-searchbox-focus-background: var(--cx-bg-hover);
-  --docsearch-searchbox-shadow: none;
-  --docsearch-text-color: var(--cx-fg-subtle);
-  --docsearch-muted-color: var(--cx-fg-subtle);
-
   width: 100%;
-  height: 38px; // Match Chassis - CSS inputs
+  height: 38px; // Match Chassis inputs
   margin: 0;
   border: var(--cx-border-width-medium) solid var(--cx-border-subtle);
   @include border-radius(var(--cx-border-radius-medium));
@@ -102,8 +104,6 @@
   &:active,
   &:focus,
   &:hover {
-    // border-color: rgba($cxd-accent, 1);
-
     .DocSearch-Search-Icon {
       opacity: 1;
     }
@@ -132,7 +132,7 @@
 
 .DocSearch-Button-Keys {
   min-width: 0;
-  padding: .25rem;
+  padding: .125rem .5rem;
   background: var(--cx-bg-evident);
   @include border-radius(var(--cx-border-radius-small));
 }
@@ -140,31 +140,29 @@
 .DocSearch-Button-Key {
   top: 0;
   width: auto;
-  // height: 1.25rem;
-  padding-right: .125rem;
-  padding-left: .125rem;
-  margin-right: 0;
-  // font-size: .875rem;
+  padding: 0;
+  @include font-size(.875rem);
   background: none;
+  border: 0;
   box-shadow: none;
 }
 
 .DocSearch-Commands-Key {
-  // padding-left: 1px;
-  // font-size: .875rem;
-  // background-color: rgba($black, .1);
-  background-image: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  color: var(--cx-icon-subtle);
+  background: none;
   box-shadow: none;
+  @include border-radius(var(--cx-border-radius-small));
+  .DocSearch-Escape-Key {
+    @include font-size(var(--cx-font-size-xsmall));
+  }
 }
 
-.DocSearch-Form {
-  @include border-radius(var(--cx-border-radius));
-}
-
-.DocSearch-Hits {
-  mark {
-    padding: 0;
-  }
+.DocSearch-Action:hover,
+.DocSearch-AskAi-Return:hover {
+  background: none;
 }
 
 .DocSearch-Hit {
@@ -174,12 +172,12 @@
   a {
     @include border-radius(0);
     border: solid var(--cx-border-subtle);
-    border-width: 0 1px 1px;
+    border-width: 0 var(--cx-border-width) var(--cx-border-width);
   }
 
   &:first-child a {
     @include border-top-radius(var(--cx-border-radius));
-    border-top-width: 1px;
+    border-top-width: var(--cx-border-width);
   }
   &:last-child a {
     @include border-bottom-radius(var(--cx-border-radius));
@@ -189,6 +187,22 @@
 .DocSearch-Hit-icon {
   display: flex;
   align-items: center;
+  margin-right: var(--cx-space-xsmall);
+}
+
+.DocSearch-Hit-content-wrapper {
+  gap: 0;
+}
+
+.DocSearch-Hit-action-button:focus,
+.DocSearch-Hit-action-button:hover {
+  color: var(--cx-primary-fg-main);
+  background: none;
+}
+
+.DocSearch-Hit-action-button:focus path,
+.DocSearch-Hit-action-button:hover path {
+  fill: none;
 }
 
 // Fix --docsearch-logo-color that doesn't do anything

package/src/scss/_layout.scss

@@ -23,7 +23,9 @@
 
 .cxd-intro {
   grid-area: intro;
-  margin-top: 2rem;
+  width: 100%;
+  max-width: 960px;
+  margin: 2rem auto 0;
 }
 
 .cxd-main {
@@ -60,13 +62,16 @@
 
 .cxd-content {
   grid-area: content;
-  min-width: 1px; // Fix width when cxd-content contains a `<pre>` https://github.com/chassis-ui/css/issues/25410
-}
-
-.cxd-content,
-.cxd-intro {
+  justify-self: center;
   width: 100%;
+  min-width: 1px; // Fix width when cxd-content contains a `<pre>` https://github.com/chassis-ui/css/issues/25410
   max-width: 960px;
-  margin-right: auto;
-  margin-left: auto;
 }
+
+// .cxd-content,
+// .cxd-intro {
+//   width: 100%;
+//   max-width: 960px;
+//   margin-right: auto;
+//   margin-left: auto;
+// }

package/src/scss/_navbar.scss

@@ -2,7 +2,7 @@
   // box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
   padding: 0;
   // padding: .75rem 0;
-  background-color: rgba(var(--cx-bg-main-rgb), var(--cx-opacity-dim-main));
+  background-color: to-opacity(var(--cx-bg-main), var(--cx-opacity-dim-main));
   backdrop-filter: blur(24px);
   border-bottom: var(--cx-border-width-medium) solid var(--cx-border-subtle);
 
@@ -16,7 +16,6 @@
     z-index: -1;
     display: block;
     content: "";
-    // background-image: linear-gradient(rgba(var(--cxd-subtle-rgb), 1), rgba(var(--cxd-subtle-rgb), .95));
   }
 
   .cxd-navbar-toggle {
@@ -81,7 +80,7 @@
     vertical-align: -.125rem;
   }
 
-  .offcanvas-large {
+  .#{large\:}offcanvas {
     background-color: var(--cxd-subtle-bg);
     border-left: 0;
 
@@ -101,8 +100,6 @@
     --cx-dropdown-min-width: 12rem;
     --cx-dropdown-padding-x: .25rem;
     --cx-dropdown-padding-y: .25rem;
-    --cx-dropdown-link-hover-bg: rgba(var(--cxd-subtle-rgb), .1);
-    --cx-dropdown-link-active-bg: rgba(var(--cxd-subtle-rgb), 1);
     @include rfs(.875rem, --cx-dropdown-font-size);
     @include font-size(.875rem);
     @include border-radius(.5rem);

package/src/scss/_sidebar.scss

@@ -22,7 +22,7 @@
   }
 
   @include media-breakpoint-down(large) {
-    .offcanvas-large {
+    .#{large\:}offcanvas {
       border-right-color: var(--cx-border-color);
       box-shadow: var(--cx-box-shadow-large);
     }

package/src/scss/_toc.scss

@@ -96,7 +96,7 @@
 
     &:focus,
     &[aria-expanded="true"] {
-      box-shadow: 0 0 0 3px rgba(var(--cxd-subtle-rgb), .25);
+      box-shadow: 0 0 0 3px #{to-opacity(var(--cxd-subtle), .25)};
     }
   }
 }

package/src/scss/_variables.scss

@@ -2,9 +2,8 @@
 // $cxd-main:        $primary-base-color;
 // $cxd-subtle:        lighten(saturate($cxd-main, 5%), 15%); // stylelint-disable-line function-disallowed-list
 // $cxd-main-light:  lighten(saturate($cxd-main, 5%), 45%); // stylelint-disable-line function-disallowed-list
-// $cxd-accent:        $secondary-base-color;
 $cxd-main:        var(--cx-primary-base-color);
-$cxd-subtle:      var(--cx-primary-bg-evident);
+$cxd-subtle:      var(--cx-primary-40);
 $cxd-main-light:  var(--cx-primary-fg-main);
 $cxd-accent:      var(--cx-primary-base-color);
 
@@ -15,30 +14,26 @@ $cxd-callout-variants: info, warning, danger, default !default;
 [data-cx-theme="light"] {
   --cxd-main: #{$cxd-main};
   --cxd-subtle: #{$cxd-subtle};
-  --cxd-accent: #{$cxd-accent};
-  --cxd-main-rgb: var(--cx-primary-base-color-rgb);
-  --cxd-subtle-rgb: var(--cx-primary-40-rgb);
-  --cxd-accent-rgb: var(--cx-secondary-base-color-rgb);
   --cxd-pink-rgb: #{to-rgb($pink-500)};
   --cxd-teal-rgb: #{to-rgb($teal-500)};
   --cxd-main-bg: var(--cxd-main);
   --cxd-subtle-bg: var(--cxd-subtle);
   --cxd-toc-color: var(--cxd-main);
   --cxd-sidebar-link-bg: var(--cx-bg-highlight);
-  --cxd-callout-link: #{to-rgb($blue-600)};
-  --cxd-callout-code-color: #{$pink-600};
+  --cxd-callout-link: #{to-color($blue-600)};
+  --cxd-callout-code-color: #{to-color($pink-600)};
   // --cxd-pre-bg: var(--cx-bg-even);
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
     color-scheme: dark;
-    --cxd-subtle: var(--cx-primary-60-rgb);
+    --cxd-subtle: var(--cx-primary-60);
     --cxd-subtle-bg: #{$cxd-subtle};
     // --cxd-toc-color: var(--#{$prefix}fg-subtle);
     --cxd-sidebar-link-bg: var(--cx-primary-40);
-    --cxd-callout-link: #{to-rgb($blue-300)};
-    --cxd-callout-code-color: #{$pink-300};
+    --cxd-callout-link: #{to-color($blue-300)};
+    --cxd-callout-code-color: #{to-color($pink-300)};
     //--cxd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
     --cxd-pre-bg: var(--cx-bg-evident);
   }

package/src/scss/main.scss

@@ -5,7 +5,6 @@
 @import "fonts";
 
 @import "navbar";
-// @import "masthead";
 @import "content";
 @import "skippy";
 @import "sidebar";
@@ -42,7 +41,7 @@
 
 .docs-body .navbar,
 .docs-body .cxd-footer {
-  .container-2xlarge {
+  .container.#{\32 xlarge} {
     max-width: 100%;
   }
   .cxd-search {

package/src/layouts/IconsLayout.astro

@@ -1,25 +0,0 @@
----
-/**
- * Icons Layout
- *
- * Specialized layout for icon documentation pages with scrollspy navigation.
- */
-
-import type { LayoutOverridesHTMLAttributes } from '../libs/layout'
-import BaseLayout from './BaseLayout.astro'
-
-const bodyProps: LayoutOverridesHTMLAttributes<'body'> = {}
-
-bodyProps['id'] = 'icons-body'
-bodyProps['data-cx-spy'] = 'scroll'
-bodyProps['data-cx-target'] = '#icons-nav'
----
-
-<BaseLayout {...Astro.props} layout="icons" overrides={{ body: bodyProps }}>
-  <div
-    slot="main"
-    class="container-2xlarge px-medium px-medium-4xlarge cxd-gutter icon-docs icon-reset pt-medium-large pb-medium-large"
-  >
-    <slot />
-  </div>
-</BaseLayout>