@wrdagency/blockout 1.0.29 → 1.0.30

package/dist/assets/index2.css

@@ -1 +1 @@
-.component-avatar{--component-avatar__size: 1.5rem;--component-avatar__gap: .75rem;--component-avatar__font-size: 1rem;display:flex;align-items:center;gap:var(--component-avatar__gap)}.component-avatar__image,.component-avatar__fallback{display:flex;align-items:center;justify-content:center;width:var(--component-avatar__size);height:var(--component-avatar__size);border-radius:var(--component-avatar__size);background-color:var(--blockout__colours__colourway--light);color:var(--blockout__colours__colourway--dark);font-size:calc(var(--component-avatar__size) / 2)}.component-avatar__name{font-size:var(--component-avatar__font-size);font-weight:400;color:var(--blockout__colours__surface--950)}.component-avatar--size-x-small{--component-avatar__size: 1.25rem;--component-avatar__gap: .5rem;--component-avatar__font-size: .75rem}.component-avatar--size-small{--component-avatar__size: 1.5rem;--component-avatar__gap: .675rem;--component-avatar__font-size: .875rem}.component-avatar--size-large{--component-avatar__size: 2rem;--component-avatar__gap: .875rem;--component-avatar__font-size: 1}.component-avatar--size-x-large{--component-avatar__size: 2.5rem;--component-avatar__gap: 1rem;--component-avatar__font-size: 1.125rem}
+.component-avatar{--component-avatar__size: 1.5rem;--component-avatar__gap: .75rem;--component-avatar__font-size: 1rem;display:flex;align-items:center;gap:var(--component-avatar__gap)}.component-avatar__image,.component-avatar__fallback{display:flex;align-items:center;justify-content:center;width:var(--component-avatar__size);height:var(--component-avatar__size);border-radius:var(--component-avatar__size);background-color:var(--blockout__colours__colourway--light);color:var(--blockout__colours__colourway--dark);font-size:calc(var(--component-avatar__size) / 2);flex-shrink:0}.component-avatar__name{font-size:var(--component-avatar__font-size);font-weight:400;color:var(--blockout__colours__surface--950)}.component-avatar--size-x-small{--component-avatar__size: 1.25rem;--component-avatar__gap: .5rem;--component-avatar__font-size: .75rem}.component-avatar--size-small{--component-avatar__size: 1.5rem;--component-avatar__gap: .675rem;--component-avatar__font-size: .875rem}.component-avatar--size-large{--component-avatar__size: 2rem;--component-avatar__gap: .875rem;--component-avatar__font-size: 1}.component-avatar--size-x-large{--component-avatar__size: 2.5rem;--component-avatar__gap: 1rem;--component-avatar__font-size: 1.125rem}

package/dist/assets/index9.css

