npm - @telefonica/mistica - Versions diffs - 17.8.0 → 17.10.0 - Mend

@telefonica/mistica 17.8.0 → 17.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (302) hide show

package/css/blau.css +50 -0
package/css/community/cyber.css +89 -23
package/css/esimflag.css +50 -0
package/css/mistica-common.css +10 -0
package/css/mistica.css +1 -1
package/css/movistar.css +50 -0
package/css/o2.css +51 -0
package/css/telefonica.css +60 -8
package/css/vivo-evolution.css +60 -2
package/css/vivo.css +50 -0
package/dist/accordion.css-mistica.js +8 -8
package/dist/accordion.js +67 -74
package/dist/align.css-mistica.js +1 -1
package/dist/autocomplete.css-mistica.js +4 -4
package/dist/avatar.css-mistica.js +3 -3
package/dist/badge.css-mistica.js +3 -3
package/dist/box.css-mistica.js +13 -13
package/dist/boxed.css-mistica.js +24 -24
package/dist/boxed.d.ts +2 -2
package/dist/boxed.js +27 -27
package/dist/button-group.css-mistica.js +3 -3
package/dist/button-layout.css-mistica.js +15 -15
package/dist/button.css-mistica.js +64 -64
package/dist/callout.css-mistica.js +11 -11
package/dist/card-internal.css-mistica.js +34 -34
package/dist/carousel.css-mistica.js +35 -35
package/dist/checkbox.css-mistica.js +15 -15
package/dist/chip.css-mistica.js +20 -20
package/dist/circle.css-mistica.js +1 -1
package/dist/community/advanced-data-card.css-mistica.js +18 -18
package/dist/community/ai-card.css-mistica.js +13 -13
package/dist/community/blocks.css-mistica.js +3 -3
package/dist/community/cyber/example-component.css-mistica.js +1 -1
package/dist/community/example-component.css-mistica.js +2 -2
package/dist/community/skins/cyber-skin.js +68 -4
package/dist/counter.css-mistica.js +7 -7
package/dist/cover-hero.css-mistica.js +13 -13
package/dist/credit-card-number-field.css-mistica.js +5 -5
package/dist/date-field.css-mistica.js +1 -1
package/dist/date-time-picker.css-mistica.js +1 -1
package/dist/dialog.css-mistica.js +8 -8
package/dist/divider.css-mistica.js +5 -5
package/dist/double-field.css-mistica.js +4 -4
package/dist/drawer.css-mistica.js +10 -10
package/dist/empty-state-card.css-mistica.js +1 -1
package/dist/empty-state.css-mistica.js +12 -12
package/dist/fade-in.css-mistica.js +1 -1
package/dist/fade-out.css-mistica.js +1 -1
package/dist/feedback.css-mistica.js +3 -3
package/dist/feedback.js +123 -123
package/dist/file-upload.css-mistica.js +12 -12
package/dist/fixed-footer-layout.css-mistica.js +5 -5
package/dist/form.css-mistica.js +1 -1
package/dist/grid-layout.css-mistica.js +3 -3
package/dist/grid.css-mistica.js +120 -120
package/dist/header.css-mistica.js +1 -1
package/dist/hero.css-mistica.js +9 -9
package/dist/horizontal-scroll.css-mistica.js +1 -1
package/dist/icon-button.css-mistica.js +58 -58
package/dist/icons/icon-chevron.css-mistica.js +2 -2
package/dist/icons/icon-error.css-mistica.js +1 -1
package/dist/icons/icon-error.js +51 -31
package/dist/icons/icon-info.js +42 -10
package/dist/icons/icon-stepper-success-vivo.d.ts +7 -0
package/dist/icons/icon-stepper-success-vivo.js +78 -0
package/dist/icons/icon-success-vivo-new.d.ts +1 -0
package/dist/icons/icon-success-vivo.d.ts +1 -0
package/dist/icons/icon-success.js +137 -58
package/dist/image.css-mistica.js +6 -6
package/dist/index.d.ts +4 -0
package/dist/index.js +4 -0
package/dist/inline.css-mistica.js +11 -11
package/dist/list.css-mistica.js +49 -37
package/dist/list.css.d.ts +4 -0
package/dist/list.js +167 -160
package/dist/loading-bar.css-mistica.js +1 -1
package/dist/loading-screen.css-mistica.js +9 -9
package/dist/logo.css-mistica.js +5 -5
package/dist/menu.css-mistica.js +12 -12
package/dist/message.css-mistica.js +172 -0
package/dist/message.css.d.ts +40 -0
package/dist/message.d.ts +48 -0
package/dist/message.js +389 -0
package/dist/mosaic.css-mistica.js +1 -1
package/dist/navigation-bar.css-mistica.js +20 -20
package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
package/dist/navigation-shared.css-mistica.js +18 -18
package/dist/package-version.js +1 -1
package/dist/pagination.css-mistica.js +30 -29
package/dist/pagination.css.d.ts +1 -2
package/dist/pagination.d.ts +0 -16
package/dist/pagination.js +108 -115
package/dist/pin-field.css-mistica.js +8 -8
package/dist/popover.css-mistica.js +1 -1
package/dist/progress-bar.css-mistica.js +7 -7
package/dist/radio-button.css-mistica.js +32 -32
package/dist/rating.css-mistica.js +4 -4
package/dist/responsive-layout.css-mistica.js +6 -6
package/dist/screen-reader-only.css-mistica.js +1 -1
package/dist/select.css-mistica.js +22 -22
package/dist/sheet-action-row.css-mistica.js +2 -2
package/dist/sheet-common.css-mistica.js +9 -9
package/dist/sheet-info.css-mistica.js +3 -3
package/dist/sidenav-bar-layout.css-mistica.js +2 -2
package/dist/sidenav-bar.css-mistica.js +107 -107
package/dist/skeletons.css-mistica.js +10 -10
package/dist/skins/blau.js +52 -0
package/dist/skins/defaults.js +32 -0
package/dist/skins/esimflag.js +52 -0
package/dist/skins/movistar.js +52 -0
package/dist/skins/o2.d.ts +1 -0
package/dist/skins/o2.js +53 -0
package/dist/skins/skin-contract.css-mistica.js +775 -741
package/dist/skins/skin-contract.css.d.ts +34 -0
package/dist/skins/telefonica.js +60 -8
package/dist/skins/types/colors.d.ts +10 -0
package/dist/skins/types/index.d.ts +3 -0
package/dist/skins/vivo-evolution.js +54 -2
package/dist/skins/vivo.js +52 -0
package/dist/skip-link.css-mistica.js +2 -2
package/dist/slider.css-mistica.js +27 -27
package/dist/snackbar.css-mistica.js +17 -17
package/dist/spinner.css-mistica.js +5 -5
package/dist/square.css-mistica.js +1 -1
package/dist/stack.css-mistica.js +5 -5
package/dist/stacking-group.css-mistica.js +2 -2
package/dist/stepper.css-mistica.js +10 -10
package/dist/stepper.js +31 -25
package/dist/switch-component.css-mistica.js +39 -39
package/dist/table.css-mistica.js +9 -9
package/dist/tabs.css-mistica.js +19 -19
package/dist/tag.css-mistica.js +1 -1
package/dist/text-field-base.css-mistica.js +26 -26
package/dist/text-field-components.css-mistica.js +12 -12
package/dist/text-link.css-mistica.js +6 -6
package/dist/text-tokens.d.ts +2 -0
package/dist/text-tokens.js +46 -30
package/dist/text.css-mistica.js +6 -6
package/dist/timeline.css-mistica.js +13 -13
package/dist/timer.css-mistica.js +8 -8
package/dist/tooltip.css-mistica.js +3 -3
package/dist/tooltip.js +88 -88
package/dist/touchable.css-mistica.js +5 -5
package/dist/utils/aspect-ratio-support.css-mistica.js +4 -4
package/dist/video.css-mistica.js +2 -2
package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
package/dist-es/accordion.css-mistica.js +7 -7
package/dist-es/accordion.js +104 -111
package/dist-es/align.css-mistica.js +1 -1
package/dist-es/autocomplete.css-mistica.js +2 -2
package/dist-es/avatar.css-mistica.js +2 -2
package/dist-es/badge.css-mistica.js +2 -2
package/dist-es/box.css-mistica.js +13 -13
package/dist-es/boxed.css-mistica.js +23 -23
package/dist-es/boxed.js +34 -34
package/dist-es/button-group.css-mistica.js +2 -2
package/dist-es/button-layout.css-mistica.js +15 -15
package/dist-es/button.css-mistica.js +43 -43
package/dist-es/callout.css-mistica.js +11 -11
package/dist-es/card-internal.css-mistica.js +23 -23
package/dist-es/carousel.css-mistica.js +10 -10
package/dist-es/checkbox.css-mistica.js +13 -13
package/dist-es/chip.css-mistica.js +17 -17
package/dist-es/circle.css-mistica.js +1 -1
package/dist-es/community/advanced-data-card.css-mistica.js +9 -9
package/dist-es/community/ai-card.css-mistica.js +4 -4
package/dist-es/community/blocks.css-mistica.js +2 -2
package/dist-es/community/cyber/example-component.css-mistica.js +1 -1
package/dist-es/community/example-component.css-mistica.js +2 -2
package/dist-es/community/skins/cyber-skin.js +68 -4
package/dist-es/counter.css-mistica.js +2 -2
package/dist-es/cover-hero.css-mistica.js +3 -3
package/dist-es/credit-card-number-field.css-mistica.js +4 -4
package/dist-es/date-field.css-mistica.js +1 -1
package/dist-es/date-time-picker.css-mistica.js +1 -1
package/dist-es/dialog.css-mistica.js +5 -5
package/dist-es/divider.css-mistica.js +5 -5
package/dist-es/double-field.css-mistica.js +4 -4
package/dist-es/drawer.css-mistica.js +2 -2
package/dist-es/empty-state-card.css-mistica.js +1 -1
package/dist-es/empty-state.css-mistica.js +7 -7
package/dist-es/fade-in.css-mistica.js +1 -1
package/dist-es/fade-out.css-mistica.js +1 -1
package/dist-es/feedback.css-mistica.js +2 -2
package/dist-es/feedback.js +158 -158
package/dist-es/file-upload.css-mistica.js +8 -8
package/dist-es/fixed-footer-layout.css-mistica.js +3 -3
package/dist-es/form.css-mistica.js +1 -1
package/dist-es/grid-layout.css-mistica.js +3 -3
package/dist-es/grid.css-mistica.js +120 -120
package/dist-es/header.css-mistica.js +1 -1
package/dist-es/hero.css-mistica.js +3 -3
package/dist-es/horizontal-scroll.css-mistica.js +1 -1
package/dist-es/icon-button.css-mistica.js +56 -56
package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
package/dist-es/icons/icon-error.css-mistica.js +1 -1
package/dist-es/icons/icon-error.js +55 -35
package/dist-es/icons/icon-info.js +53 -21
package/dist-es/icons/icon-stepper-success-vivo.js +69 -0
package/dist-es/icons/icon-success.js +112 -74
package/dist-es/image.css-mistica.js +3 -3
package/dist-es/index.js +2355 -2354
package/dist-es/inline.css-mistica.js +11 -11
package/dist-es/list.css-mistica.js +8 -8
package/dist-es/list.js +230 -223
package/dist-es/loading-bar.css-mistica.js +1 -1
package/dist-es/loading-screen.css-mistica.js +5 -5
package/dist-es/logo.css-mistica.js +5 -5
package/dist-es/menu.css-mistica.js +12 -12
package/dist-es/message.css-mistica.js +41 -0
package/dist-es/message.js +334 -0
package/dist-es/mosaic.css-mistica.js +1 -1
package/dist-es/navigation-bar.css-mistica.js +10 -10
package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
package/dist-es/navigation-shared.css-mistica.js +10 -10
package/dist-es/package-version.js +1 -1
package/dist-es/pagination.css-mistica.js +23 -19
package/dist-es/pagination.js +137 -141
package/dist-es/pin-field.css-mistica.js +2 -2
package/dist-es/popover.css-mistica.js +1 -1
package/dist-es/progress-bar.css-mistica.js +7 -7
package/dist-es/radio-button.css-mistica.js +24 -24
package/dist-es/rating.css-mistica.js +4 -4
package/dist-es/responsive-layout.css-mistica.js +6 -6
package/dist-es/screen-reader-only.css-mistica.js +1 -1
package/dist-es/select.css-mistica.js +18 -18
package/dist-es/sheet-action-row.css-mistica.js +2 -2
package/dist-es/sheet-common.css-mistica.js +2 -2
package/dist-es/sheet-info.css-mistica.js +2 -2
package/dist-es/sidenav-bar-layout.css-mistica.js +2 -2
package/dist-es/sidenav-bar.css-mistica.js +72 -72
package/dist-es/skeletons.css-mistica.js +7 -7
package/dist-es/skins/blau.js +52 -0
package/dist-es/skins/defaults.js +32 -0
package/dist-es/skins/esimflag.js +52 -0
package/dist-es/skins/movistar.js +52 -0
package/dist-es/skins/o2.js +53 -0
package/dist-es/skins/skin-contract.css-mistica.js +775 -741
package/dist-es/skins/telefonica.js +60 -8
package/dist-es/skins/vivo-evolution.js +54 -2
package/dist-es/skins/vivo.js +52 -0
package/dist-es/skip-link.css-mistica.js +2 -2
package/dist-es/slider.css-mistica.js +20 -20
package/dist-es/snackbar.css-mistica.js +5 -5
package/dist-es/spinner.css-mistica.js +2 -2
package/dist-es/square.css-mistica.js +1 -1
package/dist-es/stack.css-mistica.js +5 -5
package/dist-es/stacking-group.css-mistica.js +2 -2
package/dist-es/stepper.css-mistica.js +4 -4
package/dist-es/stepper.js +60 -54
package/dist-es/style.css +1 -1
package/dist-es/switch-component.css-mistica.js +37 -37
package/dist-es/table.css-mistica.js +9 -9
package/dist-es/tabs.css-mistica.js +18 -18
package/dist-es/tag.css-mistica.js +1 -1
package/dist-es/text-field-base.css-mistica.js +17 -17
package/dist-es/text-field-components.css-mistica.js +4 -4
package/dist-es/text-link.css-mistica.js +6 -6
package/dist-es/text-tokens.js +26 -16
package/dist-es/text.css-mistica.js +6 -6
package/dist-es/timeline.css-mistica.js +10 -10
package/dist-es/timer.css-mistica.js +7 -7
package/dist-es/tooltip.css-mistica.js +2 -2
package/dist-es/tooltip.js +109 -109
package/dist-es/touchable.css-mistica.js +2 -2
package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
package/dist-es/video.css-mistica.js +2 -2
package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
package/doc/layout.md +30 -0
package/package.json +1 -1
package/src/accordion.tsx +1 -21
package/src/boxed.tsx +6 -2
package/src/community/skins/cyber-skin.tsx +41 -4
package/src/feedback.tsx +36 -29
package/src/icons/icon-error.tsx +17 -1
package/src/icons/icon-info.tsx +22 -1
package/src/icons/icon-stepper-success-vivo.tsx +58 -0
package/src/icons/icon-success-vivo-new.tsx +1 -0
package/src/icons/icon-success-vivo.tsx +1 -0
package/src/icons/icon-success.tsx +56 -37
package/src/index.tsx +4 -0
package/src/list.css.ts +20 -0
package/src/list.tsx +9 -3
package/src/message.css.ts +148 -0
package/src/message.tsx +303 -0
package/src/package-version.tsx +1 -1
package/src/pagination.css.ts +15 -18
package/src/pagination.tsx +100 -102
package/src/skins/blau.tsx +31 -0
package/src/skins/defaults.tsx +11 -0
package/src/skins/esimflag.tsx +31 -0
package/src/skins/movistar.tsx +31 -0
package/src/skins/o2.tsx +32 -0
package/src/skins/skin-contract.css.ts +13 -0
package/src/skins/telefonica.tsx +39 -8
package/src/skins/types/colors.tsx +10 -0
package/src/skins/types/index.tsx +3 -0
package/src/skins/vivo-evolution.tsx +33 -2
package/src/skins/vivo.tsx +31 -0
package/src/stepper.tsx +16 -6
package/src/text-tokens.tsx +14 -0
package/src/tooltip.tsx +5 -2

