@wrdagency/blockout 1.0.25 → 1.0.26

package/dist/assets/button.css

@@ -1 +1 @@
-.component-button{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--600);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__surface--50);--button__icon--hover: var(--blockout__colours__surface--50);--button__padding--y: .75rem;--button__padding--x: 1.25rem;--button__gap: 1rem;--button__font-size: 1rem;display:flex;align-items:center;justify-content:center;gap:var(--button__gap);padding:var(--button__padding--y) var(--button__padding--x);font-size:var(--button__font-size);min-height:40px;width:fit-content;background-color:var(--button__bg);border:1px solid var(--button__border);border-radius:var(--blockout__radius--md);color:var(--button__text);cursor:pointer;outline:0px solid transparent;outline-offset:0px;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}.component-button>svg{width:calc(1.375 * var(--button__font-size));height:calc(1.375 * var(--button__font-size));color:var(--button__icon);fill:var(--button__icon);transition:fill .25s ease,color .25s ease}.component-button:hover{background-color:var(--button__bg--hover);border-color:var(--button__border--hover);color:var(--button__text--hover)}.component-button:focus{background-color:var(--button__bg--hover);color:var(--button__text--hover);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-button:hover>svg{color:var(--button__icon--hover);fill:var(--button__icon--hover)}.component-button:active{outline-offset:3px}.component-button[aria-pressed=true]{background-color:var(--button__bg--pressed);border-color:var(--button__border--pressed);color:var(--button__text--pressed);box-shadow:inset 0 .25rem .5rem #00000040}.component-button[aria-pressed=true]>svg{color:var(--button__icon--pressed);fill:var(--button__icon--pressed)}.component-button[aria-busy=true]{background-image:repeating-linear-gradient(-45deg,var(--button__bg),var(--button__bg) 1rem,var(--button__bg--hover) 1rem,var(--button__bg--hover) 2rem);background-size:200% 200%;animation:component-button__busy 15s linear infinite}@keyframes component-button__busy{0%{background-position:100% 100%}}.component-button:disabled:not([aria-busy=true]){opacity:.5;cursor:default;--button__border--hover: var(--button__border);--button__bg--hover: var(--button__bg);--button__text--hover: var(--button__text);--button__icon: var(--button__text);--button__icon--hover: var(--button__text)}.component-button--wide{width:100%}.component-button--icon{aspect-ratio:1/1;height:fit-content;width:auto;padding:var(--button__padding--y)}.component-button--icon>svg{color:var(--button__text);fill:var(--button__text)}.component-button--icon:hover>svg{color:var(--button__text--hover);fill:var(--button__text--hover)}.component-button--icon[aria-pressed=true]>svg{color:var(--button__text--pressed);fill:var(--button__text--pressed)}.component-button--primary{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--400);--button__bg--pressed: var(--blockout__colours__primary--400);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__text--pressed: var(--blockout__colours__surface--950);--button__icon: var(--blockout__colours__primary--200);--button__icon--hover: var(--blockout__colours__primary--200);--button__icon--pressed: var(--blockout__colours__primary--200)}.component-button--neutral{--button__bg: var(--blockout__colours__surface--950);--button__bg--hover: var(--blockout__colours__surface--800);--button__bg--pressed: var(--blockout__colours__surface--950);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50);--button__text--pressed: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__primary--500);--button__icon--hover: var(--blockout__colours__primary--500);--button__icon--pressed: var(--blockout__colours__primary--500)}.component-button--quiet{--button__border: var(--blockout__colours__surface--300);--button__border--hover: var(--blockout__colours__surface--100);--button__border--pressed: var(--blockout__colours__surface--950);--button__bg: var(--blockout__colours__surface--0);--button__bg--hover: var(--blockout__colours__surface--100);--button__bg--pressed: var(--blockout__colours__surface--950);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__text--pressed: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__primary--500);--button__icon--hover: var(--blockout__colours__primary--500);--button__icon--pressed: var(--blockout__colours__primary--500)}.component-button--ghost{--button__bg: transparent;--button__bg--hover: var(--blockout__colours__surface--100);--button__bg--pressed: var(--blockout__colours__surface--950);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__text--pressed: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__surface--950);--button__icon--hover: var(--blockout__colours__primary--950);--button__icon--pressed: var(--blockout__colours__primary--50)}.component-button--small{--button__padding--y: .675rem;--button__padding--x: .875rem;--button__gap: .625rem;--button__font-size: .875rem;border-radius:var(--blockout__radius--sm);min-height:2rem}.component-button--medium{--button__padding--y: .75rem;--button__padding--x: 1.25rem;--button__gap: 1rem;--button__font-size: 1rem;border-radius:var(--blockout__radius--md)}.component-button--large{--button__padding--y: 1rem;--button__padding--x: 1.5rem;--button__gap: 1.25rem;--button__font-size: 1.25rem;border-radius:var(--blockout__radius--lg)}.component-button-row__row{display:flex;flex-wrap:wrap;gap:.5rem}
+.component-button{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--600);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__surface--50);--button__icon--hover: var(--blockout__colours__surface--50);--button__padding--y: .75rem;--button__padding--x: 1.25rem;--button__gap: 1rem;--button__font-size: 1rem;display:flex;align-items:center;justify-content:center;gap:var(--button__gap);padding:var(--button__padding--y) var(--button__padding--x);font-size:var(--button__font-size);min-height:40px;width:fit-content;background-color:var(--button__bg);border:1px solid var(--button__border);border-radius:var(--blockout__radius--md);color:var(--button__text);cursor:pointer;outline:0px solid transparent;outline-offset:0px;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}.component-button>svg{width:calc(1.375 * var(--button__font-size));height:calc(1.375 * var(--button__font-size));color:var(--button__icon);fill:var(--button__icon);transition:fill .25s ease,color .25s ease}.component-button:hover{background-color:var(--button__bg--hover);border-color:var(--button__border--hover);color:var(--button__text--hover)}.component-button:focus-visible{background-color:var(--button__bg--hover);color:var(--button__text--hover);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-button:hover>svg{color:var(--button__icon--hover);fill:var(--button__icon--hover)}.component-button:active{outline-offset:3px}.component-button[aria-pressed=true]{background-color:var(--button__bg--pressed);border-color:var(--button__border--pressed);color:var(--button__text--pressed);box-shadow:inset 0 .25rem .5rem #00000040}.component-button[aria-pressed=true]>svg{color:var(--button__icon--pressed);fill:var(--button__icon--pressed)}.component-button[aria-busy=true]{background-image:repeating-linear-gradient(-45deg,var(--button__bg),var(--button__bg) 1rem,var(--button__bg--hover) 1rem,var(--button__bg--hover) 2rem);background-size:200% 200%;animation:component-button__busy 15s linear infinite}@keyframes component-button__busy{0%{background-position:100% 100%}}.component-button:disabled:not([aria-busy=true]){opacity:.5;cursor:default;--button__border--hover: var(--button__border);--button__bg--hover: var(--button__bg);--button__text--hover: var(--button__text);--button__icon: var(--button__text);--button__icon--hover: var(--button__text)}.component-button--wide{width:100%}.component-button--icon{aspect-ratio:1/1;height:fit-content;width:auto;padding:var(--button__padding--y)}.component-button--icon>svg{color:var(--button__text);fill:var(--button__text)}.component-button--icon:hover>svg{color:var(--button__text--hover);fill:var(--button__text--hover)}.component-button--icon[aria-pressed=true]>svg{color:var(--button__text--pressed);fill:var(--button__text--pressed)}.component-button--primary{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--400);--button__bg--pressed: var(--blockout__colours__primary--400);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__text--pressed: var(--blockout__colours__surface--950);--button__icon: var(--blockout__colours__primary--200);--button__icon--hover: var(--blockout__colours__primary--200);--button__icon--pressed: var(--blockout__colours__primary--200)}.component-button--neutral{--button__bg: var(--blockout__colours__surface--950);--button__bg--hover: var(--blockout__colours__surface--800);--button__bg--pressed: var(--blockout__colours__surface--950);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50);--button__text--pressed: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__primary--500);--button__icon--hover: var(--blockout__colours__primary--500);--button__icon--pressed: var(--blockout__colours__primary--500)}.component-button--quiet{--button__border: var(--blockout__colours__surface--300);--button__border--hover: var(--blockout__colours__surface--100);--button__border--pressed: var(--blockout__colours__surface--950);--button__bg: var(--blockout__colours__surface--0);--button__bg--hover: var(--blockout__colours__surface--100);--button__bg--pressed: var(--blockout__colours__surface--950);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__text--pressed: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__primary--500);--button__icon--hover: var(--blockout__colours__primary--500);--button__icon--pressed: var(--blockout__colours__primary--500)}.component-button--ghost{--button__bg: transparent;--button__bg--hover: var(--blockout__colours__surface--100);--button__bg--pressed: var(--blockout__colours__surface--950);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__text--pressed: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__surface--950);--button__icon--hover: var(--blockout__colours__primary--950);--button__icon--pressed: var(--blockout__colours__primary--50)}.component-button--small{--button__padding--y: .675rem;--button__padding--x: .875rem;--button__gap: .625rem;--button__font-size: .875rem;border-radius:var(--blockout__radius--sm);min-height:2rem}.component-button--medium{--button__padding--y: .75rem;--button__padding--x: 1.25rem;--button__gap: 1rem;--button__font-size: 1rem;border-radius:var(--blockout__radius--md)}.component-button--large{--button__padding--y: 1rem;--button__padding--x: 1.5rem;--button__gap: 1.25rem;--button__font-size: 1.25rem;border-radius:var(--blockout__radius--lg)}.component-button-row__row{display:flex;flex-wrap:wrap;gap:.5rem}

package/dist/assets/index14.css

@@ -1 +1 @@
-.primitive-popover__window__wrapper{z-index:9999!important}.primitive-popover__window{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg);box-shadow:0 .175rem .375rem #0000001a;max-height:var(--popover-available-height)}.primitive-popover__window__scoll-area .primitive-scroll-area__viewport{padding:.5rem;min-height:var(--base-control__min-height);min-width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height)}.primitive-popover__window--edgeless .primitive-popover__window__scoll-area{padding:0}
+.primitive-popover__window__wrapper{z-index:9999!important}.primitive-popover__window{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg);box-shadow:0 .175rem .375rem #0000001a;max-height:var(--popover-available-height)}.primitive-popover__window__scoll-area .primitive-scroll-area__viewport{padding:.5rem;min-height:var(--base-control__min-height);min-width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height)}.primitive-popover__window--edgeless .primitive-popover__window__scoll-area .primitive-scroll-area__viewport{padding:0}

package/dist/assets/index6.css

@@ -1 +1 @@
-.component-dialog{position:fixed;top:1rem;right:1rem;bottom:1rem;left:1rem;z-index:50;margin:auto;display:flex;height:fit-content;max-height:calc(100dvh - 2rem);max-width:64ch;overflow:auto;border-radius:var(--blockout__radius--lg);background:var(--blockout__colours__surface--0);box-shadow:0 10px 15px -3px #0000000d,0 4px 6px -4px #0000000d;opacity:0;transform:translateY(1rem);transition:opacity .15s ease,transform .15s ease}.component-dialog[data-enter]{opacity:1;transform:translateY(0)}.component-dialog.component-dialog--top{margin-top:5vh}.component-dialog.component-dialog--bottom{margin-bottom:5vh}.component-dialog__backdrop{background-color:#0000001a;opacity:0;transition:opacity ease .15s}.component-dialog__backdrop[data-enter]{opacity:1}.component-dialog__header{display:flex;align-items:start;justify-content:space-between;gap:1rem;width:100%;padding:.5em;padding-left:1.5rem;border-bottom:1px solid var(--blockout__colours__surface--200);margin-bottom:1rem}.component-dialog__title{margin-top:.675rem}
+.component-dialog{position:fixed;top:1rem;right:1rem;bottom:1rem;left:1rem;z-index:50;margin:auto;display:flex;height:fit-content;max-height:calc(100dvh - 2rem);max-width:64ch;overflow:auto;border-radius:var(--blockout__radius--lg);background:var(--blockout__colours__surface--0);box-shadow:0 10px 15px -3px #0000000d,0 4px 6px -4px #0000000d;opacity:0;transform:translateY(1rem);transition:opacity .15s ease,transform .15s ease}.component-dialog[data-enter]{opacity:1;transform:translateY(0)}.component-dialog.component-dialog--top{margin-top:5vh}.component-dialog.component-dialog--bottom{margin-bottom:5vh}.component-dialog__backdrop{background-color:#0000001a;opacity:0;transition:opacity ease .15s}.component-dialog__backdrop[data-enter]{opacity:1}[data-colour-schema=dark] .component-dialog__backdrop{background-color:#00000054}.component-dialog__header{display:flex;align-items:start;justify-content:space-between;gap:1rem;width:100%;padding:.5em;padding-left:1.5rem;border-bottom:1px solid var(--blockout__colours__surface--200);margin-bottom:1rem}.component-dialog__title{margin-top:.675rem}

package/dist/assets/index9.css

@@ -1 +1 @@
-:root:has(.component-shell),html:has(.component-shell){overflow:hidden}.component-shell{display:grid;grid-template-columns:13rem 1fr;grid-template-rows:3.5rem 1fr;grid-template-areas:"sidebar navigation" "sidebar main";background-color:var(--blockout__colours__surface--100);width:100%;height:100vh;height:100dvh;overflow:hidden}.component-shell__sidebar{grid-area:sidebar;min-width:0;min-height:0}.component-shell__navigation{grid-area:navigation;min-width:0;min-height:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-right:.5rem}.component-shell__panes{grid-area:main;min-width:0;min-height:0;border-top-left-radius:var(--blockout__radius--2xl);overflow:hidden;display:flex;flex-wrap:wrap;gap:1rem}.component-shell__pane{background-color:var(--blockout__colours__surface--0);border-top-left-radius:var(--blockout__radius--lg);height:100%;min-width:min(var(--pane-min-width),100vw);flex:var(--pane-weight)}.component-shell__pane:not(:last-child){border-top-right-radius:var(--blockout__radius--lg)}.component-shell__pane__scroll-area>.primitive-scroll-area__viewport>div{height:100%}.component-shell__pane__padding{min-height:100%;padding:1.5rem}@media (width >= 40rem){.component-shell__pane__padding{padding:2rem}}@media (width >= 48rem){.component-shell__pane__padding{padding:2.5rem}}@media (width >= 64rem){.component-shell__pane__padding{padding:3rem}}.component-shell__pane__padding.component-shell__pane__padding--edgeless-top{padding-top:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-right{padding-right:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-bottom{padding-bottom:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-left{padding-left:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-x{padding-left:0!important;padding-right:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-y{padding-top:0!important;padding-bottom:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-all{padding:0!important}
+:root:has(.component-shell),html:has(.component-shell){overflow:hidden}@property --component-shell__sidebar-width{initial-value: 0px; syntax: "<length>"; inherits: true;}.component-shell{--component-shell__navigation-height: 3rem;--component-shell__sidebar-width: 2.15rem;--component-shell__sidebar-width--open: 200px;display:grid;grid-template-columns:min-content auto;grid-template-rows:var(--component-shell__navigation-height) 1fr;gap:0 1rem;background-color:var(--blockout__colours__surface--100);width:100%;height:100vh;height:100dvh;overflow:hidden;transition:--component-shell__sidebar-width .5s ease}.component-shell.component-shell--sidebar-open{--component-shell__sidebar-width: var(--component-shell__sidebar-width--open)}.component-shell__navigation{position:fixed;top:0;left:0;right:0;width:100%;height:var(--component-shell__navigation-height);display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.component-shell__sidebar{min-width:0;min-height:0;grid-row:2;width:var(--component-shell__sidebar-width);border-top-right-radius:var(--blockout__radius--lg);background-color:var(--blockout__colours__surface--0);overflow:clip;padding-top:.5rem;transition:background .5s ease,padding-top .5s ease}.component-shell__sidebar__inner{width:var(--component-shell__sidebar-width--open)}.component-shell__sidebar-item__wrapper{width:var(--component-shell__sidebar-width)}.component-shell__sidebar-item{display:block;width:var(--component-shell__sidebar-width);padding:.675rem .75rem;overflow:clip}.component-shell__sidebar-item .primitive-nav-link__icon-label{--icon-label__icon-size: 1.375rem}.component-shell__sidebar-separator{border-top:1px solid var(--blockout__colours__surface--200);margin:1.375rem .675rem .125rem;padding-top:.675rem;color:var(--blockout__colours__surface--500);font-weight:600;font-size:.675rem;text-transform:uppercase;transition:padding .5s ease,margin .5s ease,border-color .5s ease}.component-shell__sidebar-separator:first-child{margin-top:0;border-top:none}.component-shell__sidebar-separator .component-shell__sidebar-separator__label{interpolate-size:allow-keywords;display:block;height:auto;overflow:clip;transition:height .5s ease,opacity .5s ease}.component-shell:not(.component-shell--sidebar-open) .component-shell__sidebar{background:transparent;padding-top:0}.component-shell:not(.component-shell--sidebar-open) .component-shell__sidebar-separator{border-color:var(--blockout__colours__surface--300);padding-block:0;margin-block:.25rem}.component-shell:not(.component-shell--sidebar-open) .component-shell__sidebar-separator:first-child{margin-block:0}.component-shell:not(.component-shell--sidebar-open) .component-shell__sidebar-separator .component-shell__sidebar-separator__label{height:0;opacity:0}.component-shell__pane{grid-row:2;background-color:var(--blockout__colours__surface--0);border-top-left-radius:var(--blockout__radius--lg);min-height:0}.component-shell__pane:not(:last-child){border-top-right-radius:var(--blockout__radius--lg)}.component-shell__pane__scroll-area>.primitive-scroll-area__viewport>div{height:100%}.component-shell__pane__padding{min-height:100%;padding:1.5rem}@media (width >= 40rem){.component-shell__pane__padding{padding:2rem}}@media (width >= 48rem){.component-shell__pane__padding{padding:2.5rem}}@media (width >= 64rem){.component-shell__pane__padding{padding:3rem}}.component-shell__pane__padding.component-shell__pane__padding--edgeless-top{padding-top:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-right{padding-right:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-bottom{padding-bottom:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-left{padding-left:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-x{padding-left:0!important;padding-right:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-y{padding-top:0!important;padding-bottom:0!important}.component-shell__pane__padding.component-shell__pane__padding--edgeless-all{padding:0!important}

package/dist/assets/style20.css

@@ -1 +1 @@
-.component-menu__menu-wrapper{z-index:9999!important}.component-menu__window{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg);box-shadow:0 .175rem .375rem #0000001a;min-width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height);overflow-y:auto;padding:.5rem;min-height:40px}.component-menu__item{display:flex;align-items:baseline;gap:.875rem;padding:.375rem .675rem;width:100%;cursor:pointer;transition:background-color .25s ease}.component-menu__item[data-active-item=true]{background-color:var(--blockout__colours__surface--100);border-radius:var(--blockout__radius--md)}.component-menu__item:focus-visible{outline:none}.component-menu__item[data-active-item=true] .component-menu__item__label{color:var(--blockout__colours__surface--950)}.component-menu__item[data-active-item=true] .component-menu__item__description{color:var(--blockout__colours__surface--700)}.component-menu__item[aria-disabled=true] .component-menu__item__label{color:var(--blockout__colours__surface--500)}.component-menu__item[aria-disabled=true] .component-menu__item__description{color:var(--blockout__colours__surface--300)}.component-menu__item__icon{width:1.25rem;height:1.25rem;fill:var(--blockout__colours__surface--400)}.component-menu__window:not(:has(.component-menu__item__icon--pictoral:not(.component-menu__item__icon--empty))) .component-menu__item__icon--pictoral{display:none}.component-menu__item__icon--pictoral{transform:translateY(.25rem)}.component-menu__item__text{flex-grow:1}.component-menu__item__text__header{display:flex;align-items:center;gap:2rem;justify-content:space-between;width:100%}.component-menu__item__text__header+.component-menu__item__description{margin-top:.25rem}.component-menu__item__label{font-weight:500;color:var(--blockout__colours__surface--950);transition:color .25s ease}.component-menu__item__description{font-weight:400;color:var(--blockout__colours__surface--600);font-size:.875rem;padding-right:.375rem;transition:color .25s ease,opacity .25s ease}.component-menu__item--toggle--checked .component-menu__item__icon--checkbox{fill:var(--blockout__colours__surface--950)}.component-menu__separator{margin:.5rem;border-top:1px solid var(--blockout__colours__surface--300);border-bottom:none}
+.component-menu__menu-wrapper{z-index:9999!important}.primitive-popover__target{cursor:pointer}.component-menu__window{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg);box-shadow:0 .175rem .375rem #0000001a;min-width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height);overflow-y:auto;padding:.5rem;min-height:40px}.component-menu__item{display:flex;align-items:baseline;gap:.875rem;padding:.375rem .675rem;width:100%;cursor:pointer;transition:background-color .25s ease}.component-menu__item[data-active-item=true]{background-color:var(--blockout__colours__surface--100);border-radius:var(--blockout__radius--md)}.component-menu__item:focus-visible{outline:none}.component-menu__item[data-active-item=true] .component-menu__item__label{color:var(--blockout__colours__surface--950)}.component-menu__item[data-active-item=true] .component-menu__item__description{color:var(--blockout__colours__surface--700)}.component-menu__item[aria-disabled=true] .component-menu__item__label{color:var(--blockout__colours__surface--500)}.component-menu__item[aria-disabled=true] .component-menu__item__description{color:var(--blockout__colours__surface--300)}.component-menu__item__icon{width:1.25rem;height:1.25rem;fill:var(--blockout__colours__surface--400)}.component-menu__window:not(:has(.component-menu__item__icon--pictoral:not(.component-menu__item__icon--empty))) .component-menu__item__icon--pictoral{display:none}.component-menu__item__icon--pictoral{transform:translateY(.25rem)}.component-menu__item__text{flex-grow:1}.component-menu__item__text__header{display:flex;align-items:center;gap:2rem;justify-content:space-between;width:100%}.component-menu__item__text__header+.component-menu__item__description{margin-top:.25rem}.component-menu__item__label{font-weight:500;color:var(--blockout__colours__surface--950);transition:color .25s ease}.component-menu__item__description{font-weight:400;color:var(--blockout__colours__surface--600);font-size:.875rem;padding-right:.375rem;transition:color .25s ease,opacity .25s ease}.component-menu__item--toggle--checked .component-menu__item__icon--checkbox{fill:var(--blockout__colours__surface--950)}.component-menu__separator{margin:.5rem;border-top:1px solid var(--blockout__colours__surface--300);border-bottom:none}

package/dist/assets/style4.css

@@ -1 +1 @@
-.primitive-tooltip{width:fit-content}.primitive-tooltip__label{background-color:var(--blockout__colours__surface--950);color:var(--blockout__colours__surface--0);border-radius:var(--blockout__radius--sm);font-size:.875rem;padding:.5rem .875rem;border:1px solid var(--blockout__colours__surface--800);z-index:99999!important}
+.primitive-tooltip{width:fit-content}.primitive-tooltip__label{background-color:var(--blockout__colours__surface--0);color:var(--blockout__colours__surface--950);border-radius:var(--blockout__radius--sm);font-size:.875rem;padding:.5rem .875rem;border:1px solid var(--blockout__colours__surface--100);z-index:99999!important}.primitive-tooltip__label .primitive-keyboard{margin-left:1.5ch}

package/dist/assets/style6.css

@@ -1 +1 @@
-.primitive-heading{font-size:var(--heading__font-size, 1.5rem);font-weight:var(--heading__font-weight, 700);line-height:var(--heading__line-height, 1.5rem);color:var(--heading__color, var(--blockout__colours__surface--950));text-transform:var(--heading__text-transform, none);letter-spacing:var(--heading__letter-spacing, normal)}.primitive-heading--size-1{--heading__font-size: 2.25rem;--heading__font-weight: 600;--heading__line-height: 1.25}.primitive-heading--size-2{--heading__font-size: 1.875rem;--heading__font-weight: 600;--heading__line-height: 1.375}.primitive-heading--size-3{--heading__font-size: 1.5625rem;--heading__font-weight: 500;--heading__line-height: 1.375}.primitive-heading--size-4{--heading__font-size: 1.375rem;--heading__font-weight: 500;--heading__line-height: 1.375}.primitive-heading--size-5{--heading__font-size: 1.125rem;--heading__font-weight: 500;--heading__line-height: 1.375}.primitive-heading--size-6{--heading__font-size: 1rem;--heading__font-weight: 500;--heading__line-height: 1.5}.primitive-paragraph{font-size:var(--paragraph__font-size, 1rem);font-weight:var(--paragraph__font-weight, 400);line-height:var(--paragraph__line-height, 1.5625);color:var(--paragraph__color, var(--blockout__colours__surface--700))}.primitive-paragraph--size-small{--paragraph__font-size: .875rem;--paragraph__line-height: 1.785;--paragraph__color: var(--blockout__colours__surface--600)}.primitive-paragraph--size-large{--paragraph__font-size: 1.125rem;--paragraph__line-height: 1.666;--paragraph__color: var(--blockout__colours__surface--700)}.primitive-keyboard{display:flex;gap:.5em;font-family:inherit}.primitive-keyboard .primitive-keyboard__key{display:block;text-align:center;box-shadow:inset 0 .3em .3em -.1em #ffffffbf;background:var(--blockout__colours__surface--50);border:1px solid var(--blockout__colours__surface--200);border-radius:var(--blockout__radius--xxs);padding:.25em .5em;font-size:.75em;color:var(--blockout__colours__surface--800);font-weight:600;text-transform:uppercase;outline:0px solid transparent;outline-offset:0px;transition:background-color .8s ease,border-color .8s ease,color .8s ease}.primitive-keyboard .primitive-keyboard__key.primitive-keyboard__key--singular{min-width:2.25em}.primitive-keyboard.primitive-keyboard--active .primitive-keyboard__key{background:var(--blockout__colours__primary--100);border-color:var(--blockout__colours__primary--500);color:var(--blockout__colours__primary--950);transition-duration:.1s}
+.primitive-heading{font-size:var(--heading__font-size, 1.5rem);font-weight:var(--heading__font-weight, 700);line-height:var(--heading__line-height, 1.5rem);color:var(--heading__color, var(--blockout__colours__surface--950));text-transform:var(--heading__text-transform, none);letter-spacing:var(--heading__letter-spacing, normal)}.primitive-heading--size-1{--heading__font-size: 2.25rem;--heading__font-weight: 600;--heading__line-height: 1.25}.primitive-heading--size-2{--heading__font-size: 1.875rem;--heading__font-weight: 600;--heading__line-height: 1.375}.primitive-heading--size-3{--heading__font-size: 1.5625rem;--heading__font-weight: 500;--heading__line-height: 1.375}.primitive-heading--size-4{--heading__font-size: 1.375rem;--heading__font-weight: 500;--heading__line-height: 1.375}.primitive-heading--size-5{--heading__font-size: 1.125rem;--heading__font-weight: 500;--heading__line-height: 1.375}.primitive-heading--size-6{--heading__font-size: 1rem;--heading__font-weight: 500;--heading__line-height: 1.5}.primitive-paragraph{font-size:var(--paragraph__font-size, 1rem);font-weight:var(--paragraph__font-weight, 400);line-height:var(--paragraph__line-height, 1.5625);color:var(--paragraph__color, var(--blockout__colours__surface--700))}.primitive-paragraph--size-small{--paragraph__font-size: .875rem;--paragraph__line-height: 1.785;--paragraph__color: var(--blockout__colours__surface--600)}.primitive-paragraph--size-large{--paragraph__font-size: 1.125rem;--paragraph__line-height: 1.666;--paragraph__color: var(--blockout__colours__surface--700)}.primitive-keyboard{display:inline-flex;gap:.5em;font-family:inherit}.primitive-keyboard .primitive-keyboard__key{display:block;text-align:center;box-shadow:inset 0 .3em .3em -.1em #ffffffbf;background:var(--blockout__colours__surface--50);border:1px solid var(--blockout__colours__surface--200);border-radius:var(--blockout__radius--xxs);padding:.25em .5em;font-size:.75em;color:var(--blockout__colours__surface--800);font-weight:600;text-transform:uppercase;outline:0px solid transparent;outline-offset:0px;transition:background-color .8s ease,border-color .8s ease,color .8s ease}.primitive-keyboard .primitive-keyboard__key.primitive-keyboard__key--singular{min-width:2.25em}.primitive-keyboard .primitive-keyboard__key:is([data-colour-scheme=dark] *){box-shadow:inset 0 .3em .3em -.1em #000000bf}.primitive-keyboard.primitive-keyboard--active .primitive-keyboard__key{background:var(--blockout__colours__primary--100);border-color:var(--blockout__colours__primary--500);color:var(--blockout__colours__primary--950);transition-duration:.1s}

package/dist/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, JSX } from 'react';
 type BaseProps = {
     variant?: "primary" | "quiet" | "ghost" | "neutral";
     size?: "small" | "medium" | "large";
@@ -11,6 +11,9 @@ type ButtonButtonProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonE
 type LinkButtonProps = BaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps> & {
     as: "link";
 };
-export type ButtonProps = ButtonButtonProps | LinkButtonProps;
+type JSXButtonProps = BaseProps & Omit<React.HTMLAttributes<HTMLElement>, keyof BaseProps> & {
+    as: JSX.ElementType;
+};
+export type ButtonProps = ButtonButtonProps | LinkButtonProps | JSXButtonProps;
 export declare const Button: FC<ButtonProps>;
 export {};

package/dist/components/button/button.js

@@ -1,4 +1,4 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { cn as c } from "../../utils/css.js";
 import '../../assets/styles.css';import '../../assets/style6.css';import '../../assets/style5.css';import '../../assets/style4.css';import '../../assets/style3.css';import '../../assets/style2.css';import '../../assets/style.css';import '../../assets/style7.css';import '../../assets/button.css';/* empty css                   */
 import "react";
@@ -13,22 +13,22 @@ import "../../primitives/symbol/index.js";
 /* empty css                   */
 /* empty css                   */
 /* empty css                    */
-const L = (r) => {
+const L = (n) => {
   const {
-    className: n,
+    className: e,
     wide: i,
     size: p,
-    variant: e,
-    as: s,
-    ...t
-  } = r, o = c(
-    n,
+    variant: s,
+    as: t = "button",
+    ...o
+  } = n, m = c(
+    e,
     "component-button",
-    `component-button--${e || "primary"}`,
+    `component-button--${s || "primary"}`,
     `component-button--${p || "medium"}`,
     i && "component-button--wide"
   );
-  return s === "link" ? /* @__PURE__ */ m(a, { ...t, className: o }) : /* @__PURE__ */ m("button", { type: "button", ...t, className: o });
+  return t === "link" ? /* @__PURE__ */ r(a, { ...o, className: m }) : t === "button" ? /* @__PURE__ */ r("button", { type: "button", ...o, className: m }) : /* @__PURE__ */ r(t, { ...o, className: m });
 };
 export {
   L as Button

package/dist/components/command-palette/index.d.ts

@@ -1,6 +1,10 @@
 import { FC } from 'react';
 import { Command } from './types';
 import * as Ariakit from "@ariakit/react";
+interface CommandPaletteItemProps {
+    command: Command;
+    className?: string;
+}
 interface CommandPaletteProps {
     className?: string;
     open?: boolean;
@@ -11,14 +15,14 @@ interface CommandPaletteProps {
     placeholder?: string;
     commands: Command[];
     suggestions?: Command[];
+    render?: {
+        item: FC<CommandPaletteItemProps>;
+        group: FC<CommandPaletteItemProps>;
+    };
 }
 export declare const CommandPalette: FC<CommandPaletteProps>;
-export declare const CommandItem: FC<{
-    command: Command;
-    className?: string;
+export declare const CommandItem: FC<CommandPaletteItemProps & {
     render?: Ariakit.ComboboxItemProps["render"];
 }>;
-export declare const CommandGroup: FC<{
-    command: Command;
-}>;
+export declare const CommandGroup: FC<CommandPaletteItemProps>;
 export type { Command };

package/dist/components/command-palette/index.js

@@ -1,10 +1,10 @@
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
 import * as e from "react";
 import { startTransition as N } from "react";
-import { useHotkey as g } from "../../hooks/keyboard.js";
-import { cn as u } from "../../utils/css.js";
+import { useHotkey as A } from "../../hooks/keyboard.js";
+import { cn as h } from "../../utils/css.js";
 import '../../assets/styles.css';import '../../assets/style6.css';import '../../assets/style5.css';import '../../assets/style4.css';import '../../assets/style3.css';import '../../assets/style2.css';import '../../assets/style.css';import '../../assets/style8.css';import '../../assets/style7.css';import '../../assets/index19.css';/* empty css                   */
-import { noop as H } from "../../utils/noop.js";
+import { noop as Z } from "../../utils/noop.js";
 /* empty css                   */
 /* empty css                   */
 /* empty css                   */
@@ -15,15 +15,15 @@ import "../../primitives/symbol/index.js";
 /* empty css                   */
 /* empty css                   */
 /* empty css                   */
-import { Keyboard as A } from "../../primitives/typography/keyboard.js";
+import { Keyboard as C } from "../../primitives/typography/keyboard.js";
 /* empty css                    */
-import { w as C } from "../../SSRBase.es-BUXS72ra.js";
-import { s as x } from "../../MagnifyingGlass.es-CLstwG_v.js";
-import { a as S } from "../../BM6PGYQY-g6WySwtg.js";
-import { D as y } from "../../G7GW6PWC-DeYlSr7f.js";
-import { C as F, a as O, b as w, c as D } from "../../MAXQOH4L-DB7jDisS.js";
-import { C as I, a as k } from "../../combobox-group-BCdU5rML.js";
-const G = /* @__PURE__ */ new Map([
+import { w as x } from "../../SSRBase.es-BUXS72ra.js";
+import { s as S } from "../../MagnifyingGlass.es-CLstwG_v.js";
+import { a as y } from "../../BM6PGYQY-g6WySwtg.js";
+import { D as F } from "../../G7GW6PWC-DeYlSr7f.js";
+import { C as O, a as w, b as D, c as I } from "../../MAXQOH4L-DB7jDisS.js";
+import { C as k, a as G } from "../../combobox-group-BCdU5rML.js";
+const L = /* @__PURE__ */ new Map([
   [
     "bold",
     /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M180,140H164V116h16a40,40,0,1,0-40-40V92H116V76a40,40,0,1,0-40,40H92v24H76a40,40,0,1,0,40,40V164h24v16a40,40,0,1,0,40-40ZM164,76a16,16,0,1,1,16,16H164ZM60,76a16,16,0,0,1,32,0V92H76A16,16,0,0,1,60,76ZM92,180a16,16,0,1,1-16-16H92Zm24-64h24v24H116Zm64,80a16,16,0,0,1-16-16V164h16a16,16,0,0,1,0,32Z" }))
@@ -54,111 +54,124 @@ const G = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M180,148H156V108h24a32,32,0,1,0-32-32v24H108V76a32,32,0,1,0-32,32h24v40H76a32,32,0,1,0,32,32V156h40v24a32,32,0,1,0,32-32ZM156,76a24,24,0,1,1,24,24H156ZM52,76a24,24,0,0,1,48,0v24H76A24,24,0,0,1,52,76Zm48,104a24,24,0,1,1-24-24h24Zm8-72h40v40H108Zm72,96a24,24,0,0,1-24-24V156h24a24,24,0,0,1,0,48Z" }))
   ]
-]), V = e.forwardRef((o, m) => /* @__PURE__ */ e.createElement(C, { ref: m, ...o, weights: G }));
-V.displayName = "CommandIcon";
-const s0 = ({
+]), _ = e.forwardRef((o, m) => /* @__PURE__ */ e.createElement(x, { ref: m, ...o, weights: L }));
+_.displayName = "CommandIcon";
+const p0 = ({
   className: o,
   open: m,
-  onOpenChange: n = H,
-  search: c = "",
-  onSearchChange: Z = H,
-  hotkey: i,
-  placeholder: _ = "Search...",
-  commands: s = []
+  onOpenChange: n = Z,
+  search: r = "",
+  onSearchChange: v = Z,
+  hotkey: d,
+  placeholder: M = "Search...",
+  commands: p = [],
+  render: H = {
+    group: j,
+    item: i
+  }
 }) => {
-  const h = S({ open: m, setOpen: n }), v = () => {
+  const u = y({ open: m, setOpen: n }), f = () => {
     n(!0);
-  }, M = (t) => {
+  }, b = (t) => {
     N(() => {
-      Z(t);
+      v(t);
     });
-  }, f = (t) => {
-    var r, d;
-    (d = (r = s.find((E) => E.id === t)) == null ? void 0 : r.onSelect) == null || d.call(r);
+  }, g = (t) => {
+    var l, V;
+    (V = (l = p.flatMap((c) => [c, ...c.children || []]).find((c) => c.id === t)) == null ? void 0 : l.onSelect) == null || V.call(l);
   };
-  i && g(i, (t) => {
-    t.preventDefault(), v();
+  d && A(d, (t) => {
+    t.preventDefault(), f();
   });
-  const b = s.length > 0;
+  const E = p.length > 0;
   return /* @__PURE__ */ a(
-    y,
+    F,
     {
-      store: h,
-      className: u("component-command-palette", o),
+      store: u,
+      className: h("component-command-palette", o),
       backdrop: /* @__PURE__ */ a("div", { className: "component-command-palette__backdrop" }),
       unmountOnHide: !0,
-      children: /* @__PURE__ */ l(
-        F,
+      children: /* @__PURE__ */ s(
+        O,
         {
-          disclosure: h,
+          disclosure: u,
           focusLoop: !1,
           includesBaseElement: !1,
           resetValueOnHide: !0,
-          value: c,
-          setValue: M,
+          value: r,
+          setValue: b,
           selectedValue: "",
-          setSelectedValue: f,
+          setSelectedValue: g,
           children: [
-            /* @__PURE__ */ l("header", { className: "component-command-palette__header", children: [
-              /* @__PURE__ */ a(x, { className: "component-command-palette__header__icon" }),
+            /* @__PURE__ */ s("header", { className: "component-command-palette__header", children: [
+              /* @__PURE__ */ a(S, { className: "component-command-palette__header__icon" }),
               /* @__PURE__ */ a(
-                O,
+                w,
                 {
                   autoSelect: "always",
                   className: "component-command-palette__input",
                   type: "search",
-                  placeholder: _
+                  placeholder: M
                 }
               ),
-              /* @__PURE__ */ a(A, { className: "component-command-palette__close", children: "Esc" })
+              /* @__PURE__ */ a(C, { className: "component-command-palette__close", children: "Esc" })
             ] }),
-            b ? /* @__PURE__ */ a(w, { className: "component-command-palette__results", children: s.map(
-              (t) => t.children ? /* @__PURE__ */ a(L, { command: t }, t.id) : /* @__PURE__ */ a(p, { command: t }, t.id)
+            E ? /* @__PURE__ */ a(D, { className: "component-command-palette__results", children: p.map(
+              (t) => t.children ? /* @__PURE__ */ a(H.group, { command: t }, t.id) : /* @__PURE__ */ a(H.item, { command: t }, t.id)
             ) }) : /* @__PURE__ */ a("div", { className: "component-command-palette__empty", children: "No results found" })
           ]
         }
       )
     }
   );
-}, p = ({ command: o, className: m, render: n }) => {
-  const c = o.icon || V;
-  return /* @__PURE__ */ l(
-    D,
+}, i = ({ command: o, className: m, render: n }) => {
+  const r = o.icon || _;
+  return /* @__PURE__ */ s(
+    I,
     {
-      className: u("component-command-palette__item", m),
+      className: h("component-command-palette__item", m),
       focusOnHover: !0,
       blurOnHoverEnd: !1,
       value: o.id,
       setValueOnClick: !1,
       render: n,
       children: [
-        /* @__PURE__ */ a(c, { className: "component-command-palette__item__icon" }),
+        /* @__PURE__ */ a(r, { className: "component-command-palette__item__icon" }),
         /* @__PURE__ */ a("span", { className: "component-command-palette__item__label", children: o.label })
       ]
     }
   );
-}, L = ({ command: o }) => {
-  var m;
-  return /* @__PURE__ */ l(I, { className: "component-command-palette__group", children: [
-    /* @__PURE__ */ a(
-      p,
-      {
-        command: o,
-        render: /* @__PURE__ */ a(k, { className: "component-command-palette__group__label" })
-      }
-    ),
-    (m = o.children) == null ? void 0 : m.map((n) => /* @__PURE__ */ a(
-      p,
-      {
-        className: "component-command-palette__group__item",
-        command: n
-      },
-      n.id
-    ))
-  ] });
+}, j = ({
+  className: o,
+  command: m
+}) => {
+  var n;
+  return /* @__PURE__ */ s(
+    k,
+    {
+      className: h("component-command-palette__group", o),
+      children: [
+        /* @__PURE__ */ a(
+          i,
+          {
+            command: m,
+            render: /* @__PURE__ */ a(G, { className: "component-command-palette__group__label" })
+          }
+        ),
+        (n = m.children) == null ? void 0 : n.map((r) => /* @__PURE__ */ a(
+          i,
+          {
+            className: "component-command-palette__group__item",
+            command: r
+          },
+          r.id
+        ))
+      ]
+    }
+  );
 };
 export {
-  L as CommandGroup,
-  p as CommandItem,
-  s0 as CommandPalette
+  j as CommandGroup,
+  i as CommandItem,
+  p0 as CommandPalette
 };

package/dist/components/shell/context.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+export type ShellContext = {
+    isSidebarOpen: boolean;
+    openSidebar: () => void;
+    closeSidebar: () => void;
+    toggleSidebar: () => void;
+};
+export declare const ShellProvider: FC<PropsWithChildren>;
+export declare const useShell: () => ShellContext;

package/dist/components/shell/context.js

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import { u as a } from "../../index-D7vLJIGX.js";
+import { createContext as l, useContext as c } from "react";
+const o = l(void 0), m = ({ children: r }) => {
+  const [t, e] = a(
+    "component-shell__is-sidebar-open",
+    !1
+  ), s = {
+    isSidebarOpen: t,
+    openSidebar: () => {
+      e(!0);
+    },
+    closeSidebar: () => {
+      e(!1);
+    },
+    toggleSidebar: () => {
+      e((n) => !n);
+    }
+  };
+  return /* @__PURE__ */ i(o.Provider, { value: s, children: r });
+}, u = () => c(o);
+export {
+  m as ShellProvider,
+  u as useShell
+};

package/dist/components/shell/index.js

@@ -1,12 +1,16 @@
 import { Navigation as o } from "./navigation.js";
 import { Pane as r } from "./pane.js";
-import { Root as t } from "./root.js";
-import { Sidebar as i } from "./sidebar.js";
-import '../../assets/index9.css';const f = Object.assign(t, {
+import { Root as m } from "./root.js";
+import { Sidebar as t } from "./sidebar.js";
+import { SidebarItem as i } from "./sidebar-item.js";
+import { SidebarSeparator as a } from "./sidebar-separator.js";
+import '../../assets/index9.css';const d = Object.assign(m, {
   Pane: r,
-  Sidebar: i,
+  Sidebar: t,
+  SidebarItem: i,
+  SidebarSeparator: a,
   Navigation: o
 });
 export {
-  f as Shell
+  d as Shell
 };

package/dist/components/shell/navigation.js

@@ -1,6 +1,51 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as i } from "../../utils/css.js";
-const m = ({ className: o, children: n }) => /* @__PURE__ */ t("div", { className: i("component-shell__navigation", o), children: n });
+import { jsxs as H, jsx as r } from "react/jsx-runtime";
+import { cn as o } from "../../utils/css.js";
+import * as e from "react";
+import { w as i } from "../../SSRBase.es-BUXS72ra.js";
+import { Button as V } from "../button/index.js";
+import { useShell as c } from "./context.js";
+const p = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M216,36H40A20,20,0,0,0,20,56V200a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A20,20,0,0,0,216,36ZM44,60H76V196H44ZM212,196H100V60H212Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M88,48V208H40a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8Z", opacity: "0.2" }), /* @__PURE__ */ e.createElement("path", { d: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H88V56H216V200Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M216,42H40A14,14,0,0,0,26,56V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A14,14,0,0,0,216,42ZM38,200V56a2,2,0,0,1,2-2H82V202H40A2,2,0,0,1,38,200Zm180,0a2,2,0,0,1-2,2H94V54H216a2,2,0,0,1,2,2Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M216,44H40A12,12,0,0,0,28,56V200a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V56A12,12,0,0,0,216,44ZM36,200V56a4,4,0,0,1,4-4H84V204H40A4,4,0,0,1,36,200Zm184,0a4,4,0,0,1-4,4H92V52H216a4,4,0,0,1,4,4Z" }))
+  ]
+]), l = e.forwardRef((a, t) => /* @__PURE__ */ e.createElement(i, { ref: t, ...a, weights: p }));
+l.displayName = "SidebarSimpleIcon";
+const M = ({ className: a, children: t }) => {
+  const { isSidebarOpen: n, toggleSidebar: m } = c();
+  return /* @__PURE__ */ H("div", { className: o("component-shell__navigation", a), children: [
+    /* @__PURE__ */ r(
+      V.Icon,
+      {
+        "aria-label": "Toggle Sidebar",
+        onClick: m,
+        variant: "ghost",
+        children: /* @__PURE__ */ r(l, { weight: n ? "fill" : "regular" })
+      }
+    ),
+    t
+  ] });
+};
 export {
-  m as Navigation
+  M as Navigation
 };

package/dist/components/shell/pane.d.ts

@@ -2,8 +2,6 @@ import { FC, PropsWithChildren } from 'react';
 interface PaneProps extends PropsWithChildren {
     className?: string;
     edgeless?: boolean | "x" | "y" | "top" | "bottom" | "left" | "right" | "all";
-    weight?: number;
-    minWidth?: string;
 }
 export declare const Pane: FC<PaneProps>;
 export {};

package/dist/components/shell/pane.js

@@ -7,7 +7,7 @@ import "react";
 /* empty css                   */
 import "../../primitives/popover/index.js";
 /* empty css                   */
-import { ScrollArea as n } from "../../primitives/scroll-area/index.js";
+import { ScrollArea as i } from "../../primitives/scroll-area/index.js";
 import "../../primitives/symbol/index.js";
 /* empty css                   */
 /* empty css                   */
@@ -16,29 +16,17 @@ import "../../primitives/symbol/index.js";
 const j = ({
   className: m,
   edgeless: o = !1,
-  weight: e = 1,
-  minWidth: t = "20rem",
-  children: i
-}) => /* @__PURE__ */ r(
+  children: t
+}) => /* @__PURE__ */ r("div", { className: p("component-shell__pane", m), children: /* @__PURE__ */ r(i, { className: "component-shell__pane__scroll-area", axis: "y", children: /* @__PURE__ */ r(
   "div",
   {
-    className: p("component-shell__pane", m),
-    style: {
-      "--pane-weight": e,
-      "--pane-min-width": t
-    },
-    children: /* @__PURE__ */ r(n, { className: "component-shell__pane__scroll-area", axis: "y", children: /* @__PURE__ */ r(
-      "div",
-      {
-        className: p(
-          "component-shell__pane__padding",
-          o && `component-shell__pane__padding--edgeless-${o === !0 ? "all" : o}`
-        ),
-        children: i
-      }
-    ) })
+    className: p(
+      "component-shell__pane__padding",
+      o && `component-shell__pane__padding--edgeless-${o === !0 ? "all" : o}`
+    ),
+    children: t
   }
-);
+) }) });
 export {
   j as Pane
 };

package/dist/components/shell/root.js

@@ -1,20 +1,21 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import { cn as f } from "../../utils/css.js";
-import { Children as n } from "react";
-import { Pane as s } from "./pane.js";
-const v = ({ className: t, children: e }) => {
-  const m = n.map(
-    e,
-    (o) => (o == null ? void 0 : o.type) === s ? o : null
-  ), r = n.map(
-    e,
-    (o) => (o == null ? void 0 : o.type) !== s ? o : null
+import { jsx as e } from "react/jsx-runtime";
+import { cn as t } from "../../utils/css.js";
+import "react";
+import { ShellProvider as s, useShell as i } from "./context.js";
+const l = ({ className: o, children: r }) => {
+  const { isSidebarOpen: n } = i();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: t(
+        "component-shell",
+        n && "component-shell--sidebar-open",
+        o
+      ),
+      children: r
+    }
   );
-  return /* @__PURE__ */ p("div", { className: f("component-shell", t), children: [
-    r,
-    /* @__PURE__ */ a("div", { className: "component-shell__panes", children: m })
-  ] });
-};
+}, h = (o) => /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(l, { ...o }) });
 export {
-  v as Root
+  h as Root
 };

package/dist/components/shell/sidebar-item.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+interface SidebarItemProps extends PropsWithChildren {
+    className?: string;
+    label: string;
+    href?: string;
+}
+export declare const SidebarItem: FC<SidebarItemProps>;
+export {};

package/dist/components/shell/sidebar-item.js

@@ -0,0 +1,46 @@
+import { jsx as p, jsxs as e } from "react/jsx-runtime";
+import { cn as s } from "../../utils/css.js";
+import '../../assets/styles.css';import '../../assets/style6.css';import '../../assets/style5.css';import '../../assets/style3.css';import '../../assets/style.css';import '../../assets/style8.css';import '../../assets/style7.css';/* empty css                   */
+import "react";
+/* empty css                   */
+/* empty css                   */
+import { NavLink as n } from "../../primitives/nav-link/index.js";
+import "../../primitives/popover/index.js";
+/* empty css                   */
+import "../../primitives/scroll-area/index.js";
+import "../../primitives/symbol/index.js";
+import { Tooltip as l } from "../../primitives/tooltip/index.js";
+/* empty css                   */
+/* empty css                   */
+/* empty css                    */
+import { useShell as a } from "./context.js";
+const L = ({
+  className: o,
+  children: m,
+  label: r,
+  href: i
+}) => {
+  const { isSidebarOpen: t } = a();
+  return /* @__PURE__ */ p(
+    l,
+    {
+      className: "component-shell__sidebar-item__wrapper",
+      label: !t && r,
+      placement: "right",
+      children: /* @__PURE__ */ e(
+        n,
+        {
+          className: s("component-shell__sidebar-item", o),
+          href: i,
+          children: [
+            m,
+            r
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  L as SidebarItem
+};

package/dist/components/shell/sidebar-separator.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface SidebarSeparatorProps extends PropsWithChildren {
+    className?: string;
+}
+export declare const SidebarSeparator: FC<SidebarSeparatorProps>;
+export {};

package/dist/components/shell/sidebar-separator.js

@@ -0,0 +1,16 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as o } from "../../utils/css.js";
+const p = ({
+  className: e,
+  children: r
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    role: "separator",
+    className: o("component-shell__sidebar-separator", e),
+    children: r && /* @__PURE__ */ a("span", { className: "component-shell__sidebar-separator__label", children: r })
+  }
+);
+export {
+  p as SidebarSeparator
+};

package/dist/components/shell/sidebar.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { cn as m } from "../../utils/css.js";
-const i = ({ className: r, children: o }) => /* @__PURE__ */ e("div", { className: m("component-shell__sidebar", r), children: o });
+import { cn as o } from "../../utils/css.js";
+const m = ({ className: r, children: n }) => /* @__PURE__ */ e("div", { className: o("component-shell__sidebar", r), children: /* @__PURE__ */ e("div", { className: "component-shell__sidebar__inner", children: n }) });
 export {
-  i as Sidebar
+  m as Sidebar
 };

package/dist/primitives/tooltip/index.d.ts

@@ -1,8 +1,10 @@
 import { FC, PropsWithChildren, ReactNode } from 'react';
+import * as Ariakit from "@ariakit/react";
 interface TooltipProps extends PropsWithChildren {
     className?: string;
     label?: ReactNode;
     force?: boolean;
+    placement?: Ariakit.HovercardStoreState["placement"];
 }
 export declare const Tooltip: FC<TooltipProps>;
 export {};

package/dist/primitives/tooltip/index.js

@@ -1,29 +1,46 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { cn as a } from "../../utils/css.js";
-import { useState as l } from "react";
+import { jsxs as e, jsx as p } from "react/jsx-runtime";
+import { cn as l } from "../../utils/css.js";
+import { useState as n } from "react";
 import '../../assets/style4.css';/* empty css                   */
-import { T as n, a as c, b as T, c as f } from "../../tooltip-arrow-BRJ4m2ZL.js";
-const d = ({
+import { T as c, a as T, b as f, c as u } from "../../tooltip-arrow-BRJ4m2ZL.js";
+const N = ({
   className: s,
   label: o,
   force: t,
-  children: i
+  children: i,
+  placement: a
 }) => {
-  const [r, m] = l(!1);
-  return o ? /* @__PURE__ */ p(n, { open: r || t, setOpen: m, children: [
-    /* @__PURE__ */ e(c, { className: a("primitive-tooltip", s), children: i }),
-    (r || t) && /* @__PURE__ */ p(T, { gutter: 4, className: "primitive-tooltip__label", children: [
-      o,
-      /* @__PURE__ */ e(
-        f,
-        {
-          size: 24,
-          className: "primitive-tooltip__arrow"
-        }
-      )
-    ] })
-  ] }) : i;
+  const [r, m] = n(!1);
+  return o ? /* @__PURE__ */ e(
+    c,
+    {
+      open: r || t,
+      setOpen: m,
+      placement: a,
+      children: [
+        /* @__PURE__ */ p(T, { className: l("primitive-tooltip", s), children: i }),
+        (r || t) && /* @__PURE__ */ e(
+          f,
+          {
+            gutter: 4,
+            className: "primitive-tooltip__label",
+            "data-colour-scheme": "invert",
+            children: [
+              o,
+              /* @__PURE__ */ p(
+                u,
+                {
+                  size: 24,
+                  className: "primitive-tooltip__arrow"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : i;
 };
 export {
-  d as Tooltip
+  N as Tooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wrdagency/blockout",
-	"version": "1.0.25",
+	"version": "1.0.26",
 	"description": "A React component library created by WRD.agency",
 	"type": "module",
 	"main": "dist/index.js",