@oneblink/apps-react 8.11.2 → 8.12.0-beta.10

package/dist/styles.css

@@ -630,39 +630,39 @@ a.has-text-warning-dark:hover, a.has-text-warning-dark:focus {
 }
 
 .has-text-danger {
-  color: #e8113c !important;
+  color: #b81237 !important;
 }
 
 a.has-text-danger:hover, a.has-text-danger:focus {
-  color: #b80e30 !important;
+  color: #8a0d29 !important;
 }
 
 .has-background-danger {
-  background-color: #e8113c !important;
+  background-color: #b81237 !important;
 }
 
 .has-text-danger-light {
-  color: #feecf0 !important;
+  color: #fdecf0 !important;
 }
 
 a.has-text-danger-light:hover, a.has-text-danger-light:focus {
-  color: #fabcc9 !important;
+  color: #f9becb !important;
 }
 
 .has-background-danger-light {
-  background-color: #feecf0 !important;
+  background-color: #fdecf0 !important;
 }
 
 .has-text-danger-dark {
-  color: #df103a !important;
+  color: #e81745 !important;
 }
 
 a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
-  color: #f03359 !important;
+  color: #ed456b !important;
 }
 
 .has-background-danger-dark {
-  background-color: #df103a !important;
+  background-color: #e81745 !important;
 }
 
 .has-text-black-bis {
@@ -3915,7 +3915,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
 /* Bulma Form */
 .select select, .textarea, .input {
   background-color: hsl(0, 0%, 100%);
-  border-color: hsl(0, 0%, 86%);
+  border-color: #949494;
   border-radius: 4px;
   color: hsl(0, 0%, 21%);
 }
@@ -4020,10 +4020,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   box-shadow: none rgba(184, 80, 0, 0.25);
 }
 .is-danger.textarea, .is-danger.input {
-  border-color: #e8113c;
+  border-color: #b81237;
 }
 .is-danger.textarea:focus, .is-danger.input:focus, .is-danger.is-focused.textarea, .is-danger.is-focused.input, .is-danger.textarea:active, .is-danger.input:active, .is-danger.is-active.textarea, .is-danger.is-active.input {
-  box-shadow: none rgba(232, 17, 60, 0.25);
+  box-shadow: none rgba(184, 18, 55, 0.25);
 }
 .is-small.textarea, .is-small.input {
   border-radius: 2px;
@@ -4251,16 +4251,16 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   box-shadow: none rgba(184, 80, 0, 0.25);
 }
 .select.is-danger:not(:hover)::after {
-  border-color: #e8113c;
+  border-color: #b81237;
 }
 .select.is-danger select {
-  border-color: #e8113c;
+  border-color: #b81237;
 }
 .select.is-danger select:hover, .select.is-danger select.is-hovered {
-  border-color: #d00f36;
+  border-color: #a11030;
 }
 .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active {
-  box-shadow: none rgba(232, 17, 60, 0.25);
+  box-shadow: none rgba(184, 18, 55, 0.25);
 }
 .select.is-small {
   border-radius: 2px;
@@ -4486,22 +4486,22 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .file.is-danger .file-cta {
-  background-color: #e8113c;
+  background-color: #b81237;
   border-color: transparent;
   color: #fff;
 }
 .file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta {
-  background-color: #dc1039;
+  background-color: #ac1134;
   border-color: transparent;
   color: #fff;
 }
 .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta {
   border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(232, 17, 60, 0.25);
+  box-shadow: 0 0 0.5em rgba(184, 18, 55, 0.25);
   color: #fff;
 }
 .file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta {
-  background-color: #d00f36;
+  background-color: #a11030;
   border-color: transparent;
   color: #fff;
 }
@@ -4716,7 +4716,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #b85000;
 }
 .help.is-danger {
-  color: #e8113c;
+  color: #b81237;
 }
 
 .field:not(:last-child) {
@@ -5907,12 +5907,12 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #eb6600;
 }
 .button.is-danger {
-  background-color: #e8113c;
+  background-color: #b81237;
   border-color: transparent;
   color: #fff;
 }
 .button.is-danger:hover, .button.is-danger.is-hovered {
-  background-color: #dc1039;
+  background-color: #ac1134;
   border-color: transparent;
   color: #fff;
 }
