@vuu-ui/vuu-layout 0.0.27 → 0.5.5

package/index.css

@@ -0,0 +1,2 @@
+.vuuDrawer{--drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);--vuu-close-icon-svg: var(--svg-chevron-double-right);transition:flex-basis;transition-duration:var(--drawer-transition-duration);position:relative;z-index:1;flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0;min-height:0;display:flex}.vuuDrawer-peekaboo{flex-basis:var(--drawer-peek-size);flex-grow:0;flex-shrink:0}.vuuDrawer-inline.vuuDrawer-open{flex-basis:var(--drawer-size);flex-grow:0;flex-shrink:0}.vuuDrawer-liner{background-color:var(--drawer-bg);overflow:hidden;position:relative}.vuuDrawer-content{height:100%;overflow:hidden;position:absolute;top:0;right:var(--drawer-peek-size);transition:right;transition-duration:var(--drawer-transition-duration);width:100%;flex:1 1 100%}.vuuDrawer-open .vuuDrawer-content{right:0}.vuuDrawer-left{border-right:var(--drawer-leading-edge-border)}.vuuDrawer-right{border-left:var(--drawer-leading-edge-border)}.vuuDrawer-top{border-bottom:var(--drawer-leading-edge-border)}.vuuDrawer-bottom{border-top:var(--drawer-leading-edge-border)}.vuuDrawer-left .vuuDrawer-liner,.vuuDrawer-right .vuuDrawer-liner{height:100%;transition:width}.vuuDrawer-top .vuuDrawer-liner,.vuuDrawer-bottom .vuuDrawer-liner{width:100%;transition:height}.vuuDrawer-inline .vuuDrawer-liner{width:100%;height:100%}.vuuDrawer-over .vuuDrawer-liner{position:absolute;transition-duration:.4s}.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner{top:0;left:0;width:0}.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner{top:0;right:0;width:0}.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner{height:0;top:0;left:0}.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner{bottom:0;height:0;left:0}.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner{width:var(--drawer-peek-size)}.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner{height:var(--drawer-peek-size)}.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner{width:var(--drawer-size)}.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner{height:var(--drawer-size)}.vuuDrawer-top,.vuuDrawer-left{order:0}.vuuDrawer-bottom,.vuuDrawer-right{order:99}.vuuDrawer-left,.vuuDrawer-right{flex-direction:column}.vuuToggleButton-container{--saltButton-height: 28px;--saltButton-width: 28px;--vuu-icon-size: 12px;flex:0 0 28px}.vuuDrawer-open{--vuu-close-icon-svg: var(--svg-chevron-double-left)}.hwChest{--chest-bg: var(--hw-chest-bg, inherit);--drawer-bg: var(--hw-drawer-bg, inherit);--drawer-size: var(--hw-drawer-size, 200px);--drawer-peek-size: var(--hw-drawer-peek-size, 32px);--drawer-transition-duration: var(--hw-drawer-transition-duration, .4s);background-color:var(--chest-bg);display:flex}.hwChest-horizontal{flex-direction:row}.hwChest-vertical{flex-direction:column}.hwChest-content{background-color:var(--chest-bg);flex-grow:1;flex-shrink:1;overflow:hidden;display:flex;align-items:center;justify-content:center}.hwChest-horizontal .hwChest-content,.hwChest-vertical .hwChest-content{flex-basis:100%}.Splitter{--splitter-size: 3px;--splitter-border-width: 4px;--splitter-border-style: none;--splitter-border-color: white;align-items:center;background-color:var(--grey60);border-color:var(--splitter-border-color);border-style:var(--splitter-border-style);box-sizing:border-box;display:flex;justify-content:center;position:relative;outline:none;z-index:1}.Splitter:hover{background-color:var(--grey40)}.active.Splitter{background-color:var(--blue500)}.Splitter.column{cursor:ns-resize;height:var(--splitter-size);border-width:var(--splitter-border-width) 0}.Splitter:not(.column){cursor:ew-resize;width:var(--splitter-size);border-width:0 var(--splitter-border-width)}.Splitter:before{border:none;border-radius:0;content:"";display:block;padding:0}.Splitter .grab-zone{position:absolute;background-color:#ff000003;cursor:inherit}.Splitter.column .grab-zone{left:0;right:0;top:-5px;bottom:-5px}.Splitter:not(column) .grab-zone{left:-5px;right:-5px;top:0;bottom:0}.Splitter:not(.column):before{width:1px;height:10px;background:linear-gradient(to bottom,var(--grey900) 10%,transparent 10%,transparent 30%,var(--grey900) 30%,var(--grey900) 40%,transparent 40%,transparent 60%,var(--grey900) 60%,var(--grey900) 70%,transparent 70%,transparent 90%,var(--grey900) 90%)}.active.Splitter.column:before{background:linear-gradient(to right,#ffffff 10%,transparent 10%,transparent 30%,#ffffff 30%,#ffffff 40%,transparent 40%,transparent 60%,#ffffff 60%,#ffffff 70%,transparent 70%,transparent 90%,#ffffff 90%)}.active.Splitter:not(.column):before{background:linear-gradient(to bottom,#ffffff 10%,transparent 10%,transparent 30%,#ffffff 30%,#ffffff 40%,transparent 40%,transparent 60%,#ffffff 60%,#ffffff 70%,transparent 70%,transparent 90%,#ffffff 90%)}.Splitter.column:before{width:10px;height:1px;background:linear-gradient(to right,var(--grey900) 10%,transparent 10%,transparent 30%,var(--grey900) 30%,var(--grey900) 40%,transparent 40%,transparent 60%,var(--grey900) 60%,var(--grey900) 70%,transparent 70%,transparent 90%,var(--grey900) 90%)}.vuuPlaceholder{flex-basis:0;flex-grow:1;flex-shrink:1}.vuuPlaceholder-shim{flex-grow:0;flex-shrink:0}:root{--hw-space-unit: 4px;--hw-flex-gap: 3;--hw-fluid-grid-col-bg: rgba(200, 200, 200, .3)}.hwFlexbox{background-color:var(--container1-background);box-sizing:border-box;display:flex;gap:calc(var(--spacing) * var(--space));min-height:0;min-width:0;overflow:hidden}.hwFlexbox-column{flex-direction:column}.hwFlexbox-row{flex-direction:row}.hwFlexbox>.Splitter{flex-basis:auto;flex-grow:0;flex-shrink:0}.hwFlexbox.full-page{height:100vh;width:100vw}.flex-fill{border-color:red;flex:0;flex-grow:1;flex-shrink:1}.vuuView.flex-fill{border-color:red}.vuuPopup{box-shadow:0 6px 12px #0000002d;position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:1000}.vuuPopup{position:absolute}.vuuDropMenu{margin-left:-50%;margin-bottom:-50%;background-color:#fff;border:solid 1px var(--grey40);display:inline-flex;justify-content:center;align-items:center;padding:3px;border-radius:3px}.vuuDropMenu-left,.vuuDropMenu-right{flex-direction:column}.vuuDropMenu-bottom{transform:translateY(-30px)}.vuuDropMenu-right{transform:translate(-20px)}.vuuDropMenu-item{--vuu-icon-size: 20px;width:32px;height:32px;background-color:var(--grey20);border-bottom:solid 1px var(--grey40);cursor:pointer;display:flex;align-items:center;justify-content:center}.vuuDropMenu-item .Icon{transform:scale(1.25);transform-origin:center center}.vuuDropMenu-left .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(180deg);transform-origin:center center}.vuuDropMenu-top .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(270deg);transform-origin:center center}.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(90deg);transform-origin:center center}.vuuDropMenu-item .hwIcon-path{fill:gray}.vuuDropMenu-item:hover{background-color:#c8c8c880}.vuuDropMenu-item:hover .hwIcon-path-2{fill:#00f}.vuuDropMenu-item:last-child{border-bottom:none}#hw-drag-canvas{visibility:hidden;z-index:1;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent}#hw-drag-canvas>svg{position:absolute}.drawing #hw-drag-canvas{visibility:visible}path.drop-target{stroke:#00f;stroke-width:4px;fill:transparent}path.drop-target.centre{stroke:red}#vuu-drop-outline{fill:#0000ff4d;stroke:none;stroke-dasharray:4 2}#hw-drop-guides{fill:none;stroke:#0000004d;stroke-dasharray:2 3}:root{--hw-space-unit: 4px;--hw-fluid-grid-col-bg: rgba(252, 209, 232, .7)}.hwFluidGrid{--gap: var(--gutter-width);display:flex;gap:calc(var(--grid-gap) * var(--hw-space-unit));flex-wrap:wrap;padding:0}.hwFluidGrid>*{--gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));--gutter-count: calc(var(--parent-col-count) - 1);--total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));--available-width: calc(100% - var(--total-gutter-width));flex-basis:0;flex-grow:1;flex-shrink:1;position:relative}.hwFluidGrid>*:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:dashed 2px blue}.hwFluidGrid>[data-xs]{--internal-gutter-count: calc(var(--col-span) - 1);--percent-width: calc(var(--col-span) / var(--parent-col-count));--internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));flex-basis:calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));flex-grow:0}.hwFluidGrid>[data-xs="1"]{--col-span: 1}.hwFluidGrid>[data-xs="2"]{--col-span: 2}.hwFluidGrid>[data-xs="3"]{--col-span: 3}.hwFluidGrid>[data-xs="4"]{--col-span: 4}.hwFluidGrid>[data-xs="6"]{--col-span: 6}.hwFluidGrid>[data-xs="8"]{--col-span: 8}.hwFluidGrid>[data-xs="9"]{--col-span: 9}.hwFluidGrid>[data-xs="10"]{--col-span: 10}.hwFluidGrid>[data-xs="11"]{--col-span: 11}.hwFluidGrid>[data-xs="12"]{--col-span: 12}@media (min-width: 600px){.hwFluidGrid>[data-sm="1"]{--col-span: 1}.hwFluidGrid>[data-sm="2"]{--col-span: 2}.hwFluidGrid>[data-sm="3"]{--col-span: 3}.hwFluidGrid>[data-sm="4"]{--col-span: 4}.hwFluidGrid>[data-sm="6"]{--col-span: 6}.hwFluidGrid>[data-sm="8"]{--col-span: 8}.hwFluidGrid>[data-sm="9"]{--col-span: 9}.hwFluidGrid>[data-sm="10"]{--col-span: 10}.hwFluidGrid>[data-sm="11"]{--col-span: 11}.hwFluidGrid>[data-sm="12"]{--col-span: 12}}.hwFluidGrid-show-grid{--gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));--grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);--grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));--grid-available-width: calc(100% - var(--grid-total-gutter-width));--grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));--column-width: calc(var(--grid-available-width) * var(--grid-percent-width));background:repeating-linear-gradient(to right,var(--hw-fluid-grid-col-bg) 0,var(--hw-fluid-grid-col-bg) var(--column-width),white var(--column-width),white calc(var(--column-width) + var(--gutter-width)))}.vuuHeader{--saltToolbar-background: var(--salt-container-tertiary-background)}.salt-density-high .vuuHeader{--saltToolbarField-marginTop: 0}.vuuView{border-color:var(--vuuView-borderColor, var(--salt-container-primary-borderColor));border-width:var(--vuuView-borderWidth, 1px);border-style:var(--vuuView-borderStyle, none);display:flex;flex-direction:column;margin:var(--vuuView-margin, 0px);min-height:50px;min-width:50px;outline:none;overflow:hidden;position:relative}.vuuView.focus-visible:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:dotted cornflowerblue 2px}.vuuView.dragging{box-shadow:0 6px 12px #0000002d}.vuuView-main{display:flex;flex-direction:var(--vuuView-flexDirection, column);flex-wrap:var(--vuuView-flex-wrap, nowrap);flex:1;overflow:hidden;position:relative}.vuuView-main>*{flex-basis:auto;flex-grow:var(--vuuView-flex-grow, 1);flex-shrink:var(--vuuView-flex-shrink, 1)}.vuuView-collapsed .vuuView-main{display:none}.vuuView-collapsed+.Splitter{display:none}.vuuView-collapsed .Toolbar-vertical{border-right:solid 1px var(--grey40)}.vuuView-collapsed .Toolbar-vertical .toolbar-title{display:none}.vuuDialog{--dialog-border: var(--hw-dialog-border, solid 1px #ccc);--dialog-padding: var(--hw-dialog-padding, 0);--dialog-shadow: var(--hw-dialog-shadow, none);--vuuView-margin: 0;--vuuView-flex-wrap: none;border:var(--dialog-border);padding:var(--dialog-padding);box-shadow:var(--dialog-shadow);height:var(--vuuDialog-height, fit-content);width:var(--vuuDialog-width, fit-content)}.hwMenuList{--context-menu-color: #161616;--context-menu-padding: var(--hw-list-item-padding, 0 6px);--context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, .175));--focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));--context-menu-highlight-bg: #a4d5f4;--context-menu-blur-focus-bg: #e0e4e9;--menu-item-height: var(--hw-list-item-height, 24px);--menu-item-icon-color: black;--menu-item-twisty-color: black;--menu-item-twisty-content: "";--menu-item-twisty-top: 50%;--menu-item-twisty-left: auto;--menu-item-twisty-right: 0px;--menu-icon-size: 12px;background-clip:padding-box;background-color:#fff;border-radius:4px;border:solid 1px rgba(0,0,0,.15);box-shadow:var(--context-menu-shadow);font-size:13px;list-style:none;margin:2px 0 0;outline:0;padding:0;position:absolute}.hwMenuItem{align-items:center;color:var(--context-menu-color);display:flex;gap:6px;height:var(--menu-item-height);padding:var(--context-menu-padding);padding-right:24px;position:relative;white-space:nowrap}.hwIconContainer{display:inline-block;flex:12px 0 0;height:var(--menu-icon-size);mask-repeat:no-repeat;width:var(--menu-icon-size)}[data-icon=filter]{--menu-icon-size: 12px;--menu-icon: var(--svg-filter)}[data-icon=filter]{--menu-icon: var(--svg-filter)}[data-icon=sort]{--menu-icon: var(--svg-sort-order-down)}[data-icon=sorted-asc]{--menu-icon: var(--svg-sorted-asc)}[data-icon=sorted-dsc]{--menu-icon: var(--svg-sorted-dsc)}[data-icon]>.hwIconContainer{background-color:var(--menu-item-icon-color);-webkit-mask:var(--menu-icon) center center/var(--menu-icon-size) var(--menu-icon-size);mask:var(--menu-icon) center center/var(--menu-icon-size) var(--menu-icon-size)}.hwMenuItem[aria-expanded=true]{background-color:var(--context-menu-blur-focus-bg)}.hwMenuItem-separator{border-top:solid 1px var(--context-menu-blur-focus-bg)}.hwMenuItem[aria-haspopup=true]:after{content:var(--menu-item-twisty-content);-webkit-mask:var(--svg-chevron-right) center center/12px 12px;mask:var(--svg-chevron-down) center center/12px 12px;mask-repeat:no-repeat;background-color:var(--menu-item-twisty-color);height:16px;left:var(--menu-item-twisty-left);right:var(--menu-item-twisty-right);margin-top:-8px;position:absolute;top:var(--menu-item-twisty-top);transition:transform .3s;width:16px}.hwMenuItem[data-highlighted]{background-color:var(--context-menu-highlight-bg)}.hwMenuItem:hover{background-color:var(--context-menu-highlight-bg);cursor:default}.hwMenuList-childMenuShowing .hwMenuItem[data-highlighted]{background-color:var(--context-menu-blur-focus-bg)}.hwMenuItem.focusVisible:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0px;border:dotted var(--focus-visible-border-color) 2px}.hwMenuItem-button:active,.hwMenuItem-button:hover{outline:0}.hwPopupContainer.top-bottom-right-right .popup-menu{left:auto;right:0}.popup-menu .menu-item.showing>button,.popup-menu .menu-item>button:focus,.popup-menu .menu-item>button:hover{text-decoration:none;color:#000;background-color:#dcdcdc}.popup-menu .menu-item.disabled>button{clear:both;font-weight:400;line-height:1.5;color:#787878;white-space:nowrap;text-decoration:none;cursor:default}.DraggableLayout{display:inline-block;outline:none}[data-dragging=true]{position:absolute!important;z-index:100}.vuuSimpleDraggableWrapper{background-color:#fff;box-shadow:0 6px 10px #0003}.vuuSimpleDraggableWrapper>*{height:100%;width:100%}.vuuPalette-horizontal{align-items:center;display:flex}.vuuPaletteItem{--vuu-icon-color: var(--salt-separable-primary-background);--vuu-icon-inset:calc(50% - 12px) auto auto -3px;--vuu-icon-svg: var(--svg-grab-handle);--vuu-icon-height: 24px;--vuu-icon-width: 24px;padding-left:20px}.vuuPaletteItem[data-icon]:after{--height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));--width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));content:"";background-color:var(--vuu-icon-color, black);height:var(--height);inset:var(--vuu-icon-inset,0 auto 0 0);mask:var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;-webkit-mask:var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;position:absolute;width:var(--width)}.vuuSimpleDraggableWrapper>.vuuPaletteItem{--vuu-icon-color: var(--salt-selectable-foreground)}.vuuPalette{--list-item-header-bg: inherit;--list-item-header-color: inherit;--list-item-padding: 0 6px 0 24px;--list-item-header-twisty-color: black;--list-item-header-twisty-left: 3px;--list-item-header-twisty-right: auto}.Tabs{display:flex;box-sizing:border-box;flex-direction:column}.Tabs .Toolbar:before{left:0;width:100%;bottom:0;height:1px;content:"";position:absolute;background:var(--grey60)}.vuuTabHeader{--saltTabs-activationIndicator-background: transparent;--saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);border-bottom:solid 1px var(--salt-container-primary-borderColor)}.vuuTabHeader+.hwFlexbox,.vuuTabHeader+*{flex:1}.vuuTabHeader+.vuuView>.vuuHeader{height:0;overflow:hidden}.Layout-svg-button{--spacing-medium: 5px}[data-design-mode=true] .Component{filter:grayscale(100%);opacity:.4}[data-design-mode=true] .Component:after{color:#000;content:"Component";height:12px;background-color:#ff0}.LayoutConfigurator{--margin-color: #f3cea5;--border-color: #fddda0;--padding-color: #c6d092;--content-color: #8cb6c0;display:flex;flex-direction:column;align-items:stretch;background-color:var(--margin-color)}.LayoutConfigurator .layout-outer{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch}.LayoutBox{--hw-control-font-size: 13px;--hw-text-input-bg: rgba(255, 255, 255, .3);--hwTextInput-padding: 3px;--hw-text-input-position: absolute;--hwTextInput-width: 30px;flex:1 1 auto}.LayoutBox>.layout-top{flex:0 0 40px;padding-left:12px;display:flex;flex-direction:row;align-items:center;position:relative}.LayoutBox>.layout-bottom{flex:0 0 40px;position:relative;display:flex;flex-direction:row;align-items:center}.LayoutBox>.layout-inner>.layout-right,.LayoutBox>.layout-inner>.layout-left{flex:0 0 40px;display:flex;flex-direction:column;justify-content:center;align-items:center}.layout-top,.layout-bottom{--hw-text-input-margin: 0 0 0 -15px}.layout-top>.layout-input,.layout-bottom>.layout-input{left:50%}.LayoutBox>.layout-inner{flex:1 1 auto;display:flex;flex-direction:row;align-items:stretch}.LayoutBox.layout-margin{background-color:var(--margin-color);border:dashed 2px black}.LayoutBox.layout-border{background-color:var(--border-color);border:solid 2px black}.LayoutBox.layout-padding{background-color:var(--padding-color);border:dashed 2px black}.LayoutBox .layout-content{flex:1 1 auto;background-color:var(--content-color);border:solid 2px #808080}.LayoutBox .layout-title{color:#161616;font-size:11px;left:4px;line-height:15px;position:absolute;top:1px}.hwLayoutTreeNode{cursor:default}.hwLayoutTreeNode:hover{background-color:#fff3}.hwLayoutTreeNode[aria-selected=true]{background-color:#6495ed;color:#fff}
+/*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/vuu-layout/src/chest-of-drawers/Drawer.css", "../../../packages/vuu-layout/src/chest-of-drawers/Chest.css", "../../../packages/vuu-layout/src/flexbox/Splitter.css", "../../../packages/vuu-layout/src/placeholder/Placeholder.css", "../../../packages/vuu-layout/src/flexbox/Flexbox.css", "../../../packages/vuu-layout/src/popup/popup-service.css", "../../../packages/vuu-layout/src/drag-drop/DropMenu.css", "../../../packages/vuu-layout/src/drag-drop/DropTargetRenderer.css", "../../../packages/vuu-layout/src/flexbox/FluidGrid.css", "../../../packages/vuu-layout/src/layout-header/Header.css", "../../../packages/vuu-layout/src/layout-view/View.css", "../../../packages/vuu-layout/src/dialog/Dialog.css", "../../../packages/vuu-layout/src/menu/MenuList.css", "../../../packages/vuu-layout/src/menu/ContextMenu.css", "../../../packages/vuu-layout/src/DraggableLayout.css", "../../../packages/vuu-layout/src/palette/Palette.css", "../../../packages/vuu-layout/src/palette/PaletteSalt.css", "../../../packages/vuu-layout/src/stack/Stack.css", "../../../packages/vuu-layout/src/tools/devtools-box/layout-configurator.css", "../../../packages/vuu-layout/src/tools/devtools-tree/layout-tree-viewer.css"],
+  "sourcesContent": [".vuuDrawer {\n  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);\n  --vuu-close-icon-svg: var(--svg-chevron-double-right);\n\n  transition: flex-basis;\n  transition-duration: var(--drawer-transition-duration);\n  position: relative;\n  z-index: 1;\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n\n.vuuDrawer-peekaboo {\n  flex-basis: var(--drawer-peek-size);\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.vuuDrawer-inline.vuuDrawer-open {\n  flex-basis: var(--drawer-size);\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.vuuDrawer-liner {\n  background-color: var(--drawer-bg);\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuDrawer-content {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  right: var(--drawer-peek-size);\n  transition: right;\n  transition-duration: var(--drawer-transition-duration);\n  width: 100%;\n  flex: 1 1 100%;\n}\n\n.vuuDrawer-open .vuuDrawer-content {\n  right: 0;\n}\n\n/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {\n  display: none;\n} */\n\n.vuuDrawer-left {\n  border-right: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-right {\n  border-left: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-top {\n  border-bottom: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-bottom {\n  border-top: var(--drawer-leading-edge-border);\n}\n\n.vuuDrawer-left .vuuDrawer-liner,\n.vuuDrawer-right .vuuDrawer-liner {\n  height: 100%;\n  transition: width;\n}\n\n.vuuDrawer-top .vuuDrawer-liner,\n.vuuDrawer-bottom .vuuDrawer-liner {\n  width: 100%;\n  transition: height;\n}\n\n.vuuDrawer-inline .vuuDrawer-liner {\n  width: 100%;\n  height: 100%;\n}\n\n.vuuDrawer-over .vuuDrawer-liner {\n  position: absolute;\n  transition-duration: 0.4s;\n}\n\n.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {\n  top: 0;\n  left: 0;\n  width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {\n  top: 0;\n  right: 0;\n  width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {\n  height: 0;\n  top: 0;\n  left: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {\n  bottom: 0;\n  height: 0;\n  left: 0;\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n  width: var(--drawer-peek-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n  height: var(--drawer-peek-size);\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n  width: var(--drawer-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n  height: var(--drawer-size);\n}\n\n.vuuDrawer-top,\n.vuuDrawer-left {\n  order: 0;\n}\n\n.vuuDrawer-bottom,\n.vuuDrawer-right {\n  order: 99;\n}\n\n.vuuDrawer-left,\n.vuuDrawer-right {\n  flex-direction: column;\n}\n\n.vuuToggleButton-container {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n  --vuu-icon-size: 12px;\n  flex: 0 0 28px;\n}\n\n.vuuDrawer-open {\n  --vuu-close-icon-svg: var(--svg-chevron-double-left);\n\n}\n", ".hwChest {\n  --chest-bg: var(--hw-chest-bg, inherit);\n  --drawer-bg: var(--hw-drawer-bg, inherit);\n  --drawer-size: var(--hw-drawer-size, 200px);\n  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);\n  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);\n  background-color: var(--chest-bg);\n  display: flex;\n}\n\n.hwChest-horizontal {\n  flex-direction: row;\n}\n\n.hwChest-vertical {\n  flex-direction: column;\n}\n\n.hwChest-content {\n  background-color: var(--chest-bg);\n  flex-grow: 1;\n  flex-shrink: 1;\n  overflow: hidden;\n  /* position: relative; */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.hwChest-horizontal .hwChest-content {\n  flex-basis: 100%;\n}\n\n.hwChest-vertical .hwChest-content {\n  flex-basis: 100%;\n}\n", ".Splitter {\n  --splitter-size: 3px;\n  --splitter-border-width: 4px;\n  --splitter-border-style: none;\n  --splitter-border-color: white;\n\n  align-items: center;\n  background-color: var(--grey60);\n  border-color: var(--splitter-border-color);\n  border-style: var(--splitter-border-style);\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  outline: none;\n  z-index: 1;\n}\n\n.Splitter:hover {\n  background-color: var(--grey40);\n}\n.active.Splitter {\n  background-color: var(--blue500);\n}\n\n.Splitter.column {\n  cursor: ns-resize;\n  height: var(--splitter-size);\n  border-width: var(--splitter-border-width) 0;\n}\n\n.Splitter:not(.column) {\n  cursor: ew-resize;\n  width: var(--splitter-size);\n  border-width: 0 var(--splitter-border-width);\n}\n\n.Splitter:before {\n  border: none;\n  border-radius: 0;\n  content: '';\n  display: block;\n  padding: 0;\n}\n\n.Splitter .grab-zone {\n  position: absolute;\n  background-color: rgba(255, 0, 0, 0.01);\n  cursor: inherit;\n}\n\n.Splitter.column .grab-zone {\n  left: 0;\n  right: 0;\n  top: -5px;\n  bottom: -5px;\n}\n\n.Splitter:not(column) .grab-zone {\n  left: -5px;\n  right: -5px;\n  top: 0;\n  bottom: 0;\n}\n\n.Splitter:not(.column):before {\n  width: 1px;\n  height: 10px;\n  background: linear-gradient(\n    to bottom,\n    var(--grey900) 10%,\n    transparent 10%,\n    transparent 30%,\n    var(--grey900) 30%,\n    var(--grey900) 40%,\n    transparent 40%,\n    transparent 60%,\n    var(--grey900) 60%,\n    var(--grey900) 70%,\n    transparent 70%,\n    transparent 90%,\n    var(--grey900) 90%\n  );\n}\n\n.active.Splitter.column:before {\n  background: linear-gradient(\n    to right,\n    #ffffff 10%,\n    transparent 10%,\n    transparent 30%,\n    #ffffff 30%,\n    #ffffff 40%,\n    transparent 40%,\n    transparent 60%,\n    #ffffff 60%,\n    #ffffff 70%,\n    transparent 70%,\n    transparent 90%,\n    #ffffff 90%\n  );\n}\n\n.active.Splitter:not(.column):before {\n  background: linear-gradient(\n    to bottom,\n    #ffffff 10%,\n    transparent 10%,\n    transparent 30%,\n    #ffffff 30%,\n    #ffffff 40%,\n    transparent 40%,\n    transparent 60%,\n    #ffffff 60%,\n    #ffffff 70%,\n    transparent 70%,\n    transparent 90%,\n    #ffffff 90%\n  );\n}\n\n.Splitter.column:before {\n  width: 10px;\n  height: 1px;\n  background: linear-gradient(\n    to right,\n    var(--grey900) 10%,\n    transparent 10%,\n    transparent 30%,\n    var(--grey900) 30%,\n    var(--grey900) 40%,\n    transparent 40%,\n    transparent 60%,\n    var(--grey900) 60%,\n    var(--grey900) 70%,\n    transparent 70%,\n    transparent 90%,\n    var(--grey900) 90%\n  );\n}\n", ".vuuPlaceholder {\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n}\n\n.vuuPlaceholder-shim {\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n", ":root {\n  --hw-space-unit: 4px;\n  --hw-flex-gap: 3;\n  --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);\n}\n\n.hwFlexbox {\n  background-color: var(--container1-background);\n  box-sizing: border-box;\n  display: flex;\n  gap: calc(var(--spacing) * var(--space));\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.hwFlexbox-column {\n  flex-direction: column;\n}\n\n.hwFlexbox-row {\n  flex-direction: row;\n}\n\n.hwFlexbox > .Splitter {\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.hwFlexbox.full-page {\n  height: 100vh;\n  width: 100vw;\n}\n\n.flex-fill {\n  border-color: red;\n  flex: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n}\n\n.vuuView.flex-fill {\n  border-color: red;\n}\n", ".vuuPopup {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.vuuPopup {\n  position: absolute;\n}\n", ".vuuDropMenu {\n  margin-left: -50%;\n  margin-bottom: -50%;\n  background-color: white;\n  border: solid 1px var(--grey40);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 3px;\n  border-radius: 3px;\n}\n\n.vuuDropMenu-left,\n.vuuDropMenu-right {\n  flex-direction: column;\n}\n\n.vuuDropMenu-bottom {\n  transform: translate(0, -30px);\n}\n\n.vuuDropMenu-right {\n  transform: translate(-20px, 0);\n}\n\n.vuuDropMenu-item {\n  --vuu-icon-size: 20px;\n  width: 32px;\n  height: 32px;\n  background-color: var(--grey20);\n  border-bottom: solid 1px var(--grey40);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vuuDropMenu-item .Icon {\n  transform: scale(1.25);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-left .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(180deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-top .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(270deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(90deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-item .hwIcon-path {\n  fill: grey;\n}\n.vuuDropMenu-item:hover {\n  background-color: rgba(200, 200, 200, 0.5);\n}\n\n.vuuDropMenu-item:hover .hwIcon-path-2 {\n  fill: blue;\n}\n\n.vuuDropMenu-item:last-child {\n  border-bottom: none;\n}\n", "#hw-drag-canvas {\n  visibility: hidden;\n  z-index: 1;\n  position: absolute;\n  top: 0px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: transparent;\n}\n\n#hw-drag-canvas > svg {\n  position: absolute;\n}\n\n.drawing #hw-drag-canvas {\n  visibility: visible;\n}\n\npath.drop-target {\n  stroke: blue;\n  stroke-width: 4px;\n  fill: transparent;\n}\n\npath.drop-target.centre {\n  stroke: red;\n}\n\n#vuu-drop-outline {\n  fill: rgba(0,0,255,.3);\n  stroke: none;\n  stroke-dasharray: 4 2;\n}\n\n#hw-drop-guides {\n  fill: none;\n  stroke: rgba(0, 0, 0, 0.3);\n  stroke-dasharray: 2 3;\n}\n", ":root {\n  --hw-space-unit: 4px;\n  --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);\n}\n\n.hwFluidGrid {\n  --gap: var(--gutter-width);\n\n  display: flex;\n  gap: calc(var(--grid-gap) * var(--hw-space-unit));\n  flex-wrap: wrap;\n  padding: 0;\n}\n\n.hwFluidGrid > * {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --gutter-count: calc(var(--parent-col-count) - 1);\n  --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));\n  --available-width: calc(100% - var(--total-gutter-width));\n\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  position: relative;\n}\n\n.hwFluidGrid > *:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dashed 2px blue;\n}\n\n.hwFluidGrid > [data-xs] {\n  --internal-gutter-count: calc(var(--col-span) - 1);\n  --percent-width: calc(var(--col-span) / var(--parent-col-count));\n  --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));\n  flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));\n  flex-grow: 0;\n}\n\n.hwFluidGrid > [data-xs='1'] {\n  --col-span: 1;\n}\n.hwFluidGrid > [data-xs='2'] {\n  --col-span: 2;\n}\n.hwFluidGrid > [data-xs='3'] {\n  --col-span: 3;\n}\n\n.hwFluidGrid > [data-xs='4'] {\n  --col-span: 4;\n}\n\n.hwFluidGrid > [data-xs='6'] {\n  --col-span: 6;\n}\n\n.hwFluidGrid > [data-xs='8'] {\n  --col-span: 8;\n}\n\n.hwFluidGrid > [data-xs='9'] {\n  --col-span: 9;\n}\n.hwFluidGrid > [data-xs='10'] {\n  --col-span: 10;\n}\n.hwFluidGrid > [data-xs='11'] {\n  --col-span: 11;\n}\n\n.hwFluidGrid > [data-xs='12'] {\n  --col-span: 12;\n}\n\n@media (min-width: 600px) {\n  .hwFluidGrid > [data-sm='1'] {\n    --col-span: 1;\n  }\n  .hwFluidGrid > [data-sm='2'] {\n    --col-span: 2;\n  }\n\n  .hwFluidGrid > [data-sm='3'] {\n    --col-span: 3;\n  }\n\n  .hwFluidGrid > [data-sm='4'] {\n    --col-span: 4;\n  }\n\n  .hwFluidGrid > [data-sm='6'] {\n    --col-span: 6;\n  }\n\n  .hwFluidGrid > [data-sm='8'] {\n    --col-span: 8;\n  }\n  .hwFluidGrid > [data-sm='9'] {\n    --col-span: 9;\n  }\n  .hwFluidGrid > [data-sm='10'] {\n    --col-span: 10;\n  }\n  .hwFluidGrid > [data-sm='11'] {\n    --col-span: 11;\n  }\n  .hwFluidGrid > [data-sm='12'] {\n    --col-span: 12;\n  }\n}\n\n/* Display the grid background */\n\n.hwFluidGrid-show-grid {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);\n  --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));\n  --grid-available-width: calc(100% - var(--grid-total-gutter-width));\n  --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));\n  --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));\n  background: repeating-linear-gradient(\n    to right,\n    var(--hw-fluid-grid-col-bg) 0,\n    var(--hw-fluid-grid-col-bg) var(--column-width),\n    white var(--column-width),\n    white calc(var(--column-width) + var(--gutter-width))\n  );\n}\n", ".vuuHeader {\n  --saltToolbar-background: var(--salt-container-tertiary-background);\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\n\n", ".vuuView {\n  border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));\n  border-width: var(--vuuView-borderWidth, 1px);\n  border-style: var(--vuuView-borderStyle, none);\n\n  display: flex;\n  flex-direction: column;\n  margin: var(--vuuView-margin, 0px);\n  min-height: 50px;\n  min-width: 50px;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuView.focus-visible:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dotted cornflowerblue 2px;\n}\n\n.vuuView.dragging {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n}\n\n.vuuView-main {\n  /* height: var(--view-content-height);\n  width: var(--view-content-width); */\n  display: flex;\n  flex-direction: var(--vuuView-flexDirection, column);\n  flex-wrap: var(--vuuView-flex-wrap, nowrap);\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuView-main > * {\n  flex-basis: auto;\n  flex-grow: var(--vuuView-flex-grow, 1);\n  flex-shrink: var(--vuuView-flex-shrink, 1);\n}\n\n.vuuView-collapsed .vuuView-main {\n  display: none;\n}\n\n.vuuView-collapsed + .Splitter {\n  display: none;\n}\n\n.vuuView-collapsed .Toolbar-vertical {\n  border-right: solid 1px var(--grey40);\n}\n\n.vuuView-collapsed .Toolbar-vertical .toolbar-title {\n  display: none;\n}\n", ".vuuDialog {\n  --dialog-border: var(--hw-dialog-border, solid 1px #ccc);\n  --dialog-padding: var(--hw-dialog-padding, 0);\n  --dialog-shadow: var(--hw-dialog-shadow, none);\n  --vuuView-margin: 0;\n  --vuuView-flex-wrap: none;\n\n  border: var(--dialog-border);\n  padding: var(--dialog-padding);\n  box-shadow: var(--dialog-shadow);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n\n\n}\n\n\n", ".hwMenuList {\n  --context-menu-color: #161616;\n  --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n  --context-menu-highlight-bg: #a4d5f4;\n  --context-menu-blur-focus-bg: #e0e4e9;\n  --menu-item-height: var(--hw-list-item-height, 24px);\n  --menu-item-icon-color: black;\n  --menu-item-twisty-color: black;\n  --menu-item-twisty-content: '';\n  --menu-item-twisty-top: 50%;\n  --menu-item-twisty-left: auto;\n  --menu-item-twisty-right: 0px;\n  --menu-icon-size: 12px;\n\n  background-clip: padding-box;\n  background-color: white;\n  border-radius: 4px;\n  border: solid 1px rgba(0, 0, 0, 0.15);\n  box-shadow: var(--context-menu-shadow);\n  font-size: 13px;\n  list-style: none;\n  margin: 2px 0 0;\n  outline: 0;\n  padding: 0;\n  position: absolute;\n}\n\n.hwMenuItem {\n  align-items: center;\n  color: var(--context-menu-color);\n  display: flex;\n  gap: 6px;\n  height: var(--menu-item-height);\n  padding: var(--context-menu-padding);\n  padding-right: 24px;\n  position: relative;\n  white-space: nowrap;\n}\n\n.hwIconContainer {\n  display: inline-block;\n  flex: 12px 0 0;\n  height: var(--menu-icon-size);\n  mask-repeat: no-repeat;\n  width: var(--menu-icon-size);\n}\n\n[data-icon='filter'] {\n  --menu-icon-size: 12px;\n  --menu-icon: var(--svg-filter);\n}\n\n[data-icon='filter'] {\n  --menu-icon: var(--svg-filter);\n}\n\n[data-icon='sort'] {\n  --menu-icon: var(--svg-sort-order-down);\n}\n\n[data-icon='sorted-asc'] {\n  --menu-icon: var(--svg-sorted-asc);\n}\n\n[data-icon='sorted-dsc'] {\n  --menu-icon: var(--svg-sorted-dsc);\n}\n\n[data-icon] > .hwIconContainer {\n  background-color: var(--menu-item-icon-color);\n  -webkit-mask: var(--menu-icon) center center/var(--menu-icon-size) var(--menu-icon-size);\n  mask: var(--menu-icon) center center/var(--menu-icon-size) var(--menu-icon-size);\n}\n\n.hwMenuItem[aria-expanded='true'] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.hwMenuItem-separator {\n  border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.hwMenuItem[aria-haspopup='true']:after {\n  content: var(--menu-item-twisty-content);\n  -webkit-mask: var(--svg-chevron-right) center center/12px 12px;\n  mask: var(--svg-chevron-down) center center/12px 12px;\n  mask-repeat: no-repeat;\n  background-color: var(--menu-item-twisty-color);\n  height: 16px;\n  left: var(--menu-item-twisty-left);\n  right: var(--menu-item-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--menu-item-twisty-top);\n  transition: transform 0.3s;\n  width: 16px;\n}\n\n.hwMenuItem[data-highlighted] {\n  background-color: var(--context-menu-highlight-bg);\n}\n\n.hwMenuItem:hover {\n  background-color: var(--context-menu-highlight-bg);\n  cursor: default;\n}\n\n.hwMenuList-childMenuShowing .hwMenuItem[data-highlighted] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.hwMenuItem.focusVisible:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.hwPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n\n.hwMenuItem-button:active,\n.hwMenuItem-button:hover {\n  outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".hwPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".DraggableLayout {\n  display: inline-block;\n  outline: none;\n}\n\n[data-dragging='true'] {\n  position: absolute !important;\n  z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n  background-color: white;\n  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n  height: 100%;\n  width: 100%;\n}\n", ".vuuPalette {\n}\n\n.vuuPalette-horizontal {\n  align-items: center;\n  display: flex;\n}\n\n.vuuPalette .vuuComponentIcon {\n}\n\n.vuuPaletteItem {\n  --vuu-icon-color: var(--salt-separable-primary-background);\n  --vuu-icon-inset: calc(50% - 12px) auto auto -3px;\n  --vuu-icon-svg: var(--svg-grab-handle);\n  --vuu-icon-height: 24px;\n  --vuu-icon-width: 24px;\n  padding-left: 20px;\n}\n\n.vuuPaletteItem[data-icon]:after {\n  --height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n  --width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n\n  content: \"\";\n  background-color: var(--vuu-icon-color, black);\n  height: var(--height);\n  inset: var(--vuu-icon-inset,0 auto 0 0);\n  mask: var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;\n  -webkit-mask: var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;\n  position: absolute;\n  width: var(--width);\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n  --vuu-icon-color: var(--salt-selectable-foreground);\n}", ".vuuPalette {\n  --list-item-header-bg: inherit;\n  --list-item-header-color: inherit;\n  --list-item-padding: 0 6px 0 24px;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-left: 3px;\n  --list-item-header-twisty-right: auto;\n}\n\n", ".Tabs {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.Tabs .Toolbar:before {\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  height: 1px;\n  content: '';\n  position: absolute;\n  background: var(--grey60);\n}\n\n.vuuTabHeader {\n  --saltTabs-activationIndicator-background: transparent;\n  --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuTabHeader + .hwFlexbox,\n.vuuTabHeader + * {\n  flex: 1;\n}\n\n.vuuTabHeader + .vuuView > .vuuHeader {\n  height: 0;\n  overflow: hidden;\n}\n\n/* .Splitter.column + .Flexbox > .Tabs:first-child {\n  border-top: solid 1px lightgrey;\n} */\n\n.Layout-svg-button {\n  --spacing-medium: 5px;\n}\n", "[data-design-mode='true'] .Component {\n  filter: grayscale(100%);\n  opacity: 0.4;\n}\n\n[data-design-mode='true'] .Component:after {\n  color: black;\n  content: 'Component';\n  height: 12px;\n  background-color: yellow;\n}\n\n.LayoutConfigurator {\n  --margin-color: #f3cea5;\n  --border-color: #fddda0;\n  --padding-color: #c6d092;\n  --content-color: #8cb6c0;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  background-color: var(--margin-color);\n}\n\n.LayoutConfigurator .layout-outer {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.LayoutBox {\n  --hw-control-font-size: 13px;\n  --hw-text-input-bg: rgba(255, 255, 255, 0.3);\n  --hwTextInput-padding: 3px;\n  --hw-text-input-position: absolute;\n  --hwTextInput-width: 30px;\n\n  flex: 1 1 auto;\n}\n\n.LayoutBox > .layout-top {\n  flex: 0 0 40px;\n  padding-left: 12px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n}\n\n.LayoutBox > .layout-bottom {\n  flex: 0 0 40px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.LayoutBox > .layout-inner > .layout-right,\n.LayoutBox > .layout-inner > .layout-left {\n  flex: 0 0 40px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.layout-top,\n.layout-bottom {\n  --hw-text-input-margin: 0 0 0 -15px;\n}\n\n.layout-top > .layout-input,\n.layout-bottom > .layout-input {\n  left: 50%;\n}\n\n.LayoutBox > .layout-inner {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.LayoutBox.layout-margin {\n  background-color: var(--margin-color);\n  border: dashed 2px black;\n}\n\n.LayoutBox.layout-border {\n  background-color: var(--border-color);\n  border: solid 2px black;\n}\n\n.LayoutBox.layout-padding {\n  background-color: var(--padding-color);\n  border: dashed 2px black;\n}\n\n.LayoutBox .layout-content {\n  flex: 1 1 auto;\n  background-color: var(--content-color);\n  border: solid 2px #808080;\n}\n\n.LayoutBox .layout-title {\n  color: #161616;\n  font-size: 11px;\n  left: 4px;\n  line-height: 15px;\n  position: absolute;\n  top: 1px;\n}\n", ".hwLayoutTreeViewer {\n}\n\n.hwLayoutTreeNode {\n  cursor: default;\n}\n\n.hwLayoutTreeNode:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.hwLayoutTreeNode[aria-selected='true'] {\n  background-color: cornflowerblue;\n  color: white;\n}\n"],
+  "mappings": "AAAA,WACE,wFACA,sDAEA,sBACA,sDACA,kBACA,UACA,aACA,YACA,cACA,YACA,aACA,aAGF,oBACE,mCACA,YACA,cAGF,iCACE,8BACA,YACA,cAGF,iBACE,kCACA,gBACA,kBAGF,mBACE,YACA,gBACA,kBACA,MACA,8BACA,iBACA,sDACA,WACA,cAGF,mCACE,QAOF,gBACE,+CAEF,iBACE,8CAEF,eACE,gDAEF,kBACE,6CAGF,mEAEE,YACA,iBAGF,mEAEE,WACA,kBAGF,mCACE,WACA,YAGF,iCACE,kBACA,wBAGF,gDACE,MACA,OACA,QAGF,iDACE,MACA,QACA,QAGF,+CACE,SACA,MACA,OAGF,kDACE,SACA,SACA,OAGF,uIAEE,8BAGF,uIAEE,+BAGF,+HAEE,yBAGF,+HAEE,0BAGF,+BAEE,QAGF,mCAEE,SAGF,iCAEE,sBAGF,2BACE,0BACA,yBACA,sBACA,cAGF,gBACE,qDC5JF,SACE,wCACA,0CACA,4CACA,qDACA,wEACA,iCACA,aAGF,oBACE,mBAGF,kBACE,sBAGF,iBACE,iCACA,YACA,cACA,gBAEA,aACA,mBACA,uBAGF,wEACE,gBC9BF,UACE,qBACA,6BACA,8BACA,+BAEA,mBACA,+BACA,0CACA,0CACA,sBACA,aACA,uBACA,kBACA,aACA,UAGF,gBACE,+BAEF,iBACE,gCAGF,iBACE,iBACA,4BACA,4CAGF,uBACE,iBACA,2BACA,4CAGF,iBACE,YAtCF,gBAwCE,WACA,cAzCF,UA6CA,qBACE,kBACA,2BACA,eAGF,4BACE,OACA,QACA,SACA,YAGF,iCACE,UACA,WACA,MACA,SAGF,8BACE,UACA,YACA,wPAiBF,+BACE,6MAiBF,qCACE,8MAiBF,wBACE,WACA,WACA,uPC5HF,gBACE,aACA,YACA,cAGF,qBACE,YACA,cCRF,MACE,qBACA,iBACA,gDAGF,WACE,8CACA,sBACA,aACA,wCACA,aACA,YACA,gBAGF,kBACE,sBAGF,eACE,mBAGF,qBACE,gBACA,YACA,cAGF,qBACE,aACA,YAGF,WACE,iBACA,OACA,YACA,cAGF,mBACE,iBC3CF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE,kBCZF,aACE,iBACA,mBACA,sBACA,+BACA,oBACA,uBACA,mBAPF,8BAYA,qCAEE,sBAGF,oBACE,4BAGF,mBACE,2BAGF,kBACE,sBACA,WACA,YACA,+BACA,sCACA,eACA,aACA,mBACA,uBAGF,wBACE,sBACA,+BAGF,4CACE,qCACA,+BAGF,2CACE,qCACA,+BAGF,8CACE,oCACA,+BAGF,+BACE,UAEF,wBACE,2BAGF,uCACE,UAGF,6BACE,mBCrEF,gBACE,kBACA,UACA,kBACA,QACA,OACA,QACA,SACA,6BAGF,oBACE,kBAGF,yBACE,mBAGF,iBACE,YACA,iBACA,iBAGF,wBACE,WAGF,kBACE,eACA,YACA,qBAGF,gBACE,UACA,iBACA,qBCtCF,MACE,qBACA,gDAGF,aACE,2BAEA,aACA,iDACA,eAVF,UAcA,eACE,gEACA,kDACA,sEACA,0DAEA,aACA,YACA,cACA,kBAGF,qBACE,WACA,kBACA,MACA,OACA,QACA,SACA,uBAGF,uBACE,mDACA,iEACA,kFACA,8FACA,YAGF,2BACE,cAEF,2BACE,cAEF,2BACE,cAGF,2BACE,cAGF,2BACE,cAGF,2BACE,cAGF,2BACE,cAEF,4BACE,eAEF,4BACE,eAGF,4BACE,eAGF,0BACE,2BACE,cAEF,2BACE,cAGF,2BACE,cAGF,2BACE,cAGF,2BACE,cAGF,2BACE,cAEF,2BACE,cAEF,4BACE,eAEF,4BACE,eAEF,4BACE,gBAMJ,uBACE,gEACA,8EACA,gFACA,oEACA,+EACA,8EACA,6MC9HF,WACE,oEAGF,8BACA,gCCLA,SACE,mFACA,6CACA,8CAEA,aACA,sBACA,kCACA,gBACA,eACA,aACA,gBACA,kBAGF,6BACE,WACA,kBACA,MACA,OACA,QACA,SACA,iCAGF,kBACE,gCAGF,cAGE,aACA,oDACA,2CACA,OACA,gBACA,kBAGF,gBACE,gBACA,sCACA,0CAGF,iCACE,aAGF,6BACE,aAGF,qCACE,qCAGF,oDACE,aC3DF,WACE,yDACA,8CACA,+CACA,oBACA,0BAEA,4BACA,8BACA,gCACA,4CACA,0CCXF,YACE,8BACA,2DACA,+EACA,uFACA,qCACA,sCACA,qDACA,8BACA,gCACA,+BACA,4BACA,8BACA,8BACA,uBAEA,4BACA,sBAjBF,kBAmBE,iCACA,sCACA,eACA,gBAtBF,eAwBE,UAxBF,UA0BE,kBAGF,YACE,mBACA,gCACA,aACA,QACA,+BACA,oCACA,mBACA,kBACA,mBAGF,iBACE,qBACA,cACA,6BACA,sBACA,4BAGF,mBACE,uBACA,+BAGF,mBACE,+BAGF,iBACE,wCAGF,uBACE,mCAGF,uBACE,mCAGF,6BACE,6CACA,wFACA,gFAGF,gCACE,mDAGF,sBACE,uDAGF,sCACE,wCACA,8DACA,qDACA,sBACA,+CACA,YACA,kCACA,oCACA,gBACA,kBACA,gCACA,yBACA,WAGF,8BACE,kDAGF,kBACE,kDACA,eAGF,2DACE,mDAGF,gCACE,WACA,kBACA,MACA,OACA,QACA,WACA,oDAgBF,mDAEE,UC1IF,qDACE,UACA,QAGF,8GAGE,qBACA,WACA,yBAGF,uCACE,WACA,gBACA,gBACA,cACA,mBACA,qBACA,eCpBF,iBACE,qBACA,aAGF,qBACE,4BACA,YAGF,2BACE,sBACA,4BAEF,6BACE,YACA,WCbF,uBACE,mBACA,aAMF,gBACE,2DACA,iDACA,uCACA,wBACA,uBACA,kBAGF,iCACE,6DACA,2DAEA,WACA,8CACA,qBACA,uCACA,4EACA,oFACA,kBACA,mBAGF,2CACE,oDCnCF,YACE,+BACA,kCACA,kCACA,uCACA,oCACA,sCCNF,MACE,aACA,sBACA,sBAGF,sBACE,OACA,WACA,SACA,WACA,WACA,kBACA,yBAGF,cACE,uDACA,gEACA,kEAGF,yCAEE,OAGF,kCACE,SACA,gBAOF,mBACE,sBCrCF,mCACE,uBACA,WAGF,yCACE,WACA,oBACA,YACA,sBAGF,oBACE,wBACA,wBACA,yBACA,yBACA,aACA,sBACA,oBACA,qCAGF,kCACE,cACA,aACA,sBACA,oBAGF,WACE,6BACA,4CACA,2BACA,mCACA,0BAEA,cAGF,uBACE,cACA,kBACA,aACA,mBACA,mBACA,kBAGF,0BACE,cACA,kBACA,aACA,mBACA,mBAGF,6EAEE,cACA,aACA,sBACA,uBACA,mBAGF,2BAEE,oCAGF,uDAEE,SAGF,yBACE,cACA,aACA,mBACA,oBAGF,yBACE,qCACA,wBAGF,yBACE,qCACA,uBAGF,0BACE,sCACA,wBAGF,2BACE,cACA,sCACA,yBAGF,yBACE,cACA,eACA,SACA,iBACA,kBACA,QC3GF,kBACE,eAGF,wBACE,uBAGF,sCACE,yBACA",
+  "names": []
+}

package/package.json

@@ -1,30 +1,26 @@
 {
   "name": "@vuu-ui/vuu-layout",
-  "version": "0.0.27",
+  "version": "0.5.5",
   "description": "VUU Layout Components",
-  "main": "src/index.ts",
   "author": "heswell",
   "license": "Apache-2.0",
-  "scripts": {
-    "build": "node ../../scripts/run-build.mjs",
-    "type-defs": "tsc --project tsconfig-emit-types.json"
+  "peerDependencies": {
+    "@salt-ds/core": "1.0.0",
+    "@salt-ds/icons": "1.0.0",
+    "@heswell/salt-lab": "1.0.0-alpha.0",
+    "@vuu-ui/ui-controls": "0.5.5",
+    "@vuu-ui/vuu-utils": "0.5.5",
+    "classnames": "^2.2.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "files": [
-    "index.js",
+    "cjs",
+    "esm",
     "index.css",
-    "index.js.map",
     "index.css.map",
-    "/src"
+    "README.md"
   ],
-  "types": "src/index.ts",
-  "peerDependencies": {
-    "@heswell/uitk-core": "0.8.0-vuu.1",
-    "@heswell/uitk-icons": "0.7.0-vuu.1",
-    "@heswell/uitk-lab": "0.8.0-vuu.1",
-    "@vuu-ui/ui-controls": "0.0.27",
-    "@vuu-ui/vuu-utils": "0.0.27",
-    "classnames": "^2.2.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  }
+  "module": "esm/index.js",
+  "main": "cjs/index.js"
 }

package/src/Component.css

@@ -1,2 +0,0 @@
-.Component {
-}

package/src/Component.tsx

@@ -1,20 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react';
-import { registerComponent } from './registry/ComponentRegistry';
-
-import './Component.css';
-
-export interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
-  resizeable?: boolean;
-}
-
-const Component = forwardRef(function Component(
-  { resizeable, ...props }: ComponentProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  return <div {...props} className="Component" ref={ref} />;
-}) as React.FunctionComponent<ComponentProps>;
-Component.displayName = 'Component';
-
-export default Component;
-
-registerComponent('Component', Component);

package/src/DraggableLayout.css

@@ -1,18 +0,0 @@
-.DraggableLayout {
-  display: inline-block;
-  outline: none;
-}
-
-[data-dragging='true'] {
-  position: absolute !important;
-  z-index: 100;
-}
-
-.vuuSimpleDraggableWrapper {
-  background-color: white;
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
-}
-.vuuSimpleDraggableWrapper > * {
-  height: 100%;
-  width: 100%;
-}

package/src/DraggableLayout.tsx

@@ -1,29 +0,0 @@
-import classnames from 'classnames';
-import React, { useRef } from 'react';
-import { registerComponent } from './registry/ComponentRegistry';
-
-import './DraggableLayout.css';
-
-// We need to add props to restrict drag behaviour to, for example, popups only
-export const DraggableLayout = function DraggableLayout(props) {
-  // We shouldn't need this but somewhere the customDispatcher/handleDragStart callback is not
-  // being updated and preserves stale ref to props.children, so DragDrop from within a nested
-  // LatoutContext (Stack or DraggableLayout) fails.
-  const sourceRef = useRef();
-  sourceRef.current = props;
-
-  const { className: classNameProp, id, style } = props;
-
-  const className = classnames('DraggableLayout', classNameProp);
-  return (
-    <div className={className} id={id} style={style}>
-      {props.children}
-    </div>
-  );
-};
-
-const componentName = 'DraggableLayout';
-
-DraggableLayout.displayName = componentName;
-
-registerComponent(componentName, DraggableLayout, 'container');

package/src/__tests__/flexbox-utils.spec.js

@@ -1,90 +0,0 @@
-import {
-  findSplitterAndPlaceholderPositions,
-  PLACEHOLDER,
-  SPLITTER
-} from '../flexbox/flexbox-utils';
-
-describe('findSplitterAndPlaceholderPositions', () => {
-  let positions;
-  describe('WHEN there are less than 2 items', () => {
-    it('THEN no splitters are inserted', () => {
-      positions = findSplitterAndPlaceholderPositions([]);
-      expect(positions).toEqual([]);
-
-      positions = findSplitterAndPlaceholderPositions([{ resizeable: true }]);
-      expect(positions).toEqual([0]);
-
-      positions = findSplitterAndPlaceholderPositions([{ resizeable: false }]);
-      expect(positions).toEqual([0]);
-    });
-  });
-
-  describe('WHEN there are no resizeable items', () => {
-    it('THEN no splitters are inserted', () => {
-      positions = findSplitterAndPlaceholderPositions([
-        { resizeable: false },
-        { resizeable: false }
-      ]);
-      expect(positions).toEqual([0, 0]);
-
-      positions = findSplitterAndPlaceholderPositions([
-        { resizeable: false },
-        { resizeable: false },
-        { resizeable: false }
-      ]);
-      expect(positions).toEqual([0, 0, 0]);
-
-      positions = findSplitterAndPlaceholderPositions([
-        { resizeable: false },
-        { resizeable: false },
-        { resizeable: false },
-        { resizeable: false }
-      ]);
-      expect(positions).toEqual([0, 0, 0, 0]);
-    });
-  });
-
-  describe('WHEN all items are resizeable', () => {
-    it('THEN splitters are inserted between items', () => {
-      positions = findSplitterAndPlaceholderPositions([{ resizeable: true }, { resizeable: true }]);
-      expect(positions).toEqual([1, 0]);
-
-      positions = findSplitterAndPlaceholderPositions([
-        { resizeable: true },
-        { resizeable: true },
-        { resizeable: true }
-      ]);
-      expect(positions).toEqual([1, 1, 0]);
-
-      positions = findSplitterAndPlaceholderPositions([
-        { resizeable: true },
-        { resizeable: true },
-        { resizeable: true },
-        { resizeable: true }
-      ]);
-      expect(positions).toEqual([1, 1, 1, 0]);
-    });
-  });
-
-  describe('WHEN some items are resizeable', () => {
-    it('THEN splitters are inserted where appropriate between items', () => {
-      // positions = findSplitterAndPlaceholderPositions([{resizeable: true},{resizeable: true}]);
-      // expect(positions).toEqual([1,0])
-
-      positions = findSplitterAndPlaceholderPositions([
-        { resizeable: false },
-        { resizeable: true },
-        { resizeable: true }
-      ]);
-      expect(positions).toEqual([0, 1, 0]);
-
-      positions = findSplitterAndPlaceholderPositions([
-        { resizeable: false },
-        { resizeable: true },
-        { resizeable: true },
-        { resizeable: true }
-      ]);
-      expect(positions).toEqual([0, 1, 1, 0]);
-    });
-  });
-});

package/src/action-buttons/action-buttons.css

@@ -1,12 +0,0 @@
-.hwActionButton {
-  border-width: 0;
-  border-radius: 0;
-  min-height: 28px;
-  min-width: 28px;
-  padding: 0;
-}
-
-.hwActionButton svg {
-  width: 12px;
-  height: 12px;
-}

package/src/action-buttons/action-buttons.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import {
-  ChevronDoubleLeftIcon,
-  ChevronDoubleRightIcon,
-} from "@vuu-ui/ui-controls";
-import { Button, ButtonProps } from "@heswell/uitk-core";
-
-import "./action-buttons.css";
-
-export const ChevronDoubleLeftButton = (props: ButtonProps) => (
-  <Button
-    className="hwActionButton"
-    variant="secondary"
-    aria-label="Close"
-    {...props}
-  >
-    <ChevronDoubleLeftIcon />
-  </Button>
-);
-
-export const ChevronDoubleRightButton = (props: ButtonProps) => (
-  <Button
-    className="hwActionButton"
-    variant="secondary"
-    aria-label="Close"
-    {...props}
-  >
-    <ChevronDoubleRightIcon />
-  </Button>
-);

package/src/action-buttons/index.ts

@@ -1 +0,0 @@
-export * from './action-buttons';

package/src/chest-of-drawers/Chest.css

@@ -1,36 +0,0 @@
-.hwChest {
-  --chest-bg: var(--hw-chest-bg, inherit);
-  --drawer-bg: var(--hw-drawer-bg, inherit);
-  --drawer-size: var(--hw-drawer-size, 200px);
-  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);
-  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);
-  background-color: var(--chest-bg);
-  display: flex;
-}
-
-.hwChest-horizontal {
-  flex-direction: row;
-}
-
-.hwChest-vertical {
-  flex-direction: column;
-}
-
-.hwChest-content {
-  background-color: var(--chest-bg);
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: hidden;
-  /* position: relative; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hwChest-horizontal .hwChest-content {
-  flex-basis: 100%;
-}
-
-.hwChest-vertical .hwChest-content {
-  flex-basis: 100%;
-}

package/src/chest-of-drawers/Chest.tsx

@@ -1,42 +0,0 @@
-import React, { HTMLAttributes, ReactElement } from "react";
-import cx from "classnames";
-import Drawer from "./Drawer";
-import { partition } from "@vuu-ui/vuu-utils";
-import { registerComponent } from "../registry/ComponentRegistry";
-
-import "./Chest.css";
-
-const isDrawer = (component: ReactElement) => component.type === Drawer;
-const isVertical = ({ props: { position = "left" } }: ReactElement) =>
-  position.match(/top|bottom/);
-
-export interface ChestProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactElement[];
-}
-
-const Chest = (props: ChestProps) => {
-  const { children, className: classNameProp, id, style } = props;
-  const classBase = "hwChest";
-  const [drawers, content] = partition(children, isDrawer);
-  const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
-  const orientation =
-    verticalDrawers.length === 0
-      ? "horizontal"
-      : horizontalDrawers.length === 0
-      ? "vertical"
-      : "both";
-
-  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
-
-  return (
-    <div className={className} id={id} style={style}>
-      {drawers}
-      <div className={`${classBase}-content`}>{content}</div>
-    </div>
-  );
-};
-Chest.displayName = "Chest";
-
-export default Chest;
-
-registerComponent("Chest", Chest, "container");

package/src/chest-of-drawers/Drawer.css

@@ -1,153 +0,0 @@
-.hwDrawer {
-  --drawer-leading-edge-border: solid 1px var(--uitk-container-borderColor-medium, none);
-  transition: flex-basis;
-  transition-duration: var(--drawer-transition-duration);
-  position: relative;
-  z-index: 1;
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-}
-
-.hwDrawer-peekaboo {
-  flex-basis: var(--drawer-peek-size);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.hwDrawer-inline.hwDrawer-open {
-  flex-basis: var(--drawer-size);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.hwDrawer-liner {
-  background-color: var(--drawer-bg);
-  overflow: hidden;
-  position: relative;
-}
-
-.hwDrawer-content {
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  right: var(--drawer-peek-size);
-  transition: right;
-  transition-duration: var(--drawer-transition-duration);
-  width: 100%;
-  flex: 1 1 100%;
-}
-
-.hwDrawer-open .hwDrawer-content {
-  right: 0;
-}
-
-/* .hwDrawer:not(.hwDrawer-open) .hwDrawer-liner > * {
-  display: none;
-} */
-
-.hwDrawer-left {
-  border-right: var(--drawer-leading-edge-border);
-}
-.hwDrawer-right {
-  border-left: var(--drawer-leading-edge-border);
-}
-.hwDrawer-top {
-  border-bottom: var(--drawer-leading-edge-border);
-}
-.hwDrawer-bottom {
-  border-top: var(--drawer-leading-edge-border);
-}
-
-.hwDrawer-left .hwDrawer-liner,
-.hwDrawer-right .hwDrawer-liner {
-  height: 100%;
-  transition: width;
-}
-
-.hwDrawer-top .hwDrawer-liner,
-.hwDrawer-bottom .hwDrawer-liner {
-  width: 100%;
-  transition: height;
-}
-
-.hwDrawer-inline .hwDrawer-liner {
-  width: 100%;
-  height: 100%;
-}
-
-.hwDrawer-over .hwDrawer-liner {
-  position: absolute;
-  transition-duration: 0.4s;
-}
-
-.hwDrawer-over.hwDrawer-left .hwDrawer-liner {
-  top: 0;
-  left: 0;
-  width: 0;
-}
-
-.hwDrawer-over.hwDrawer-right .hwDrawer-liner {
-  top: 0;
-  right: 0;
-  width: 0;
-}
-
-.hwDrawer-over.hwDrawer-top .hwDrawer-liner {
-  height: 0;
-  top: 0;
-  left: 0;
-}
-
-.hwDrawer-over.hwDrawer-bottom .hwDrawer-liner {
-  bottom: 0;
-  height: 0;
-  left: 0;
-}
-
-.hwDrawer-left.hwDrawer-over.hwDrawer-peekaboo .hwDrawer-liner,
-.hwDrawer-right.hwDrawer-over.hwDrawer-peekaboo .hwDrawer-liner {
-  width: var(--drawer-peek-size);
-}
-
-.hwDrawer-top.hwDrawer-over.hwDrawer-peekaboo .hwDrawer-liner,
-.hwDrawer-bottom.hwDrawer-over.hwDrawer-peekaboo .hwDrawer-liner {
-  height: var(--drawer-peek-size);
-}
-
-.hwDrawer-left.hwDrawer-over.hwDrawer-open .hwDrawer-liner,
-.hwDrawer-right.hwDrawer-over.hwDrawer-open .hwDrawer-liner {
-  width: var(--drawer-size);
-}
-
-.hwDrawer-top.hwDrawer-over.hwDrawer-open .hwDrawer-liner,
-.hwDrawer-bottom.hwDrawer-over.hwDrawer-open .hwDrawer-liner {
-  height: var(--drawer-size);
-}
-
-.hwDrawer-top,
-.hwDrawer-left {
-  order: 0;
-}
-
-.hwDrawer-bottom,
-.hwDrawer-right {
-  order: 99;
-}
-
-.hwDrawer-left,
-.hwDrawer-right {
-  flex-direction: column;
-}
-
-.hwToggleButton-container {
-  --uitkButton-height: 28px;
-  --uitkButton-width: 28px;
-  --vuu-icon-size: 12px;
-  --vuu-icon-svg: var(--svg-chevron-double-left);
-  flex: 0 0 28px;
-}