package/css/movistar.css CHANGED Viewed

@@ -102,6 +102,16 @@
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-raw-white), 0.17);
     --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-raw-movistarBlack), 0.2);
     --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-raw-movistarBlack), 0.4);
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-movistar-blueLight);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-movistar-blueLight);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-movistar-blueLight);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-movistar-blueLight);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-movistar-blueLight);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-movistar-grey100);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-movistar-white);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-movistar-white);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-movistar-white);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-movistar-white);
     --mistica-color-skeletonWave: var(--mistica-movistar-grey200);
     --mistica-color-borderLow: var(--mistica-movistar-grey100);
     --mistica-color-border: var(--mistica-movistar-grey300);
@@ -448,6 +458,12 @@
     --mistica-font-size-headerPretitle: 1rem;
     --mistica-line-height-headerPretitle: 1.375rem;
     --mistica-font-weight-headerPretitle: 400;
+    --mistica-font-size-feedbackScreenTitle: 1.5rem;
+    --mistica-line-height-feedbackScreenTitle: 1.75rem;
+    --mistica-font-weight-feedbackScreenTitle: 700;
+    --mistica-font-size-feedbackScreenDescription: 1rem;
+    --mistica-line-height-feedbackScreenDescription: 1.375rem;
+    --mistica-font-weight-feedbackScreenDescription: 400;
     --mistica-font-size-cardPretitleSnap: 0.875rem;
     --mistica-line-height-cardPretitleSnap: 1.25rem;
     --mistica-font-size-cardTitleSnap: 0.875rem;