@@ -1 +1 @@
-: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.875rem;--component-shell__sidebar-width--open: 200px;display:grid;grid-template-columns:var(--component-shell__sidebar-width);grid-auto-columns:1fr;grid-auto-flow:column;grid-template-rows:var(--component-shell__navigation-height);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:.875rem}.component-shell__navigation-separator{height:1rem;margin:0 .5rem;border-left:1px solid var(--blockout__colours__surface--300)}.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{display:flex;flex-direction:column;height:100%;width:var(--component-shell__sidebar-width--open)}.component-shell__sidebar-item{--icon-label__icon-size: 1.375rem;width:var(--component-shell__sidebar-width--open);padding:.675rem .75rem;overflow:clip;transition:color .5s ease;white-space:nowrap}.component-shell__sidebar-item.component-shell__sidebar-item--divide{margin:.125rem .675rem;padding:.675rem 0;width:calc(var(--component-shell__sidebar-width) - 1.375rem);border-top:1px solid var(--blockout__colours__surface--200)}.component-shell__sidebar-item.component-shell__sidebar-item--end{margin-top:auto}.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;width:calc(var(--component-shell__sidebar-width) - 1.375rem);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-item{color:transparent}.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}
+: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.875rem;--component-shell__sidebar-width--open: 200px;display:grid;grid-template-columns:var(--component-shell__sidebar-width);grid-auto-columns:1fr;grid-auto-flow:column;grid-template-rows:var(--component-shell__navigation-height);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:.875rem}.component-shell__navigation-separator{height:1rem;margin:0 .5rem;border-left:1px solid var(--blockout__colours__surface--300)}.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{display:flex;flex-direction:column;height:100%;width:var(--component-shell__sidebar-width--open)}.component-shell__sidebar-item{--icon-label__icon-size: 1.375rem;width:var(--component-shell__sidebar-width--open);padding:.675rem .75rem;overflow:clip;transition:color .5s ease;white-space:nowrap}.component-shell__sidebar-item.component-shell__sidebar-item--divide{margin:.125rem .675rem;padding:.675rem 0;width:calc(var(--component-shell__sidebar-width) - 1.375rem);border-top:1px solid var(--blockout__colours__surface--200)}.component-shell__sidebar-item.component-shell__sidebar-item--end{margin-top:auto}.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;width:calc(var(--component-shell__sidebar-width) - 1.375rem);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-item{color:transparent}.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;min-width: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/static.css

