@xapp/form-widget 1.84.3 → 1.85.0

package/dist/services/index.d.ts

@@ -0,0 +1 @@
+export { EventTrackingService } from './EventTrackingService';

package/dist/xapp-form-widget.css

@@ -67,8 +67,14 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   flex-wrap: wrap;
   justify-items: stretch;
   overflow: hidden;
+  border-radius: var(--xapp-form-widget-border-radius-lg, 16px);
+  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
+  transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
   background-color: #fff;
 }
+.Card-module_xapp_search_card__9iVCv:hover {
+  box-shadow: var(--xapp-form-widget-box-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
+}
 .Card-module_xapp_search_card__featured__CX-L0 {
   flex: 1 1 240px;
   margin: 12px;
@@ -273,15 +279,30 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   font-family: var(--xapp-form-widget-chips-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
   padding: 8px 16px !important;
   height: 32px !important;
-  border-radius: 16px !important;
+  border-radius: var(--xapp-form-widget-border-radius-lg, 16px) !important;
   min-width: 130px !important;
   background-color: var(--xapp-form-widget-chips-background-color, #c4dced) !important;
   color: var(--xapp-form-widget-chips-color, #000000) !important;
-  transition: background-color 0.3s ease;
+  cursor: pointer;
+  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out !important;
 }
 .FormFieldChips-module_xapp_checkbox_chip__8DRkb .MuiChip-label {
   font-family: var(--xapp-form-widget-chips-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
 }
+.FormFieldChips-module_xapp_checkbox_chip__8DRkb:hover {
+  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
+  transform: translateY(-1px);
+}
+.FormFieldChips-module_xapp_checkbox_chip__8DRkb:active {
+  transform: scale(0.98) !important;
+}
+.FormFieldChips-module_xapp_checkbox_chip__8DRkb:focus {
+  outline: none;
+}
+.FormFieldChips-module_xapp_checkbox_chip__8DRkb:focus-visible {
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
+  outline-offset: 0px;
+}
 @media (max-width: 640px) {
   .FormFieldChips-module_xapp_checkbox_chip__8DRkb {
     min-width: 100px !important;
@@ -295,6 +316,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 .FormFieldChips-module_xapp_chip_clicked__S8xmo {
   background-color: var(--xapp-form-widget-chips-background-color-selected, var(--xapp-form-widget-chips-background-color-dark, #6e7ae1)) !important;
   color: var(--xapp-form-widget-chips-color-selected, #ffffff) !important;
+  box-shadow: 0 2px 8px rgba(110, 122, 225, 0.3) !important;
 }
 
 .FormFieldChips-module_xapp_chips_container__ZITF5 {
@@ -315,10 +337,6 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   }
 }
 
-.FormFieldChips-module_xapp_checkbox_chip__8DRkb:hover {
-  --xapp-form-chip-bg-color: calc(var(--xapp-form-chip-bg-color) + 20);
-}
-
 .FormFieldChips-module_xapp_chips_title_container__VGw77 {
   margin: inherit;
 }
@@ -343,6 +361,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   font-size: 12px;
   color: #666;
   font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
+  transition: color 200ms ease-in-out;
 }
 .FormFieldTextInput-module_xapp_text_input_counter--limit__59Lau {
   color: #d32f2f;
@@ -353,6 +372,8 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   padding: 21px 12px 4px 12px !important;
   border: 0 !important;
   background-color: var(--xapp-form-widget-text-background-color, rgba(0, 0, 0, 0.06)) !important;
+  border-radius: var(--xapp-form-widget-border-radius-sm, 8px) !important;
+  transition: background-color 200ms ease-in-out, outline 200ms ease-in-out !important;
   color: #061739 !important;
   font-size: var(--xapp-form-widget-text-font-size, 1rem) !important;
   font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
@@ -362,9 +383,12 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 }
 .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-input:focus {
   background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54)) !important;
+  outline-offset: -2px !important;
 }
 .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiTextField-root {
   background-color: var(--xapp-form-widget-text-background-color, rgba(0, 0, 0, 0.06)) !important;
+  border-radius: var(--xapp-form-widget-border-radius-sm, 8px);
 }
 .FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiTextField-root .MuiInputLabel-root.MuiInputLabel-multiline {
   top: 8px;
@@ -457,20 +481,26 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 }
 .FormFieldTextInputAddress-module_xapp_text_input_address_container__title__IbovL p {
   margin: 0;
+  font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
 }
 
 .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input {
   padding: 21px 12px 4px 12px !important;
   border: 0 !important;
   background-color: var(--xapp-form-widget-text-background-color, rgba(0, 0, 0, 0.06)) !important;
+  border-radius: var(--xapp-form-widget-border-radius-sm, 8px) !important;
+  transition: background-color 200ms ease-in-out, outline 200ms ease-in-out !important;
   color: #061739 !important;
   font-size: var(--xapp-form-widget-text-font-size, 1rem) !important;
+  font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
 }
 .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input:hover {
   background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
 }
 .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input:focus {
   background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54)) !important;
+  outline-offset: -2px !important;
 }
 .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root {
   padding-top: 0 !important;
@@ -512,6 +542,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 .FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-popupIndicator {
   color: rgba(0, 0, 0, 0.54) !important;
   background-color: transparent !important;
+  transition: background-color 200ms ease-in-out !important;
 }
 .FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-clearIndicator:hover,
 .FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-popupIndicator:hover {
@@ -536,6 +567,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   font-size: 1.2em !important;
   padding: 12px 32px !important;
   min-width: 200px !important;
+  border-radius: var(--xapp-form-widget-border-radius-md, 12px) !important;
 }
 
 .FormStepDisplay-module_xapp_form_nav_buttons__lI4BI {
@@ -551,25 +583,50 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 .FormStepDisplay-module_xapp_primary_button__d2wra {
   background-color: var(--xapp-form-widget-primary-button-color, #ea6539) !important;
   font-family: inherit !important;
+  border-radius: var(--xapp-form-widget-border-radius-md, 12px) !important;
+  transition: box-shadow 200ms ease-in-out, transform 150ms ease-in-out, opacity 200ms ease-in-out !important;
 }
 .FormStepDisplay-module_xapp_primary_button__d2wra:hover {
-  filter: brightness(80%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+  opacity: 0.9 !important;
+}
+.FormStepDisplay-module_xapp_primary_button__d2wra:active {
+  transform: scale(0.98) !important;
+}
+.FormStepDisplay-module_xapp_primary_button__d2wra:focus {
+  outline: none;
+}
+.FormStepDisplay-module_xapp_primary_button__d2wra:focus-visible {
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
+  outline-offset: 0px;
 }
 
 .FormStepDisplay-module_xapp_secondary_button__LuMfN {
   background-color: var(--xapp-form-widget-secondary-button-color, #d24cc7) !important;
   font-family: inherit !important;
+  border-radius: var(--xapp-form-widget-border-radius-md, 12px) !important;
+  transition: box-shadow 200ms ease-in-out, transform 150ms ease-in-out, opacity 200ms ease-in-out !important;
 }
 .FormStepDisplay-module_xapp_secondary_button__LuMfN:hover {
-  filter: brightness(80%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+  opacity: 0.9 !important;
+}
+.FormStepDisplay-module_xapp_secondary_button__LuMfN:active {
+  transform: scale(0.98) !important;
+}
+.FormStepDisplay-module_xapp_secondary_button__LuMfN:focus {
+  outline: none;
+}
+.FormStepDisplay-module_xapp_secondary_button__LuMfN:focus-visible {
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
+  outline-offset: 0px;
 }
 
 .FormStepDisplay-module_xapp_disabled_button__RjSfL {
   background-color: rgba(121, 117, 133, 0.5) !important;
   font-family: inherit !important;
-}
-.FormStepDisplay-module_xapp_disabled_button__RjSfL:hover {
-  filter: brightness(80%) !important;
+  border-radius: var(--xapp-form-widget-border-radius-md, 12px) !important;
+  cursor: not-allowed !important;
 }
 .SimpleNavigationHeader-module_xapp_navigation_header__YhCD1 {
   background-color: inherit !important;
@@ -650,7 +707,7 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 }
 .Button-module_xapp_search_btn__cQf3T {
   display: inline-block;
-  border-radius: 12px;
+  border-radius: var(--xapp-form-widget-border-radius-md, 12px);
   border: solid 1px #d3d3df;
   background: white;
   padding: 4px 24px;
@@ -662,13 +719,28 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
   font-size: 16px;
   cursor: pointer;
+  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out;
+}
+.Button-module_xapp_search_btn__cQf3T:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
+}
+.Button-module_xapp_search_btn__cQf3T:active {
+  transform: scale(0.98);
+}
+.Button-module_xapp_search_btn__cQf3T:focus {
+  outline: none;
+}
+.Button-module_xapp_search_btn__cQf3T:focus-visible {
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
+  outline-offset: 0px;
 }
 .Button-module_xapp_search_btn__expand__dUwot {
   width: 100%;
 }
 .SuggestedAction-module_xapp_search_suggested_action__gbLCz {
   display: inline-block;
-  border-radius: 12px;
+  border-radius: var(--xapp-form-widget-border-radius-md, 12px);
   border: solid 1px var(--xapp-form-widget-border-color, var(--xapp-form-accent-color, #d3d3df));
   background: white;
   padding: 4px 24px;
@@ -680,6 +752,21 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
   font-size: 16px;
   cursor: pointer;
+  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out;
+}
+.SuggestedAction-module_xapp_search_suggested_action__gbLCz:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
+}
+.SuggestedAction-module_xapp_search_suggested_action__gbLCz:active {
+  transform: scale(0.98);
+}
+.SuggestedAction-module_xapp_search_suggested_action__gbLCz:focus {
+  outline: none;
+}
+.SuggestedAction-module_xapp_search_suggested_action__gbLCz:focus-visible {
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
+  outline-offset: 0px;
 }
 .SuggestedActions-module_xapp_search_suggested_actions__actions__Apv0- {
   margin-top: 8px;
@@ -710,10 +797,11 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   flex-direction: column;
   border: solid 1px #d3d3df;
   background: var(--xapp-form-widget-background-color, #f3f8fb);
-  border-radius: 17.5px;
+  border-radius: var(--xapp-form-widget-border-radius-xl, 20px);
   overflow: hidden;
   max-width: 740px;
   max-height: 100%;
+  box-shadow: var(--xapp-form-widget-box-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
   box-sizing: border-box;
   position: relative;
 }
@@ -737,23 +825,37 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
 }
 .FormWidget-module_xapp_form_widget__close__0lp0O {
   position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 24px;
-  height: 24px;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #dadad9;
+  color: #666;
   cursor: pointer;
   font-weight: bold;
-  border: 1px solid;
-  background: inherit;
+  border: none;
+  background: rgba(255, 255, 255, 0.9);
   z-index: 1000;
+  transition: background-color 200ms ease-in-out, transform 150ms ease-in-out, box-shadow 200ms ease-in-out;
+  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
 }
 .FormWidget-module_xapp_form_widget__close__0lp0O:hover {
-  background-color: #a0a1c5;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transform: scale(1.05);
+}
+.FormWidget-module_xapp_form_widget__close__0lp0O:active {
+  transform: scale(0.95);
+}
+.FormWidget-module_xapp_form_widget__close__0lp0O:focus {
+  outline: none;
+}
+.FormWidget-module_xapp_form_widget__close__0lp0O:focus-visible {
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
+  outline-offset: 0px;
 }
 
 @media (min-width: 1201px) {
@@ -806,9 +908,22 @@ body.ModalDialog-module_xapp_search_opened__jgDSX {
   font-family: var(--xapp-form-widget-side-button-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
   top: var(--xapp-form-widget-side-button-top, 50%);
   min-height: var(--xapp-form-widget-side-button-min-length, 200px);
+  box-shadow: var(--xapp-form-widget-box-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
+  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out;
 }
 .SideButton-module_xapp_form_sticky_button__YqORL:hover {
   background-color: var(--xapp-form-widget-side-button-background-color-dark, darkred);
+  box-shadow: var(--xapp-form-widget-box-shadow-hover, 0 6px 32px rgba(0, 0, 0, 0.16));
+}
+.SideButton-module_xapp_form_sticky_button__YqORL:active {
+  transform: translateY(-50%) scale(0.98);
+}
+.SideButton-module_xapp_form_sticky_button__YqORL:focus {
+  outline: none;
+}
+.SideButton-module_xapp_form_sticky_button__YqORL:focus-visible {
+  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
+  outline-offset: 0px;
 }
 .SideButton-module_xapp_form_sticky_button__YqORL.SideButton-module_left__GT6z8 {
   left: 0;