@@ -533,6 +549,16 @@
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-raw-white), 0.05);
     --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-raw-white), 0.03);
     --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-raw-white), 0.05);
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-movistar-blueDark);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-movistar-blueDark);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-movistar-blueDark);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-movistar-blueDark);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-movistar-blueDark);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-movistar-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-movistar-darkModeGrey);
     --mistica-color-skeletonWave: var(--mistica-movistar-grey600);
     --mistica-color-borderLow: var(--mistica-movistar-darkModeBlack);
     --mistica-color-border: var(--mistica-movistar-darkModeGrey);
@@ -867,6 +893,16 @@
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-raw-white), 0.05);
         --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-raw-white), 0.03);
         --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-raw-white), 0.05);
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-movistar-blueDark);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-movistar-blueDark);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-movistar-blueDark);
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-movistar-blueDark);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-movistar-blueDark);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-movistar-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-movistar-darkModeGrey);
         --mistica-color-skeletonWave: var(--mistica-movistar-grey600);
         --mistica-color-borderLow: var(--mistica-movistar-darkModeBlack);
         --mistica-color-border: var(--mistica-movistar-darkModeGrey);
@@ -1203,6 +1239,16 @@
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-movistar-raw-white), 0.17);
         --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-movistar-raw-movistarBlack), 0.2);
         --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-movistar-raw-movistarBlack), 0.4);
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-movistar-blueLight);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-movistar-blueLight);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-movistar-blueLight);
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-movistar-blueLight);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-movistar-blueLight);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-movistar-grey100);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-movistar-white);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-movistar-white);
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-movistar-white);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-movistar-white);
         --mistica-color-skeletonWave: var(--mistica-movistar-grey200);
         --mistica-color-borderLow: var(--mistica-movistar-grey100);
         --mistica-color-border: var(--mistica-movistar-grey300);