@@ -1 +1 @@
-.component-command-palette{flex-direction:column;position:fixed;top:1rem;right:1rem;bottom:1rem;left:1rem;z-index:50;margin:auto;margin-top:5vh;display:flex;height:fit-content;max-height:calc(100dvh - 5vh - 2rem);max-width:64ch;overflow:auto;border-radius:var(--blockout__radius--lg);background:transparent;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-command-palette[data-enter]{opacity:1;transform:translateY(0)}.component-command-palette__backdrop{background-color:#0000001a;opacity:0;transition:opacity ease .15s}.component-command-palette__backdrop[data-enter]{opacity:1}.component-command-palette__header{display:flex;align-items:center;padding-right:.875rem;width:100%;background:var(--blockout__colours__surface--0);position:sticky;top:0;border-bottom:1px solid var(--blockout__colours__surface--200)}.component-command-palette__header__icon{width:1.375rem;height:1.375rem;fill:var(--blockout__colours__surface--500);margin:.875rem}.component-command-palette__input{padding:.5rem 0;flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none}.component-command-palette__input:focus{outline:none}.component-command-palette__input::-webkit-search-decoration,.component-command-palette__input::-webkit-search-cancel-button,.component-command-palette__input::-webkit-search-results-button,.component-command-palette__input::-webkit-search-results-decoration{-webkit-appearance:none}.component-command-palette__results{display:flex;flex-direction:column;gap:.125rem;padding:.375rem}.component-command-palette__empty{font-size:.875rem;color:var(--blockout__colours__surface--500);padding:1.125rem}.command-palette-preset__list{display:flex;align-items:start;gap:.675rem;padding:.375rem .675rem;cursor:pointer;border-radius:var(--blockout__radius--md);transition:background .15s ease,color .15s ease}.command-palette-preset__list .command-palette-preset__list__icon{flex-shrink:0;width:1.25em;height:1.25em;margin-top:.125rem;fill:var(--blockout__colours__surface--500);transition:fill .15s ease}.command-palette-preset__list[data-active-item=true]{background:var(--blockout__colours__primary--100);color:var(--blockout__colours__primary--950)}.command-palette-preset__list[data-active-item=true] .command-palette-preset__list__icon{fill:var(--blockout__colours__primary--600)}.command-palette-preset__list.command-palette-preset__list__group__item{margin-left:2rem;font-size:.875rem;color:var(--blockout__colours__surface--500)}.command-palette-preset__list.command-palette-preset__list__group__item .command-palette-preset__list__icon{display:none}.command-palette-preset__horizontal__group{display:grid;grid-template-columns:2fr 3fr;gap:1rem;border-top:1px solid var(--blockout__colours__surface--200);padding-block:.375rem}.command-palette-preset__horizontal__group:first-child{padding-top:0;border-top:none}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__label{display:flex;align-items:start;gap:.675rem;font-weight:500;padding:.375rem .675rem;border-radius:var(--blockout__radius--md);height:fit-content;min-width:0}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__label .command-palette-preset__horizontal__group__label__icon{flex-shrink:0}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__label .command-palette-preset__horizontal__group__label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__label[data-active-item=true]{background:var(--blockout__colours__primary--100);color:var(--blockout__colours__primary--950)}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__items{display:grid;gap:.125rem}.command-palette-preset__horizontal{padding:.375rem .675rem;border-radius:var(--blockout__radius--md);font-weight:500;transition:background .15s ease,color .15s ease}.command-palette-preset__horizontal[data-active-item=true]{background:var(--blockout__colours__primary--100);color:var(--blockout__colours__primary--950)}
+.component-command-palette{flex-direction:column;position:fixed;top:1rem;right:1rem;bottom:1rem;left:1rem;z-index:50;margin:auto;margin-top:5vh;display:flex;height:fit-content;max-height:calc(100dvh - 5vh - 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-command-palette[data-enter]{opacity:1;transform:translateY(0)}.component-command-palette__backdrop{background-color:#0000001a;opacity:0;transition:opacity ease .15s}.component-command-palette__backdrop[data-enter]{opacity:1}.component-command-palette__header{display:flex;align-items:center;padding-right:.875rem;width:100%;border-bottom:1px solid var(--blockout__colours__surface--200)}.component-command-palette__header__icon{width:1.375rem;height:1.375rem;fill:var(--blockout__colours__surface--500);margin:.875rem}.component-command-palette__input{padding:.5rem 0;flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none}.component-command-palette__input:focus{outline:none}.component-command-palette__input::-webkit-search-decoration,.component-command-palette__input::-webkit-search-cancel-button,.component-command-palette__input::-webkit-search-results-button,.component-command-palette__input::-webkit-search-results-decoration{-webkit-appearance:none}.component-command-palette__results{display:flex;flex-direction:column;gap:.125rem;padding:.375rem}.component-command-palette__empty{font-size:.875rem;color:var(--blockout__colours__surface--500);padding:1.125rem}.command-palette-preset__list{display:flex;align-items:start;gap:.675rem;padding:.375rem .675rem;cursor:pointer;border-radius:var(--blockout__radius--md);transition:background .15s ease,color .15s ease}.command-palette-preset__list .command-palette-preset__list__icon{flex-shrink:0;width:1.25em;height:1.25em;margin-top:.125rem;fill:var(--blockout__colours__surface--500);transition:fill .15s ease}.command-palette-preset__list[data-active-item=true]{background:var(--blockout__colours__primary--100);color:var(--blockout__colours__primary--950)}.command-palette-preset__list[data-active-item=true] .command-palette-preset__list__icon{fill:var(--blockout__colours__primary--600)}.command-palette-preset__list.command-palette-preset__list__group__item{margin-left:2rem;font-size:.875rem;color:var(--blockout__colours__surface--500)}.command-palette-preset__list.command-palette-preset__list__group__item .command-palette-preset__list__icon{display:none}.command-palette-preset__horizontal__group{display:grid;grid-template-columns:2fr 3fr;gap:1rem;border-top:1px solid var(--blockout__colours__surface--200);padding-block:.375rem}.command-palette-preset__horizontal__group:first-child{padding-top:0;border-top:none}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__label{display:flex;align-items:start;gap:.675rem;font-weight:500;padding:.375rem .675rem;border-radius:var(--blockout__radius--md);height:fit-content;min-width:0}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__label .command-palette-preset__horizontal__group__label__icon{flex-shrink:0}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__label .command-palette-preset__horizontal__group__label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__label[data-active-item=true]{background:var(--blockout__colours__primary--100);color:var(--blockout__colours__primary--950)}.command-palette-preset__horizontal__group .command-palette-preset__horizontal__group__items{display:grid;gap:.125rem}.command-palette-preset__horizontal{padding:.375rem .675rem;border-radius:var(--blockout__radius--md);font-weight:500;transition:background .15s ease,color .15s ease}.command-palette-preset__horizontal[data-active-item=true]{background:var(--blockout__colours__primary--100);color:var(--blockout__colours__primary--950)}

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__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}.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}

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:contain}.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);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}

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

