diff --git a/apps/admin/app/package-lock.json b/apps/admin/app/package-lock.json
index 016cbdf7..3d427af4 100644
--- a/apps/admin/app/package-lock.json
+++ b/apps/admin/app/package-lock.json
@@ -1730,7 +1730,7 @@
}
},
"@react/react-spectrum": {
- "version": "file:../../../react-react-spectrum-2.25.0.tgz",
+ "version": "file:../../../../adobe-dx-1/react-react-spectrum-2.25.0.tgz",
"integrity": "sha512-FYh3RBObhMLDeYSI1UIYDAGw+ujbzGwTE8UlHmb7jDY0VKhbVDAAIAOrnnPWFSxyTUOkuOyl5kFw9VwhqUO9Dw==",
"requires": {
"@react/collection-view": "^4.1.5",
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/.content.xml b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/.content.xml
index c7c1ee99..e4dac504 100755
--- a/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/.content.xml
+++ b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/.content.xml
@@ -17,4 +17,4 @@
+ categories="[dx.structure.publish]"/>
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/app.less b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/app.less
index e69de29b..65d6e3f8 100644
--- a/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/app.less
+++ b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/app.less
@@ -0,0 +1,9 @@
+// Variables
+@import 'variables/mediaQueries';
+@import 'variables/sides';
+
+// Utilities
+@import 'utilities/spacing';
+
+// Components
+@import 'components/flex';
\ No newline at end of file
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/components/flex.less b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/components/flex.less
new file mode 100644
index 00000000..6560b655
--- /dev/null
+++ b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/components/flex.less
@@ -0,0 +1,263 @@
+.dx-Flex {
+ position: relative;
+
+ &.has-Toggle:not(.is-Selected) {
+ &:not(.dx-Author-Padding) {
+ height: 0;
+ padding: 0;
+ overflow: hidden;
+ }
+
+ &.dx-Author-Padding {
+ height: auto;
+ }
+ }
+
+ &.is-Selected {
+ height: auto;
+ }
+
+ /* Background Video */
+ &.has-video {
+ .dx-Flex-Items {
+ position: relative;
+ }
+ }
+
+ .dx-Flex-Items.crop-content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+
+ &.show-controls {
+ pointer-events: none;
+ }
+ }
+}
+
+// For IE-11 only
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ .dx-Flex {
+ display: flex;
+ flex-direction: column;
+ }
+
+ /* Flexbox image resizing bug
+ /* https://github.com/philipwalton/flexbugs/issues/75
+ */
+ .dx-Flex-Items {
+ min-height: 1px;
+ }
+}
+
+/*
+* For IE-11 Desktop only
+* Flexbox margin auto bug
+* https://github.com/philipwalton/flexbugs#flexbug-15
+*/
+@media all and (-ms-high-contrast: none) and (min-width: 75rem), (-ms-high-contrast: active) and (min-width: 75rem) {
+ .dx-Flex-Items {
+ &.container {
+ // Flex items not flexing with align self center.
+ width: 100%;
+ }
+ }
+}
+
+.dx-Flex-Items {
+ display: flex;
+ flex-wrap: wrap;
+
+ /* Stretch by Default */
+ justify-content: stretch;
+
+ /*
+ * Flex basis is set to 1%
+ * so non-defined columns with
+ * large content (lots of text)
+ * don't wrap to a new line.
+ */
+ > * {
+ flex: 1 1 1%;
+ max-width: 100%;
+ }
+
+ /*
+ * Setup some good full-height defaults for common
+ * layout scenarios.
+ *
+ * 1. Position directly in flex
+ * 2. XF directly in flex
+ * 3. XF with direct flex in flex
+ */
+ > .position > .dx-Position,
+ > .flex > .dx-Flex,
+ > .flex > .dx-Flex > .dx-Flex-Items,
+ > .xfreference > .xfpage,
+ > .xfreference > .xfpage > .xf-content-height,
+ > .xfreference > .xfpage > .xf-content-height > .aem-Grid,
+ > .xfreference > .xfpage > * .aem-Grid > .flex,
+ > .xfreference > .xfpage > * .aem-Grid > .flex > .dx-Flex,
+ > .xfreference > .xfpage > * .aem-Grid > .flex > .dx-Flex > .dx-Flex-Items {
+ height: 100%;
+ }
+
+ .setupFlexSize(mobile);
+
+ @media @for-phone-only {
+ > .dx-parlite--phone--hide {
+ display: none;
+ }
+ }
+
+ @media @for-tablet-portrait-up {
+ .setupFlexSize(tablet);
+ }
+
+ @media @for-tablet-only {
+ > .dx-parlite--tablet--hide {
+ display: none;
+ }
+ }
+
+ @media @for-desktop-up {
+ .setupFlexSize(desktop);
+
+ &.container {
+ margin-right: auto !important;
+ margin-left: auto !important;
+ }
+
+ > .dx-parlite--default--hide {
+ display: none;
+ }
+ }
+}
+
+.dx-Flex--GapWrapper {
+ height: 100%;
+ overflow: hidden;
+
+ > .dx-Flex-Items {
+ height: 100%;
+ // IE 10 and 11 feature detection
+ // IE likes height set to auto - but needs height set to 100% when items have a min-height set
+ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ height: auto;
+ }
+ }
+}
+
+/* Mixin */
+.setupFlexSize(@size) {
+ /* Justification */
+ &.dx-Flex--@{size}JustifyStretch {
+ justify-content: stretch;
+ }
+
+ &.dx-Flex--@{size}JustifyStart {
+ justify-content: flex-start;
+
+ // Do not stretch or grow so this setting
+ // does something with no item definitions.
+ > * {
+ flex: 0 0 auto;
+ }
+ }
+
+ &.dx-Flex--@{size}JustifyCenter {
+ justify-content: center;
+
+ // Do not stretch or grow so this setting
+ // does something with no item definitions.
+ > * {
+ flex: 0 0 auto;
+ }
+ }
+
+ &.dx-Flex--@{size}JustifyEnd {
+ justify-content: flex-end;
+
+ // Do not stretch or grow so this setting
+ // does something with no item definitions.
+ > * {
+ flex: 0 0 auto;
+ }
+ }
+
+ &.dx-Flex--@{size}JustifySpaceBetween {
+ justify-content: space-between;
+
+ // Do not stretch or grow so this setting
+ // does something with no item definitions.
+ > * {
+ flex: 0 0 auto;
+ }
+ }
+
+ /* Item Alignment */
+ &.dx-Flex--@{size}AlignItemStart {
+ align-items: flex-start;
+ }
+
+ &.dx-Flex--@{size}AlignItemCenter {
+ align-items: center;
+ }
+
+ &.dx-Flex--@{size}AlignItemEnd {
+ align-items: flex-end;
+ }
+
+ &.dx-Flex--@{size}AlignItemStretch {
+ align-items: stretch;
+ }
+
+ /* Content Alignment */
+ &.dx-Flex--@{size}AlignContentStart {
+ align-content: flex-start;
+ }
+
+ &.dx-Flex--@{size}AlignContentCenter {
+ align-content: center;
+ }
+
+ &.dx-Flex--@{size}AlignContentEnd {
+ align-content: flex-end;
+ }
+
+ &.dx-Flex--@{size}AlignContentStretch {
+ align-content: stretch;
+ }
+
+ &.dx-Flex--@{size}AlignContentSpaceBetween {
+ align-content: space-between;
+ }
+
+ // Item Content Alignment
+ &.dx-Flex--@{size}AlignItemContentCenter,
+ &.dx-Flex--@{size}AlignItemContentEnd {
+ > .position > .dx-Position {
+ display: flex;
+
+ > .aem-Grid,
+ > .dx-Author-Padding {
+ width: 100%;
+ }
+ }
+ }
+
+ &.dx-Flex--@{size}AlignItemContentCenter {
+ > .position > .dx-Position {
+ align-items: center;
+ }
+ }
+
+ &.dx-Flex--@{size}AlignItemContentEnd {
+ > .position > .dx-Position {
+ align-items: flex-end;
+ }
+ }
+}
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/utilities/spacing.less b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/utilities/spacing.less
new file mode 100644
index 00000000..1d618e33
--- /dev/null
+++ b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/utilities/spacing.less
@@ -0,0 +1,24 @@
+.set-air(@size, @counter, @airType, @side) when (@counter >= 0) {
+ .set-air(@size, (@counter - 4), @airType, @side);
+
+ &.@{size}-@{airType}-@{side}-@{counter} {
+ @{airType}-@{side}: unit(@counter, px);
+ }
+}
+
+.set-all-air(@responsiveSize, @index: length(@sides)) when (@index > 0) {
+ @sideName: extract(@sides, @index);
+ .set-air(@size: @responsiveSize, @counter: 100, @airType: padding, @side: @sideName);
+ .set-air(@size: @responsiveSize, @counter: 100, @airType: margin, @side: @sideName);
+ .set-all-air(@responsiveSize, (@index - 1));
+}
+
+.set-all-air(mobile);
+
+@media (min-width: @size-responsive-tablet-portrait-up) {
+ .set-all-air(tablet);
+}
+
+@media (min-width: @size-responsive-desktop) {
+ .set-all-air(desktop);
+}
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/variables/mediaQueries.less b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/variables/mediaQueries.less
new file mode 100644
index 00000000..2956b736
--- /dev/null
+++ b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/variables/mediaQueries.less
@@ -0,0 +1,24 @@
+// Breakpoints
+// Reference: https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
+@size-responsive-phone-only: 599px;
+@size-responsive-tablet-portrait-up: 600px;
+@size-responsive-tablet-portrait-max: 899px;
+@size-responsive-tablet-landscape-up: 900px;
+@size-responsive-tablet-landscape-max: 1199px;
+@size-responsive-desktop: 1200px;
+@size-responsive-max: 1440px;
+
+// Media Queries
+@for-phone-only: %(~"only screen and (max-width: %s)", @size-responsive-phone-only);
+@for-tablet-portrait-up: %(~"only screen and (min-width: %s)", @size-responsive-tablet-portrait-up);
+@for-tablet-landscape-up: %(~"only screen and (min-width: %s)", @size-responsive-tablet-landscape-up);
+@for-desktop-up: %(~"only screen and (min-width: %s)", @size-responsive-desktop);
+@for-big-desktop-up: %(~"only screen and (min-width: %s)", @size-responsive-max);
+
+@for-tablet-only: %(
+ ~"only screen and (min-width:%s) and (max-width:%s)",
+ @size-responsive-tablet-portrait-up,
+ @size-responsive-tablet-landscape-max
+);
+
+@for-IE11-only: ~"all and (-ms-high-contrast: none), (-ms-high-contrast: active)";
\ No newline at end of file
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/variables/sides.less b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/variables/sides.less
new file mode 100644
index 00000000..ff768c9f
--- /dev/null
+++ b/apps/structure/app/jcr_root/apps/dx/structure/clientlibs/publish/src/less/variables/sides.less
@@ -0,0 +1 @@
+@sides: top, right, bottom, left;
\ No newline at end of file
diff --git a/apps/structure/app/jcr_root/apps/dx/structure/components/page/customheaderlibs.html b/apps/structure/app/jcr_root/apps/dx/structure/components/page/customheaderlibs.html
new file mode 100644
index 00000000..e7b90ee9
--- /dev/null
+++ b/apps/structure/app/jcr_root/apps/dx/structure/components/page/customheaderlibs.html
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file