@@ -1526,6 +1572,10 @@
         --mistica-line-height-chipLabelSmall: 1.375rem;
         --mistica-font-size-headerPretitle: 1.125rem;
         --mistica-line-height-headerPretitle: 1.5rem;
+        --mistica-font-size-feedbackScreenTitle: 1.75rem;
+        --mistica-line-height-feedbackScreenTitle: 2rem;
+        --mistica-font-size-feedbackScreenDescription: 1.125rem;
+        --mistica-line-height-feedbackScreenDescription: 1.5rem;
         --mistica-font-size-cardPretitleSnap: 0.875rem;
         --mistica-line-height-cardPretitleSnap: 1.25rem;
         --mistica-font-size-cardTitleSnap: 0.875rem;

package/css/o2.css CHANGED Viewed

@@ -14,6 +14,7 @@
     --mistica-o2-o2Red10: #ffeeee;
     --mistica-o2-beyondBlue70: #0038b2;
     --mistica-o2-grey30: #d9d9dd;
+    --mistica-o2-beyondBlue5: #f2f6ff;
     --mistica-o2-grey80: #3c3c46;
     --mistica-o2-o2Red60: #cc4848;
     --mistica-o2-o2Red65: #bf4444;
@@ -111,6 +112,16 @@
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-raw-white), 0.17);
     --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-raw-beyondBlue90), 0.2);
     --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-raw-beyondBlue90), 0.4);
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-o2-beyondBlue5);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-o2-beyondBlue5);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-o2-beyondBlue5);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-o2-beyondBlue5);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-o2-beyondBlue5);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-o2-grey20);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-o2-white);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-o2-white);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-o2-white);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-o2-white);
     --mistica-color-skeletonWave: var(--mistica-o2-grey30);
     --mistica-color-borderLow: var(--mistica-o2-grey20);
     --mistica-color-border: var(--mistica-o2-grey30);