@@ -1,19 +1,19 @@
-import { jsx as e, jsxs as r, Fragment as S } from "react/jsx-runtime";
-import { Button as N } from "../../button/index.js";
-import { normalizeOption as O } from "../../../types/options.js";
+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 * as m from "react";
-import { p as P } from "../../../IconBase.es-rM5tt24D.js";
-import { t as w } from "../../../CaretDown.es-BKFnosGJ.js";
-import { BaseControl as C } from "../base-control/index.js";
+import { p as O } from "../../../IconBase.es-rM5tt24D.js";
+import { t as P } from "../../../CaretDown.es-BKFnosGJ.js";
+import { BaseControl as w } from "../base-control/index.js";
 import { Affix as p } from "../base-control/affix.js";
-import { useBaseControlProps as I } from "../base-control/props.js";
-import { Select as g } from "./select.js";
+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 B } from "../../../select-value-B3DYk9eV.js";
-const f = m.forwardRef((o, t) => /* @__PURE__ */ m.createElement(P, { ref: t, ...o, weights: w }));
+import { S as g } from "../../../select-value-B3DYk9eV.js";
+const f = m.forwardRef((e, t) => /* @__PURE__ */ m.createElement(O, { ref: t, ...e, weights: P }));
 f.displayName = "CaretDownIcon";