@@ -5921,21 +5921,21 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) {
-  box-shadow: 0 0 rgba(232, 17, 60, 0.25);
+  box-shadow: 0 0 rgba(184, 18, 55, 0.25);
 }
 .button.is-danger:active, .button.is-danger.is-active {
-  background-color: #d00f36;
+  background-color: #a11030;
   border-color: transparent;
   color: #fff;
 }
 .button.is-danger[disabled], fieldset[disabled] .button.is-danger {
-  background-color: #e8113c;
-  border-color: #e8113c;
+  background-color: #b81237;
+  border-color: #b81237;
   box-shadow: none;
 }
 .button.is-danger.is-inverted {
   background-color: #fff;
-  color: #e8113c;
+  color: #b81237;
 }
 .button.is-danger.is-inverted:hover, .button.is-danger.is-inverted.is-hovered {
   background-color: #f2f2f2;
@@ -5944,32 +5944,32 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   background-color: #fff;
   border-color: transparent;
   box-shadow: none;
-  color: #e8113c;
+  color: #b81237;
 }
 .button.is-danger.is-loading::after {
   border-color: transparent transparent #fff #fff !important;
 }
 .button.is-danger.is-outlined {
   background-color: transparent;
-  border-color: #e8113c;
-  color: #e8113c;
+  border-color: #b81237;
+  color: #b81237;
 }
 .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined.is-hovered, .button.is-danger.is-outlined:focus, .button.is-danger.is-outlined.is-focused {
-  background-color: #e8113c;
-  border-color: #e8113c;
+  background-color: #b81237;
+  border-color: #b81237;
   color: #fff;
 }
 .button.is-danger.is-outlined.is-loading::after {
-  border-color: transparent transparent #e8113c #e8113c !important;
+  border-color: transparent transparent #b81237 #b81237 !important;
 }
 .button.is-danger.is-outlined.is-loading:hover::after, .button.is-danger.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-outlined.is-loading:focus::after, .button.is-danger.is-outlined.is-loading.is-focused::after {
   border-color: transparent transparent #fff #fff !important;
 }
 .button.is-danger.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-outlined {
   background-color: transparent;
-  border-color: #e8113c;
+  border-color: #b81237;
   box-shadow: none;
-  color: #e8113c;
+  color: #b81237;
 }
 .button.is-danger.is-inverted.is-outlined {
   background-color: transparent;
@@ -5978,10 +5978,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
 }
 .button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined.is-hovered, .button.is-danger.is-inverted.is-outlined:focus, .button.is-danger.is-inverted.is-outlined.is-focused {
   background-color: #fff;
-  color: #e8113c;
+  color: #b81237;
 }
 .button.is-danger.is-inverted.is-outlined.is-loading:hover::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-inverted.is-outlined.is-loading:focus::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after {
-  border-color: transparent transparent #e8113c #e8113c !important;
+  border-color: transparent transparent #b81237 #b81237 !important;
 }
 .button.is-danger.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
   background-color: transparent;