@@ -457,6 +468,12 @@
     --mistica-font-size-headerPretitle: 1rem;
     --mistica-line-height-headerPretitle: 1.5rem;
     --mistica-font-weight-headerPretitle: 400;
+    --mistica-font-size-feedbackScreenTitle: 1.5rem;
+    --mistica-line-height-feedbackScreenTitle: 2rem;
+    --mistica-font-weight-feedbackScreenTitle: 700;
+    --mistica-font-size-feedbackScreenDescription: 1rem;
+    --mistica-line-height-feedbackScreenDescription: 1.5rem;
+    --mistica-font-weight-feedbackScreenDescription: 400;
     --mistica-font-size-cardPretitleSnap: 0.875rem;
     --mistica-line-height-cardPretitleSnap: 1.25rem;
     --mistica-font-size-cardTitleSnap: 0.875rem;
@@ -529,6 +546,16 @@
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-raw-white), 0.05);
     --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-raw-white), 0.03);
     --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-raw-white), 0.05);
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-o2-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-o2-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-o2-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-o2-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-o2-darkModeGrey);
     --mistica-color-navigationBarBackground: var(--mistica-o2-darkModeBlack);
     --mistica-color-skeletonWave: var(--mistica-o2-grey80);
     --mistica-color-borderLow: var(--mistica-o2-darkModeBlack);
@@ -845,6 +872,16 @@
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-raw-white), 0.05);
         --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-raw-white), 0.03);
         --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-raw-white), 0.05);
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-o2-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-o2-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-o2-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-o2-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-o2-darkModeGrey);
         --mistica-color-navigationBarBackground: var(--mistica-o2-darkModeBlack);
         --mistica-color-skeletonWave: var(--mistica-o2-grey80);
         --mistica-color-borderLow: var(--mistica-o2-darkModeBlack);
@@ -1170,6 +1207,16 @@
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-o2-raw-white), 0.17);
         --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-o2-raw-beyondBlue90), 0.2);
         --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-o2-raw-beyondBlue90), 0.4);
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-o2-beyondBlue5);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-o2-beyondBlue5);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-o2-beyondBlue5);
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-o2-beyondBlue5);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-o2-beyondBlue5);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-o2-grey20);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-o2-white);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-o2-white);
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-o2-white);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-o2-white);
         --mistica-color-navigationBarBackground: var(--mistica-o2-darkBlue);
         --mistica-color-skeletonWave: var(--mistica-o2-grey30);
         --mistica-color-borderLow: var(--mistica-o2-grey20);
@@ -1488,6 +1535,10 @@
         --mistica-line-height-chipLabelSmall: 1.25rem;
         --mistica-font-size-headerPretitle: 1.125rem;
         --mistica-line-height-headerPretitle: 1.5rem;
+        --mistica-font-size-feedbackScreenTitle: 2rem;
+        --mistica-line-height-feedbackScreenTitle: 2.5rem;
+        --mistica-font-size-feedbackScreenDescription: 1.125rem;
+        --mistica-line-height-feedbackScreenDescription: 1.5rem;
         --mistica-font-size-cardPretitleSnap: 1rem;
         --mistica-line-height-cardPretitleSnap: 1.5rem;
         --mistica-font-size-cardTitleSnap: 1rem;

package/css/telefonica.css CHANGED Viewed

@@ -112,6 +112,16 @@
         var(--mistica-telefonica-raw-telefonicaBlue80),
         0.4
     );
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-telefonica-telefonicaBlue10);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-telefonica-grey1);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-telefonica-white);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-telefonica-white);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-telefonica-white);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-telefonica-white);
     --mistica-color-skeletonWave: var(--mistica-telefonica-grey2);
     --mistica-color-borderLow: var(--mistica-telefonica-grey1);
     --mistica-color-border: var(--mistica-telefonica-grey2);
@@ -386,18 +396,18 @@
     /* Border radius */
     --mistica-border-radius-avatar: 50%;
-    --mistica-border-radius-bar: 0px;
+    --mistica-border-radius-bar: 999px;
     --mistica-border-radius-button: 32px;
-    --mistica-border-radius-checkbox: 2px;
-    --mistica-border-radius-container: 4px;
+    --mistica-border-radius-checkbox: 4px;
+    --mistica-border-radius-container: 20px;
     --mistica-border-radius-indicator: 24px;
     --mistica-border-radius-chip: 24px;
     --mistica-border-radius-tag: 24px;
