@wrdagency/blockout 1.0.32 → 1.0.33

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-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:0}
+.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{display:flex;gap:.5rem}.component-button-row--wrap{flex-wrap:wrap}.component-button-row--xs{gap:.125rem}.component-button-row--sm{gap:.375rem}.component-button-row--md{gap:.675rem}.component-button-row--lg{gap:1rem}.component-button-row--xl{gap:1.5rem}.component-button-row__row{display:contents}.component-button-row .component-button--wide{width:fit-content;flex-grow:1;flex-basis:10%}

package/dist/assets/index10.css

@@ -1 +1 @@
-.component-tabs__list{display:flex;align-items:end;gap:.125rem;border-bottom:1px solid var(--blockout__colours__surface--300)}.component-tabs__tab{padding:.25rem .75rem 0rem;color:var(--blockout__colours__surface--700);cursor:pointer;outline:0px solid transparent;outline-offset:0px;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease}.component-tabs__tab:first-child{margin-left:-.75rem}.component-tabs__tab__label{margin-bottom:-.5px;display:flex;align-items:center;gap:.5rem;padding:.5rem 0;font-size:.75rem;font-weight:500;text-transform:uppercase;border-bottom:2px solid transparent;transition:color .15s ease,border-bottom-color .15s ease}.component-tabs__tab__label>svg{width:1rem;height:1rem;fill:var(--blockout__colours__surface--500);transition:fill .15s ease}.component-tabs__tab:hover{background-color:var(--blockout__colours__surface--50)}.component-tabs__tab:focus{outline:none}.component-tabs__tab:focus-visible{background-color:var(--blockout__colours__surface--50);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-tabs__tab[aria-selected=true] .component-tabs__tab__label{border-bottom-color:var(--blockout__colours__surface--950);color:var(--blockout__colours__surface--950)}.component-tabs__tab[aria-selected=true] .component-tabs__tab__label>svg{fill:var(--blockout__colours__primary--500)}.component-tabs__panel{padding-top:1.5rem}
+.component-tabs__list{display:flex;align-items:end;gap:.125rem;border-bottom:1px solid var(--blockout__colours__surface--300)}.component-tabs__tab{padding:0rem .675rem;cursor:pointer;outline:0px solid transparent;outline-offset:0px;border-radius:var(--blockout__radius--md);background-color:transparent;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease}.component-tabs__tab__label{margin-bottom:-1px;position:relative;display:flex;align-items:center;gap:.5rem;padding-inline:.125rem;padding-top:.375rem;padding-bottom:.875rem;font-size:.875rem;font-weight:500;color:var(--blockout__colours__surface--600);transition:color .15s ease}.component-tabs__tab__label:after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;width:100%;background:var(--blockout__colours__surface--950);border-top-left-radius:var(--blockout__radius--md);border-top-right-radius:var(--blockout__radius--md);opacity:0;transform:scaleY(0);transform-origin:bottom;transition:transform .2s ease,opacity .2s ease}.component-tabs__tab__label>svg{width:1rem;height:1rem;fill:var(--blockout__colours__surface--500);transition:fill .15s ease}.component-tabs__tab:hover{background-color:var(--blockout__colours__surface--100)}.component-tabs__tab:focus{outline:none}.component-tabs__tab:focus-visible{background-color:var(--blockout__colours__surface--100);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-tabs__tab[aria-selected=true] .component-tabs__tab__label{border-bottom-color:var(--blockout__colours__surface--950);color:var(--blockout__colours__surface--950)}.component-tabs__tab[aria-selected=true] .component-tabs__tab__label:after{opacity:1;transform:scaleY(1)}.component-tabs__tab[aria-selected=true] .component-tabs__tab__label>svg{fill:var(--blockout__colours__primary--500)}.component-tabs__panel{padding-top:1.5rem}

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}[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}
+.component-dialog{position:fixed;top:1rem;right:1rem;bottom:1rem;left:1rem;z-index:50;margin:auto;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.component-dialog--left{margin-top:0;right:auto;left:0;height:100%;max-height:100%;width:100%;max-width:42ch;border-top-left-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}@media (width <= 42ch){.component-dialog.component-dialog--left{border-top-left-radius:var(--blockout__radius--lg)}}.component-dialog.component-dialog--right{margin-top:0;left:auto;right:0;height:100%;max-height:100%;width:100%;max-width:42ch;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}@media (width <= 42ch){.component-dialog.component-dialog--right{border-top-right-radius:var(--blockout__radius--lg)}}.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:.5rem .5rem .5rem 1.5rem}.component-dialog--divided .component-dialog__header{border-bottom:1px solid var(--blockout__colours__surface--200)}.component-dialog__title{margin-top:.675rem}.component-dialog__body{padding:1rem 1.5rem}.component-dialog--edgeless-x .component-dialog__body{padding-inline:0}.component-dialog--edgeless-y .component-dialog__body{padding-block:0}.component-dialog--edgeless-top .component-dialog__body{padding-top:0}.component-dialog--edgeless-bottom .component-dialog__body{padding-bottom:0}.component-dialog--edgeless-left .component-dialog__body{padding-left:0}.component-dialog--edgeless-right .component-dialog__body{padding-right:0}.component-dialog--edgeless-all .component-dialog__body{padding:0}

package/dist/assets/style16.css