-function H(o) {
-  const { baseProps: t, controlProps: n } = I(o, {
+function G(e) {
+  const { baseProps: t, controlProps: n } = C(e, {
     className: "component-select-control"
   }), {
     placeholder: l,
@@ -22,30 +22,30 @@ function H(o) {
     withIcon: b = !1,
     before: _,
     after: u
-  } = n, { prefix: s, suffix: c, ...x } = t, a = d.map(O).find((v) => v.value === h), i = !!a ? a : { label: l || "" };
-  return /* @__PURE__ */ e(C, { ...x, children: /* @__PURE__ */ r(g, { ...n, prefix: s, suffix: c, children: [
+  } = 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: [
     _,
     /* @__PURE__ */ r("div", { className: "component-select-control__btn", children: [
-      /* @__PURE__ */ e(p, { children: s }),
-      /* @__PURE__ */ e(B, { fallback: l, children: () => /* @__PURE__ */ e(S, { children: /* @__PURE__ */ r("span", { className: "component-select-control__btn__value__label", children: [
-        b && i.icon,
-        i.label
+      /* @__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, { suffix: !0, children: c })
+      /* @__PURE__ */ o(p, { suffix: !0, children: c })
     ] }),
-    /* @__PURE__ */ e(
-      N.Icon,
+    /* @__PURE__ */ o(
+      v.Icon,
       {
         className: "component-select-control__btn__caret",
         variant: "ghost",
         size: "small",
         tabIndex: -1,
-        children: /* @__PURE__ */ e(f, {})
+        children: /* @__PURE__ */ o(f, {})
       }
     ),
     u
   ] }) });
 }
 export {
-  H as SelectControl
+  G as SelectControl
 };

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

@@ -1,11 +1,11 @@
-import { Optionable } from '../../../types/options';
+import { Optionable, OptionableGroup } from '../../../types/options';
 import { HTMLInputAutoCompleteAttribute, ReactNode } from 'react';
 export type SelectProps<T extends string = string> = {
     className?: string;
     id?: string;
     value?: T;
     onChangeValue?: (value: T) => void;
-    options?: Optionable<T>[];
+    options?: (Optionable<T> | OptionableGroup<T>)[];
     searchable?: boolean;
     combobox?: boolean;
     placeholder?: string;

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

@@ -1,8 +1,8 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { cn as L } from "../../../utils/css.js";
+import { jsx as s, jsxs as r } from "react/jsx-runtime";
+import { cn as x } from "../../../utils/css.js";
 import '../../../assets/style16.css';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';/* empty css                      */
-import { noop as g } from "../../../utils/noop.js";
-import { useState as _, useMemo as j, startTransition as y } from "react";
+import { noop as j } from "../../../utils/noop.js";
+import { useState as h, useMemo as y, startTransition as g } from "react";
 /* empty css                      */
 /* empty css                      */
 /* empty css                      */
@@ -14,68 +14,69 @@ import "../../../primitives/symbol/index.js";
 /* empty css                      */
 /* empty css                      */
 /* empty css                       */
-import { normalizeOption as z } from "../../../types/options.js";
-import { s as A } from "../../../MagnifyingGlass.es-CLstwG_v.js";
-import { m as H } from "../../../match-sorter.esm-MNVE8H_6.js";
+import { normalizeOptions as z, findOption as A } from "../../../types/options.js";
+import { s as H } from "../../../MagnifyingGlass.es-CLstwG_v.js";
+import { m as M } from "../../../match-sorter.esm-MNVE8H_6.js";
 /* empty css                      */
-import { C as M, a as h, b as T } from "../../../MAXQOH4L-BYWBWXpb.js";
-import { S as $, a as q, b as B, c as D, d as E } from "../../../select-popover-Dheunyb0.js";
-import { C as F } from "../../../combobox-popover-BZ_1wNrj.js";
-import { C as f } from "../../../JMHAJKUZ-D5KCN1Aj.js";
-const Se = ({
-  className: u,
-  value: s,
-  onChangeValue: p = g,
-  options: v,
-  searchable: i = !1,
-  combobox: o = !1,
-  placeholder: S = "Choose an option...",
-  prefix: G,
-  suffix: J,
-  children: N,
-  withIcon: K,
-  ...C
+import { C as T, a as f, b as $ } from "../../../MAXQOH4L-BYWBWXpb.js";
+import { S as q, a as B, b as D, c as E, d as F, e as J, f as K } from "../../../select-popover-CGgkyRb4.js";
+import { C as Q } from "../../../combobox-popover-BZ_1wNrj.js";
+import { C as R, a as U } from "../../../combobox-group-hNvv1WJm.js";
+import { C as u } from "../../../JMHAJKUZ-D5KCN1Aj.js";
+const be = ({
+  className: v,
+  value: i,
+  onChangeValue: a = j,
+  options: S = [],
+  searchable: l = !1,
+  combobox: e = !1,
+  placeholder: N = "Choose an option...",
+  prefix: W,
+  suffix: X,
+  children: C,
+  withIcon: Y,
+  ...O
 }) => {
-  o && (i = !0);
-  const [n, a] = _(!1), [c, P] = _(""), l = (v || []).map(z), m = j(() => H(l, c, {
-    baseSort: (e, x) => e.index < x.index ? -1 : 1,
+  e && (l = !0);
+  const [n, p] = h(!1), [c, P] = h(""), m = z(S), _ = y(() => M(m, c, {
+    baseSort: (o, t) => o.index < t.index ? -1 : 1,
     keys: ["label", "description"]
-  }), [c]), O = i || o ? T : D, w = o ? f : E, I = o ? h : q, V = o ? F : B, d = !!!l.find((e) => e.value === s);
-  return /* @__PURE__ */ t(
-    M,
+  }), [c]), L = l || e ? $ : E, w = e ? u : K, G = e ? f : B, b = e ? Q : D, I = e ? R : F, V = e ? U : J, d = !!!A(m, i);
+  return /* @__PURE__ */ s(
+    T,
     {
-      resetValueOnHide: !o,
+      resetValueOnHide: !e,
       open: n,
-      setOpen: a,
-      value: o ? s : c,
-      setValue: (e) => {
-        o && p(e), y(() => {
-          P(e);
+      setOpen: p,
+      value: e ? i : c,
+      setValue: (o) => {
+        e && a(o), g(() => {
+          P(o);
         });
       },
       children: /* @__PURE__ */ r(
-        $,
+        q,
         {
-          value: d ? "" : s,
-          setValue: p,
+          value: d ? "" : i,
+          setValue: a,
           open: n,
-          setOpen: a,
+          setOpen: p,
           children: [
-            /* @__PURE__ */ t(
-              I,
+            /* @__PURE__ */ s(
+              G,
               {
-                className: L(
-                  u,
+                className: x(
+                  v,
                   "component-select__input",
                   d && "component-select__input--placeholder"
                 ),
-                children: o ? void 0 : N,
-                placeholder: S,
-                ...C
+                children: e ? void 0 : C,
+                placeholder: N,
+                ...O
               }
             ),
-            n && m.length > 0 && /* @__PURE__ */ t(
-              V,
+            n && _.length > 0 && /* @__PURE__ */ s(
+              b,
               {
                 className: "component-select__popover",
                 "data-colour-scheme": "invert",
@@ -87,10 +88,10 @@ const Se = ({
                 overflowPadding: 4,
                 shift: -1,
                 children: /* @__PURE__ */ r(k, { className: "component-select__popover__scroll", axis: "y", children: [
-                  i && !o && /* @__PURE__ */ r("div", { className: "component-select__popover__search-wrapper", children: [
-                    /* @__PURE__ */ t(A, { className: "component-select__popover__search-icon" }),
-                    /* @__PURE__ */ t(
-                      h,
+                  l && !e && /* @__PURE__ */ r("div", { className: "component-select__popover__search-wrapper", children: [
+                    /* @__PURE__ */ s(H, { className: "component-select__popover__search-icon" }),
+                    /* @__PURE__ */ s(
+                      f,
                       {
                         autoSelect: !0,
                         placeholder: "Search...",
@@ -98,22 +99,32 @@ const Se = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ t(O, { className: "component-select__list", children: m.map((e) => /* @__PURE__ */ r(
-                    w,
+                  /* @__PURE__ */ s(L, { className: "component-select__list", children: _.map((o) => /* @__PURE__ */ r(
+                    I,
                     {
-                      disabled: e.disabled,
-                      value: e.value,
-                      className: "component-select__option",
-                      render: /* @__PURE__ */ t(f, {}),
+                      className: "component-select__list__group",
                       children: [
-                        /* @__PURE__ */ r("div", { className: "component-select__option__label", children: [
-                          e.icon,
-                          e.label
-                        ] }),
-                        e.description && /* @__PURE__ */ t("div", { className: "component-select__option__description", children: e.description })
+                        o.label && /* @__PURE__ */ s(V, { className: "component-select__list__group__label", children: o.label }),
+                        o.items.map((t) => /* @__PURE__ */ r(
+                          w,
+                          {
+                            disabled: t.disabled,
+                            value: t.value,
+                            className: "component-select__option",
+                            render: /* @__PURE__ */ s(u, {}),
+                            children: [
+                              /* @__PURE__ */ r("div", { className: "component-select__option__label", children: [
+                                t.icon,
+                                t.label
+                              ] }),
+                              t.description && /* @__PURE__ */ s("div", { className: "component-select__option__description", children: t.description })
+                            ]
+                          },
+                          t.value
+                        ))
                       ]
                     },
-                    e.value
+                    o.label
                   )) })
                 ] })
               }
@@ -125,5 +136,5 @@ const Se = ({
   );
 };
 export {
-  Se as Select
+  be as Select
 };