-    --mistica-border-radius-input: 8px;
-    --mistica-border-radius-popup: 4px;
-    --mistica-border-radius-sheet: 0px;
-    --mistica-border-radius-mediaSmall: 2px;
-    --mistica-border-radius-snackbar: 4px;
+    --mistica-border-radius-input: 12px;
+    --mistica-border-radius-popup: 12px;
+    --mistica-border-radius-sheet: 20px;
+    --mistica-border-radius-mediaSmall: 12px;
+    --mistica-border-radius-snackbar: 12px;
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -461,6 +471,12 @@
     --mistica-font-size-headerPretitle: 1rem;
     --mistica-line-height-headerPretitle: 1.5rem;
     --mistica-font-weight-headerPretitle: 400;
+    --mistica-font-size-feedbackScreenTitle: 1.5rem;
+    --mistica-line-height-feedbackScreenTitle: 2rem;
+    --mistica-font-weight-feedbackScreenTitle: 400;
+    --mistica-font-size-feedbackScreenDescription: 1rem;
+    --mistica-line-height-feedbackScreenDescription: 1.5rem;
+    --mistica-font-weight-feedbackScreenDescription: 400;
     --mistica-font-size-cardPretitleSnap: 0.875rem;
     --mistica-line-height-cardPretitleSnap: 1.25rem;
     --mistica-font-size-cardTitleSnap: 0.875rem;
@@ -552,6 +568,16 @@
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
     --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
     --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-telefonica-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-telefonica-darkModeGrey);
     --mistica-color-skeletonWave: var(--mistica-telefonica-grey8);
     --mistica-color-borderLow: var(--mistica-telefonica-darkModeBlack);
     --mistica-color-border: var(--mistica-telefonica-darkModeGrey);
@@ -916,6 +942,16 @@
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
         --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-telefonica-raw-white), 0.03);
         --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-telefonica-raw-white), 0.05);
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-telefonica-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-telefonica-darkModeGrey);
         --mistica-color-skeletonWave: var(--mistica-telefonica-grey8);
         --mistica-color-borderLow: var(--mistica-telefonica-darkModeBlack);
         --mistica-color-border: var(--mistica-telefonica-darkModeGrey);
@@ -1300,6 +1336,18 @@
             var(--mistica-telefonica-raw-telefonicaBlue80),
             0.4
         );
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(
+            --mistica-telefonica-telefonicaBlue10
+        );
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-telefonica-telefonicaBlue10);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-telefonica-grey1);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-telefonica-white);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-telefonica-white);
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-telefonica-white);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-telefonica-white);
         --mistica-color-skeletonWave: var(--mistica-telefonica-grey2);
         --mistica-color-borderLow: var(--mistica-telefonica-grey1);
         --mistica-color-border: var(--mistica-telefonica-grey2);
@@ -1635,6 +1683,10 @@
         --mistica-line-height-chipLabelSmall: 1.25rem;
         --mistica-font-size-headerPretitle: 1.125rem;
         --mistica-line-height-headerPretitle: 1.5rem;
+        --mistica-font-size-feedbackScreenTitle: 2rem;
+        --mistica-line-height-feedbackScreenTitle: 2.5rem;
+        --mistica-font-size-feedbackScreenDescription: 1.125rem;
+        --mistica-line-height-feedbackScreenDescription: 1.5rem;
         --mistica-font-size-cardPretitleSnap: 1rem;
         --mistica-line-height-cardPretitleSnap: 1.5rem;
         --mistica-font-size-cardTitleSnap: 1rem;

package/css/vivo-evolution.css CHANGED Viewed

@@ -126,6 +126,16 @@
         var(--mistica-vivo-evolution-raw-vivoPurple900),
         0.5
     );
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-vivo-evolution-vivoNeutral25);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-vivo-evolution-vivoNeutral25);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-vivo-evolution-vivoNeutral25);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-vivo-evolution-vivoNeutral25);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-vivo-evolution-vivoNeutral25);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-vivo-evolution-vivoNeutral25);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-vivo-evolution-vivoNeutral0);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-vivo-evolution-vivoNeutral0);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-vivo-evolution-vivoNeutral0);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-vivo-evolution-vivoNeutral0);
     --mistica-color-skeletonWave: var(--mistica-vivo-evolution-vivoNeutral100);
     --mistica-color-borderLow: var(--mistica-vivo-evolution-vivoNeutral25);
     --mistica-color-border: var(--mistica-vivo-evolution-vivoNeutral200);
@@ -520,9 +530,15 @@
     --mistica-font-size-headerPretitle: 0.875rem;
     --mistica-line-height-headerPretitle: 1.25rem;
     --mistica-font-weight-headerPretitle: 400;
+    --mistica-font-size-feedbackScreenTitle: 1.25rem;
+    --mistica-line-height-feedbackScreenTitle: 1.5rem;
+    --mistica-font-weight-feedbackScreenTitle: 500;
+    --mistica-font-size-feedbackScreenDescription: 0.875rem;
+    --mistica-line-height-feedbackScreenDescription: 1.25rem;
+    --mistica-font-weight-feedbackScreenDescription: 400;
     --mistica-font-size-cardPretitleSnap: 0.75rem;
     --mistica-line-height-cardPretitleSnap: 1.25rem;
-    --mistica-font-size-cardTitleSnap: 1rem;
+    --mistica-font-size-cardTitleSnap: 0.875rem;
     --mistica-line-height-cardTitleSnap: 1.25rem;
     --mistica-font-size-cardSubtitleSnap: 0.75rem;
     --mistica-line-height-cardSubtitleSnap: 1.25rem;
