@xyd-js/themes 0.0.0 → 0.1.1-xyd.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @xyd-js/themes
+
+## 0.1.1-xyd.0
+
+### Patch Changes
+
+- refactor, ui tweaks
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.13
+  - @xyd-js/components@0.1.0-xyd.8
+  - @xyd-js/framework@0.1.0-xyd.28
+  - @xyd-js/ui@0.1.0-xyd.13

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 xyd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/dist/index.css

@@ -0,0 +1,406 @@
+.XydUi-Component-Nav__NavHost{position:sticky;top:0;z-index:20;width:100%;background:transparent;display:flex;}
+.XydUi-Component-Nav__NavShadow{pointer-events:none;position:absolute;z-index:-1;height:100%;width:100%;background-color:white;}
+.XydUi-Component-Nav__Nav{display:flex;width:100%;height:var(--xyd-navbar-height);align-items:center;justify-content:flex-end;gap:8px;padding-left:calc(max(env(safe-area-inset-left), 16px));padding-right:calc(max(env(safe-area-inset-right), 16px));}
+.XydUi-Component-Nav__NavMiddle{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;}
+.XydUi-Component-Nav__ListHost{display:flex;align-items:center;justify-content:center;gap:8px;}
+.XydUi-Component-Nav__ItemHost{font-size:14px;position:relative;white-space:nowrap;color:#000;padding:8px 16px;display:flex;align-items:center;justify-content:center;}
+.XydUi-Component-Nav__ItemHost:hover{color:#1f2937;}
+.XydUi-Component-Nav__ItemHost[data-state="active"]{font-weight:bold;background:#f9f9f9;border-radius:8px;}
+.XydUi-Component-Nav__ItemTitle1{position:absolute;inset:0;text-align:center;align-items:center;display:flex;justify-content:center;}
+.XydUi-Component-Nav__ItemTitle2{visibility:hidden;font-weight:600;}
+.XydUi-Component-Nav__LogoHost{display:flex;align-items:center;margin-right:auto;}
+.XydUi-Component-Sidebar__SidebarHost{background:#f8f8f8;height:100%;border-radius:4px;display:flex;flex-direction:column;}
+.XydUi-Component-Sidebar__SidebarUl{overflow-y:auto;overflow-x:hidden;height:100%;padding:8px;}
+.XydUi-Component-Sidebar__FooterHost{padding:1rem;box-shadow:0 -2px 10px rgba(237, 237, 237, .1);border-top:1px solid #ededed;}
+.XydUi-Component-Sidebar__FooterItemHost{display:flex;width:100%;padding:2px;color:#6e6e80;}
+.XydUi-Component-Sidebar__FooterItem{display:flex;align-items:center;width:100%;gap:7px;font-size:14px;padding:4px 8px;}
+.XydUi-Component-Sidebar__FooterItem:hover{background:#ececf1;color:#111827;border-radius:4px;}
+.XydUi-Component-Sidebar__FooterItem:hover svg{fill:#111827;}
+.XydUi-Component-Sidebar__FooterItem svg{fill:#6e6e80;font-size:18px;width:18px;height:18px;}
+.XydUi-Component-Sidebar__ItemHost{color:#6e6e80;font-size:14px;}
+.XydUi-Component-Sidebar__ItemLink{display:flex;width:100%;font-weight:500;}
+.XydUi-Component-Sidebar__ItemLinkActive{background:#ebebeb;border-radius:4px;position:relative;font-weight:600;color:#000;}
+.XydUi-Component-Sidebar__ItemLinkActive::before{background:#7051d4;border-radius:0 2px 2px 0;bottom:7px;content:"";left:5px;position:absolute;top:7px;width:4px;border-radius:10px;}
+.XydUi-Component-Sidebar__ItemLinkParentActive{font-weight:600;background:transparent;}
+.XydUi-Component-Sidebar__ItemLinkActiveSecondary{background:unset;font-weight:500;}
+.XydUi-Component-Sidebar__ItemLinkItem{display:flex;width:100%;padding:8px 12px 8px 16px;position:relative;font-size:14px;}
+.XydUi-Component-Sidebar__ItemLinkItem:hover{background:#ececf1;color:#111827;border-radius:4px;}
+.XydUi-Component-Sidebar__TreeHost{margin-left:12px;}
+.XydUi-Component-Sidebar__ItemHeaderHost{padding-left:12px;margin-bottom:8px;margin-top:24px;font-size:13px;line-height:16px;font-weight:600;letter-spacing:0.5px;color:#111827;text-transform:uppercase;}
+.XydUi-Component-Sidebar__CollapseContainer{transform:translateZ(0);overflow:hidden;transition:width 300ms cubic-bezier(0.4, 0, 0.2, 1),height 300ms cubic-bezier(0.4, 0, 0.2, 1);will-change:width,height;}
+@media (prefers-reduced-motion: reduce){.XydUi-Component-Sidebar__CollapseContainer{transition:none;}}
+.XydUi-Component-Sidebar__CollapseBase{opacity:0;transition:opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);will-change:opacity;}
+@media (prefers-reduced-motion: reduce){.XydUi-Component-Sidebar__CollapseBase{transition:none;}}
+.XydUi-Component-Sidebar__CollapseOpen{opacity:1;}
+.XydUi-Component-SubNav__SubNavHost{align-items:center;background-color:#f6f6f7;border-radius:0.50rem;display:flex;flex-direction:row;width:100%;height:44px;margin-top:3px;padding:0 0.25rem;}
+.XydUi-Component-SubNav__SubNavPrefix{color:#44474a;font-size:12px;font-weight:600;padding-left:0.50rem;padding-right:1.50rem;position:relative;text-transform:uppercase;}
+.XydUi-Component-SubNav__SubNavPrefix:after{background:#d2d5d8;border-radius:1px;content:" ";height:0.75rem;position:absolute;right:0.50rem;top:50%;transform:translateY(-50%);width:2px;}
+.XydUi-Component-SubNav__SubNavUl{display:flex;flex-direction:row;height:100%;}
+.XydUi-Component-SubNav__SubNavLi{display:flex;height:100%;align-items:center;position:relative;}
+.XydUi-Component-SubNav__SubNavLi[data-state="active"]{font-weight:600;}
+.XydUi-Component-SubNav__SubNavLi[data-state="active"] a{color:#202223;}
+.XydUi-Component-SubNav__SubNavLi[data-state="active"] a:after{background-color:#7051d4;border-radius:1px;bottom:0;content:" ";height:2px;left:0;position:absolute;width:100%;}
+.XydUi-Component-SubNav__SubNavLink{color:#4b5563;line-height:2.75rem;display:block;height:100%;padding:0 0.50rem;}
+.XydUi-Component-SubNav__SubNavLink:hover{color:#202223;}
+.XydUi-Component-Toc__TocHost{position:relative;padding-left:16px;}
+.XydUi-Component-Toc__TocUl{margin:0;padding:0;list-style:none;}
+.XydUi-Component-Toc__TocLi{position:relative;line-height:1.5;margin:0 0 12px;padding:0;}
+.XydUi-Component-Toc__TocLink{display:inline-block;font-size:14px;color:#6e6e80;line-height:1.4;text-wrap:pretty;transition:color .15s ease;}
+.XydUi-Component-Toc__TocLinkActive{font-weight:600;color:#353740;}
+.XydUi-Component-Toc__ScrollerHost{position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#ececf1;}
+.XydUi-Component-Toc__ScrollerScroll{position:absolute;top:0;left:0;width:2px;height:var(--active-track-height);transform:translateY(var(--active-track-top));background-color:#353740;transition:height .4s cubic-bezier(.19, 1, .22, 1),transform .4s cubic-bezier(.19, 1, .22, 1);}
+:root {
+  /* Ref tokens - Base values */
+  --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);
+
+  /* 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-Sys-Color-Surface--active);
+  --XydAtlas-Component-Code-SampleButtons__color: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-Code-SampleButtons__color--active: var(--XydAtlas-Sys-Color-Text-Primary);
+}
+.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemTitleHost{font-size:30px;font-weight:400;}
+.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemNavbarContainer{background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%);padding:8px;border:1px solid var(--XydAtlas-Component-ApiRef-Item__color-border);border-radius:8px;font-size:13px;}
+.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemNavbarLabel{color:var(--XydAtlas-Component-ApiRef-Item__color-navbar);margin-right:4px;}
+.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;padding-bottom:25px;}
+.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemGrid{display:-ms-grid;display:grid;-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));-webkit-align-items:normal;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;gap:100px;}
+.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemPropertiesItem{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:25px;margin-bottom:25px;}
+.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemSubtitleHost{font-size:15px;font-weight:600;}
+.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemSubtitleLink{-webkit-text-decoration:none;text-decoration:none;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesUlHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;padding:0;margin:0;list-style:none;border:none;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesLiHost{margin:0;padding:0;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesLiHost:first-child{padding-top:0;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesLiHost:last-child{padding-bottom:0;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesDescriptionHost{font-size:14px;line-height:22px;color:var(--XydAtlas-Component-ApiRef-Properties__color-description);}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesDlHost{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:10px;margin:8px 0;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesDlHost dd{-webkit-margin-start:0px;margin-inline-start:0px;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropNameCodeHost{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:4px 0;font-weight:600;font-size:13px;color:var(--XydAtlas-Component-ApiRef-Properties__color-propName);}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropTypeCodeHost{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:4px 0;border-radius:4px;font-size:10px;color:var(--XydAtlas-Component-ApiRef-Properties__color-propType);}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropTypeCodeLink{color:var(--XydAtlas-Component-ApiRef-Properties__color--active);-webkit-text-decoration:underline;text-decoration:underline;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropTypeCodeLink:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--XydAtlas-Sys-Color-Primary--hover);}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesSubPropsHost{padding:8px;border-style:none;display:none;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesSubPropsHostExpanded{display:unset;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesSubPropsUl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;padding:0;margin:0;list-style:none;border:none;border-left:1px solid var(--XydAtlas-Component-ApiRef-Properties__color-border);}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesSubPropsLi{padding:0 16px;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;margin-top:16px;background:none;outline:inherit;border:none;cursor:pointer;color:inherit;font-size:13px;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleHost svg{font-size:13px;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleHost:hover svg{-webkit-transition:all ease-in .1s;transition:all ease-in .1s;color:var(--XydAtlas-Component-ApiRef-Properties__color--active);}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleLink{-webkit-text-decoration:none;text-decoration:none;cursor:pointer;margin-left:4px;}
+.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleLink:hover{-webkit-transition:all ease-in .1s;transition:all ease-in .1s;color:var(--XydAtlas-Component-ApiRef-Properties__color--active);}
+.XydAtlas-Component-Code-CodeCopy__CodeCopyHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:8px;border-radius:6px;cursor:pointer;}
+.XydAtlas-Component-Code-CodeCopy__CodeCopyHost:hover{background:var(--XydAtlas-Component-Code-Copy__color-background--active);}
+.XydAtlas-Component-Code-CodeSample__CodeSampleHost{-webkit-flex:1 1 0;-ms-flex:1 1 0;flex:1 1 0;overflow:hidden;min-width:0;max-width:512px;border:1px solid var(--XydAtlas-Component-Code-Sample__color-border);border-radius:16px;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;padding:8px 0px;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom:0px;min-width:0;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesList{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:end;justify-content:end;gap:8px;padding:0 10px;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesButton{all:unset;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:6px;padding:6px;font-size:14px;color:var(--XydAtlas-Component-Code-Sample__color);}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesButton[data-state="active"]{color:var(--XydAtlas-Component-Code-Sample__color--active);border-bottom:1px solid var(--XydAtlas-Component-Code-Sample__color--active);border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesButton:hover{-webkit-transition:ease-in 0.1s;transition:ease-in 0.1s;background:var(--XydAtlas-Component-Code-Sample__color-background);}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesDescription{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;font-size:14px;color:var(--XydAtlas-Component-Code-Sample__color);margin-left:4px;margin-right:4px;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesDescriptionItem{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:16px;padding-right:16px;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;gap:16px;border-radius:4px;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesCopy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;padding-right:8px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleCodeHost{max-height:400px;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;margin:0;padding:8px 16px;border-top:1px solid var(--XydAtlas-Component-Code-Sample__color-border);border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:14px;line-height:20px;white-space:pre-wrap;word-break:break-all;overflow-y:scroll;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleMarkHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left-width:4px;border-color:transparent;margin:4px 0;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleMarkLine{-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;}
+.XydAtlas-Component-Code-CodeSample__CodeSampleMarkAnnotated{border-color:var(--XydAtlas-Component-Code-Sample__color-markBorder--active);background-color:var(--XydAtlas-Component-Code-Sample__color-markBackground--active);}
+.XydAtlas-Component-Code-CodeSample__CodeSampleLineNumberHost{margin:0 4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5;}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsHost{position:relative;max-width:100%;}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsContainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;background-color:var(--XydAtlas-Component-Code-SampleButtons__color-containerBackground);}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsArrowHost{padding:8px;background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsArrowIcon{width:16px;height:16px;}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsScrollerHost{overflow-x:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsScrollerContainer{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;gap:4px;padding:4px;margin-left:4px;}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsButtonHost{padding:0.5rem 1rem;border-radius:0.375rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;color:var(--XydAtlas-Component-Code-SampleButtons__color);}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsButtonHost:hover{color:var(--XydAtlas-Component-Code-SampleButtons__color--active);}
+.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsButtonActive{color:var(--XydAtlas-Component-Code-SampleButtons__color--active);background-color:var(--XydAtlas-Component-Code-SampleButtons__color-background--active);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
+.XydAtlas-Component-ApiRef-ApiRefSamples__ApiRefSamplesContainerHost{position:-webkit-sticky;position:sticky;top:6rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.XydAtlas-Component-ApiRef-ApiRefSamples__ApiRefSamplesContainerHost:first-child{margin-top:0;}
+.XydAtlas-Component-ApiRef-ApiRefSamples__ApiRefSamplesContainerHost:last-child{margin-bottom:0;}
+.XydAtlas-Component-ApiRef-ApiRefSamples__ApiRefSamplesGroupHost{gap:10px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.XydAtlas-Component-Atlas__AtlasHost{width:100%;}
+.XydAtlas-Component-Atlas-AtlasLazy__AtlasLazyItemHost{padding:16px 0;}
+.XydAtlas-Component-Atlas-AtlasLazy__AtlasLazyItemFirst{padding:4px 0;}
+.XydComponents-Component-brand-CTABanner__CTABannerHost{padding:20px;}
+.XydComponents-Component-brand-CTABanner__CTABannerContainer{display:flex;align-items:center;justify-content:center;gap:80px;}
+.XydComponents-Component-brand-CTABanner__CTABannerHero{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:40px;}
+.XydComponents-Component-brand-CTABanner__CTABannerHeadingEffect{display:flex;align-items:center;justify-content:center;flex-direction:column;background:-webkit-linear-gradient(
+            120deg,
+            var(--headingEffect-color-tertiary) 20%,
+            var(--headingEffect-color-tertiary) 30%,
+            var(--headingEffect-color-secondary) 60%,
+            var(--headingEffect-color-primary) 75%,
+            var(--headingEffect-color-primary) 85%
+    );-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wave-XydComponents-Component-brand-CTABanner__CTABannerHeadingEffect 5s infinite;background-size:200% 200%;-webkit-background-position:50% 50%;background-position:50% 50%;}
+@keyframes wave-XydComponents-Component-brand-CTABanner__CTABannerHeadingEffect{0%{-webkit-background-position:50% 50%;background-position:50% 50%;}50%{-webkit-background-position:0% 50%;background-position:0% 50%;}100%{-webkit-background-position:50% 50%;background-position:50% 50%;}}
+.XydComponents-Component-brand-CTABanner__CTABannerHeadingHost{display:flex;align-items:center;justify-content:center;flex-direction:column;}
+.XydComponents-Component-brand-CTABanner__CTABannerHeadingTitle{font-size:76px;font-weight:900;text-align:center;letter-spacing:3px;margin:0;}
+.XydComponents-Component-brand-CTABanner__CTABannerHeadingSubtitle{color:#3c3c43;font-size:46px;font-weight:600;text-align:center;}
+.XydComponents-Component-brand-CTABanner__CTABannerButtonGroupHost{display:flex;align-items:center;justify-content:center;gap:10px;}
+.XydComponents-Component-views-HomeView__HomeViewHost{display:flex;flex-direction:column;min-height:100vh;}
+.XydComponents-Component-views-HomeView__HomeViewBodyHost{background:radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);-webkit-backdrop-filter:sepia(10%);backdrop-filter:sepia(10%);background-size:30px 30px;padding:60px;flex:1;}
+.XydComponents-Component-views-HomeView__HomeViewBodyHostSecondary{background:repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px),repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);}
+.XydComponents-Component-views-HomeView__HomeViewBodyContent{width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:80px;}
+@media (max-width: 1200px){.XydComponents-Component-views-HomeView__HomeViewBodyContent{width:100%;padding:0 20px;}}
+@media (max-width: 768px){.XydComponents-Component-views-HomeView__HomeViewBodyContent{width:100%;padding:0 10px;}}
+.XydComponents-Component-pages-HomePage__HomePageCardsHost{display:grid;grid-template-columns:repeat(2, 500px);justify-content:center;gap:30px;}
+@media (max-width: 1200px){.XydComponents-Component-pages-HomePage__HomePageCardsHost{grid-template-columns:repeat(2, 1fr);}}
+@media (max-width: 768px){.XydComponents-Component-pages-HomePage__HomePageCardsHost{grid-template-columns:1fr;}}
+.XydComponents-Component-brand-Footer__FooterHost{position:relative;border-top:1px solid #f0f0f0;padding:32px;background-color:#fff;}
+.XydComponents-Component-brand-Footer__FooterContainer{margin:0 auto;max-width:1200px;text-align:center;}
+.XydComponents-Component-brand-Footer__FooterTextContainer{line-height:24px;font-size:14px;font-weight:500;color:rgba(60, 60, 67, .78);}
+.XydComponents-Component-brand-Button__ButtonHost{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;border-radius:20px;padding:0 20px;line-height:38px;font-size:14px;border-color:transparent;color:#3c3c43;background-color:#f7f7f8;transition:color .25s,border-color .25s,background-color .25s;}
+.XydComponents-Component-brand-Button__ButtonHost:hover{background:#e3e3e6;}
+.XydComponents-Component-brand-Button__ButtonHostSecondary{color:#fff;background-color:rgb(112, 81, 212);}
+.XydComponents-Component-brand-Button__ButtonHostSecondary:hover{background-color:rgb(95, 59, 211);}
+.XydComponents-Component-writer-Badge__BadgeHost{display:inline-flex;align-items:center;line-height:1rem;font-style:normal;font-weight:500;letter-spacing:normal;white-space:nowrap;text-transform:none;}
+.XydComponents-Component-writer-Badge__BadgeHostWarning{color:#434e4e;background-color:#ffffe1;}
+.XydComponents-Component-writer-Badge__BadgeHostInfo{color:#fff;background-color:#1971a8;}
+.XydComponents-Component-writer-Badge__BadgeHostSm{font-size:12px;height:18px;padding:0 6px;gap:3px;border-radius:6px;}
+.XydComponents-Component-writer-Badge__BadgeItem{position:relative;}
+.XydComponents-Component-writer-Blockquote__BlockquoteHost{color:rgb(55 65 81 / 1);font-style:italic;border-color:rgb(209 213 219 / 1);margin:0;}
+.XydComponents-Component-writer-GuideCard__GuideHostSecondary{display:flex;position:relative;overflow:hidden;border:1px solid #ebebeb;background:#f8f8f8;border-radius:8px;padding:24px;z-index:0;transition:box-shadow .2s ease-in-out,background-image .2s ease;}
+.XydComponents-Component-writer-GuideCard__GuideHostSecondary:hover{background:#FFF;}
+.XydComponents-Component-writer-GuideCard__GuideHostSecondaryMd{padding:21px 25px 25px;}
+.XydComponents-Component-writer-GuideCard__GuideLink{width:100%;height:100%;}
+.XydComponents-Component-writer-GuideCard__GuideItem{border-radius:8px;display:flex;align-items:flex-start;cursor:pointer;transition:opacity .15s;}
+.XydComponents-Component-writer-GuideCard__GuideItem:hover [data-pointer="true"]{opacity:1;transform:translate(0);}
+.XydComponents-Component-writer-GuideCard__GuideItemSecondary{width:100%;height:100%;}
+.XydComponents-Component-writer-GuideCard__GuideIcon{line-height:0px;font-size:24px;height:32px;display:flex;justify-content:center;align-items:center;color:#000;transition:background .2s ease;box-sizing:border-box;flex-shrink:0;}
+.XydComponents-Component-writer-GuideCard__GuideRight{padding-left:16px;display:flex;flex-direction:column;gap:4px;}
+.XydComponents-Component-writer-GuideCard__GuideTitle{display:flex;color:#000;font-weight:600;align-items:center;transition:color .15s;}
+.XydComponents-Component-writer-GuideCard__GuideTitleBody{font-size:16px;line-height:20px;}
+.XydComponents-Component-writer-GuideCard__GuideTitleBodyMd{font-size:18px;}
+.XydComponents-Component-writer-GuideCard__GuideBody{font-weight:400;font-size:14px;line-height:20px;color:#5C5C5C;white-space:normal;overflow:hidden;text-overflow:ellipsis;}
+.XydComponents-Component-writer-GuideCard__GuideBodyMd{font-size:16px;}
+.XydComponents-Component-writer-GuideCard__GuidePointer{opacity:0;transform:translate(-4px);display:flex;justify-content:center;transition:opacity .15s ease-in-out,transform .15s ease-in-out;}
+.XydComponents-Component-writer-GuideCard__GuideListHost{display:grid;grid-template-columns:1fr 1fr;justify-content:center;gap:24px;}
+.XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsHost{display:flex;overflow:hidden;margin-top:0.375rem;gap:0.25rem;align-items:center;font-size:0.875rem;line-height:1.25rem;color:#6B7280;}
+.XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsIcon{shrink:0;width:0.875rem;}
+.XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsItem{white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;}
+.XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsItemActive{color:#000;font-weight:bold;}
+.XydComponents-Component-writer-Callout__CalloutHost{display:inline-flex;align-items:center;position:relative;width:100%;min-width:275px;padding:8px 12px;border-radius:8px;text-align:center;border:1px solid #ececf1;}
+.XydComponents-Component-writer-Callout__CalloutNeutral{background-color:#f7f7f8;border-color:#ececf1;}
+.XydComponents-Component-writer-Callout__CalloutIcon{display:inline-flex;margin-right:14px;flex:0 0 auto;align-self:flex-start;color:#6e6e80;font-size:20px;margin-top:2px;}
+.XydComponents-Component-writer-Callout__CalloutMessage{color:#353740;text-align:left;flex:1 1 auto;}
+.XydComponents-Component-writer-Callout__CalloutMessageBody{font-size:14px;line-height:20px;}
+.XydComponents-Component-writer-Code__CodeHost{display:inline-block;padding:0 .3em;border-radius:6px;margin:0 3px;border:.5px solid #ececf1;font-size:14px;font-weight:500;line-height:1.6em;background:linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);}
+.XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksHost{display:flex;padding-top:2rem;margin-top:2rem;margin-bottom:2rem;justify-content:space-between;align-items:center;border-top-width:1px;border-color:#d7d7d7;}
+.XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksLink{display:flex;gap:8px;align-items:center;font-size:16px;line-height:1.5;font-weight:600;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;max-width:50%;}
+.XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksIcon{display:inline;height:1.25rem;flex-shrink:0;}
+.XydComponents-Component-writer-Pre__PreHost{margin-top:0;border-radius:6px;padding:16px;border:0;background-color:rgb(246, 248, 250);overflow:auto;}
+.XydComponents-Component-writer-Heading__HeadingHost{line-height:40px;font-weight:600;position:relative;display:inline-block;margin:0;padding:0 24px 0 0;scroll-snap-margin-top:30px;scroll-margin-top:30px;cursor:pointer;}
+.XydComponents-Component-writer-Heading__HeadingHost:hover svg{opacity:1;}
+.XydComponents-Component-writer-Heading__HeadingH1{font-size:36px;}
+.XydComponents-Component-writer-Heading__HeadingH1 code{font-size:30px;}
+.XydComponents-Component-writer-Heading__HeadingH2{font-size:30px;}
+.XydComponents-Component-writer-Heading__HeadingH2 code{font-size:24px;}
+.XydComponents-Component-writer-Heading__HeadingH3{font-size:26px;}
+.XydComponents-Component-writer-Heading__HeadingH3 code{font-size:22px;}
+.XydComponents-Component-writer-Heading__HeadingH4{font-size:22px;}
+.XydComponents-Component-writer-Heading__HeadingH4 code{font-size:18px;}
+.XydComponents-Component-writer-Heading__HeadingH5{font-size:18px;}
+.XydComponents-Component-writer-Heading__HeadingH5 code{font-size:14px;}
+.XydComponents-Component-writer-Heading__HeadingH6{font-size:16px;}
+.XydComponents-Component-writer-Heading__HeadingH6 code{font-size:12px;}
+.XydComponents-Component-writer-Heading__HeadingLink{position:absolute;top:50%;right:0;margin-top:-6px;opacity:0;color:#7051d4;transition:opacity .15s ease;}
+.XydComponents-Component-writer-Details__DetailsHost{border-top:1px solid #ececf1;}
+.XydComponents-Component-writer-Details__DetailsHost[open] summary svg[data-icon="true"]{transform:rotate(90deg);}
+.XydComponents-Component-writer-Details__DetailsHostSecondary{background-color:#f7f7f8;border:1px solid #ececf1;border-radius:8px;}
+.XydComponents-Component-writer-Details__DetailsSummary{padding:16px 14px 16px 0;font-size:18px;cursor:pointer;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4;transition:color 0.3s;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;list-style:none;}
+.XydComponents-Component-writer-Details__DetailsSummary:hover{color:#565869;}
+.XydComponents-Component-writer-Details__DetailsSummarySecondary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:20px 24px;}
+.XydComponents-Component-writer-Details__DetailsSummaryTertiary{padding:10px 24px;}
+.XydComponents-Component-writer-Details__DetailsSummaryDeep{display:flex;align-items:center;margin-bottom:8px;}
+.XydComponents-Component-writer-Details__DetailsSummaryDeepText{color:#6e6e80;text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.08em;margin-left:8px;font-weight:700;}
+.XydComponents-Component-writer-Details__DetailsSummaryDeepTextTertiary{text-transform:none;}
+.XydComponents-Component-writer-Details__DetailsSummaryDeepTextTertiary code{background:white;}
+.XydComponents-Component-writer-Details__DetailsLabel{flex:1 1 auto;}
+.XydComponents-Component-writer-Details__DetailsLabelTertiary{padding:10px;}
+.XydComponents-Component-writer-Details__DetailsIcon{flex:0 0 auto;font-size:16px;display:flex;align-items:center;justify-content:center;padding-right:6px;}
+.XydComponents-Component-writer-Details__DetailsContent{padding:0 24px 20px;}
+.XydComponents-Component-writer-Details__DetailsContentSecondary code{background:white;}
+.XydComponents-Component-writer-Details__DetailsContentTertiary{background:white;padding-top:20px;}
+.XydComponents-Component-writer-UnderlineNav__UnderlineNavHost{align-items:center;display:flex;height:42px;background-color:#fff;border-bottom:1px solid hsl(212, 15%, calc(96% - 12% * 1));z-index:99;}
+.XydComponents-Component-writer-UnderlineNav__UnderlineNavUl{display:flex;gap:10px;height:100%;color:hsl(212, 15%, calc(96% - 12% * 4));list-style:none;padding:0;white-space:nowrap;}
+.XydComponents-Component-writer-UnderlineNav__UnderlineNavItem{height:100%;}
+.XydComponents-Component-writer-UnderlineNav__UnderlineNavItem[data-state="active"] a{border-bottom-color:rgb(112, 81, 212);}
+.XydComponents-Component-writer-UnderlineNav__UnderlineNavItemLink{display:inline-flex;border-bottom:3px solid transparent;-webkit-text-decoration:none;text-decoration:none;height:100%;padding:10px;}
+.XydComponents-Component-writer-Table__TableHost{display:block;overflow-x:scroll;border-collapse:collapse;border-radius:3px;}
+.XydComponents-Component-writer-Table__TableTh{padding:0.5rem 1rem;margin:0;font-weight:600;border-width:1px;border-color:#D1D5DB;background:rgba(234, 238, 242, 0.5);}
+.XydComponents-Component-writer-Table__TableTr{padding:0;margin:0;border-top-width:1px;border-color:#D1D5DB;}
+.XydComponents-Component-writer-Table__TableTd{padding:0.5rem 1rem;margin:0;border-width:1px;border-color:#D1D5DB;}
+.XydComponents-Component-writer-Steps__StepsHost{padding-left:0;list-style:none;counter-reset:ordered-listitem;display:flex;flex-direction:column;gap:6px;}
+.XydComponents-Component-writer-Steps__StepsLi{padding-left:32px;position:relative;line-height:1.5;}
+.XydComponents-Component-writer-Steps__StepsLi::after{position:absolute;top:0;left:0;counter-increment:ordered-listitem;content:counter(ordered-listitem);background:#ececf1;color:#353740;font-size:12px;line-height:24px;font-weight:500;text-align:center;height:24px;width:24px;border-radius:12px;}
+.XydComponents-Component-writer-Hr__HrHost{border-color:rgb(229 229 229 / 0.7);}
+.XydComponents-Component-writer-Table__Host{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
+.XydComponents-Component-writer-Table__Table{display:table;width:100%;min-width:640px;border-collapse:separate;border-spacing:0;border:1px solid #ECECF1;border-radius:8px;font-size:0.875rem;line-height:1.25rem;margin-top:1rem;overflow:hidden;}
+.XydComponents-Component-writer-Table__Thead{background:#F7F7F8;}
+.XydComponents-Component-writer-Table__Th{text-align:left;font-weight:500;padding:0.5rem 1rem;color:#353740;vertical-align:middle;border-bottom:1px solid #ECECF1;white-space:nowrap;}
+.XydComponents-Component-writer-Table__Th:first-child{width:24rem;max-width:40%;border-right:1px solid #ECECF1;}
+@media (max-width: 768px){.XydComponents-Component-writer-Table__Th:first-child{width:auto;min-width:12rem;}}
+.XydComponents-Component-writer-Table__Th.numeric{text-align:right;font-weight:400;min-width:5rem;}
+@media (max-width: 768px){.XydComponents-Component-writer-Table__Th.numeric{min-width:4rem;}}
+.XydComponents-Component-writer-Table__Tr:not(:last-child){border-bottom:1px solid #ECECF1;}
+.XydComponents-Component-writer-Table__Td{padding:0.5rem 1rem;vertical-align:middle;border-top:1px solid #ECECF1;}
+.XydComponents-Component-writer-Table__Td:first-child{border-right:1px solid #ECECF1;}
+.XydComponents-Component-writer-Table__Td.numeric{text-align:right;}
+.XydComponents-Component-writer-Table__Td.muted{color:#6E6E80;}
+@media (max-width: 768px){.XydComponents-Component-writer-Table__Td{padding:0.5rem;}}
+.XydComponents-Component-writer-Table__Cell{display:flex;align-items:baseline;width:100%;gap:0.5rem;}
+.XydComponents-Component-writer-Table__CellContent{flex:1;text-align:right;}
+.XydComponents-Component-writer-Table__ModelCell{display:flex;align-items:center;gap:0.5rem;white-space:nowrap;color:#202123;}
+@media (max-width: 768px){.XydComponents-Component-writer-Table__ModelCell{font-size:0.8125rem;}}
+.XydComponents-Component-writer-Tabs__TabsSampleHost{position:relative;max-width:100%;}
+.XydComponents-Component-writer-Tabs__TabsSampleButtons{display:flex;align-items:center;}
+.XydComponents-Component-writer-Tabs__TabsSampleContent{margin-top:16px;}
+.XydComponents-Component-writer-Tabs__TabsArrowHost{padding:8px;background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
+.XydComponents-Component-writer-Tabs__TabsArrowIcon{width:16px;height:16px;}
+.XydComponents-Component-writer-Tabs__TabsScrollerHost{overflow-x:auto;flex-grow:1;}
+.XydComponents-Component-writer-Tabs__TabsScrollerContainer{display:inline-flex;gap:4px;border-radius:8px;background-color:#F3F4F6;padding:4px;margin-left:4px;}
+.XydComponents-Component-writer-Tabs__TabsButtonHost{padding:0.5rem 1rem;border-radius:0.375rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;color:#6B7280;}
+.XydComponents-Component-writer-Tabs__TabsButtonHost:hover{color:#111827;}
+.XydComponents-Component-writer-Tabs__TabsButtonHost[data-state="active"]{color:#111827;background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
+.XydComponents-Component-writer-Tabs__TabsButtonActive{color:#111827;background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
+:root {--xyd-navbar-height:40px;--xyd-global-page-gutter:8px;}
+.XydComponents-Component-layouts__LayoutHost{width:100%;}
+.XydComponents-Component-layouts__LayoutHeader{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0px;right:8px;left:8px;height:40px;}
+.XydComponents-Component-layouts__LayoutHeaderSub{flex-direction:column;height:94px;transition:transform 200ms;}
+.XydComponents-Component-layouts__LayoutHeaderHideMain{transform:translateY(calc(-40px + 3px));}
+.XydComponents-Component-layouts__LayoutMain{position:fixed;top:calc(40px + 0px);bottom:8px;left:8px;right:8px;}
+.XydComponents-Component-layouts__LayoutMainSub{top:calc(94px + 0px);transition:top 200ms;}
+.XydComponents-Component-layouts__LayoutSidebar{flex-direction:column;position:absolute;top:0;left:0;bottom:0;right:0;z-index:101;width:210px;border:0;padding:12px 0 0;overflow:visible;background:none;border-radius:0;opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.65, 0, .35, 1);}
+.XydComponents-Component-layouts__PageHost{position:absolute;top:12px;right:0;bottom:0;z-index:201;background:#fff;overflow:hidden;transition:opacity .3s cubic-bezier(.65, 0, .35, 1);left:210px;}
+.XydComponents-Component-layouts__PageScroll{overflow:scroll;height:100%;}
+.XydComponents-Component-layouts__PageContainer{padding:0;width:100%;min-height:100%;max-width:100%;margin:0 auto;font-size:15px;line-height:24px;}
+.XydComponents-Component-layouts__PageArticleContainer{width:980px;padding:40px 56px;padding-top:20px;max-width:100%;margin:0 auto;}
+.XydComponents-Component-layouts__PageArticleContainerFullWidth{width:1200px;}
+.XydComponents-Component-layouts__ArticleHost{display:flex;gap:30px;width:100%;align-items:flex-start;}
+.XydComponents-Component-layouts__ArticleContent{flex:1 1 0;overflow:hidden;}
+.XydComponents-Component-layouts__ArticleNav{position:sticky;top:30px;width:180px;margin-top:0;margin-left:50px;padding-left:16px;flex:none;}
+:root {--xyd-navbar-height:50px;--xyd-global-page-gutter:8px;--xyd-sidebar-width:250px;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHost{width:100%;overflow-x:hidden;background:#fff;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeader{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0px;right:8px;left:8px;height:50px;z-index:20;background:#fff;}
+@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeader{padding:0;}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeaderContent{display:flex;align-items:center;width:100%;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeaderSub{flex-direction:column;height:94px;transition:transform 200ms;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeaderHideMain{transform:translateY(calc(-50px + 3px));}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerButton{display:none;}
+@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerButton{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;cursor:pointer;padding:0;}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerIcon{width:24px;height:24px;position:relative;display:flex;flex-direction:column;justify-content:space-between;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerLine{width:100%;height:2px;background:#000;transition:transform 0.3s cubic-bezier(.65, 0, .35, 1);}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerLineOpen:first-child{transform:translateY(11px) rotate(45deg);}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerLineOpen:nth-child(2){opacity:0;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerLineOpen:last-child{transform:translateY(-11px) rotate(-45deg);}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMain{position:fixed;display:flex;top:calc(50px + 0px);bottom:0;left:0;right:0;padding:8px;overflow:hidden;}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMain{padding-top:calc(50px + 0px + 8px);}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMainSub{top:calc(94px + 0px);}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMainSub{padding-top:calc(94px + 0px + 8px);}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryStaticSidebar{flex:none;width:250px;background:#fff;display:flex;flex-direction:column;position:relative;height:100%;}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryStaticSidebar{display:none;}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMobileSidebar{display:none;}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMobileSidebar{display:flex;position:fixed;top:0;bottom:0;left:0;width:250px;background:#fff;flex-direction:column;z-index:50;transform:translateX(-100%);transition:transform .3s cubic-bezier(.65, 0, .35, 1);box-shadow:4px 0 8px rgba(0, 0, 0, 0.1);}}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMobileSidebarOpen{transform:translateX(0);}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimarySidebarContent{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseButton{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimarySearchInput{width:100%;height:40px;padding:0 12px;border:1px solid #eaeaea;border-radius:6px;font-size:14px;outline:none;transition:border-color 0.2s;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimarySearchInput:focus{border-color:#666;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon{width:20px;height:20px;position:relative;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon::before,.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon::after{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;background:#666;transform-origin:center;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon::before{transform:rotate(45deg);}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon::after{transform:rotate(-45deg);}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryOverlay{display:none;}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryOverlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0, 0, 0, 0.6);transition:opacity .3s;opacity:0;pointer-events:none;z-index:40;height:100vh;}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryOverlayVisible{opacity:1;pointer-events:auto;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageHost{position:relative;flex:1;background:#fff;overflow:hidden;min-width:0;height:100%;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageScroll{overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch;padding:0 48px;}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageScroll{padding:0 32px;}}
+@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageScroll{padding:0 24px;}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageContainer{max-width:1000px;margin:0 auto;padding:0 8px;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageContainerLarge{max-width:1200px;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageArticleContainer{display:flex;gap:48px;padding:48px 0;min-height:100%;}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageArticleContainer{gap:32px;}}
+@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageArticleContainer{flex-direction:column;padding:24px 0;gap:24px;}}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleHost{flex:1;min-width:0;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleContent{width:100%;}
+.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleNav{flex:none;width:256px;position:sticky;top:0;height:-moz-fit-content;height:fit-content;max-height:100vh;overflow-y:auto;padding-right:24px;padding-top:12px;}
+@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleNav{width:200px;padding-right:16px;}}
+@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleNav{width:100%;position:static;max-height:none;padding-right:0;}}
+.XydComponents-Component-coder-CodeTabs__CodeTabsHost{overflow:hidden;min-width:0;border:1px solid rgb(236, 236, 241);border-radius:16px;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsPreSingle{border:none!important;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesHost{display:flex;flex:1 1 0%;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom:0px;min-width:0;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesHostSingle{height:0;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesList{display:flex;flex-grow:1;justify-content:end;gap:8px;padding:0 10px;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesButton{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:6px;font-size:14px;color:rgb(53, 55, 64);}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesButton[data-state="active"]{color:rgb(112, 81, 212);border-bottom:1px solid rgb(112, 81, 212);border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesButton:hover{transition:ease-in 0.1s;background:#e3e3eb;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesDescription{display:flex;align-items:center;gap:4px;font-size:14px;color:rgb(53, 55, 64);margin-left:4px;margin-right:4px;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesDescriptionItem{display:flex;padding-left:16px;padding-right:16px;flex:1 1 0%;gap:16px;border-radius:4px;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesCopy{display:flex;padding-left:8px;padding-right:8px;align-items:center;}
+.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesCopySingle{top:17px;position:relative;right:5px;}
+.XydComponents-Component-coder-Code__MarkHost{display:flex;border-left-width:4px;border-color:transparent;margin:4px 0;}
+.XydComponents-Component-coder-Code__MarkLine{flex:1 1 0%;}
+.XydComponents-Component-coder-Code__MarkAnnotated{border-color:#60A5FA;background-color:#EEF2FF;}
+.XydComponents-Component-coder-Code__LineNumberHost{margin:0 12px 0px 4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.5;}
+.XydComponents-Component-coder-Code__CodeHost{max-height:400px;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;margin:0;padding:8px 16px;border-top:1px solid rgb(236, 236, 241);border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:12px;line-height:20px;white-space:pre-wrap;word-break:break-all;overflow-y:scroll;}
+.XydComponents-Component-coder-Code__CodeHostFull{max-height:100%;}
+.XydComponents-Component-content-Anchor__AnchorHost{color:#7051d4;}
+.XydComponents-Component-content-Content__ContentHost{display:flex;flex-direction:column;gap:24px;font-size:16px;line-height:1.5;}
+.XydComponents-Component-content-Subtitle-Subtitle_styles_ts__Host{margin-top:-18px;font-size:18px;color:#6e6e80;font-weight:300;}
+.XydComponents-Component-ui-Loader__LoaderHost{display:inline-flex;align-items:center;justify-content:center;}
+.XydComponents-Component-ui-Loader__LoaderDots{display:flex;gap:4px;}
+.XydComponents-Component-ui-Loader__LoaderDot{width:8px;height:8px;background-color:currentColor;border-radius:50%;animation:pulse-XydComponents-Component-ui-Loader__LoaderDot 1.4s infinite ease-in-out;opacity:0.6;}
+.XydComponents-Component-ui-Loader__LoaderDot:nth-of-type(2){animation-delay:0.2s;}
+.XydComponents-Component-ui-Loader__LoaderDot:nth-of-type(3){animation-delay:0.4s;}
+@keyframes pulse-XydComponents-Component-ui-Loader__LoaderDot{0%,80%,100%{transform:scale(0.6);opacity:0.4;}40%{transform:scale(1);opacity:1;}}
+.XydComponents-Component-ui-Loader__LoaderSmall .XydComponents-Component-ui-Loader__LoaderDot{width:6px;height:6px;}
+.XydComponents-Component-ui-Loader__LoaderLarge .XydComponents-Component-ui-Loader__LoaderDot{width:12px;height:12px;}
+.XydComponents-Component-coder-CodeCopy__CodeCopyHost{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:6px;}
+.XydComponents-Component-coder-CodeCopy__CodeCopyHost:hover{transition:ease-in 0.1s;background:#e3e3eb;}
+

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+declare abstract class BaseThemeSettings {
+    private _toc?;
+    private _tocHidden;
+    private _clientSidebarRouting;
+    private _layoutSize;
+    protected toc: {
+        (value: React.ReactElement): BaseThemeSettings;
+        get: () => React.ReactNode | undefined;
+        hide: () => BaseThemeSettings;
+        isHidden: () => boolean;
+    };
+    protected sidebar: {
+        clientSideRouting: (value: boolean) => BaseThemeSettings;
+        getClientSideRouting: () => boolean;
+    };
+    protected layout: {
+        size: (value: string) => BaseThemeSettings;
+        getSize: () => string;
+    };
+}
+
+interface ThemeProps<T extends BaseThemeSettings> {
+    children: React.ReactNode;
+    settings?: T;
+}
+
+interface BaseThemeRenderProps {
+    children: React.ReactNode;
+}
+declare abstract class BaseTheme extends BaseThemeSettings {
+    protected render(props: BaseThemeRenderProps): React.JSX.Element;
+    protected mergeSettings(props: ThemeProps<BaseThemeSettings>): void;
+    protected Navbar(): React.JSX.Element;
+    protected Sidebar(): React.JSX.Element;
+    protected Content({ children }: {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    protected ContentNav(): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element;
+}
+
+declare function withTheme<T extends BaseThemeSettings>(theme: BaseTheme): (props: ThemeProps<T>) => any;
+
+export { BaseTheme, BaseThemeSettings, type ThemeProps, withTheme };

package/dist/index.js

@@ -0,0 +1,136 @@
+// src/BaseTheme.tsx
+import * as React from "react";
+import {
+  LayoutPrimary
+} from "@xyd-js/components/layouts";
+import {
+  helperContent
+} from "@xyd-js/components/content";
+import {
+  FwNav,
+  FwNavLinks,
+  FwToc,
+  FwSubNav,
+  FwSidebarGroups,
+  useMatchedSubNav
+} from "@xyd-js/framework/react";
+
+// src/settings.ts
+var BaseThemeSettings = class {
+  constructor() {
+    this._toc = void 0;
+    this._tocHidden = false;
+    this._clientSidebarRouting = false;
+    this._layoutSize = "";
+    this.toc = Object.assign(
+      (value) => {
+        this._toc = value;
+        return this;
+      },
+      {
+        get: () => {
+          return this._toc;
+        },
+        hide: () => {
+          this._tocHidden = true;
+          return this;
+        },
+        isHidden: () => {
+          return this._tocHidden;
+        }
+      }
+    );
+    this.sidebar = {
+      clientSideRouting: (value) => {
+        this._clientSidebarRouting = value;
+        return this;
+      },
+      getClientSideRouting: () => {
+        return this._clientSidebarRouting;
+      }
+    };
+    this.layout = {
+      size: (value) => {
+        this._layoutSize = value;
+        return this;
+      },
+      getSize: () => {
+        return this._layoutSize;
+      }
+    };
+  }
+};
+
+// src/BaseTheme.tsx
+var {
+  Content: HelperContent
+} = helperContent();
+var BaseTheme = class extends BaseThemeSettings {
+  render(props) {
+    const {
+      Navbar: $Navbar,
+      Sidebar: $Sidebar,
+      Content: $Content,
+      ContentNav: $ContentNav
+    } = this;
+    const subheader = useMatchedSubNav() ? /* @__PURE__ */ React.createElement(FwSubNav, null) : null;
+    const contentNav = this.toc.isHidden() ? void 0 : /* @__PURE__ */ React.createElement($ContentNav, null);
+    return /* @__PURE__ */ React.createElement(
+      LayoutPrimary,
+      {
+        header: /* @__PURE__ */ React.createElement($Navbar, null),
+        subheader,
+        aside: /* @__PURE__ */ React.createElement($Sidebar, null),
+        content: /* @__PURE__ */ React.createElement($Content, null, props.children),
+        contentNav,
+        layoutSize: (this == null ? void 0 : this.layout.getSize()) || void 0
+      }
+    );
+  }
+  // TODO: it should be protected and passed via withTheme?
+  mergeSettings(props) {
+    if (props.settings) {
+      Object.assign(this, props.settings);
+    }
+  }
+  Navbar() {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FwNav, { kind: "middle" }));
+  }
+  Sidebar() {
+    var _a;
+    return /* @__PURE__ */ React.createElement(
+      FwSidebarGroups,
+      {
+        clientSideRouting: (_a = this == null ? void 0 : this.sidebar) == null ? void 0 : _a.getClientSideRouting()
+      }
+    );
+  }
+  Content({ children }) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HelperContent, null, children), /* @__PURE__ */ React.createElement(FwNavLinks, null));
+  }
+  ContentNav() {
+    var _a;
+    const toc = (_a = this == null ? void 0 : this.toc) == null ? void 0 : _a.get();
+    if (toc) {
+      return toc;
+    }
+    return /* @__PURE__ */ React.createElement(FwToc, null);
+  }
+};
+
+// src/withTheme.tsx
+function withTheme(theme) {
+  return function WithThemeComponent(props) {
+    return withThemeComponent.call(theme, props);
+  };
+}
+function withThemeComponent(props) {
+  this.mergeSettings(props);
+  return this.render(props);
+}
+export {
+  BaseTheme,
+  BaseThemeSettings,
+  withTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/BaseTheme.tsx","../src/settings.ts","../src/withTheme.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    LayoutPrimary\n} from \"@xyd-js/components/layouts\";\nimport {\n    helperContent\n} from \"@xyd-js/components/content\"\nimport {\n    FwNav,\n    FwNavLinks,\n    FwToc,\n    FwSubNav,\n    FwSidebarGroups,\n\n    useMatchedSubNav\n} from \"@xyd-js/framework/react\";\n\nimport {BaseThemeSettings} from \"./settings\";\nimport {ThemeProps} from \"./types\";\n\ninterface BaseThemeRenderProps {\n    children: React.ReactNode;\n}\n\nconst {\n    Content: HelperContent\n} = helperContent()\n\nexport abstract class BaseTheme extends BaseThemeSettings {\n    protected render(props: BaseThemeRenderProps): React.JSX.Element {\n        const {\n            Navbar: $Navbar,\n            Sidebar: $Sidebar,\n            Content: $Content,\n            ContentNav: $ContentNav\n        } = this\n\n        const subheader = useMatchedSubNav() ? <FwSubNav/> : null\n        const contentNav = this.toc.isHidden() ? undefined : <$ContentNav/>\n\n        return <LayoutPrimary\n            header={<$Navbar/>}\n            subheader={subheader}\n            aside={<$Sidebar/>}\n            content={<$Content>{props.children}</$Content>}\n            contentNav={contentNav}\n            layoutSize={this?.layout.getSize() as \"large\" || undefined}\n        />\n    }\n\n    // TODO: it should be protected and passed via withTheme?\n    protected mergeSettings(props: ThemeProps<BaseThemeSettings>) {\n        if (props.settings) {\n            Object.assign(this, props.settings);\n        }\n    }\n\n    protected Navbar() {\n        return <>\n            <FwNav kind=\"middle\"/>\n        </>\n    }\n\n    protected Sidebar() {\n        return <FwSidebarGroups\n            // onePathBehaviour={this?.sidebar?.onePathBehaviour} TODO: finish\n            clientSideRouting={this?.sidebar?.getClientSideRouting()}\n        />\n    }\n\n    protected Content({children}: { children: React.ReactNode }) {\n        return <>\n            {/*TODO: optional breadcrumbs*/}\n            {/*{props.breadcrumbs ? <FwBreadcrumbs/> : undefined}*/}\n\n            <HelperContent>\n                {children}\n            </HelperContent>\n\n            <FwNavLinks/>\n        </>\n    }\n\n    protected ContentNav() {\n        const toc = this?.toc?.get()\n\n        if (toc) {\n            return toc\n        }\n\n        return <FwToc/>\n    }\n}\n","import * as React from \"react\";\n\nexport abstract class BaseThemeSettings {\n    private _toc?: React.ReactNode = undefined;\n    private _tocHidden: boolean = false;\n    private _clientSidebarRouting: boolean = false;\n    private _layoutSize: string = \"\";\n\n    protected toc: {\n        (value: React.ReactElement): BaseThemeSettings;\n        get: () => React.ReactNode | undefined;\n        hide: () => BaseThemeSettings;\n        isHidden: () => boolean;\n    } = Object.assign(\n        (value: React.ReactElement) => {\n            this._toc = value;\n            return this;\n        },\n        {\n            get: () => {\n                return this._toc;\n            },\n            hide: () => {\n                this._tocHidden = true;\n                return this;\n            },\n            isHidden: () => {\n                return this._tocHidden;\n            }\n        }\n    );\n\n    protected sidebar: {\n        clientSideRouting: (value: boolean) => BaseThemeSettings;\n        getClientSideRouting: () => boolean\n    } = {\n        clientSideRouting: (value: boolean) => { // TODO: deprecate?\n            this._clientSidebarRouting = value;\n            return this;\n        },\n        getClientSideRouting: () => {\n            return this._clientSidebarRouting;\n        }\n    };\n\n    protected layout: {\n        size: (value: string) => BaseThemeSettings;\n        getSize: () => string;\n    } = {\n        size: (value: string) => {\n            this._layoutSize = value;\n            return this;\n        },\n        getSize: () => {\n            return this._layoutSize;\n        }\n    };\n}\n","import React from \"react\";\n\nimport {type ThemeProps} from \"./types\";\nimport {BaseThemeSettings} from \"./settings\";\nimport {BaseTheme} from \"./BaseTheme\";\n\nexport function withTheme<T extends BaseThemeSettings>(theme: BaseTheme) {\n    return function WithThemeComponent(props: ThemeProps<T>) {\n        return withThemeComponent.call(theme, props);\n    };\n}\n\nfunction withThemeComponent<T extends BaseThemeSettings>(\n    this: BaseTheme,\n    props: ThemeProps<T>\n) {\n    this.mergeSettings(props); // TODO: is it ok to do this on this level?\n\n    return this.render(props);\n}"],"mappings":";AAAA,YAAY,WAAW;AAEvB;AAAA,EACI;AAAA,OACG;AACP;AAAA,EACI;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACG;;;ACdA,IAAe,oBAAf,MAAiC;AAAA,EAAjC;AACH,SAAQ,OAAyB;AACjC,SAAQ,aAAsB;AAC9B,SAAQ,wBAAiC;AACzC,SAAQ,cAAsB;AAE9B,SAAU,MAKN,OAAO;AAAA,MACP,CAAC,UAA8B;AAC3B,aAAK,OAAO;AACZ,eAAO;AAAA,MACX;AAAA,MACA;AAAA,QACI,KAAK,MAAM;AACP,iBAAO,KAAK;AAAA,QAChB;AAAA,QACA,MAAM,MAAM;AACR,eAAK,aAAa;AAClB,iBAAO;AAAA,QACX;AAAA,QACA,UAAU,MAAM;AACZ,iBAAO,KAAK;AAAA,QAChB;AAAA,MACJ;AAAA,IACJ;AAEA,SAAU,UAGN;AAAA,MACA,mBAAmB,CAAC,UAAmB;AACnC,aAAK,wBAAwB;AAC7B,eAAO;AAAA,MACX;AAAA,MACA,sBAAsB,MAAM;AACxB,eAAO,KAAK;AAAA,MAChB;AAAA,IACJ;AAEA,SAAU,SAGN;AAAA,MACA,MAAM,CAAC,UAAkB;AACrB,aAAK,cAAc;AACnB,eAAO;AAAA,MACX;AAAA,MACA,SAAS,MAAM;AACX,eAAO,KAAK;AAAA,MAChB;AAAA,IACJ;AAAA;AACJ;;;ADhCA,IAAM;AAAA,EACF,SAAS;AACb,IAAI,cAAc;AAEX,IAAe,YAAf,cAAiC,kBAAkB;AAAA,EAC5C,OAAO,OAAgD;AAC7D,UAAM;AAAA,MACF,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,IAAI;AAEJ,UAAM,YAAY,iBAAiB,IAAI,oCAAC,cAAQ,IAAK;AACrD,UAAM,aAAa,KAAK,IAAI,SAAS,IAAI,SAAY,oCAAC,iBAAW;AAEjE,WAAO;AAAA,MAAC;AAAA;AAAA,QACJ,QAAQ,oCAAC,aAAO;AAAA,QAChB;AAAA,QACA,OAAO,oCAAC,cAAQ;AAAA,QAChB,SAAS,oCAAC,gBAAU,MAAM,QAAS;AAAA,QACnC;AAAA,QACA,aAAY,6BAAM,OAAO,cAAwB;AAAA;AAAA,IACrD;AAAA,EACJ;AAAA;AAAA,EAGU,cAAc,OAAsC;AAC1D,QAAI,MAAM,UAAU;AAChB,aAAO,OAAO,MAAM,MAAM,QAAQ;AAAA,IACtC;AAAA,EACJ;AAAA,EAEU,SAAS;AACf,WAAO,0DACH,oCAAC,SAAM,MAAK,UAAQ,CACxB;AAAA,EACJ;AAAA,EAEU,UAAU;AAhExB;AAiEQ,WAAO;AAAA,MAAC;AAAA;AAAA,QAEJ,oBAAmB,kCAAM,YAAN,mBAAe;AAAA;AAAA,IACtC;AAAA,EACJ;AAAA,EAEU,QAAQ,EAAC,SAAQ,GAAkC;AACzD,WAAO,0DAIH,oCAAC,qBACI,QACL,GAEA,oCAAC,gBAAU,CACf;AAAA,EACJ;AAAA,EAEU,aAAa;AApF3B;AAqFQ,UAAM,OAAM,kCAAM,QAAN,mBAAW;AAEvB,QAAI,KAAK;AACL,aAAO;AAAA,IACX;AAEA,WAAO,oCAAC,WAAK;AAAA,EACjB;AACJ;;;AEvFO,SAAS,UAAuC,OAAkB;AACrE,SAAO,SAAS,mBAAmB,OAAsB;AACrD,WAAO,mBAAmB,KAAK,OAAO,KAAK;AAAA,EAC/C;AACJ;AAEA,SAAS,mBAEL,OACF;AACE,OAAK,cAAc,KAAK;AAExB,SAAO,KAAK,OAAO,KAAK;AAC5B;","names":[]}

package/dist/tokens.css

@@ -0,0 +1,55 @@
+/*TODO: in the future not needed cuz every component would have have default styles itself?*/
+
+body {
+    margin: 0;
+}
+
+ol, ul, menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+}
+
+button, [role=button] {
+    cursor: pointer;
+}
+
+button, select {
+    text-transform: none;
+}
+
+button, input, optgroup, select, textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+*, :before, :after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+}
+
+p {
+    padding: 0;
+    margin: 0;
+}
+

package/package.json

@@ -1,11 +1,32 @@
 {
   "name": "@xyd-js/themes",
-  "version": "0.0.0",
-  "description": "* gusto - general purpose docs theme",
-  "main": "index.js",
-  "author": "",
-  "license": "ISC",
+  "version": "0.1.1-xyd.0",
+  "description": "xyd themes API",
+  "main": "dist/index.js",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    "./reset.css": "./dist/tokens.css",
+    "./index.css": "./dist/index.css",
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@xyd-js/atlas": "0.1.0-xyd.13",
+    "@xyd-js/components": "0.1.0-xyd.8",
+    "@xyd-js/ui": "0.1.0-xyd.13",
+    "@xyd-js/framework": "0.1.0-xyd.28"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.1.0",
+    "tsup": "^8.3.0",
+    "typescript": "5.6.2"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsup && node scripts/build-css.js"
   }
 }

package/postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {
+      path: ['node_modules', 'src']
+    }
+  }
+} 

package/scripts/build-css.js

@@ -0,0 +1,54 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import postcss from 'postcss';
+import postcssImport from 'postcss-import';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const workspaceRoot = path.join(__dirname, '../../..');
+
+async function processCSS(inputFile, outputFile) {
+    const css = await fs.readFile(inputFile, 'utf8');
+    const result = await postcss([
+        postcssImport({
+            path: [
+                path.join(__dirname, '../src'),
+                path.join(workspaceRoot, 'packages'),
+                workspaceRoot
+            ],
+            filter: (url) => {
+                // Handle package imports
+                if (url.startsWith('@xyd-js/')) {
+                    const [scope, packageName, ...rest] = url.split('/');
+                    // Look in dist directory for the CSS files
+                    return path.join(workspaceRoot, 'packages', packageName, 'dist', ...rest);
+                }
+                return url;
+            }
+        })
+    ]).process(css, {
+        from: inputFile,
+        to: outputFile,
+        config: path.join(__dirname, '../postcss.config.cjs')
+    });
+
+    await fs.writeFile(outputFile, result.css);
+}
+
+async function main() {
+    const distDir = path.join(__dirname, '../dist');
+    await fs.mkdir(distDir, { recursive: true });
+
+    await processCSS(
+        path.join(__dirname, '../src/styles/index.css'),
+        path.join(distDir, 'index.css')
+    );
+
+    await processCSS(
+        path.join(__dirname, '../src/styles/reset.css'),
+        path.join(distDir, 'tokens.css')
+    );
+}
+
+main().catch(console.error); 

package/src/BaseTheme.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+
+import {
+    LayoutPrimary
+} from "@xyd-js/components/layouts";
+import {
+    helperContent
+} from "@xyd-js/components/content"
+import {
+    FwNav,
+    FwNavLinks,
+    FwToc,
+    FwSubNav,
+    FwSidebarGroups,
+
+    useMatchedSubNav
+} from "@xyd-js/framework/react";
+
+import {BaseThemeSettings} from "./settings";
+import {ThemeProps} from "./types";
+
+interface BaseThemeRenderProps {
+    children: React.ReactNode;
+}
+
+const {
+    Content: HelperContent
+} = helperContent()
+
+export abstract class BaseTheme extends BaseThemeSettings {
+    protected render(props: BaseThemeRenderProps): React.JSX.Element {
+        const {
+            Navbar: $Navbar,
+            Sidebar: $Sidebar,
+            Content: $Content,
+            ContentNav: $ContentNav
+        } = this
+
+        const subheader = useMatchedSubNav() ? <FwSubNav/> : null
+        const contentNav = this.toc.isHidden() ? undefined : <$ContentNav/>
+
+        return <LayoutPrimary
+            header={<$Navbar/>}
+            subheader={subheader}
+            aside={<$Sidebar/>}
+            content={<$Content>{props.children}</$Content>}
+            contentNav={contentNav}
+            layoutSize={this?.layout.getSize() as "large" || undefined}
+        />
+    }
+
+    // TODO: it should be protected and passed via withTheme?
+    protected mergeSettings(props: ThemeProps<BaseThemeSettings>) {
+        if (props.settings) {
+            Object.assign(this, props.settings);
+        }
+    }
+
+    protected Navbar() {
+        return <>
+            <FwNav kind="middle"/>
+        </>
+    }
+
+    protected Sidebar() {
+        return <FwSidebarGroups
+            // onePathBehaviour={this?.sidebar?.onePathBehaviour} TODO: finish
+            clientSideRouting={this?.sidebar?.getClientSideRouting()}
+        />
+    }
+
+    protected Content({children}: { children: React.ReactNode }) {
+        return <>
+            {/*TODO: optional breadcrumbs*/}
+            {/*{props.breadcrumbs ? <FwBreadcrumbs/> : undefined}*/}
+
+            <HelperContent>
+                {children}
+            </HelperContent>
+
+            <FwNavLinks/>
+        </>
+    }
+
+    protected ContentNav() {
+        const toc = this?.toc?.get()
+
+        if (toc) {
+            return toc
+        }
+
+        return <FwToc/>
+    }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export {
+    BaseTheme,
+} from "./BaseTheme"
+
+export {
+    BaseThemeSettings
+} from "./settings"
+
+export type {
+    ThemeProps
+} from "./types"
+
+export {
+    withTheme,
+} from "./withTheme"

package/src/settings.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+
+export abstract class BaseThemeSettings {
+    private _toc?: React.ReactNode = undefined;
+    private _tocHidden: boolean = false;
+    private _clientSidebarRouting: boolean = false;
+    private _layoutSize: string = "";
+
+    protected toc: {
+        (value: React.ReactElement): BaseThemeSettings;
+        get: () => React.ReactNode | undefined;
+        hide: () => BaseThemeSettings;
+        isHidden: () => boolean;
+    } = Object.assign(
+        (value: React.ReactElement) => {
+            this._toc = value;
+            return this;
+        },
+        {
+            get: () => {
+                return this._toc;
+            },
+            hide: () => {
+                this._tocHidden = true;
+                return this;
+            },
+            isHidden: () => {
+                return this._tocHidden;
+            }
+        }
+    );
+
+    protected sidebar: {
+        clientSideRouting: (value: boolean) => BaseThemeSettings;
+        getClientSideRouting: () => boolean
+    } = {
+        clientSideRouting: (value: boolean) => { // TODO: deprecate?
+            this._clientSidebarRouting = value;
+            return this;
+        },
+        getClientSideRouting: () => {
+            return this._clientSidebarRouting;
+        }
+    };
+
+    protected layout: {
+        size: (value: string) => BaseThemeSettings;
+        getSize: () => string;
+    } = {
+        size: (value: string) => {
+            this._layoutSize = value;
+            return this;
+        },
+        getSize: () => {
+            return this._layoutSize;
+        }
+    };
+}

package/src/styles/index.css

@@ -0,0 +1,5 @@
+@import "@xyd-js/ui/dist/index.css";
+@import "@xyd-js/atlas/dist/tokens.css";
+@import "@xyd-js/atlas/dist/index.css";
+@import "@xyd-js/components/dist/index.css";
+

package/src/styles/reset.css

@@ -0,0 +1,55 @@
+/*TODO: in the future not needed cuz every component would have have default styles itself?*/
+
+body {
+    margin: 0;
+}
+
+ol, ul, menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+}
+
+button, [role=button] {
+    cursor: pointer;
+}
+
+button, select {
+    text-transform: none;
+}
+
+button, input, optgroup, select, textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+*, :before, :after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+}
+
+p {
+    padding: 0;
+    margin: 0;
+}
+

package/src/types.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import {BaseThemeSettings} from "./settings";
+
+interface ThemeProps<T extends BaseThemeSettings> {
+    children: React.ReactNode;
+
+    settings?: T;
+}
+
+export type {ThemeProps};

package/src/withTheme.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import {type ThemeProps} from "./types";
+import {BaseThemeSettings} from "./settings";
+import {BaseTheme} from "./BaseTheme";
+
+export function withTheme<T extends BaseThemeSettings>(theme: BaseTheme) {
+    return function WithThemeComponent(props: ThemeProps<T>) {
+        return withThemeComponent.call(theme, props);
+    };
+}
+
+function withThemeComponent<T extends BaseThemeSettings>(
+    this: BaseTheme,
+    props: ThemeProps<T>
+) {
+    this.mergeSettings(props); // TODO: is it ok to do this on this level?
+
+    return this.render(props);
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+    entry: {
+        index: 'src/index.ts'
+    },
+    format: ['esm'],
+    target: 'node16',
+    dts: {
+        entry: {
+            index: 'src/index.ts'
+        },
+        resolve: true,
+    },
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+    esbuildOptions: (options) => {
+        options.platform = 'node';
+        options.external = ['node:fs/promises', 'react-router'];
+        options.loader = { '.js': 'jsx' };
+    },
+    ignoreWatch: ['node_modules', 'dist', '.git', 'build']
+});