@vuu-ui/vuu-layout 0.5.4 → 0.5.6

package/index.css.map

@@ -1,7 +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/Component.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", ".Component {\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", ".hwReactDialog,\n.hwReactPopup {\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.hwPopup {\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", ".hwDialog {\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  margin: var(--hwDialog-margin, 200px auto 0 auto);\n  padding: var(--dialog-padding);\n  box-shadow: var(--dialog-shadow);\n}\n\n.hwDialog::backdrop {\n  background-color: var(--hw-dialog-backdrop);\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;AACE;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAOF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC5JF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AClCF;AAAA;;;ACAA;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAiBF;AACE;AAAA;AAiBF;AACE;AAAA;AAiBF;AACE;AACA;AACA;AAAA;;;AC5HF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACRF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC3CF;AAAA;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACbF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACrEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACtCF;AACE;AACA;AAAA;AAGF;AACE;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAAA;AAMJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC9HF;AACE;AAAA;AAGF;AACA;AAAA;;;ACLA;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC3DF;AACE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACdF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACpJF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACpBF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;;;AChBF;AAAA;AAGA;AACE;AACA;AAAA;AAGF;AAAA;AAGA;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACnCF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACNF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AAAA;AAOF;AACE;AAAA;;;ACrCF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC9GF;AAAA;AAGA;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;",
+  "sources": ["../../../packages/vuu-layout/src/chest-of-drawers/Drawer.css", "../../../packages/vuu-layout/src/chest-of-drawers/Chest.css", "../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-layout/src/DraggableLayout.css", "../../../packages/vuu-popups/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/Splitter.css", "../../../packages/vuu-layout/src/placeholder/Placeholder.css", "../../../packages/vuu-layout/src/flexbox/Flexbox.css", "../../../packages/vuu-layout/src/flexbox/FluidGrid.css", "../../../packages/vuu-layout/src/layout-view/View.css", "../../../packages/vuu-layout/src/layout-header/Header.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", ".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  padding: var(--vuuDialog-padding, 0);\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n\n  --saltToolbar-background: transparent;\n  --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n  align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n  right: 2px;\n}\n\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", ".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", ".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", ":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", ".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", ".vuuHeader {\n  --saltToolbar-background: var(--salt-container-tertiary-background);\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\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-horizontal {\n  flex-direction: row;\n}\n\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,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,iBACE,qBACA,aAGF,qBACE,4BACA,YAGF,2BACE,sBACA,4BAEF,6BACE,YACA,WChBF,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,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,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,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,oEAGF,8BACA,gCCFA,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,iBACE,mBAKF,sBACE,OACA,WACA,SACA,WACA,WACA,kBACA,yBAGF,cACE,uDACA,gEACA,kEAGF,yCAEE,OAGF,kCACE,SACA,gBAOF,mBACE,sBC3CF,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,28 +1,24 @@
 {
   "name": "@vuu-ui/vuu-layout",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "VUU Layout Components",
   "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/vuu-utils": "0.5.4",
+    "@vuu-ui/vuu-utils": "0.5.6",
     "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"
   ],
   "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/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,159 +0,0 @@
-.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:not(.vuuDrawer-open) .vuuDrawer-liner > * {
-  display: none;
-} */
-
-.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: 0.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);
-
-}