@@ -530,7 +546,7 @@
     --mistica-line-height-cardDescriptionSnap: 1.25rem;
     --mistica-font-size-cardPretitleDefault: 0.875rem;
     --mistica-line-height-cardPretitleDefault: 1.25rem;
-    --mistica-font-size-cardTitleDefault: 1.125rem;
+    --mistica-font-size-cardTitleDefault: 1rem;
     --mistica-line-height-cardTitleDefault: 1.5rem;
     --mistica-font-size-cardSubtitleDefault: 0.875rem;
     --mistica-line-height-cardSubtitleDefault: 1.25rem;
@@ -619,6 +635,16 @@
         var(--mistica-vivo-evolution-raw-vivoNeutral0),
         0.05
     );
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-vivo-evolution-vivoNeutral900);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-vivo-evolution-vivoNeutral900);
     --mistica-color-skeletonWave: var(--mistica-vivo-evolution-vivoNeutral600);
     --mistica-color-borderLow: var(--mistica-vivo-evolution-vivoNeutral950);
     --mistica-color-border: var(--mistica-vivo-evolution-vivoNeutral900);
@@ -1060,6 +1086,20 @@
             var(--mistica-vivo-evolution-raw-vivoNeutral0),
             0.05
         );
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-vivo-evolution-vivoNeutral900);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-vivo-evolution-vivoNeutral900);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(
+            --mistica-vivo-evolution-vivoNeutral900
+        );
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-vivo-evolution-vivoNeutral900);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-vivo-evolution-vivoNeutral900);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-vivo-evolution-vivoNeutral900);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-vivo-evolution-vivoNeutral900);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(
+            --mistica-vivo-evolution-vivoNeutral900
+        );
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-vivo-evolution-vivoNeutral900);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-vivo-evolution-vivoNeutral900);
         --mistica-color-skeletonWave: var(--mistica-vivo-evolution-vivoNeutral600);
         --mistica-color-borderLow: var(--mistica-vivo-evolution-vivoNeutral950);
         --mistica-color-border: var(--mistica-vivo-evolution-vivoNeutral900);
@@ -1518,6 +1558,20 @@
             var(--mistica-vivo-evolution-raw-vivoPurple900),
             0.5
         );
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-vivo-evolution-vivoNeutral25);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-vivo-evolution-vivoNeutral25);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(
+            --mistica-vivo-evolution-vivoNeutral25
+        );
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-vivo-evolution-vivoNeutral25);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-vivo-evolution-vivoNeutral25);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-vivo-evolution-vivoNeutral25);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-vivo-evolution-vivoNeutral0);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(
+            --mistica-vivo-evolution-vivoNeutral0
+        );
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-vivo-evolution-vivoNeutral0);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-vivo-evolution-vivoNeutral0);
         --mistica-color-skeletonWave: var(--mistica-vivo-evolution-vivoNeutral100);
         --mistica-color-borderLow: var(--mistica-vivo-evolution-vivoNeutral25);
         --mistica-color-border: var(--mistica-vivo-evolution-vivoNeutral200);
@@ -1892,6 +1946,10 @@
         --mistica-line-height-chipLabelSmall: 1.5rem;
         --mistica-font-size-headerPretitle: 1rem;
         --mistica-line-height-headerPretitle: 1.5rem;
+        --mistica-font-size-feedbackScreenTitle: 1.75rem;
+        --mistica-line-height-feedbackScreenTitle: 2rem;
+        --mistica-font-size-feedbackScreenDescription: 1rem;
+        --mistica-line-height-feedbackScreenDescription: 1.5rem;
         --mistica-font-size-cardPretitleSnap: 0.875rem;
         --mistica-line-height-cardPretitleSnap: 1.5rem;
         --mistica-font-size-cardTitleSnap: 1.125rem;

package/css/vivo.css CHANGED Viewed

@@ -92,6 +92,16 @@
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.17);
     --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
     --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-vivo-grey1);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-vivo-grey1);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-vivo-grey1);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-vivo-grey1);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-vivo-grey1);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-vivo-grey1);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-vivo-white);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-vivo-white);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-vivo-white);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-vivo-white);
     --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
     --mistica-color-borderLow: var(--mistica-vivo-grey1);
     --mistica-color-border: var(--mistica-vivo-grey3);
@@ -438,6 +448,12 @@
     --mistica-font-size-headerPretitle: 1rem;
     --mistica-line-height-headerPretitle: 1.5rem;
     --mistica-font-weight-headerPretitle: 400;
+    --mistica-font-size-feedbackScreenTitle: 1.5rem;
+    --mistica-line-height-feedbackScreenTitle: 2rem;
+    --mistica-font-weight-feedbackScreenTitle: 500;
+    --mistica-font-size-feedbackScreenDescription: 1rem;
+    --mistica-line-height-feedbackScreenDescription: 1.5rem;
+    --mistica-font-weight-feedbackScreenDescription: 400;
     --mistica-font-size-cardPretitleSnap: 0.875rem;
     --mistica-line-height-cardPretitleSnap: 1.25rem;
     --mistica-font-size-cardTitleSnap: 0.875rem;
@@ -511,6 +527,16 @@
     --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
     --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-white), 0.03);
     --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