@@ -1 +1 @@
-.component-select__input{cursor:pointer;width:100%}.component-select__input:focus{outline:none}.component-select__popover__wrapper{z-index:9999!important}.component-select__popover{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg)}.component-select__popover:focus{outline:none}.component-select__popover__scroll .primitive-scroll-area__viewport{width:min(calc(var(--popover-anchor-width) + 2px),fit-content);height:100%;max-height:var(--popover-available-height);min-width:12rem;padding:0}.component-select__list{display:flex;flex-direction:column;gap:.325rem;padding:.325rem}.component-select__list:focus{outline:none}.component-select__list__group:not(:first-child){border-top:1px solid var(--blockout__colours__surface--400);padding-top:.5rem}.component-select__list__group__label{padding:.125rem .675rem;font-size:.875rem;color:var(--blockout__colours__surface--600);font-weight:600}.component-select__popover__search-wrapper{display:flex;align-items:center;gap:0;padding-left:1rem}.component-select__popover__search-icon{width:1rem;height:1rem;transform:translateY(.25rem);fill:var(--blockout__colours__surface--500)}.component-select__popover__search{width:100%;padding:.5rem .675rem 0rem;min-height:var(--base-control__min-height)}.component-select__popover__search:focus{outline:none}.component-select__option{display:flex;justify-content:center;align-items:start;flex-direction:column;gap:.25rem;padding:.375rem .5rem .375rem .675rem;min-height:2.25rem;border-radius:var(--blockout__radius--sm);cursor:pointer;transition:background-color .25s ease}.component-select__option:focus{outline:none}.component-select__option:first-child{border-top:none}.component-select__option[aria-disabled=true] .component-select__option__label{color:var(--blockout__colours__surface--400)}.component-select__option[aria-disabled=true] .component-select__option__description{color:var(--blockout__colours__surface--300)}.component-select__option__label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--blockout__colours__surface--900);transition:color .25s ease;white-space:nowrap}.component-select__option__label>svg{width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--blockout__colours__surface--500);fill:var(--blockout__colours__surface--500)}.component-select__option__description{font-weight:400;color:var(--blockout__colours__surface--600);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-select__option[data-active-item=true]{background-color:var(--blockout__colours__surface--50)}.component-select__option[data-active-item=true] .component-select__option__label{color:var(--blockout__colours__surface--900)}.component-select__option[data-active-item=true] .component-select__option__description{color:var(--blockout__colours__surface--700)}.component-select-control .component-base-control__control{flex-grow:1!important}.component-select-control .component-select__input{display:flex}.component-select-control__btn{display:flex;flex-direction:row;flex-grow:1;padding:var(--base-control__padding);min-height:var(--base-control__min-height);width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);border-top-left-radius:var(--blockout__radius--md);border-bottom-left-radius:var(--blockout__radius--md);font-size:1rem;text-align:left;background-color:transparent;transition:background-color .25s ease}.component-select-control__btn .component-base-control__affix{padding:0;min-height:0}.component-select-control__btn .component-base-control__affix--prefix{padding-right:var(--base-control__padding)}.component-select-control__btn .component-base-control__affix--suffix{padding-left:var(--base-control__padding)}.component-select__input--placeholder--placeholder .component-select-control__btn{color:var(--blockout__colours__surface--400)}.component-select-control__btn__value__label{display:flex;align-items:center;gap:.5rem;font-weight:500}.component-select-control__btn__value__label>svg{width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--blockout__colours__surface--500);fill:var(--blockout__colours__surface--500)}.component-select-control__btn__caret{align-self:center}.component-select__input:disabled{opacity:.25}.component-select-control .component-base-control__box:focus-within{background-color:var(--blockout__colours__surface--50);border-color:var(--blockout__colours__surface--300);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-base-control--normal.component-select-control .component-base-control__box:has(.component-select__input:hover){background-color:var(--blockout__colours__surface--200);border-color:var(--blockout__colours__surface--100)}.component-base-control--normal.component-select-control .component-base-control__box:has(.component-select__input:hover) .component-select-control__btn__caret{background-color:transparent!important}.component-base-control--outline .component-base-control__box:not(.component-base-control--normal *):has(.component-select__input:hover){border-color:var(--blockout__colours__primary--500)}.component-base-control--outline .component-base-control__box:not(.component-base-control--normal *):has(.component-select-control__btn__caret:hover){border-color:transparent}.component-base-control--ghost .component-base-control__box:not(.component-base-control--normal *):has(.component-select__input:hover){border-color:var(--blockout__colours__surface--300)}.component-base-control--ghost .component-base-control__box:not(.component-base-control--normal *):has(.component-select-control__btn__caret:hover){border-color:transparent}
+.component-select__input{cursor:pointer;width:100%}.component-select__input:focus{outline:none}.component-select__popover__wrapper{z-index:9999!important}.component-select__popover{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg)}.component-select__popover:focus{outline:none}.component-select__popover__scroll .primitive-scroll-area__viewport{width:min(calc(var(--popover-anchor-width) + 2px),fit-content);height:100%;max-height:var(--popover-available-height);min-width:12rem;padding:0}.component-select__list{display:flex;flex-direction:column;gap:.325rem;padding:.325rem}.component-select__list:focus{outline:none}.component-select__list__group:not(:first-child){border-top:1px solid var(--blockout__colours__surface--400);padding-top:.5rem}.component-select__list__group__label{padding:.125rem .675rem;font-size:.875rem;color:var(--blockout__colours__surface--600);font-weight:600}.component-select__popover__search-wrapper{display:flex;align-items:center;gap:0;padding-left:1rem}.component-select__popover__search-icon{width:1rem;height:1rem;transform:translateY(.25rem);fill:var(--blockout__colours__surface--500)}.component-select__popover__search{width:100%;padding:.5rem .675rem 0rem;min-height:var(--base-control__min-height)}.component-select__popover__search:focus{outline:none}.component-select__option{display:flex;justify-content:center;align-items:start;flex-direction:column;gap:.25rem;padding:.375rem .5rem .375rem .675rem;min-height:2.25rem;border-radius:var(--blockout__radius--sm);cursor:pointer;transition:background-color .25s ease}.component-select__option:focus{outline:none}.component-select__option:first-child{border-top:none}.component-select__option[aria-disabled=true] .component-select__option__label{color:var(--blockout__colours__surface--400)}.component-select__option[aria-disabled=true] .component-select__option__description{color:var(--blockout__colours__surface--300)}.component-select__option__label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--blockout__colours__surface--900);transition:color .25s ease;white-space:nowrap}.component-select__option__label>svg{width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--blockout__colours__surface--500);fill:var(--blockout__colours__surface--500)}.component-select__option__description{font-weight:400;color:var(--blockout__colours__surface--600);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-select__option[data-active-item=true]{background-color:var(--blockout__colours__surface--50)}.component-select__option[data-active-item=true] .component-select__option__label{color:var(--blockout__colours__surface--900)}.component-select__option[data-active-item=true] .component-select__option__description{color:var(--blockout__colours__surface--700)}.component-select-control .component-base-control__control{flex-grow:1!important;min-width:0}.component-select-control .component-select__input{display:flex}.component-select-control__btn{display:flex;flex-direction:row;flex-grow:1;padding:var(--base-control__padding);min-height:var(--base-control__min-height);width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);border-top-left-radius:var(--blockout__radius--md);border-bottom-left-radius:var(--blockout__radius--md);font-size:1rem;text-align:left;background-color:transparent;transition:background-color .25s ease}.component-select-control__btn .component-base-control__affix{padding:0;min-height:0}.component-select-control__btn .component-base-control__affix--prefix{padding-right:var(--base-control__padding)}.component-select-control__btn .component-base-control__affix--suffix{padding-left:var(--base-control__padding)}.component-select__input--placeholder--placeholder .component-select-control__btn{color:var(--blockout__colours__surface--400)}.component-select-control__btn__value{display:flex;align-items:center;gap:.5rem;font-weight:500}.component-select-control__btn__value>svg{width:1.25rem;height:1.25rem;flex-shrink:0;color:var(--blockout__colours__surface--500);fill:var(--blockout__colours__surface--500)}.component-select-control__btn__value__label{white-space:nowrap;text-overflow:ellipsis;overflow:clip;min-width:0}.component-select-control__btn__caret{align-self:center}.component-select__input:disabled{opacity:.25}.component-select-control .component-base-control__box:focus-within{background-color:var(--blockout__colours__surface--50);border-color:var(--blockout__colours__surface--300);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-base-control--normal.component-select-control .component-base-control__box:has(.component-select__input:hover){background-color:var(--blockout__colours__surface--200);border-color:var(--blockout__colours__surface--100)}.component-base-control--normal.component-select-control .component-base-control__box:has(.component-select__input:hover) .component-select-control__btn__caret{background-color:transparent!important}.component-base-control--outline .component-base-control__box:not(.component-base-control--normal *):has(.component-select__input:hover){border-color:var(--blockout__colours__primary--500)}.component-base-control--outline .component-base-control__box:not(.component-base-control--normal *):has(.component-select-control__btn__caret:hover){border-color:transparent}.component-base-control--ghost .component-base-control__box:not(.component-base-control--normal *):has(.component-select__input:hover){border-color:var(--blockout__colours__surface--300)}.component-base-control--ghost .component-base-control__box:not(.component-base-control--normal *):has(.component-select-control__btn__caret:hover){border-color:transparent}

package/dist/assets/style20.css

@@ -1 +1 @@
-.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);padding:.5rem;min-height:40px}.component-menu__item{display:flex;align-items:baseline;gap:.875rem;padding:.375rem 1.375rem .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--500)}.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);margin-left:-.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);padding:.25rem;min-height:40px;overflow-y:auto}.component-menu__item{display:flex;align-items:baseline;gap:.875rem;padding:.375rem 1.375rem .375rem .675rem;width:100%;cursor:pointer;transition:background-color .25s ease}.component-menu__item:has(.component-menu__item__icon--submenu-indicator){padding-right:.375rem}.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--500)}.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);margin-left:-.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/style25.css

