payload 0.20.8-beta.0 → 1.0.4

package/components/styles.css

@@ -1 +1 @@
-.btn{background:transparent;border:0;border-radius:4px;color:inherit;cursor:pointer;font-size:1rem;font-weight:400;line-height:1.9230769231rem;margin-bottom:1.9230769231rem;margin-top:1.9230769231rem;text-align:center;text-decoration:none}.btn .btn__icon{border:1px solid;border-radius:100%}.btn .btn__icon .stroke{stroke:currentColor;fill:none}.btn .btn__icon .fill{fill:currentColor}.btn--has-tooltip{position:relative}.btn .btn__tooltip{opacity:0;transform:translate(-50%,-10px);visibility:hidden}.btn .btn__content:hover .btn__tooltip{opacity:1;visibility:visible}.btn--icon-style-none .btn__icon,.btn--icon-style-without-border .btn__icon{border:none}.btn span{line-height:1.9230769231rem}.btn span,.btn svg{vertical-align:top}.btn--size-medium{padding:.9615384615rem 1.9230769231rem}.btn--size-small{padding:.4807692308rem .9615384615rem}.btn--style-primary{background-color:var(--theme-elevation-800);color:var(--theme-elevation-0)}.btn--style-primary.btn--disabled{background-color:var(--theme-elevation-400)}.btn--style-primary:not(.btn--disabled):hover{background:var(--theme-elevation-750)}.btn--style-primary:not(.btn--disabled):active{background:var(--theme-elevation-700)}.btn--style-primary:focus{box-shadow:0 0 0 2px var(--theme-success-500);outline:none}.btn--style-secondary{background:none;box-shadow:inset 0 0 0 1px var(--theme-elevation-800);color:var(--theme-elevation-800)}.btn--style-secondary:hover{background:var(--theme-elevation-100);box-shadow:inset 0 0 0 1px var(--theme-elevation-700)}.btn--style-secondary:active{background:var(--theme-elevation-200)}.btn--style-secondary.btn--disabled{background:none;box-shadow:inset 0 0 0 1px var(--theme-elevation-400);color:var(--theme-elevation-400)}.btn--style-secondary:focus{box-shadow:inset 0 0 0 1px var(--theme-elevation-700),0 0 0 2px var(--theme-success-500);outline:none}.btn--style-none{border-radius:0;margin:0;padding:0}.btn--style-none:focus{opacity:.8}.btn--style-none:active{opacity:.7}.btn--round{border-radius:100%}.btn--icon span{display:flex;justify-content:space-between}.btn--icon.btn--style-primary .icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn--icon.btn--style-primary .icon .fill{fill:var(--theme-elevation-0)}.btn--style-icon-label{font-weight:600;padding:0}.btn--style-light-gray{box-shadow:inset 0 0 0 1px var(--theme-elevation-800)}.btn--icon-position-left .btn__content{flex-direction:row-reverse}.btn--icon-position-left .btn__icon{margin-right:.9615384615rem}.btn--icon-position-right .btn__icon{margin-left:.9615384615rem}.btn--icon-only .btn__icon{margin:0;padding:0}.btn--disabled{cursor:default}.btn:hover .btn__icon{background:var(--theme-elevation-800)}.btn:hover .btn__icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn:hover .btn__icon .fill{fill:var(--theme-elevation-0)}.btn:focus{outline:none}.btn:focus .btn__icon{background:var(--theme-elevation-150)}.btn:focus .btn__icon .stroke{stroke:var(--theme-elevation-800);fill:none}.btn:focus .btn__icon .fill{fill:var(--theme-elevation-800)}.btn:active .btn__icon{background:var(--theme-elevation-700)}.btn:active .btn__icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn:active .btn__icon .fill{fill:var(--theme-elevation-0)}.icon--plus{height:1.9230769231rem;width:1.9230769231rem}.icon--plus .stroke,.icon--x line{stroke:var(--theme-elevation-800);stroke-width:1px}.icon--chevron{height:1.9230769231rem;width:1.9230769231rem}.icon--chevron .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px}.icon--edit{shape-rendering:auto;height:1.9230769231rem;width:1.9230769231rem}.icon--edit .fill{fill:var(--theme-elevation-800);stroke:none}.icon--swap{height:1.9230769231rem;width:1.9230769231rem}.icon--swap .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px}.tooltip{background-color:var(--theme-elevation-800);border-radius:2px;bottom:100%;color:var(--theme-elevation-0);font-weight:400;line-height:1.4423076923rem;padding:.3846153846rem .7692307692rem;transform:translate3d(-50%,-20%,0);white-space:nowrap;z-index:2}.tooltip,.tooltip span{left:50%;position:absolute}.tooltip span{border:10px solid transparent;border-top:10px solid var(--theme-elevation-800);height:0;top:calc(100% - .12019rem);transform:translateX(-50%);width:0}.popup{position:relative}.popup__content{background:var(--theme-input-bg);display:none;max-width:calc(100vw - 1.92308rem);position:absolute;z-index:var(--z-popup)}.popup__content:after{border:12px solid transparent;border-top:12px solid var(--theme-input-bg);content:" ";position:absolute;top:calc(100% - 1px)}.popup__wrap{overflow:hidden}.popup__scroll{overflow-y:auto;padding:1.9230769231rem;padding-right:calc(var(--scrollbar-width) + 1.92308rem);white-space:nowrap;width:calc(100% + var(--scrollbar-width))}.popup:active,.popup:focus{outline:none}.popup--size-small .popup__scroll{padding:1.4423076923rem calc(var(--scrollbar-width) + 1.44231rem) 1.4423076923rem 1.4423076923rem}.popup--size-small .popup__content{box-shadow:0 0 30px 0 rgba(0,2,4,.12),0 30px 25px -8px rgba(0,2,4,.1)}.popup--size-small.popup--h-align-left .popup__content{left:-.9615384615rem}.popup--size-small.popup--h-align-left .popup__content:after{left:.8173076923rem}.popup--size-large .popup__content{box-shadow:0 20px 35px -10px rgba(0,2,4,.2),0 6px 4px -4px rgba(0,2,4,.02)}.popup--size-large .popup__scroll{padding:2.8846153846rem calc(var(--scrollbar-width) + 2.88462rem) 1.9230769231rem 2.8846153846rem}.popup--size-wide .popup__content{box-shadow:0 0 30px 0 rgba(0,2,4,.12),0 30px 25px -8px rgba(0,2,4,.1)}.popup--size-wide .popup__content:after{border:12px solid transparent;border-top:12px solid var(--theme-input-bg)}.popup--size-wide .popup__scroll{padding:.4807692308rem .9615384615rem}.popup--size-wide.popup--align-left .popup__content{left:-.9615384615rem}.popup--size-wide.popup--align-left .popup__content:after{left:.8173076923rem}.popup--h-align-left .popup__content{left:-3.3653846154rem}.popup--h-align-left .popup__content:after{left:3.3653846154rem}.popup--h-align-center .popup__content,.popup--h-align-center .popup__content:after{left:50%;transform:translateX(-50%)}.popup--h-align-right .popup__content{right:-3.3653846154rem}.popup--h-align-right .popup__content:after{right:3.3653846154rem}.popup--v-align-top .popup__content{bottom:calc(100% + 1.92308rem)}.popup--v-align-bottom .popup__content{box-shadow:0 -2px 20px 7px rgba(0,2,4,.1),0 6px 4px -4px rgba(0,2,4,.02);top:calc(100% + .96154rem)}.popup--v-align-bottom .popup__content:after{border-bottom-color:var(--theme-input-bg);border-top-color:transparent!important;bottom:calc(100% - 1px);top:auto}.popup--v-align-bottom.popup--color-dark .popup__content:after{border-bottom-color:var(--theme-elevation-800)}.popup--color-dark .popup__content{background:var(--theme-elevation-800);color:var(--theme-input-bg)}.popup--color-dark .popup__content:after{border-top-color:var(--theme-elevation-800)}.popup--active .popup__content{display:block}@media(max-width:1024px){.popup--size-large .popup__scroll,.popup__scroll{padding:1.4423076923rem;padding-right:calc(var(--scrollbar-width) + 1.44231rem)}.popup--h-align-left .popup__content{left:-.9615384615rem}.popup--h-align-left .popup__content:after{left:.9615384615rem}.popup--h-align-center .popup__content,.popup--h-align-center .popup__content:after{left:50%;transform:translateX(0)}.popup--h-align-right .popup__content{right:-.9615384615rem}.popup--h-align-right .popup__content:after{right:.9615384615rem}.popup--force-h-align-left .popup__content{left:-.9615384615rem;right:auto;transform:none}.popup--force-h-align-left .popup__content:after{left:.9615384615rem;right:auto;transform:none}.popup--force-h-align-right .popup__content{left:auto;right:-.9615384615rem;transform:none}.popup--force-h-align-right .popup__content:after{left:auto;right:.9615384615rem;transform:none}}.popup-button{display:inline-flex}.banner{background:var(--theme-elevation-900);border:0;border-radius:3px;color:var(--theme-elevation-800);font-size:1rem;line-height:1.9230769231rem;margin-bottom:1.9230769231rem;padding:.9615384615rem;vertical-align:middle}.banner--has-action{cursor:pointer;text-decoration:none}.banner--has-icon{display:flex}.banner--has-icon svg{display:block}.banner--type-default.button--has-action:hover{background:var(--theme-elevation-900)}.banner--type-default.button--has-action:active{background:var(--theme-elevation-950)}.banner--type-error{background:var(--theme-error-100);color:var(--theme-error-500)}.banner--type-error svg .stroke{stroke:var(--theme-error-500);fill:none}.banner--type-error svg .fill{fill:var(--theme-error-500)}.banner--type-error.button--has-action:hover{background:var(--theme-error-200)}.banner--type-error.button--has-action:active{background:var(--theme-error-300)}.banner--type-success{background:var(--theme-success-500)}.banner--type-success.button--has-action:active,.banner--type-success.button--has-action:hover{background:var(--theme-success-200)}.template-minimal{align-items:center;display:flex;justify-content:center;margin-left:auto;margin-right:auto;min-height:100%;padding:5.7692307692rem 1.9230769231rem;width:100%}.template-minimal--width-normal .template-minimal__wrap{max-width:500px;width:100%}.template-minimal--width-wide .template-minimal__wrap{max-width:1024px;width:100%}.icon--check{height:1.9230769231rem;width:1.9230769231rem}.icon--check .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px}.icon--search{height:1.9230769231rem;width:1.9230769231rem}.icon--search .stroke{stroke:var(--theme-elevation-800);stroke-width:1px}.icon--menu .fill{fill:var(--theme-text)}.pill{background:var(--theme-elevation-150);border:0;border-radius:3px;color:var(--theme-elevation-800);cursor:default;display:inline-flex;font-size:1rem;line-height:1.9230769231rem;overflow:hidden;padding:0 .4807692308rem 0 .6490384615rem;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.pill:active,.pill:focus{outline:none}.pill--has-action{cursor:pointer;text-decoration:none}.pill--has-icon svg{display:block}.pill--align-icon-left{padding-left:.2403846154rem}.pill--align-icon-right{padding-right:.2403846154rem}.pill--style-white{background:var(--theme-elevation-0)}.pill--style-light-gray,.pill--style-light.pill--has-action:active,.pill--style-light.pill--has-action:hover,.pill--style-white.pill--has-action:active,.pill--style-white.pill--has-action:hover{background:var(--theme-elevation-100)}.pill--style-light-gray{color:var(--theme-elevation-800)}.pill--style-warning{background:var(--theme-warning-500)}.pill--style-success{background:var(--theme-success-500)}.pill--style-dark{background:var(--theme-elevation-800);color:var(--theme-elevation-0)}.pill--style-dark svg .stroke{stroke:var(--theme-elevation-0);fill:none}.pill--style-dark svg .fill{fill:var(--theme-elevation-0)}.pill--style-dark.pill--has-action:hover{background:var(--theme-elevation-750)}.pill--style-dark.pill--has-action:active{background:var(--theme-elevation-700)}
+.btn{background:transparent;border:0;border-radius:4px;color:inherit;cursor:pointer;font-size:1rem;font-weight:400;line-height:1.9230769231rem;margin-bottom:1.9230769231rem;margin-top:1.9230769231rem;text-align:center;text-decoration:none}.btn .btn__icon{border:1px solid;border-radius:100%}.btn .btn__icon .stroke{stroke:currentColor;fill:none}.btn .btn__icon .fill{fill:currentColor}.btn--has-tooltip{position:relative}.btn .btn__tooltip{opacity:0;transform:translate(-50%,-10px);visibility:hidden}.btn .btn__content:hover .btn__tooltip{opacity:1;visibility:visible}.btn--icon-style-none .btn__icon,.btn--icon-style-without-border .btn__icon{border:none}.btn span{line-height:1.9230769231rem}.btn span,.btn svg{vertical-align:top}.btn--size-medium{padding:.9615384615rem 1.9230769231rem}.btn--size-small{padding:.4807692308rem .9615384615rem}.btn--style-primary{background-color:var(--theme-elevation-800);color:var(--theme-elevation-0)}.btn--style-primary.btn--disabled{background-color:var(--theme-elevation-400)}.btn--style-primary:not(.btn--disabled):hover{background:var(--theme-elevation-750)}.btn--style-primary:not(.btn--disabled):active{background:var(--theme-elevation-700)}.btn--style-primary:focus{box-shadow:0 0 0 2px var(--theme-success-500);outline:none}.btn--style-secondary{background:none;box-shadow:inset 0 0 0 1px var(--theme-elevation-800);color:var(--theme-elevation-800)}.btn--style-secondary:hover{background:var(--theme-elevation-100);box-shadow:inset 0 0 0 1px var(--theme-elevation-700)}.btn--style-secondary:active{background:var(--theme-elevation-200)}.btn--style-secondary.btn--disabled{background:none;box-shadow:inset 0 0 0 1px var(--theme-elevation-400);color:var(--theme-elevation-400)}.btn--style-secondary:focus{box-shadow:inset 0 0 0 1px var(--theme-elevation-700),0 0 0 2px var(--theme-success-500);outline:none}.btn--style-none{border-radius:0;margin:0;padding:0}.btn--style-none:focus{opacity:.8}.btn--style-none:active{opacity:.7}.btn--round{border-radius:100%}.btn--icon span{display:flex;justify-content:space-between}.btn--icon.btn--style-primary .icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn--icon.btn--style-primary .icon .fill{fill:var(--theme-elevation-0)}.btn--style-icon-label{font-weight:600;padding:0}.btn--style-light-gray{box-shadow:inset 0 0 0 1px var(--theme-elevation-800)}.btn--icon-position-left .btn__content{flex-direction:row-reverse}.btn--icon-position-left .btn__icon{margin-right:.9615384615rem}.btn--icon-position-right .btn__icon{margin-left:.9615384615rem}.btn--icon-only .btn__icon{margin:0;padding:0}.btn--disabled{cursor:default}.btn:hover .btn__icon{background:var(--theme-elevation-800)}.btn:hover .btn__icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn:hover .btn__icon .fill{fill:var(--theme-elevation-0)}.btn:focus{outline:none}.btn:focus .btn__icon{background:var(--theme-elevation-150)}.btn:focus .btn__icon .stroke{stroke:var(--theme-elevation-800);fill:none}.btn:focus .btn__icon .fill{fill:var(--theme-elevation-800)}.btn:active .btn__icon{background:var(--theme-elevation-700)}.btn:active .btn__icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn:active .btn__icon .fill{fill:var(--theme-elevation-0)}.icon--plus{height:1.9230769231rem;width:1.9230769231rem}.icon--plus .stroke,.icon--x line{stroke:var(--theme-elevation-800);stroke-width:1px}.icon--chevron{height:1.9230769231rem;width:1.9230769231rem}.icon--chevron .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px}.icon--edit{shape-rendering:auto;height:1.9230769231rem;width:1.9230769231rem}.icon--edit .fill{fill:var(--theme-elevation-800);stroke:none}.icon--swap{height:1.9230769231rem;width:1.9230769231rem}.icon--swap .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px}.tooltip{background-color:var(--theme-elevation-800);border-radius:2px;bottom:100%;color:var(--theme-elevation-0);font-weight:400;line-height:1.4423076923rem;padding:.3846153846rem .7692307692rem;transform:translate3d(-50%,-20%,0);white-space:nowrap;z-index:2}.tooltip,.tooltip span{left:50%;position:absolute}.tooltip span{border:10px solid transparent;border-top:10px solid var(--theme-elevation-800);height:0;top:calc(100% - .12019rem);transform:translateX(-50%);width:0}.popup{position:relative}.popup__content{background:var(--theme-input-bg);display:none;max-width:calc(100vw - 1.92308rem);position:absolute;z-index:var(--z-popup)}.popup__content:after{border:12px solid transparent;border-top:12px solid var(--theme-input-bg);content:" ";position:absolute;top:calc(100% - 1px)}.popup__wrap{overflow:hidden}.popup__scroll{overflow-y:auto;padding:1.9230769231rem;padding-right:calc(var(--scrollbar-width) + 1.92308rem);white-space:nowrap;width:calc(100% + var(--scrollbar-width))}.popup:active,.popup:focus{outline:none}.popup--size-small .popup__scroll{padding:1.4423076923rem calc(var(--scrollbar-width) + 1.44231rem) 1.4423076923rem 1.4423076923rem}.popup--size-small .popup__content{box-shadow:0 0 30px 0 rgba(0,2,4,.12),0 30px 25px -8px rgba(0,2,4,.1)}.popup--size-small.popup--h-align-left .popup__content{left:-.9615384615rem}.popup--size-small.popup--h-align-left .popup__content:after{left:.8173076923rem}.popup--size-large .popup__content{box-shadow:0 20px 35px -10px rgba(0,2,4,.2),0 6px 4px -4px rgba(0,2,4,.02)}.popup--size-large .popup__scroll{padding:2.8846153846rem calc(var(--scrollbar-width) + 2.88462rem) 1.9230769231rem 2.8846153846rem}.popup--size-wide .popup__content{box-shadow:0 0 30px 0 rgba(0,2,4,.12),0 30px 25px -8px rgba(0,2,4,.1)}.popup--size-wide .popup__content:after{border:12px solid transparent;border-top:12px solid var(--theme-input-bg)}.popup--size-wide .popup__scroll{padding:.4807692308rem .9615384615rem}.popup--size-wide.popup--align-left .popup__content{left:-.9615384615rem}.popup--size-wide.popup--align-left .popup__content:after{left:.8173076923rem}.popup--h-align-left .popup__content{left:-3.3653846154rem}.popup--h-align-left .popup__content:after{left:3.3653846154rem}.popup--h-align-center .popup__content,.popup--h-align-center .popup__content:after{left:50%;transform:translateX(-50%)}.popup--h-align-right .popup__content{right:-3.3653846154rem}.popup--h-align-right .popup__content:after{right:3.3653846154rem}.popup--v-align-top .popup__content{bottom:calc(100% + 1.92308rem)}.popup--v-align-bottom .popup__content{box-shadow:0 -2px 20px 7px rgba(0,2,4,.1),0 6px 4px -4px rgba(0,2,4,.02);top:calc(100% + .96154rem)}.popup--v-align-bottom .popup__content:after{border-bottom-color:var(--theme-input-bg);border-top-color:transparent!important;bottom:calc(100% - 1px);top:auto}.popup--v-align-bottom.popup--color-dark .popup__content:after{border-bottom-color:var(--theme-elevation-800)}.popup--color-dark .popup__content{background:var(--theme-elevation-800);color:var(--theme-input-bg)}.popup--color-dark .popup__content:after{border-top-color:var(--theme-elevation-800)}.popup--active .popup__content{display:block}@media(max-width:1024px){.popup--size-large .popup__scroll,.popup__scroll{padding:1.4423076923rem;padding-right:calc(var(--scrollbar-width) + 1.44231rem)}.popup--h-align-left .popup__content{left:-.9615384615rem}.popup--h-align-left .popup__content:after{left:.9615384615rem}.popup--h-align-center .popup__content,.popup--h-align-center .popup__content:after{left:50%;transform:translateX(0)}.popup--h-align-right .popup__content{right:-.9615384615rem}.popup--h-align-right .popup__content:after{right:.9615384615rem}.popup--force-h-align-left .popup__content{left:-.9615384615rem;right:auto;transform:none}.popup--force-h-align-left .popup__content:after{left:.9615384615rem;right:auto;transform:none}.popup--force-h-align-right .popup__content{left:auto;right:-.9615384615rem;transform:none}.popup--force-h-align-right .popup__content:after{left:auto;right:.9615384615rem;transform:none}}.popup-button{display:inline-flex}.banner{background:var(--theme-elevation-900);border:0;border-radius:3px;color:var(--theme-elevation-800);font-size:1rem;line-height:1.9230769231rem;margin-bottom:1.9230769231rem;padding:.9615384615rem;vertical-align:middle}.banner--has-action{cursor:pointer;text-decoration:none}.banner--has-icon{display:flex}.banner--has-icon svg{display:block}.banner--type-default.button--has-action:hover{background:var(--theme-elevation-900)}.banner--type-default.button--has-action:active{background:var(--theme-elevation-950)}.banner--type-error{background:var(--theme-error-100);color:var(--theme-error-500)}.banner--type-error svg .stroke{stroke:var(--theme-error-500);fill:none}.banner--type-error svg .fill{fill:var(--theme-error-500)}.banner--type-error.button--has-action:hover{background:var(--theme-error-200)}.banner--type-error.button--has-action:active{background:var(--theme-error-300)}.banner--type-success{background:var(--theme-success-500);color:var(--color-base-800)}.banner--type-success.button--has-action:active,.banner--type-success.button--has-action:hover{background:var(--theme-success-200)}.template-minimal{align-items:center;display:flex;justify-content:center;margin-left:auto;margin-right:auto;min-height:100%;padding:5.7692307692rem 1.9230769231rem;width:100%}.template-minimal--width-normal .template-minimal__wrap{max-width:500px;width:100%}.template-minimal--width-wide .template-minimal__wrap{max-width:1024px;width:100%}.icon--check{height:1.9230769231rem;width:1.9230769231rem}.icon--check .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px}.icon--search{height:1.9230769231rem;width:1.9230769231rem}.icon--search .stroke{stroke:var(--theme-elevation-800);stroke-width:1px}.icon--menu .fill{fill:var(--theme-text)}.pill{background:var(--theme-elevation-150);border:0;border-radius:3px;color:var(--theme-elevation-800);cursor:default;display:inline-flex;font-size:1rem;line-height:1.9230769231rem;overflow:hidden;padding:0 .4807692308rem 0 .6490384615rem;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.pill:active,.pill:focus{outline:none}.pill--has-action{cursor:pointer;text-decoration:none}.pill--has-icon svg{display:block}.pill--align-icon-left{padding-left:.2403846154rem}.pill--align-icon-right{padding-right:.2403846154rem}.pill--style-white{background:var(--theme-elevation-0)}.pill--style-light-gray,.pill--style-light.pill--has-action:active,.pill--style-light.pill--has-action:hover,.pill--style-white.pill--has-action:active,.pill--style-white.pill--has-action:hover{background:var(--theme-elevation-100)}.pill--style-light-gray{color:var(--theme-elevation-800)}.pill--style-warning{background:var(--theme-warning-500)}.pill--style-success{background:var(--theme-success-500);color:var(--color-base-800)}.pill--style-dark{background:var(--theme-elevation-800);color:var(--theme-elevation-0)}.pill--style-dark svg .stroke{stroke:var(--theme-elevation-0);fill:none}.pill--style-dark svg .fill{fill:var(--theme-elevation-0)}.pill--style-dark.pill--has-action:hover{background:var(--theme-elevation-750)}.pill--style-dark.pill--has-action:active{background:var(--theme-elevation-700)}

package/dist/admin/components/elements/Banner/index.scss

@@ -57,6 +57,7 @@
 
   &--type-success {
     background: var(--theme-success-500);
+    color: var(--color-base-800);
 
     &.button--has-action {
       &:hover {

package/dist/admin/components/elements/ColumnSelector/index.scss

@@ -4,17 +4,14 @@
   background: var(--theme-elevation-50);
   padding: base(1) base(1) base(.5);
 
-  .pill {
+  &__column {
     margin-right: base(.5);
     margin-bottom: base(.5);
-  }
-
-  &__column {
     background-color: transparent;
     box-shadow: 0 0 0 1px var(--theme-elevation-200);
-  }
 
-  &__column--active {
-    background-color: var(--theme-elevation-150);
+    &.column-selector__column--active {
+      background-color: var(--theme-elevation-150);
+    }
   }
 }

package/dist/admin/components/elements/Eyebrow/index.scss

@@ -20,4 +20,8 @@
     position: relative;
     display: block;
   }
+
+  @include small-break {
+    padding: 0 0 base(1);
+  }
 }

package/dist/admin/components/elements/Nav/index.js

@@ -39,7 +39,7 @@ const DefaultNav = () => {
                     var _a, _b;
                     const href = `${admin}/collections/${collection.slug}`;
                     if ((_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.read.permission) {
-                        return (React.createElement(NavLink, { activeClassName: "active", key: i, to: href },
+                        return (React.createElement(NavLink, { id: `nav-${collection.slug}`, activeClassName: "active", key: i, to: href },
                             React.createElement(Chevron, null),
                             collection.labels.plural));
                     }
@@ -51,7 +51,7 @@ const DefaultNav = () => {
                         var _a;
                         const href = `${admin}/globals/${global.slug}`;
                         if ((_a = permissions === null || permissions === void 0 ? void 0 : permissions.globals) === null || _a === void 0 ? void 0 : _a[global.slug].read.permission) {
-                            return (React.createElement(NavLink, { activeClassName: "active", key: i, to: href },
+                            return (React.createElement(NavLink, { id: `nav-global-${global.slug}`, activeClassName: "active", key: i, to: href },
                                 React.createElement(Chevron, null),
                                 global.label));
                         }

package/dist/admin/components/elements/Pill/index.scss

@@ -77,6 +77,7 @@
 
   &--style-success {
     background: var(--theme-success-500);
+    color: var(--color-base-800);
   }
 
   &--style-dark {

package/dist/admin/components/elements/ReactSelect/index.js

@@ -3,12 +3,12 @@ import Select from 'react-select';
 import Chevron from '../../icons/Chevron';
 import './index.scss';
 const ReactSelect = (props) => {
-    const { className, showError = false, options, onChange, value, disabled = false, placeholder, isSearchable = true, } = props;
+    const { className, showError = false, options, onChange, value, disabled = false, placeholder, isSearchable = true, isClearable, } = props;
     const classes = [
         className,
         'react-select',
         showError && 'react-select--error',
     ].filter(Boolean).join(' ');
-    return (React.createElement(Select, { placeholder: placeholder, ...props, value: value, onChange: onChange, disabled: disabled ? 'disabled' : undefined, components: { DropdownIndicator: Chevron }, className: classes, classNamePrefix: "rs", options: options, isSearchable: isSearchable }));
+    return (React.createElement(Select, { placeholder: placeholder, ...props, value: value, onChange: onChange, disabled: disabled ? 'disabled' : undefined, components: { DropdownIndicator: Chevron }, className: classes, classNamePrefix: "rs", options: options, isSearchable: isSearchable, isClearable: isClearable }));
 };
 export default ReactSelect;

package/dist/admin/components/elements/ReactSelect/types.d.ts

@@ -18,4 +18,5 @@ export declare type Props = {
     onMenuScrollToBottom?: () => void;
     placeholder?: string;
     isSearchable?: boolean;
+    isClearable?: boolean;
 };

package/dist/admin/components/forms/field-types/Array/Array.js

@@ -156,7 +156,7 @@ const ArrayFieldType = (props) => {
     if (!rows)
         return null;
     return (React.createElement(DragDropContext, { onDragEnd: onDragEnd },
-        React.createElement("div", { id: `field-${path}`, className: classes },
+        React.createElement("div", { id: `field-${path.replace(/\./gi, '__')}`, className: classes },
             React.createElement("div", { className: `${baseClass}__error-wrap` },
                 React.createElement(Error, { showError: showError, message: errorMessage })),
             React.createElement("header", { className: `${baseClass}__header` },

package/dist/admin/components/forms/field-types/Blocks/Blocks.js

@@ -159,7 +159,7 @@ const Blocks = (props) => {
     if (!rows)
         return null;
     return (React.createElement(DragDropContext, { onDragEnd: onDragEnd },
-        React.createElement("div", { id: `field-${path}`, className: classes },
+        React.createElement("div", { id: `field-${path.replace(/\./gi, '__')}`, className: classes },
             React.createElement("div", { className: `${baseClass}__error-wrap` },
                 React.createElement(Error, { showError: showError, message: errorMessage })),
             React.createElement("header", { className: `${baseClass}__header` },

package/dist/admin/components/forms/field-types/Checkbox/index.js

@@ -32,7 +32,7 @@ const Checkbox = (props) => {
         } },
         React.createElement("div", { className: `${baseClass}__error-wrap` },
             React.createElement(Error, { showError: showError, message: errorMessage })),
-        React.createElement("input", { id: `field-${path}`, type: "checkbox", name: path, checked: Boolean(value), readOnly: true }),
+        React.createElement("input", { id: `field-${path.replace(/\./gi, '__')}`, type: "checkbox", name: path, checked: Boolean(value), readOnly: true }),
         React.createElement("button", { type: "button", onClick: readOnly ? undefined : () => {
                 setValue(!value);
                 if (typeof onChange === 'function')

package/dist/admin/components/forms/field-types/Code/Code.js

@@ -41,7 +41,7 @@ const Code = (props) => {
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
-        React.createElement(Editor, { id: `field-${path}`, value: value || '', onValueChange: readOnly ? () => null : setValue, highlight: highlighter, padding: 25, style: {
+        React.createElement(Editor, { id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onValueChange: readOnly ? () => null : setValue, highlight: highlighter, padding: 25, style: {
                 backgroundColor: 'var(--theme-base-850)',
                 color: 'var(--theme-base-0)',
                 fontFamily: '"Consolas", "Monaco", monospace',

package/dist/admin/components/forms/field-types/DateTime/index.js

@@ -33,7 +33,7 @@ const DateTime = (props) => {
         React.createElement("div", { className: `${baseClass}__error-wrap` },
             React.createElement(Error, { showError: showError, message: errorMessage })),
         React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("div", { className: `${baseClass}__input-wrapper`, id: `field-${path}` },
+        React.createElement("div", { id: `field-${path.replace(/\./gi, '__')}`, className: `${baseClass}__input-wrapper` },
             React.createElement(DatePicker, { ...date, placeholder: placeholder, readOnly: readOnly, onChange: readOnly ? undefined : setValue, value: value })),
         React.createElement(FieldDescription, { value: value, description: description })));
 };

package/dist/admin/components/forms/field-types/Email/index.js

@@ -31,8 +31,8 @@ const Email = (props) => {
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("input", { id: `field-${path}`, value: value || '', onChange: setValue, disabled: Boolean(readOnly), placeholder: placeholder, type: "email", name: path, autoComplete: autoComplete }),
+        React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
+        React.createElement("input", { id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onChange: setValue, disabled: Boolean(readOnly), placeholder: placeholder, type: "email", name: path, autoComplete: autoComplete }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default withCondition(Email);

package/dist/admin/components/forms/field-types/Group/index.js

@@ -14,7 +14,7 @@ const Group = (props) => {
     const isWithinGroup = useGroup();
     const isWithinTab = useTabs();
     const path = pathFromProps || name;
-    return (React.createElement("div", { id: `field-${path}`, className: [
+    return (React.createElement("div", { id: `field-${path.replace(/\./gi, '__')}`, className: [
             'field-type',
             baseClass,
             isWithinCollapsible && `${baseClass}--within-collapsible`,

package/dist/admin/components/forms/field-types/HiddenInput/index.js

@@ -12,6 +12,6 @@ const HiddenInput = (props) => {
             setValue(valueFromProps, disableModifyingForm);
         }
     }, [valueFromProps, setValue, disableModifyingForm]);
-    return (React.createElement("input", { id: `field-${path}`, type: "hidden", value: value || '', onChange: setValue, name: path }));
+    return (React.createElement("input", { id: `field-${path.replace(/\./gi, '__')}`, type: "hidden", value: value || '', onChange: setValue, name: path }));
 };
 export default withCondition(HiddenInput);

package/dist/admin/components/forms/field-types/Number/index.js

@@ -39,8 +39,8 @@ const NumberField = (props) => {
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
-        React.createElement("input", { id: `field-${path}`, value: typeof value === 'number' ? value : '', onChange: handleChange, disabled: readOnly, placeholder: placeholder, type: "number", name: path, step: step }),
+        React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
+        React.createElement("input", { id: `field-${path.replace(/\./gi, '__')}`, value: typeof value === 'number' ? value : '', onChange: handleChange, disabled: readOnly, placeholder: placeholder, type: "number", name: path, step: step }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default withCondition(NumberField);

package/dist/admin/components/forms/field-types/Password/index.js

@@ -28,7 +28,7 @@ const Password = (props) => {
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
-        React.createElement("input", { id: `field-${path}`, value: value || '', onChange: setValue, disabled: formProcessing, type: "password", autoComplete: autoComplete, name: path })));
+        React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
+        React.createElement("input", { id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onChange: setValue, disabled: formProcessing, type: "password", autoComplete: autoComplete, name: path })));
 };
 export default withCondition(Password);

package/dist/admin/components/forms/field-types/Point/index.js

@@ -42,11 +42,11 @@ const PointField = (props) => {
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement("ul", { className: `${baseClass}__wrap` },
             React.createElement("li", null,
-                React.createElement(Label, { htmlFor: `field-longitude-${path}`, label: `${label} - Longitude`, required: required }),
-                React.createElement("input", { id: `field-longitude-${path}`, value: (value && typeof value[0] === 'number') ? value[0] : '', onChange: (e) => handleChange(e, 0), disabled: readOnly, placeholder: placeholder, type: "number", name: `${path}.longitude`, step: step })),
+                React.createElement(Label, { htmlFor: `field-longitude-${path.replace(/\./gi, '__')}`, label: `${label} - Longitude`, required: required }),
+                React.createElement("input", { id: `field-longitude-${path.replace(/\./gi, '__')}`, value: (value && typeof value[0] === 'number') ? value[0] : '', onChange: (e) => handleChange(e, 0), disabled: readOnly, placeholder: placeholder, type: "number", name: `${path}.longitude`, step: step })),
             React.createElement("li", null,
-                React.createElement(Label, { htmlFor: `field-latitude-${path}`, label: `${label} - Latitude`, required: required }),
-                React.createElement("input", { id: `field-latitude-${path}`, value: (value && typeof value[1] === 'number') ? value[1] : '', onChange: (e) => handleChange(e, 1), disabled: readOnly, placeholder: placeholder, type: "number", name: `${path}.latitude`, step: step }))),
+                React.createElement(Label, { htmlFor: `field-latitude-${path.replace(/\./gi, '__')}`, label: `${label} - Latitude`, required: required }),
+                React.createElement("input", { id: `field-latitude-${path.replace(/\./gi, '__')}`, value: (value && typeof value[1] === 'number') ? value[1] : '', onChange: (e) => handleChange(e, 1), disabled: readOnly, placeholder: placeholder, type: "number", name: `${path}.latitude`, step: step }))),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default withCondition(PointField);

package/dist/admin/components/forms/field-types/RadioGroup/Input.js

@@ -24,7 +24,7 @@ const RadioGroupInput = (props) => {
         React.createElement("div", { className: `${baseClass}__error-wrap` },
             React.createElement(Error, { showError: showError, message: errorMessage })),
         React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
-        React.createElement("ul", { id: `field-${path}`, className: `${baseClass}--group` }, options.map((option) => {
+        React.createElement("ul", { id: `field-${path.replace(/\./gi, '__')}`, className: `${baseClass}--group` }, options.map((option) => {
             let optionValue = '';
             if (optionIsObject(option)) {
                 optionValue = option.value;

package/dist/admin/components/forms/field-types/Relationship/index.js

@@ -249,7 +249,7 @@ const Relationship = (props) => {
     const valueToRender = (findOptionsByValue() || value);
     if ((valueToRender === null || valueToRender === void 0 ? void 0 : valueToRender.value) === 'null')
         valueToRender.value = null;
-    return (React.createElement("div", { id: `field-${path}`, className: classes, style: {
+    return (React.createElement("div", { id: `field-${path.replace(/\./gi, '__')}`, className: classes, style: {
             ...style,
             width,
         } },

package/dist/admin/components/forms/field-types/RichText/RichText.js

@@ -110,7 +110,7 @@ const RichText = (props) => {
         } },
         React.createElement("div", { className: `${baseClass}__wrap` },
             React.createElement(Error, { showError: showError, message: errorMessage }),
-            React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
+            React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
             React.createElement(Slate, { editor: editor, value: valueToRender, onChange: (val) => {
                     if (val !== defaultValue && val !== value) {
                         setValue(val);
@@ -146,7 +146,7 @@ const RichText = (props) => {
                                 return null;
                             }))),
                     React.createElement("div", { className: `${baseClass}__editor`, ref: editorRef },
-                        React.createElement(Editable, { id: `field-${path}`, className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onBlur: onBlur, onKeyDown: (event) => {
+                        React.createElement(Editable, { id: `field-${path.replace(/\./gi, '__')}`, className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onBlur: onBlur, onKeyDown: (event) => {
                                 if (event.key === 'Enter') {
                                     if (event.shiftKey) {
                                         event.preventDefault();

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.js

@@ -11,8 +11,8 @@ import fieldTypes from '../../../../..';
 import Form from '../../../../../../Form';
 import reduceFieldsToValues from '../../../../../../Form/reduceFieldsToValues';
 import Submit from '../../../../../../Submit';
-import './index.scss';
 import { useLocale } from '../../../../../../../utilities/Locale';
+import './index.scss';
 const baseClass = 'edit-upload-modal';
 export const EditModal = ({ slug, closeModal, relatedCollectionConfig, fieldSchema, element }) => {
     const editor = useSlateStatic();
@@ -29,13 +29,13 @@ export const EditModal = ({ slug, closeModal, relatedCollectionConfig, fieldSche
     }, [closeModal, editor, element]);
     useEffect(() => {
         const awaitInitialState = async () => {
-            const state = await buildStateFromSchema({ fieldSchema, data: element === null || element === void 0 ? void 0 : element.fields, user, operation: 'update', locale });
+            const state = await buildStateFromSchema({ fieldSchema, data: { ...(element === null || element === void 0 ? void 0 : element.fields) || {} }, user, operation: 'update', locale });
             setInitialState(state);
         };
         awaitInitialState();
     }, [fieldSchema, element.fields, user, locale]);
     return (React.createElement(Modal, { slug: slug, className: baseClass },
-        React.createElement(MinimalTemplate, { width: "normal" },
+        React.createElement(MinimalTemplate, { width: "wide" },
             React.createElement("header", { className: `${baseClass}__header` },
                 React.createElement("h1", null,
                     "Edit",

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.scss

@@ -25,21 +25,7 @@
     }
   }
 
-  .rich-text__wrap {
-    .field-type-gutter {
-      display: none;
-    }
-  }
-
   .rich-text__toolbar {
-    margin-bottom: 0;
-  }
-
-  .rich-text__editor {
-    background-color: var(--theme-elevation-0);
-    border: 1px solid var(--theme-elevation-150);
-    border-top: none;
-    min-height: base(5);
-    padding: base(.35) base(.5);
+    top: base(1);
   }
 }

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss

@@ -35,6 +35,7 @@
     height: auto;
     position: relative;
     overflow: hidden;
+    flex-shrink: 0;
 
     img,
     svg {
@@ -52,11 +53,13 @@
     align-items: center;
     padding: base(.75) base(1);
     justify-content: space-between;
+    max-width: calc(100% - #{base(3.25)});
   }
 
   &__actions {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
   }
 
   &__actionButton {
@@ -74,7 +77,9 @@
   }
 
   &__collectionLabel {
-    margin-right: base(3);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__bottomRow {
@@ -99,4 +104,10 @@
     box-shadow: $focus-box-shadow;
     outline: none;
   }
+
+  @include small-break {
+    &__topRowRightPanel {
+      padding: base(.75) base(.5);
+    }
+  }
 }

package/dist/admin/components/forms/field-types/RichText/index.scss

@@ -45,6 +45,7 @@
     h5,
     h6 {
       font-family: var(--font-body);
+      line-height: 1.125;
     }
 
     h1[data-slate-node=element] {
@@ -124,6 +125,12 @@
       background-color: var(--theme-elevation-150);
     }
   }
+
+  @include mid-break {
+    &__toolbar {
+      top: base(3);
+    }
+  }
 }
 
 [data-slate-node=element] {

package/dist/admin/components/forms/field-types/Select/Input.d.ts

@@ -17,6 +17,7 @@ export declare type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'opt
     width?: string;
     hasMany?: boolean;
     options?: OptionObject[];
+    isClearable?: boolean;
 };
 declare const SelectInput: React.FC<SelectInputProps>;
 export default SelectInput;

package/dist/admin/components/forms/field-types/Select/Input.js

@@ -6,7 +6,7 @@ import ReactSelect from '../../../elements/ReactSelect';
 // import { FieldType } from '../../useField/types';
 import './index.scss';
 const SelectInput = (props) => {
-    const { showError, errorMessage, readOnly, path, label, required, value, onChange, description, style, className, width, options, hasMany, } = props;
+    const { showError, errorMessage, readOnly, path, label, required, value, onChange, description, style, className, width, options, hasMany, isClearable, } = props;
     const classes = [
         'field-type',
         'select',
@@ -21,13 +21,13 @@ const SelectInput = (props) => {
     else {
         valueToRender = options.find((option) => option.value === value);
     }
-    return (React.createElement("div", { id: `field-${path}`, className: classes, style: {
+    return (React.createElement("div", { id: `field-${path.replace(/\./gi, '__')}`, className: classes, style: {
             ...style,
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement(ReactSelect, { onChange: onChange, value: valueToRender, showError: showError, isDisabled: readOnly, options: options, isMulti: hasMany }),
+        React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
+        React.createElement(ReactSelect, { onChange: onChange, value: valueToRender, showError: showError, isDisabled: readOnly, options: options, isMulti: hasMany, isClearable: isClearable }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default SelectInput;

package/dist/admin/components/forms/field-types/Select/index.js

@@ -13,7 +13,7 @@ const formatOptions = (options) => options.map((option) => {
     };
 });
 const Select = (props) => {
-    const { path: pathFromProps, name, validate = select, label, options: optionsFromProps, hasMany, required, admin: { readOnly, style, className, width, description, condition, } = {}, } = props;
+    const { path: pathFromProps, name, validate = select, label, options: optionsFromProps, hasMany, required, admin: { readOnly, style, className, width, description, isClearable, condition, } = {}, } = props;
     const path = pathFromProps || name;
     const [options, setOptions] = useState(formatOptions(optionsFromProps));
     useEffect(() => {
@@ -30,7 +30,10 @@ const Select = (props) => {
     const onChange = useCallback((selectedOption) => {
         if (!readOnly) {
             let newValue;
-            if (hasMany) {
+            if (!selectedOption) {
+                newValue = null;
+            }
+            else if (hasMany) {
                 if (Array.isArray(selectedOption)) {
                     newValue = selectedOption.map((option) => option.value);
                 }
@@ -48,6 +51,6 @@ const Select = (props) => {
         hasMany,
         setValue,
     ]);
-    return (React.createElement(SelectInput, { path: path, onChange: onChange, value: value, name: name, options: options, label: label, showError: showError, errorMessage: errorMessage, required: required, description: description, style: style, className: className, width: width, hasMany: hasMany }));
+    return (React.createElement(SelectInput, { path: path, onChange: onChange, value: value, name: name, options: options, label: label, showError: showError, errorMessage: errorMessage, required: required, description: description, style: style, className: className, width: width, hasMany: hasMany, isClearable: isClearable }));
 };
 export default withCondition(Select);

package/dist/admin/components/forms/field-types/Tabs/index.scss

@@ -1,6 +1,7 @@
 @import '../../../../scss/styles.scss';
 
 .tabs-field {
+  margin-top: base(2);
   margin-left: calc(var(--gutter-h) * -1);
   margin-right: calc(var(--gutter-h) * -1);
   margin-bottom: base(2);
@@ -12,9 +13,7 @@
   }
 
   &--within-collapsible {
-    margin-left: calc(#{$baseline} * -1);
-    margin-right: calc(#{$baseline} * -1);
-    margin-bottom: 0;
+    margin: 0 calc(#{$baseline} * -1);
 
     .tabs-field__tabs,
     .tabs-field__content-wrap {
@@ -31,7 +30,7 @@
   &__tab-button {
     @extend %btn-reset;
     @extend %h4;
-    padding-bottom: base(.5);
+    padding-bottom: base(.75);
     margin: 0 $baseline 0 0;
     cursor: pointer;
     opacity: .5;

package/dist/admin/components/forms/field-types/Text/Input.js

@@ -18,8 +18,8 @@ const TextInput = (props) => {
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
-        React.createElement("input", { id: `field-${path}`, value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, type: "text", name: path }),
+        React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
+        React.createElement("input", { id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, type: "text", name: path }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default TextInput;

package/dist/admin/components/forms/field-types/Textarea/Input.js

@@ -17,8 +17,8 @@ const TextareaInput = (props) => {
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
-        React.createElement("textarea", { id: `field-${path}`, value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, name: path, rows: rows }),
+        React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
+        React.createElement("textarea", { id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, name: path, rows: rows }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default TextareaInput;

package/dist/admin/components/forms/field-types/Upload/Input.js

@@ -52,7 +52,7 @@ const UploadInput = (props) => {
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
         (collection === null || collection === void 0 ? void 0 : collection.upload) && (React.createElement(React.Fragment, null,
             (file && !missingFile) && (React.createElement(FileDetails, { collection: collection, doc: file, handleRemove: () => {
                     onChange(null);

package/dist/admin/components/forms/field-types/Upload/index.scss

@@ -8,7 +8,7 @@
   &__wrap {
     display: flex;
     padding: base(1.5) base(1.5) $baseline;
-    background: var(--theme-elevation-100);
+    background: var(--theme-elevation-50);
 
     .btn {
       margin: 0 $baseline base(.5) 0;

package/dist/admin/components/views/Global/Default.js

@@ -55,7 +55,7 @@ const DefaultGlobalView = (props) => {
                                     ((_l = global.versions) === null || _l === void 0 ? void 0 : _l.drafts) && (React.createElement(React.Fragment, null,
                                         !global.versions.drafts.autosave && (React.createElement(SaveDraft, null)),
                                         React.createElement(Publish, null))),
-                                    !((_m = global.versions) === null || _m === void 0 ? void 0 : _m.drafts) && (React.createElement(FormSubmit, null, "Save"))))),
+                                    !((_m = global.versions) === null || _m === void 0 ? void 0 : _m.drafts) && (React.createElement(FormSubmit, { buttonId: "action-save" }, "Save"))))),
                             React.createElement("div", { className: `${baseClass}__sidebar-fields` },
                                 (preview && (((_o = global.versions) === null || _o === void 0 ? void 0 : _o.drafts) && !((_q = (_p = global.versions) === null || _p === void 0 ? void 0 : _p.drafts) === null || _q === void 0 ? void 0 : _q.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
                                 ((_r = global.versions) === null || _r === void 0 ? void 0 : _r.drafts) && (React.createElement(React.Fragment, null,

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Iterable/index.js

@@ -6,6 +6,7 @@ import getUniqueListBy from '../../../../../../../utilities/getUniqueListBy';
 import './index.scss';
 const baseClass = 'iterable-diff';
 const Iterable = ({ version, comparison, permissions, field, locale, locales, fieldComponents, }) => {
+    var _a, _b;
     const versionRowCount = Array.isArray(version) ? version.length : 0;
     const comparisonRowCount = Array.isArray(comparison) ? comparison.length : 0;
     const maxRows = Math.max(versionRowCount, comparisonRowCount);
@@ -49,8 +50,7 @@ const Iterable = ({ version, comparison, permissions, field, locale, locales, fi
         }))),
         maxRows === 0 && (React.createElement("div", { className: `${baseClass}__no-rows` },
             "No",
-            ' ',
-            field.labels.plural,
+            ' ', (_b = (_a = field.labels) === null || _a === void 0 ? void 0 : _a.plural) !== null && _b !== void 0 ? _b : 'rows',
             ' ',
             "found"))));
 };

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/styles.d.ts

@@ -8,6 +8,7 @@ export declare const diffStyles: {
             removedColor: string;
             wordAddedBackground: string;
             wordRemovedBackground: string;
+            emptyLineBackground: string;
         };
     };
 };

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/styles.js

@@ -8,6 +8,7 @@ export const diffStyles = {
             removedColor: 'var(--theme-error-900)',
             wordAddedBackground: 'var(--theme-success-200)',
             wordRemovedBackground: 'var(--theme-error-200)',
+            emptyLineBackground: 'var(--theme-elevation-50)',
         },
     },
 };