+    --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-vivo-darkModeGrey);
     --mistica-color-skeletonWave: var(--mistica-vivo-grey5);
     --mistica-color-borderLow: var(--mistica-vivo-darkModeBlack);
     --mistica-color-border: var(--mistica-vivo-darkModeGrey);
@@ -833,6 +859,16 @@
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
         --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-white), 0.03);
         --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-white), 0.05);
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-vivo-darkModeGrey);
         --mistica-color-skeletonWave: var(--mistica-vivo-grey5);
         --mistica-color-borderLow: var(--mistica-vivo-darkModeBlack);
         --mistica-color-border: var(--mistica-vivo-darkModeGrey);
@@ -1148,6 +1184,16 @@
         --mistica-color-backgroundDropZoneNegativeDragover: rgba(var(--mistica-vivo-raw-white), 0.17);
         --mistica-color-backgroundDropZoneMediaHover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.3);
         --mistica-color-backgroundDropZoneMediaDragover: rgba(var(--mistica-vivo-raw-vivoPurpleDark), 0.5);
+        --mistica-color-messageBubbleBackgroundOutgoing: var(--mistica-vivo-grey1);
+        --mistica-color-messageBubbleBackgroundOutgoingBrand: var(--mistica-vivo-grey1);
+        --mistica-color-messageBubbleBackgroundOutgoingAlternative: var(--mistica-vivo-grey1);
+        --mistica-color-messageBubbleBackgroundOutgoingNegative: var(--mistica-vivo-grey1);
+        --mistica-color-messageBubbleBackgroundOutgoingMedia: var(--mistica-vivo-grey1);
+        --mistica-color-messageBubbleBackgroundIncoming: var(--mistica-vivo-grey1);
+        --mistica-color-messageBubbleBackgroundIncomingBrand: var(--mistica-vivo-white);
+        --mistica-color-messageBubbleBackgroundIncomingAlternative: var(--mistica-vivo-white);
+        --mistica-color-messageBubbleBackgroundIncomingNegative: var(--mistica-vivo-white);
+        --mistica-color-messageBubbleBackgroundIncomingMedia: var(--mistica-vivo-white);
         --mistica-color-skeletonWave: var(--mistica-vivo-grey2);
         --mistica-color-borderLow: var(--mistica-vivo-grey1);
         --mistica-color-border: var(--mistica-vivo-grey3);
@@ -1465,6 +1511,10 @@
         --mistica-line-height-chipLabelSmall: 1.5rem;
         --mistica-font-size-headerPretitle: 1.125rem;
         --mistica-line-height-headerPretitle: 1.5rem;
+        --mistica-font-size-feedbackScreenTitle: 2rem;
+        --mistica-line-height-feedbackScreenTitle: 2.5rem;
+        --mistica-font-size-feedbackScreenDescription: 1.125rem;
+        --mistica-line-height-feedbackScreenDescription: 1.5rem;
         --mistica-font-size-cardPretitleSnap: 1rem;
         --mistica-line-height-cardPretitleSnap: 1.5rem;
         --mistica-font-size-cardTitleSnap: 1rem;

package/dist/accordion.css-mistica.js CHANGED Viewed

@@ -25,13 +25,13 @@ _export(exports, {
         return n;
     },
     get panel () {
-        return x;
+        return i;
     },
     get panelContainer () {
         return o;
     },
     get panelTransitionClasses () {
-        return i;
+        return x;
     },
     get rightContentContainer () {
         return e;
@@ -43,9 +43,9 @@ _export(exports, {
         return a;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var n = "v17_8_8s3szx0 v17_8_1y2v1nfh7 v17_8_1y2v1nfig v17_8_1y2v1nfjp v17_8_1y2v1nfky v17_8_1y2v1nfs1 v17_8_1y2v1nftw v17_8_1y2v1nfh6 v17_8_1y2v1nfrg v17_8_1y2v1nfsi", s = "v17_8_8s3szx1", r = "v17_8_8s3szx2", a = "v17_8_8s3szx3", e = "v17_8_8s3szx4", t = "v17_8_8s3szx5", o = "v17_8_8s3szx6", i = {
-    enter: "v17_8_8s3szx7",
-    enterActive: "v17_8_8s3szx8",
-    exit: "v17_8_8s3szx9",
-    exitActive: "v17_8_8s3szxa"
-}, x = "v17_8_8s3szxb", z = "v17_8_8s3szxc v17_8_1y2v1nfs1", c = "v17_8_8s3szxd";
+/* empty css                                     */ /* empty css                                     */ var n = "v17_10_8s3szx0 v17_10_1y2v1nfhr v17_10_1y2v1nfj0 v17_10_1y2v1nfk9 v17_10_1y2v1nfli v17_10_1y2v1nfsl v17_10_1y2v1nfug v17_10_1y2v1nfhq v17_10_1y2v1nfs0 v17_10_1y2v1nft2", s = "v17_10_8s3szx1", r = "v17_10_8s3szx2", a = "v17_10_8s3szx3", e = "v17_10_8s3szx4", t = "v17_10_8s3szx5", o = "v17_10_8s3szx6", x = {
+    enter: "v17_10_8s3szx7",
+    enterActive: "v17_10_8s3szx8",
+    exit: "v17_10_8s3szx9",
+    exitActive: "v17_10_8s3szxa"
+}, i = "v17_10_8s3szxb", z = "v17_10_8s3szxc v17_10_1y2v1nfsl", c = "v17_10_8s3szxd";