@@ -1 +1 @@
-.data-view-layout-tile{display:flex;flex-direction:column;gap:1.25rem}.data-view-layout-tile__group{display:flex;flex-direction:column;gap:1rem}.data-view-layout-tile__empty{font-size:.875rem;font-weight:400;color:var(--blockout__colours__surface--400)}.data-view-layout-tile__group__header{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--blockout__colours__surface--300);border-bottom:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--100);padding:.75rem}.data-view-layout-tile__group__heading{display:flex;align-items:center;gap:.5rem;font-weight:400;color:var(--blockout__colours__surface--700);font-size:.875rem}.data-view-layout-tile__group__heading>svg{width:1.25rem;height:1.25rem;fill:var(--blockout__colours__surface--400);color:var(--blockout__colours__surface--400)}.data-view-layout-tile__group__items{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.data-view-layout-item__item{position:relative;border-radius:var(--blockout__radius--md);border:1px solid var(--blockout__colours__surface--200);overflow:clip;width:100%;height:auto;aspect-ratio:1/1}.data-view-layout-item__item .data-view-layout-item__item__media{width:100%;height:100%;background:var(--blockout__colours__surface--100)}.data-view-layout-item__item .data-view-layout-item__item__media .data-view-layout-item__item__thumbnail{width:100%;height:100%;object-fit:scale-down}.data-view-layout-item__item .data-view-layout-item__item__media .data-view-layout-item__item__checkbox{position:absolute;top:.5rem;left:.5rem;background:var(--blockout__colours__surface--0)}.data-view-layout-item__item .data-view-layout-item__item__media .data-view-layout-item__item__actions{position:absolute;top:.5rem;right:.5rem;background:var(--blockout__colours__surface--0)}.data-view-layout-item__item .data-view-layout-item__item__caption{display:flex;flex-direction:column;gap:.375rem;position:absolute;bottom:0;left:0;right:0;padding:2rem 1.25rem 1rem;background:linear-gradient(to top,var(--blockout__colours__surface--950),transparent);color:var(--blockout__colours__surface--0)}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__header{display:flex;align-items:start;gap:.675rem;flex-wrap:wrap-reverse}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__header .primitive-tooltip{max-width:100%}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__header .data-view-layout-item__item__title{color:var(--blockout__colours__surface--0);font-size:1rem;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__header .data-view-layout-item__item__tags{display:flex;gap:.5rem;flex-wrap:wrap}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__properties{display:flex;align-items:basline;gap:1.5rem .75rem;flex-wrap:wrap}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__properties .data-view-layout-item__item__property{color:var(--blockout__colours__surface--300);font-size:.75rem}
+.data-view-layout-tile{display:flex;flex-direction:column;gap:1.25rem}.data-view-layout-tile__group{display:flex;flex-direction:column;gap:1rem}.data-view-layout-tile__empty{font-size:.875rem;font-weight:400;color:var(--blockout__colours__surface--400)}.data-view-layout-tile__group__header{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--blockout__colours__surface--300);border-bottom:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--100);padding:.75rem}.data-view-layout-tile__group__heading{display:flex;align-items:center;gap:.5rem;font-weight:400;color:var(--blockout__colours__surface--700);font-size:.875rem}.data-view-layout-tile__group__heading>svg{width:1.25rem;height:1.25rem;fill:var(--blockout__colours__surface--400);color:var(--blockout__colours__surface--400)}.data-view-layout-tile__group__items{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.data-view-layout-item__item{position:relative;border-radius:var(--blockout__radius--md);border:1px solid var(--blockout__colours__surface--200);width:100%;height:auto;aspect-ratio:1/1}.data-view-layout-item__item .data-view-layout-item__item__media{width:100%;height:100%;background:var(--blockout__colours__surface--100)}.data-view-layout-item__item .data-view-layout-item__item__media .data-view-layout-item__item__thumbnail{width:100%;height:100%;object-fit:scale-down}.data-view-layout-item__item .data-view-layout-item__item__media .data-view-layout-item__item__checkbox{position:absolute;top:.5rem;left:.5rem;background:var(--blockout__colours__surface--0)}.data-view-layout-item__item .data-view-layout-item__item__media .data-view-layout-item__item__actions{position:absolute;top:.5rem;right:.5rem;background:var(--blockout__colours__surface--0)}.data-view-layout-item__item .data-view-layout-item__item__caption{display:flex;flex-direction:column;gap:.375rem;position:absolute;bottom:0;left:0;right:0;padding:2rem 1.25rem 1rem;background:linear-gradient(to top,var(--blockout__colours__surface--950),transparent);color:var(--blockout__colours__surface--0)}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__header{display:flex;align-items:start;gap:.675rem;flex-wrap:wrap-reverse}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__header .primitive-tooltip{max-width:100%}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__header .data-view-layout-item__item__title{color:var(--blockout__colours__surface--0);font-size:1rem;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__header .data-view-layout-item__item__tags{display:flex;gap:.5rem;flex-wrap:wrap}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__properties{display:flex;align-items:basline;gap:1.5rem .75rem;flex-wrap:wrap}.data-view-layout-item__item .data-view-layout-item__item__caption .data-view-layout-item__item__properties .data-view-layout-item__item__property{color:var(--blockout__colours__surface--300);font-size:.75rem}

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

@@ -2,6 +2,8 @@ import { FC, ReactElement } from 'react';
 interface RowProps {
     className?: string;
     children?: ReactElement[];
+    gap?: "xs" | "sm" | "md" | "lg";
+    wrap?: boolean;
 }
 export declare const Row: FC<RowProps>;
 export {};

package/dist/components/button/row.js

@@ -1,14 +1,30 @@
 import { jsx as o } from "react/jsx-runtime";
-import { cn as e } from "../../utils/css.js";
+import { cn as p } from "../../utils/css.js";
 import { Children as i } from "react";
-import { C as p } from "../../composite-provider-BPIeS4Cg.js";
-import { C as n } from "../../5JTVDSTH-CZ7mfyUK.js";
-import { C as s } from "../../J2LQO3EC-BXJIaM2U.js";
-import { C as a } from "../../6VRAQV3D-BYmT0QTl.js";
-const u = ({ className: m, children: t }) => /* @__PURE__ */ o(p, { children: /* @__PURE__ */ o(n, { className: e("component-button-row", m), children: /* @__PURE__ */ o(s, { className: "component-button-row__row", children: i.map(
-  t,
-  (r) => r && /* @__PURE__ */ o(a, { render: r })
-) }) }) });
+import { C as s } from "../../composite-provider-BPIeS4Cg.js";
+import { C as a } from "../../5JTVDSTH-CZ7mfyUK.js";
+import { C as c } from "../../J2LQO3EC-BXJIaM2U.js";
+import { C } from "../../6VRAQV3D-BYmT0QTl.js";
+const x = ({
+  className: t,
+  gap: m = "md",
+  wrap: e = !0,
+  children: n
+}) => /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(
+  a,
+  {
+    className: p(
+      "component-button-row",
+      `component-button-row--${m}`,
+      e && "component-button-row--wrap",
+      t
+    ),
+    children: /* @__PURE__ */ o(c, { className: "component-button-row__row", children: i.map(
+      n,
+      (r) => r && /* @__PURE__ */ o(C, { render: r })
+    ) })
+  }
+) });
 export {
-  u as Row
+  x as Row
 };