@@ -5990,18 +5990,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-danger.is-light {
-  background-color: #feecf0;
-  color: #df103a;
+  background-color: #fdecf0;
+  color: #e81745;
 }
 .button.is-danger.is-light:hover, .button.is-danger.is-light.is-hovered {
-  background-color: #fde0e6;
+  background-color: #fce1e7;
   border-color: transparent;
-  color: #df103a;
+  color: #e81745;
 }
 .button.is-danger.is-light:active, .button.is-danger.is-light.is-active {
-  background-color: #fcd4dc;
+  background-color: #fbd5de;
   border-color: transparent;
-  color: #df103a;
+  color: #e81745;
 }
 .button.is-small {
   font-size: 0.75rem;
@@ -6374,12 +6374,12 @@ div.icon-text {
   color: #eb6600;
 }
 .notification.is-danger {
-  background-color: #e8113c;
+  background-color: #b81237;
   color: #fff;
 }
 .notification.is-danger.is-light {
-  background-color: #feecf0;
-  color: #df103a;
+  background-color: #fdecf0;
+  color: #e81745;
 }
 
 .content li + li {
@@ -7166,7 +7166,7 @@ button.dropdown-item.is-active {
   background-color: #b85000;
 }
 .steps .step-item.is-danger::before {
-  background: linear-gradient(to left, hsl(0, 0%, 86%) 50%, #e8113c 50%);
+  background: linear-gradient(to left, hsl(0, 0%, 86%) 50%, #b81237 50%);
   background-size: 200% 100%;
   background-position: right bottom;
 }
@@ -7175,15 +7175,15 @@ button.dropdown-item.is-active {
 }
 .steps .step-item.is-danger.is-active .step-marker {
   background-color: hsl(0, 0%, 100%);
-  border-color: #e8113c;
-  color: #e8113c;
+  border-color: #b81237;
+  color: #b81237;
 }
 .steps .step-item.is-danger.is-completed::before {
   background-position: left bottom;
 }
 .steps .step-item.is-danger.is-completed .step-marker {
   color: #fff;
-  background-color: #e8113c;
+  background-color: #b81237;
 }
 .steps .steps-content {
   align-items: stretch;
@@ -7847,23 +7847,23 @@ input[type=range].slider.is-warning .has-output-tooltip + output {
   color: #fff;
 }
 input[type=range].slider.is-danger::-moz-range-track {
-  background: #e8113c !important;
+  background: #b81237 !important;
 }
 input[type=range].slider.is-danger::-webkit-slider-runnable-track {
-  background: #e8113c !important;
+  background: #b81237 !important;
 }
 input[type=range].slider.is-danger::-ms-track {
-  background: #e8113c !important;
+  background: #b81237 !important;
 }
 input[type=range].slider.is-danger::-ms-fill-lower {
-  background: #e8113c;
+  background: #b81237;
 }
 input[type=range].slider.is-danger::-ms-fill-upper {
-  background: #e8113c;
+  background: #b81237;
 }
 input[type=range].slider.is-danger.has-output + output,
 input[type=range].slider.is-danger .has-output-tooltip + output {
-  background-color: #e8113c;
+  background-color: #b81237;
   color: #fff;
 }
 
@@ -7916,7 +7916,7 @@ button on-loading {
 }
 
 .modal {
-  z-index: 100000;
+  z-index: 400;
 }
 @media only screen and (max-width: 769px) {
   .modal {
@@ -8148,6 +8148,7 @@ button on-loading {
   justify-content: center;
   background: hsl(0, 0%, 100%);
   padding: 1.5rem;
+  min-height: 0%;
 }
 
 .ob-annotation__content {
@@ -8203,11 +8204,264 @@ button on-loading {
 }
 
 .ob-cropper__container {
+  --rc-drag-handle-size: 12px;
+  --rc-drag-handle-mobile-size: 24px;
+  --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);
+  --rc-drag-bar-size: 6px;
+  --rc-border-color: rgba(255, 255, 255, 0.7);
+  --rc-focus-color: #0088ff;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
+@keyframes marching-ants {
+  0% {
+    background-position: 0 0, 0 100%, 0 0, 100% 0;
+  }
+  100% {
+    background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
+  }
+}
+.ob-cropper__container :root {
+  --rc-drag-handle-size: 12px;
+  --rc-drag-handle-mobile-size: 24px;
+  --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);
+  --rc-drag-bar-size: 6px;
+  --rc-border-color: rgba(255, 255, 255, 0.7);
+  --rc-focus-color: #0088ff;
+}
+.ob-cropper__container .ReactCrop {
+  position: relative;
+  display: inline-block;
+  cursor: crosshair;
+  max-width: 100%;
+}
+.ob-cropper__container .ReactCrop *, .ob-cropper__container .ReactCrop *::before, .ob-cropper__container .ReactCrop *::after {
+  box-sizing: border-box;
+}
+.ob-cropper__container .ReactCrop--disabled, .ob-cropper__container .ReactCrop--locked {
+  cursor: inherit;
+}
+.ob-cropper__container .ReactCrop__child-wrapper {
+  overflow: hidden;
+  max-height: inherit;
+}
+.ob-cropper__container .ReactCrop__child-wrapper > img, .ob-cropper__container .ReactCrop__child-wrapper > video {
+  display: block;
+  max-width: 100%;
+  max-height: inherit;
+}
+.ob-cropper__container .ReactCrop:not(.ob-cropper__container .ReactCrop--disabled) .ob-cropper__container .ReactCrop__child-wrapper > img, .ob-cropper__container .ReactCrop:not(.ob-cropper__container .ReactCrop--disabled) .ob-cropper__container .ReactCrop__child-wrapper > video {
+  touch-action: none;
+}
+.ob-cropper__container .ReactCrop:not(.ob-cropper__container .ReactCrop--disabled) .ob-cropper__container .ReactCrop__crop-selection {
+  touch-action: none;
+}
+.ob-cropper__container .ReactCrop__crop-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  width: calc(100% + 0.5px);
+  height: calc(100% + 0.5px);
+}
+.ob-cropper__container .ReactCrop__crop-selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate3d(0, 0, 0);
+  cursor: move;
+}
+.ReactCrop--disabled .ob-cropper__container .ReactCrop__crop-selection {
+  cursor: inherit;
+}
+.ReactCrop--circular-crop .ob-cropper__container .ReactCrop__crop-selection {
+  border-radius: 50%;
+}
+.ReactCrop--circular-crop .ob-cropper__container .ReactCrop__crop-selection::after {
+  pointer-events: none;
+  content: "";
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border: 1px solid var(--rc-border-color);
+  opacity: 0.3;
+}
+.ReactCrop--no-animate .ob-cropper__container .ReactCrop__crop-selection {
+  outline: 1px dashed white;
+}
+.ob-cropper__container .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ob-cropper__container .ReactCrop__crop-selection) {
+  animation: marching-ants 1s;
+  background-image: linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%);
+  background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
+  background-position: 0 0, 0 100%, 0 0, 100% 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  color: #fff;
+  animation-play-state: running;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.ob-cropper__container .ReactCrop__crop-selection:focus {
+  outline: 2px solid var(--rc-focus-color);
+  outline-offset: -1px;
+}
+.ob-cropper__container .ReactCrop--invisible-crop .ob-cropper__container .ReactCrop__crop-mask, .ob-cropper__container .ReactCrop--invisible-crop .ob-cropper__container .ReactCrop__crop-selection {
+  display: none;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-vt::before, .ob-cropper__container .ReactCrop__rule-of-thirds-vt::after, .ob-cropper__container .ReactCrop__rule-of-thirds-hz::before, .ob-cropper__container .ReactCrop__rule-of-thirds-hz::after {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-vt::before, .ob-cropper__container .ReactCrop__rule-of-thirds-vt::after {
+  width: 1px;
+  height: 100%;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-vt::before {
+  left: 33.3333%;
+  left: 33.3333333333%;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-vt::after {
+  left: 66.6666%;
+  left: 66.6666666667%;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-hz::before, .ob-cropper__container .ReactCrop__rule-of-thirds-hz::after {
+  width: 100%;
+  height: 1px;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-hz::before {
+  top: 33.3333%;
+  top: 33.3333333333%;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-hz::after {
+  top: 66.6666%;
+  top: 66.6666666667%;
+}
+.ob-cropper__container .ReactCrop__drag-handle {
+  position: absolute;
+  width: var(--rc-drag-handle-size);
+  height: var(--rc-drag-handle-size);
+  background-color: var(--rc-drag-handle-bg-colour);
+  border: 1px solid var(--rc-border-color);
+}
+.ob-cropper__container .ReactCrop__drag-handle:focus {
+  background: var(--rc-focus-color);
+}
+.ob-cropper__container .ReactCrop .ord-nw {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  cursor: nw-resize;
+}
+.ob-cropper__container .ReactCrop .ord-n {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: n-resize;
+}
+.ob-cropper__container .ReactCrop .ord-ne {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  cursor: ne-resize;
+}
+.ob-cropper__container .ReactCrop .ord-e {
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%);
+  cursor: e-resize;
+}
+.ob-cropper__container .ReactCrop .ord-se {
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+  cursor: se-resize;
+}
+.ob-cropper__container .ReactCrop .ord-s {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  cursor: s-resize;
+}
+.ob-cropper__container .ReactCrop .ord-sw {
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+  cursor: sw-resize;
+}
+.ob-cropper__container .ReactCrop .ord-w {
+  top: 50%;
+  left: 0;
+  transform: translate(-50%, -50%);
+  cursor: w-resize;
+}
+.ob-cropper__container .ReactCrop__disabled .ob-cropper__container .ReactCrop__drag-handle {
+  cursor: inherit;
+}
+.ob-cropper__container .ReactCrop__drag-bar {
+  position: absolute;
+}
+.ob-cropper__container .ReactCrop__drag-bar.ord-n {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--rc-drag-bar-size);
+  transform: translateY(-50%);
+}
+.ob-cropper__container .ReactCrop__drag-bar.ord-e {
+  right: 0;
+  top: 0;
+  width: var(--rc-drag-bar-size);
+  height: 100%;
+  transform: translateX(50%);
+}
+.ob-cropper__container .ReactCrop__drag-bar.ord-s {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--rc-drag-bar-size);
+  transform: translateY(50%);
+}
+.ob-cropper__container .ReactCrop__drag-bar.ord-w {
+  top: 0;
+  left: 0;
+  width: var(--rc-drag-bar-size);
+  height: 100%;
+  transform: translateX(-50%);
+}
+.ob-cropper__container .ReactCrop--new-crop .ob-cropper__container .ReactCrop__drag-bar, .ob-cropper__container .ReactCrop--new-crop .ob-cropper__container .ReactCrop__drag-handle, .ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-bar {
+  display: none;
+}
+.ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-handle.ord-n, .ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-handle.ord-e, .ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-handle.ord-s, .ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-handle.ord-w {
+  display: none;
+}
+@media (pointer: coarse) {
+  .ob-cropper__container .ReactCrop .ord-n,
+  .ob-cropper__container .ReactCrop .ord-e,
+  .ob-cropper__container .ReactCrop .ord-s,
+  .ob-cropper__container .ReactCrop .ord-w {
+    display: none;
+  }
+  .ob-cropper__container .ReactCrop__drag-handle {
+    width: var(--rc-drag-handle-mobile-size);
+    height: var(--rc-drag-handle-mobile-size);
+  }
+}
+.ob-cropper__container .ob-cropper__cropper-full-height {
+  height: 100%;
+}
+.ob-cropper__container .ob-cropper__cropper .ReactCrop__child-wrapper {
+  height: 100%;
+}
+.ob-cropper__container .ob-cropper__cropper .ReactCrop__child-wrapper .ob-cropper__image {
+  max-height: 100%;
+}
 
 .ob-quill-content > * {
   cursor: text;
@@ -9319,7 +9573,7 @@ textarea:disabled {
   border-left-color: #b85000;
 }
 .has-thick-border-left.is-danger-thick-border-left {
-  border-left-color: #e8113c;
+  border-left-color: #b81237;
 }
 
 .ob-border-radius {
@@ -9949,7 +10203,7 @@ textarea:disabled {
   border-radius: 8px;
   max-height: 350px;
   overflow-y: auto;
-  border-color: #e8113c;
+  border-color: #b81237;
   border-width: 2px;
   border-style: solid;
   animation: pulse-animation 1.5s infinite;
@@ -9969,7 +10223,7 @@ textarea:disabled {
 }
 
 .ob-validation-notification-card.is-contracted {
-  background-color: #e8113c;
+  background-color: #b81237;
   color: hsl(0, 0%, 100%);
 }
 

package/dist/styles.scss

@@ -10,13 +10,15 @@ $primary: #407e8c;
 $warning: #b85000;
 $info: #2d7ab9;
 $success: $green;
-$danger: #e8113c;
+$danger: #b81237;
 //bulma grey is #7A7A7A which is slightly too light
 $grey: #757575;
 
 $button-focus-color: inherit;
 $button-focus-border-color: inherit;
 $button-focus-box-shadow-size: 0 0;
+// 3:1 contrast ratio with white background
+$input-border-color: #949494;
 
 // Elevations for Box Shadows
 $elevation-1:
@@ -146,6 +148,3 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/nsw-point-address.scss';
 @import './styles/nsw-point-cadastral-parcel.scss';
 @import './styles/downloadable-files.scss';
-//
-// Third Party
-//

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "8.11.2",
+  "version": "8.12.0-beta.10",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@nylas/react": "^1.3.1",
-    "@oneblink/sdk-core": "^8.8.1-beta.3",
+    "@oneblink/sdk-core": "^8.9.0-beta.2",
     "@react-google-maps/api": "2.19.2",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.4",
@@ -32,8 +32,8 @@
     "morph-expressions": "^1.1.1",
     "qrcode.react": "^4.1.0",
     "query-string": "^8.1.0",
-    "react-easy-crop": "^5.5.0",
     "react-google-recaptcha": "^3.1.0",
+    "react-image-crop": "^11.0.10",
     "react-input-mask": "^2.0.4",
     "react-signature-canvas": "^1.0.6",
     "react-table": "^7.8.0",