package/dist/components/controls/select-control/control.js

@@ -1,6 +1,6 @@
-import { jsx as o, jsxs as r, Fragment as S } from "react/jsx-runtime";
-import { Button as v } from "../../button/index.js";
-import { findOption as N } from "../../../types/options.js";
+import { jsx as e, jsxs as r, Fragment as v } from "react/jsx-runtime";
+import { Button as N } from "../../button/index.js";
+import { findOption as S } from "../../../types/options.js";
 import * as m from "react";
 import { p as O } from "../../../IconBase.es-rM5tt24D.js";
 import { t as P } from "../../../CaretDown.es-BKFnosGJ.js";
@@ -10,37 +10,37 @@ import { useBaseControlProps as C } from "../base-control/props.js";
 import { Select as I } from "./select.js";
 import '../../../assets/style16.css';/* empty css                      */
 import { S as g } from "../../../select-value-B3DYk9eV.js";
-const f = m.forwardRef((e, t) => /* @__PURE__ */ m.createElement(O, { ref: t, ...e, weights: P }));
+const f = m.forwardRef((o, t) => /* @__PURE__ */ m.createElement(O, { ref: t, ...o, weights: P }));
 f.displayName = "CaretDownIcon";
-function G(e) {
-  const { baseProps: t, controlProps: n } = C(e, {
+function G(o) {
+  const { baseProps: t, controlProps: n } = C(o, {
     className: "component-select-control"
   }), {
     placeholder: l,
     options: d = [],
-    value: h,
-    withIcon: b = !1,
-    before: _,
+    value: _,
+    withIcon: h = !1,
+    before: b,
     after: u
-  } = n, { prefix: s, suffix: c, ...x } = t, i = N(d, h), a = !!i ? i : { label: l || "" };
-  return /* @__PURE__ */ o(w, { ...x, children: /* @__PURE__ */ r(I, { ...n, prefix: s, suffix: c, children: [
-    _,
+  } = n, { prefix: c, suffix: s, ...x } = t, a = S(d, _), i = !!a ? a : { label: l || "" };
+  return /* @__PURE__ */ e(w, { ...x, children: /* @__PURE__ */ r(I, { ...n, prefix: c, suffix: s, children: [
+    b,
     /* @__PURE__ */ r("div", { className: "component-select-control__btn", children: [
-      /* @__PURE__ */ o(p, { children: s }),
-      /* @__PURE__ */ o(g, { fallback: l, children: () => /* @__PURE__ */ o(S, { children: /* @__PURE__ */ r("span", { className: "component-select-control__btn__value__label", children: [
-        b && a.icon,
-        a.label
+      /* @__PURE__ */ e(p, { children: c }),
+      /* @__PURE__ */ e(g, { fallback: l, children: () => /* @__PURE__ */ e(v, { children: /* @__PURE__ */ r("span", { className: "component-select-control__btn__value", children: [
+        h && i.icon,
+        /* @__PURE__ */ e("span", { className: "component-select-control__btn__value__label", children: i.label })
       ] }) }) }),
-      /* @__PURE__ */ o(p, { suffix: !0, children: c })
+      /* @__PURE__ */ e(p, { suffix: !0, children: s })
     ] }),
-    /* @__PURE__ */ o(
-      v.Icon,
+    /* @__PURE__ */ e(
+      N.Icon,
       {
         className: "component-select-control__btn__caret",
         variant: "ghost",
         size: "small",
         tabIndex: -1,
-        children: /* @__PURE__ */ o(f, {})
+        children: /* @__PURE__ */ e(f, {})
       }
     ),
     u

package/dist/components/controls/select-control/props.d.ts

@@ -4,6 +4,7 @@ export type SelectProps<T extends string = string> = {
     className?: string;
     id?: string;
     value?: T;
+    name?: string;
     onChangeValue?: (value: T) => void;
     options?: (Optionable<T> | OptionableGroup<T>)[];
     searchable?: boolean;

package/dist/components/dialog/index.d.ts

@@ -5,8 +5,10 @@ interface DialogProps extends PropsWithChildren {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     title?: string;
-    align?: "top" | "center" | "bottom";
+    align?: "top" | "center" | "bottom" | "left" | "right";
+    edgeless?: boolean | "x" | "y" | "top" | "bottom" | "left" | "right" | "all";
     backdrop?: boolean;
+    divided?: boolean;
     hideOnEscape?: Ariakit.DialogProps["hideOnEscape"];
     hideOnInteractOutside?: Ariakit.DialogProps["hideOnInteractOutside"];
 }

package/dist/components/dialog/index.js

@@ -1,7 +1,7 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { cn as c } from "../../utils/css.js";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { cn as g } 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/style10.css';import '../../assets/style7.css';import '../../assets/index6.css';/* empty css                   */
-import { noop as d } from "../../utils/noop.js";
+import { noop as f } from "../../utils/noop.js";
 import "react";
 /* empty css                   */
 /* empty css                   */
@@ -12,61 +12,65 @@ import "../../primitives/scroll-area/index.js";
 import "../../primitives/symbol/index.js";
 /* empty css                   */
 /* empty css                   */
-import { H1 as g } from "../../primitives/typography/heading.js";
+import { H1 as _ } from "../../primitives/typography/heading.js";
 /* empty css                   */
 /* empty css                    */
-import { e as f } from "../../X.es-TbGOnXOO.js";
-import { Button as h } from "../button/index.js";
-import { D as _ } from "../../G7GW6PWC-Dk4hVbAk.js";
-import { D, a as N } from "../../TIW3GMFC-BF0w2_9R.js";
-const M = ({
-  className: m,
-  open: e = !1,
-  onOpenChange: t = d,
-  title: r,
-  align: a = "center",
-  backdrop: n = !0,
-  hideOnEscape: p,
-  hideOnInteractOutside: s,
-  children: l
-}) => /* @__PURE__ */ i(
-  _,
+import { e as h } from "../../X.es-TbGOnXOO.js";
+import { Button as D } from "../button/index.js";
+import { D as N } from "../../G7GW6PWC-Dk4hVbAk.js";
+import { D as u, a as v } from "../../TIW3GMFC-BF0w2_9R.js";
+const P = ({
+  className: e,
+  open: a = !1,
+  onOpenChange: t = f,
+  title: i,
+  align: n = "center",
+  edgeless: r = !1,
+  backdrop: l = !0,
+  divided: p = !0,
+  hideOnEscape: s,
+  hideOnInteractOutside: c,
+  children: d
+}) => /* @__PURE__ */ m(
+  N,
   {
-    open: e,
+    open: a,
     onClose: () => {
       t(!1);
     },
-    className: c(
+    className: g(
       "component-dialog",
-      `component-dialog--${a}`,
-      m
+      `component-dialog--${n}`,
+      p && "component-dialog--divided",
+      r && `component-dialog--edgeless-${r === !0 ? "all" : r}`,
+      e
     ),
-    backdrop: n && /* @__PURE__ */ o("div", { className: "component-dialog__backdrop" }),
-    hideOnEscape: p,
-    hideOnInteractOutside: s,
+    backdrop: l && /* @__PURE__ */ o("div", { className: "component-dialog__backdrop" }),
+    hideOnEscape: s,
+    hideOnInteractOutside: c,
     children: [
-      r && /* @__PURE__ */ i("header", { className: "component-dialog__header", children: [
+      i && /* @__PURE__ */ m("header", { className: "component-dialog__header", children: [
         /* @__PURE__ */ o(
-          D,
+          u,
           {
             className: "component-dialog__title",
-            render: /* @__PURE__ */ o(g, { size: 5 }),
-            children: r
+            render: /* @__PURE__ */ o(_, { size: 5 }),
+            children: i
           }
         ),
         /* @__PURE__ */ o(
-          N,
+          v,
           {
             className: "component-dialog__close",
-            render: /* @__PURE__ */ o(h.Icon, { variant: "ghost", size: "small" }),
-            children: /* @__PURE__ */ o(f, {})
+            render: /* @__PURE__ */ o(D.Icon, { variant: "ghost", size: "small" }),
+            children: /* @__PURE__ */ o(h, {})
           }
         )
       ] }),
-      l
+      /* @__PURE__ */ o("div", { className: "component-dialog__body", children: d })
     ]
   }
 );
 export {
-  M as Dialog
+  P as Dialog
 };

package/dist/components/menu/index.js

@@ -1,33 +1,34 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import { cn as M } from "../../utils/css.js";
 import { useState as w } from "react";
 import { Button as r } from "../button/index.js";
 import { MenuProvider as _ } from "./context.js";
-import { M as h } from "../../item-CZjpTCgc.js";
+import { M as h } from "../../item-CCOXuQUx.js";
 import '../../assets/style20.css';/* empty css                   */
 import { M as v, a as x, b as P } from "../../menu-button-GQO5dB3U.js";
 function C({
-  className: n,
-  iconOnly: t = !1,
+  className: t,
+  iconOnly: n = !1,
   items: m,
-  variant: s,
-  size: a,
-  children: p,
+  variant: a,
+  size: p,
+  children: s,
   context: i
 }) {
-  const [o, u] = w(!1), c = t ? r.Icon : r;
-  return /* @__PURE__ */ e(_, { actionContext: i, children: /* @__PURE__ */ l(v, { open: o, setOpen: u, children: [
+  const [o, u] = w(!1), c = n ? r.Icon : r;
+  return /* @__PURE__ */ e(_, { actionContext: i, children: /* @__PURE__ */ d(v, { open: o, setOpen: u, children: [
     /* @__PURE__ */ e(
       x,
       {
-        className: M("component-menu__button", n),
-        render: /* @__PURE__ */ e(c, { variant: s, size: a }),
-        children: p
+        className: M("component-menu__button", t),
+        render: /* @__PURE__ */ e(c, { variant: a, size: p }),
+        children: s
       }
     ),
     o && /* @__PURE__ */ e(
       P,
       {
+        portal: !0,
         wrapperProps: {
           className: "component-menu__menu-wrapper"
         },
@@ -36,7 +37,7 @@ function C({
         gutter: 8,
         overflowPadding: 4,
         className: "component-menu__window",
-        children: m.map((f, d) => /* @__PURE__ */ e(h, { item: f }, d))
+        children: m.map((f, l) => /* @__PURE__ */ e(h, { item: f }, l))
       }
     )
   ] }) });

package/dist/components/menu/item.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "./items/action.js";
 import "./items/spacer.js";
-import { M as e } from "../../item-CZjpTCgc.js";
+import { M as e } from "../../item-CCOXuQUx.js";
 import "./items/toggle.js";
 export {
   e as MenuItem

package/dist/components/menu/items/action.js

@@ -1,11 +1,11 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { useMenu as t } from "../context.js";
+import { useMenu as m } from "../context.js";
 import { EmptyIcon as i } from "../icon.js";
-import { M as _ } from "../../../2NBKRL7C-DBbnghCe.js";
+import { M as s } from "../../../2NBKRL7C-DBbnghCe.js";
 const d = ({ item: n }) => {
-  const { actionContext: c } = t(), m = n.icon || i;
+  const { actionContext: c } = m(), t = n.icon || i;
   return /* @__PURE__ */ o(
-    _,
+    s,
     {
       className: "component-menu__item component-menu__item--action",
       onClick: () => {
@@ -13,10 +13,10 @@ const d = ({ item: n }) => {
       },
       disabled: n.disabled,
       children: [
-        /* @__PURE__ */ e(m, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
+        /* @__PURE__ */ e(t, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
         /* @__PURE__ */ o("div", { className: "component-menu__item__text", children: [
           /* @__PURE__ */ e("div", { className: "component-menu__item__label", children: n.label }),
-          /* @__PURE__ */ e("p", { className: "component-menu__item__description", children: n.description })
+          n.description && /* @__PURE__ */ e("p", { className: "component-menu__item__description", children: n.description })
         ] })
       ]
     }

package/dist/components/menu/items/submenu.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../../CaretRight.es-vnr78BGI.js";
 import "../icon.js";
-import { S as u } from "../../../item-CZjpTCgc.js";
+import { S as u } from "../../../item-CCOXuQUx.js";
 import "../../../menu-button-GQO5dB3U.js";
 import "../../../2NBKRL7C-DBbnghCe.js";
 export {

package/dist/components/menu/items/toggle.js

@@ -1,15 +1,15 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { cn as i } from "../../../utils/css.js";
 import { r as a, a as p } from "../../../Square.es-KJLdY11q.js";
 import "react";
 import { useMenu as d } from "../context.js";
 import { EmptyIcon as u } from "../icon.js";
 import { M as h } from "../../../2NBKRL7C-DBbnghCe.js";
-const I = ({ item: e }) => {
-  const { actionContext: o } = d(), l = e.icon || u, r = () => {
+const I = ({ item: n }) => {
+  const { actionContext: o } = d(), l = n.icon || u, r = () => {
     var m, t, s;
-    const _ = !e.checked;
-    return (m = e.onToggle) == null || m.call(e, _, o), _ ? (t = e.onCheck) == null ? void 0 : t.call(e, o) : (s = e.onUncheck) == null ? void 0 : s.call(e, o);
+    const _ = !n.checked;
+    return (m = n.onToggle) == null || m.call(n, _, o), _ ? (t = n.onCheck) == null ? void 0 : t.call(n, o) : (s = n.onUncheck) == null ? void 0 : s.call(n, o);
   };
   return /* @__PURE__ */ c(
     h,
@@ -17,24 +17,24 @@ const I = ({ item: e }) => {
       hideOnClick: !1,
       className: i(
         "component-menu__item component-menu__item--toggle",
-        e.checked && "component-menu__item--toggle--checked"
+        n.checked && "component-menu__item--toggle--checked"
       ),
-      disabled: e.disabled,
+      disabled: n.disabled,
       onClick: r,
       children: [
-        /* @__PURE__ */ n(l, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
+        /* @__PURE__ */ e(l, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
         /* @__PURE__ */ c("div", { className: "component-menu__item__text", children: [
           /* @__PURE__ */ c("div", { className: "component-menu__item__text__header", children: [
-            /* @__PURE__ */ n("div", { className: "component-menu__item__label", children: e.label }),
-            e.checked ? /* @__PURE__ */ n(
+            /* @__PURE__ */ e("div", { className: "component-menu__item__label", children: n.label }),
+            n.checked ? /* @__PURE__ */ e(
               a,
               {
                 weight: "fill",
                 className: "component-menu__item__icon component-menu__item__icon--checkbox"
               }
-            ) : /* @__PURE__ */ n(p, { className: "component-menu__item__icon component-menu__item__icon--checkbox" })
+            ) : /* @__PURE__ */ e(p, { className: "component-menu__item__icon component-menu__item__icon--checkbox" })
           ] }),
-          /* @__PURE__ */ n("p", { className: "component-menu__item__description", children: e.description })
+          n.description && /* @__PURE__ */ e("p", { className: "component-menu__item__description", children: n.description })
         ] })
       ]
     }

package/dist/item-CCOXuQUx.js

@@ -0,0 +1,62 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { ActionMenuItem as s } from "./components/menu/items/action.js";
+import { SeparatorMenuItem as u } from "./components/menu/items/spacer.js";
+import { e as a } from "./CaretRight.es-vnr78BGI.js";
+import { EmptyIcon as i } from "./components/menu/icon.js";
+import { ToggleMenuItem as _ } from "./components/menu/items/toggle.js";
+import { u as p, M as l, a as d, b as M } from "./menu-button-GQO5dB3U.js";
+import { M as h } from "./2NBKRL7C-DBbnghCe.js";
+const b = ({ item: e }) => {
+  const m = e.icon || i, t = p();
+  return /* @__PURE__ */ o(l, { store: t, children: [
+    /* @__PURE__ */ o(
+      d,
+      {
+        className: "component-menu__item component-menu__item--submenu",
+        render: /* @__PURE__ */ n(h, {}),
+        disabled: e.disabled,
+        children: [
+          /* @__PURE__ */ n(m, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
+          /* @__PURE__ */ o("div", { className: "component-menu__item__text", children: [
+            /* @__PURE__ */ o("div", { className: "component-menu__item__text__header", children: [
+              /* @__PURE__ */ n("div", { className: "component-menu__item__label", children: e.label }),
+              /* @__PURE__ */ n(a, { className: "component-menu__item__icon component-menu__item__icon--submenu-indicator" })
+            ] }),
+            e.description && /* @__PURE__ */ n("p", { className: "component-menu__item__description", children: e.description })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      M,
+      {
+        portal: !0,
+        wrapperProps: {
+          className: "component-menu__menu-wrapper component-menu__menu-wrapper--submenu"
+        },
+        "data-colour-scheme": "invert",
+        fitViewport: !0,
+        gutter: 12,
+        shift: 0,
+        overflowPadding: 4,
+        className: "component-menu__window component-menu__window--submenu",
+        children: e.children.map((r, c) => /* @__PURE__ */ n(f, { item: r }, c))
+      }
+    )
+  ] });
+}, f = ({ item: e }) => {
+  switch (e.type) {
+    case "action":
+      return /* @__PURE__ */ n(s, { item: e });
+    case "toggle":
+      return /* @__PURE__ */ n(_, { item: e });
+    case "submenu":
+      return /* @__PURE__ */ n(b, { item: e });
+    case "separator":
+      return /* @__PURE__ */ n(u, {});
+  }
+};
+export {
+  f as M,
+  b as S
+};

package/package.json

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

package/dist/item-CZjpTCgc.js

@@ -1,58 +0,0 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { ActionMenuItem as s } from "./components/menu/items/action.js";
-import { SeparatorMenuItem as u } from "./components/menu/items/spacer.js";
-import { e as a } from "./CaretRight.es-vnr78BGI.js";
-import { EmptyIcon as _ } from "./components/menu/icon.js";
-import { ToggleMenuItem as i } from "./components/menu/items/toggle.js";
-import { u as p, M as l, a as d, b as M } from "./menu-button-GQO5dB3U.js";
-import { M as b } from "./2NBKRL7C-DBbnghCe.js";
-const h = ({ item: n }) => {
-  const o = n.icon || _, t = p();
-  return /* @__PURE__ */ m(l, { store: t, children: [
-    /* @__PURE__ */ m(
-      d,
-      {
-        className: "component-menu__item component-menu__item--submenu",
-        render: /* @__PURE__ */ e(b, {}),
-        disabled: n.disabled,
-        children: [
-          /* @__PURE__ */ e(o, { className: "component-menu__item__icon component-menu__item__icon--pictoral" }),
-          /* @__PURE__ */ m("div", { className: "component-menu__item__text", children: [
-            /* @__PURE__ */ m("div", { className: "component-menu__item__text__header", children: [
-              /* @__PURE__ */ e("div", { className: "component-menu__item__label", children: n.label }),
-              /* @__PURE__ */ e(a, { className: "component-menu__item__icon component-menu__item__icon--submenu-indicator" })
-            ] }),
-            /* @__PURE__ */ e("p", { className: "component-menu__item__description", children: n.description })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e(
-      M,
-      {
-        gutter: 12,
-        shift: 0,
-        wrapperProps: {
-          className: "component-menu__menu-wrapper component-menu__menu-wrapper--submenu"
-        },
-        className: "component-menu__window component-menu__window--submenu",
-        children: n.children.map((r, c) => /* @__PURE__ */ e(f, { item: r }, c))
-      }
-    )
-  ] });
-}, f = ({ item: n }) => {
-  switch (n.type) {
-    case "action":
-      return /* @__PURE__ */ e(s, { item: n });
-    case "toggle":
-      return /* @__PURE__ */ e(i, { item: n });
-    case "submenu":
-      return /* @__PURE__ */ e(h, { item: n });
-    case "separator":
-      return /* @__PURE__ */ e(u, {});
-  }
-};
-export {
-  f as M,
-  h as S
-};