@telefonica/mistica 17.8.0 → 17.10.0

package/dist-es/sidenav-bar.css-mistica.js

@@ -1,74 +1,74 @@
-/* empty css                                     */ /* empty css                                       */ var i = 240, v = 72, n = 32, a = "var(--v17_8_e1inx40)", r = "var(--v17_8_e1inx41)", t = 350, x = 400, o = "var(--v17_8_e1inx42)", l = "var(--v17_8_e1inx43)", d = "v17_8_e1inx44", c = "v17_8_e1inx46 v17_8_e1inx45 v17_8_1y2v1nfre v17_8_1y2v1nfrj", s = "v17_8_e1inx48 v17_8_e1inx47 v17_8_1y2v1nfre v17_8_1y2v1nfrk", m = {
-    default: "v17_8_e1inx49",
-    brand: "v17_8_e1inx4a",
-    alternative: "v17_8_e1inx4b",
-    negative: "v17_8_e1inx4c",
-    media: "v17_8_e1inx4d"
+/* empty css                                     */ /* empty css                                       */ var i = 240, v = 72, n = 32, a = "var(--v17_10_e1inx40)", r = "var(--v17_10_e1inx41)", t = 350, x = 400, o = "var(--v17_10_e1inx42)", l = "var(--v17_10_e1inx43)", d = "v17_10_e1inx44", s = "v17_10_e1inx46 v17_10_e1inx45 v17_10_1y2v1nfry v17_10_1y2v1nfs3", c = "v17_10_e1inx48 v17_10_e1inx47 v17_10_1y2v1nfry v17_10_1y2v1nfs4", m = {
+    default: "v17_10_e1inx49",
+    brand: "v17_10_e1inx4a",
+    alternative: "v17_10_e1inx4b",
+    negative: "v17_10_e1inx4c",
+    media: "v17_10_e1inx4d"
 }, b = {
-    default: "v17_8_e1inx4e",
-    brand: "v17_8_e1inx4f",
-    alternative: "v17_8_e1inx4g",
-    negative: "v17_8_e1inx4h",
-    media: "v17_8_e1inx4i"
-}, u = "v17_8_e1inx4j", h = "v17_8_e1inx4k", p = "v17_8_e1inx4l", C = "v17_8_e1inx4m", g = "v17_8_e1inx4n", f = "v17_8_e1inx4o", T = "v17_8_e1inx4p", S = "v17_8_e1inx4q", D = "v17_8_e1inx4r", A = "v17_8_e1inx4s", L = "v17_8_e1inx4t", y = "v17_8_e1inx4u", V = "v17_8_e1inx4v", P = "v17_8_e1inx4w", R = "v17_8_e1inx4x", W = "v17_8_e1inx4y", B = "v17_8_e1inx4z", w = "v17_8_e1inx410", O = "v17_8_e1inx411", k = {
-    default: "v17_8_e1inx412",
-    brand: "v17_8_e1inx413",
-    alternative: "v17_8_e1inx414",
-    negative: "v17_8_e1inx415",
-    media: "v17_8_e1inx416"
-}, I = "v17_8_e1inx417", E = "v17_8_e1inx418", F = "v17_8_e1inx419", N = "v17_8_e1inx41a", j = "v17_8_e1inx41b", z = "v17_8_e1inx41c", q = {
-    default: "v17_8_e1inx41d",
-    brand: "v17_8_e1inx41e",
-    alternative: "v17_8_e1inx41f",
-    negative: "v17_8_e1inx41g",
-    media: "v17_8_e1inx41h"
-}, H = "v17_8_e1inx41i", M = "v17_8_e1inx41j", U = "v17_8_e1inx41k", K = "v17_8_e1inx41l", G = "v17_8_e1inx41m v17_8_e1inx41l", Z = "v17_8_e1inx41o v17_8_e1inx41n", J = "v17_8_e1inx41p v17_8_e1inx41n", Q = "v17_8_e1inx41q", X = "v17_8_e1inx41r", Y = {
-    default: "v17_8_e1inx41s",
-    brand: "v17_8_e1inx41t",
-    alternative: "v17_8_e1inx41u",
-    negative: "v17_8_e1inx41v",
-    media: "v17_8_e1inx41w"
-}, $ = "v17_8_e1inx41x", ee = {
-    default: "v17_8_e1inx41y",
-    brand: "v17_8_e1inx41z",
-    alternative: "v17_8_e1inx420",
-    negative: "v17_8_e1inx421",
-    media: "v17_8_e1inx422"
-}, _e = "v17_8_e1inx423", ie = {
-    default: "v17_8_e1inx424",
-    brand: "v17_8_e1inx425",
-    alternative: "v17_8_e1inx426",
-    negative: "v17_8_e1inx427",
-    media: "v17_8_e1inx428"
-}, ve = "v17_8_e1inx429", ne = {
-    default: "v17_8_e1inx42a",
-    brand: "v17_8_e1inx42b",
-    alternative: "v17_8_e1inx42c",
-    negative: "v17_8_e1inx42d",
-    media: "v17_8_e1inx42e"
-}, ae = "v17_8_e1inx42f", re = "v17_8_e1inx42g", te = "v17_8_e1inx42h", xe = "v17_8_e1inx42i", oe = "v17_8_e1inx42j", le = "v17_8_e1inx42k", de = "v17_8_e1inx42l", ce = "v17_8_e1inx42m", se = "v17_8_e1inx42n", me = "v17_8_e1inx42o", be = {
-    default: "v17_8_e1inx42p",
-    brand: "v17_8_e1inx42q",
-    alternative: "v17_8_e1inx42r",
-    negative: "v17_8_e1inx42s",
-    media: "v17_8_e1inx42t"
-}, ue = "v17_8_e1inx42u", he = {
-    enter: "v17_8_e1inx42v",
-    enterActive: "v17_8_e1inx42w",
-    exit: "v17_8_e1inx42x",
-    exitActive: "v17_8_e1inx42y"
-}, pe = "v17_8_e1inx42z", Ce = "v17_8_e1inx430", ge = "v17_8_e1inx431", fe = "v17_8_e1inx432", Te = "v17_8_e1inx433", Se = "v17_8_e1inx434", De = {
-    appear: "v17_8_e1inx435",
-    appearActive: "v17_8_e1inx436",
-    enter: "v17_8_e1inx435",
-    enterActive: "v17_8_e1inx436",
-    exit: "v17_8_e1inx437",
-    exitActive: "v17_8_e1inx438"
-}, Ae = "v17_8_e1inx439", Le = "v17_8_e1inx43a", ye = {
-    default: "v17_8_e1inx43b",
-    brand: "v17_8_e1inx43c",
-    alternative: "v17_8_e1inx43d",
-    negative: "v17_8_e1inx43e",
-    media: "v17_8_e1inx43f"
+    default: "v17_10_e1inx4e",
+    brand: "v17_10_e1inx4f",
+    alternative: "v17_10_e1inx4g",
+    negative: "v17_10_e1inx4h",
+    media: "v17_10_e1inx4i"
+}, u = "v17_10_e1inx4j", h = "v17_10_e1inx4k", p = "v17_10_e1inx4l", C = "v17_10_e1inx4m", g = "v17_10_e1inx4n", f = "v17_10_e1inx4o", T = "v17_10_e1inx4p", S = "v17_10_e1inx4q", D = "v17_10_e1inx4r", A = "v17_10_e1inx4s", y = "v17_10_e1inx4t", L = "v17_10_e1inx4u", V = "v17_10_e1inx4v", P = "v17_10_e1inx4w", R = "v17_10_e1inx4x", W = "v17_10_e1inx4y", B = "v17_10_e1inx4z", w = "v17_10_e1inx410", O = "v17_10_e1inx411", I = {
+    default: "v17_10_e1inx412",
+    brand: "v17_10_e1inx413",
+    alternative: "v17_10_e1inx414",
+    negative: "v17_10_e1inx415",
+    media: "v17_10_e1inx416"
+}, k = "v17_10_e1inx417", E = "v17_10_e1inx418", F = "v17_10_e1inx419", N = "v17_10_e1inx41a", z = "v17_10_e1inx41b", j = "v17_10_e1inx41c", q = {
+    default: "v17_10_e1inx41d",
+    brand: "v17_10_e1inx41e",
+    alternative: "v17_10_e1inx41f",
+    negative: "v17_10_e1inx41g",
+    media: "v17_10_e1inx41h"
+}, H = "v17_10_e1inx41i", M = "v17_10_e1inx41j", U = "v17_10_e1inx41k", K = "v17_10_e1inx41l", G = "v17_10_e1inx41m v17_10_e1inx41l", Z = "v17_10_e1inx41o v17_10_e1inx41n", J = "v17_10_e1inx41p v17_10_e1inx41n", Q = "v17_10_e1inx41q", X = "v17_10_e1inx41r", Y = {
+    default: "v17_10_e1inx41s",
+    brand: "v17_10_e1inx41t",
+    alternative: "v17_10_e1inx41u",
+    negative: "v17_10_e1inx41v",
+    media: "v17_10_e1inx41w"
+}, $ = "v17_10_e1inx41x", e1 = {
+    default: "v17_10_e1inx41y",
+    brand: "v17_10_e1inx41z",
+    alternative: "v17_10_e1inx420",
+    negative: "v17_10_e1inx421",
+    media: "v17_10_e1inx422"
+}, _1 = "v17_10_e1inx423", i1 = {
+    default: "v17_10_e1inx424",
+    brand: "v17_10_e1inx425",
+    alternative: "v17_10_e1inx426",
+    negative: "v17_10_e1inx427",
+    media: "v17_10_e1inx428"
+}, v1 = "v17_10_e1inx429", n1 = {
+    default: "v17_10_e1inx42a",
+    brand: "v17_10_e1inx42b",
+    alternative: "v17_10_e1inx42c",
+    negative: "v17_10_e1inx42d",
+    media: "v17_10_e1inx42e"
+}, a1 = "v17_10_e1inx42f", r1 = "v17_10_e1inx42g", t1 = "v17_10_e1inx42h", x1 = "v17_10_e1inx42i", o1 = "v17_10_e1inx42j", l1 = "v17_10_e1inx42k", d1 = "v17_10_e1inx42l", s1 = "v17_10_e1inx42m", c1 = "v17_10_e1inx42n", m1 = "v17_10_e1inx42o", b1 = {
+    default: "v17_10_e1inx42p",
+    brand: "v17_10_e1inx42q",
+    alternative: "v17_10_e1inx42r",
+    negative: "v17_10_e1inx42s",
+    media: "v17_10_e1inx42t"
+}, u1 = "v17_10_e1inx42u", h1 = {
+    enter: "v17_10_e1inx42v",
+    enterActive: "v17_10_e1inx42w",
+    exit: "v17_10_e1inx42x",
+    exitActive: "v17_10_e1inx42y"
+}, p1 = "v17_10_e1inx42z", C1 = "v17_10_e1inx430", g1 = "v17_10_e1inx431", f1 = "v17_10_e1inx432", T1 = "v17_10_e1inx433", S1 = "v17_10_e1inx434", D1 = {
+    appear: "v17_10_e1inx435",
+    appearActive: "v17_10_e1inx436",
+    enter: "v17_10_e1inx435",
+    enterActive: "v17_10_e1inx436",
+    exit: "v17_10_e1inx437",
+    exitActive: "v17_10_e1inx438"
+}, A1 = "v17_10_e1inx439", y1 = "v17_10_e1inx43a", L1 = {
+    default: "v17_10_e1inx43b",
+    brand: "v17_10_e1inx43c",
+    alternative: "v17_10_e1inx43d",
+    negative: "v17_10_e1inx43e",
+    media: "v17_10_e1inx43f"
 };
-export { v as COLLAPSED_WIDTH, t as COLLAPSE_DURATION_MS, x as CONTENT_DURATION_MS, i as DEFAULT_WIDTH, n as LOGO_SIZE, pe as accordion, ue as accordionContainer, Ce as accordionRows, he as accordionTransitionClasses, y as bodyBase, B as bodyContent, W as bodyWithFixedFooter, h as boxed, p as boxedBorder, o as collapseDurationVar, ye as columnSeparator, u as columnsWhileMoving, c as container, l as contentDurationVar, fe as dialogPanel, Te as dialogPanelTitle, Se as doublePanelColumn, Ae as doublePanelContent, Le as doublePanelTitle, De as doublePanelTransitionClasses, I as footerBase, E as footerCollapsed, F as footerFixed, O as footerScrollDivider, P as footerScrollSpacer, C as headerBase, g as headerControls, f as headerControlsCollapsed, d as headerNegativeBoxedBackground, V as headerScrollSpacer, A as headerSlot, L as headerSlotCollapsed, _e as itemAccent, ie as itemAccentVariant, ve as itemAsset, ne as itemAssetVariant, ce as itemChevron, se as itemChevronCollapsed, me as itemChevronRotated, be as itemChevronVariant, ae as itemLabel, te as itemLabelCollapsed, re as itemLabelContent, xe as itemLabelFrozenWidth, oe as itemLabelKeepsWidth, le as itemRightSlot, de as itemRightSlotCollapsed, Q as itemRow, X as itemTouchable, $ as itemTouchableCollapsed, ee as itemTouchableSelected, Y as itemTouchableVariant, T as logo, D as logoCollapsed, S as logoDefault, s as mainColumn, ge as panelRows, b as regionBackground, w as scrollDivider, k as scrollDividerVariant, R as scrollSpacerDivider, N as section, K as sectionContent, J as sectionDividerBottom, Z as sectionDividerTop, j as sectionTitle, H as sectionTitleCollapsed, z as sectionTitleContent, M as sectionTitleHidden, U as sectionTitleKeepsWidth, q as sectionTitleVariant, r as sidenavPanelWidthVar, a as sidenavWidthVar, G as standaloneItem, m as withRightDivider };
+export { v as COLLAPSED_WIDTH, t as COLLAPSE_DURATION_MS, x as CONTENT_DURATION_MS, i as DEFAULT_WIDTH, n as LOGO_SIZE, p1 as accordion, u1 as accordionContainer, C1 as accordionRows, h1 as accordionTransitionClasses, L as bodyBase, B as bodyContent, W as bodyWithFixedFooter, h as boxed, p as boxedBorder, o as collapseDurationVar, L1 as columnSeparator, u as columnsWhileMoving, s as container, l as contentDurationVar, f1 as dialogPanel, T1 as dialogPanelTitle, S1 as doublePanelColumn, A1 as doublePanelContent, y1 as doublePanelTitle, D1 as doublePanelTransitionClasses, k as footerBase, E as footerCollapsed, F as footerFixed, O as footerScrollDivider, P as footerScrollSpacer, C as headerBase, g as headerControls, f as headerControlsCollapsed, d as headerNegativeBoxedBackground, V as headerScrollSpacer, A as headerSlot, y as headerSlotCollapsed, _1 as itemAccent, i1 as itemAccentVariant, v1 as itemAsset, n1 as itemAssetVariant, s1 as itemChevron, c1 as itemChevronCollapsed, m1 as itemChevronRotated, b1 as itemChevronVariant, a1 as itemLabel, t1 as itemLabelCollapsed, r1 as itemLabelContent, x1 as itemLabelFrozenWidth, o1 as itemLabelKeepsWidth, l1 as itemRightSlot, d1 as itemRightSlotCollapsed, Q as itemRow, X as itemTouchable, $ as itemTouchableCollapsed, e1 as itemTouchableSelected, Y as itemTouchableVariant, T as logo, D as logoCollapsed, S as logoDefault, c as mainColumn, g1 as panelRows, b as regionBackground, w as scrollDivider, I as scrollDividerVariant, R as scrollSpacerDivider, N as section, K as sectionContent, J as sectionDividerBottom, Z as sectionDividerTop, z as sectionTitle, H as sectionTitleCollapsed, j as sectionTitleContent, M as sectionTitleHidden, U as sectionTitleKeepsWidth, q as sectionTitleVariant, r as sidenavPanelWidthVar, a as sidenavWidthVar, G as standaloneItem, m as withRightDivider };

package/dist-es/skeletons.css-mistica.js

@@ -1,8 +1,8 @@
 /* empty css                                     */ /* empty css                                     */ var o = {
-    default: "v17_8_zopolw5 v17_8_zopolw0 v17_8_1y2v1nf9d",
-    alternative: "v17_8_zopolw6 v17_8_zopolw1 v17_8_1y2v1nf9d",
-    brand: "v17_8_zopolw7 v17_8_zopolw2 v17_8_1y2v1nf9g",
-    negative: "v17_8_zopolw8 v17_8_zopolw3 v17_8_1y2v1nf9f",
-    media: "v17_8_zopolw9 v17_8_zopolw4 v17_8_1y2v1nf9f"
-}, l = "v17_8_zopolwc v17_8_zopolwb v17_8_1y2v1nfrg", n = "v17_8_zopolwd v17_8_1y2v1nfre v17_8_1y2v1nfrt v17_8_1y2v1nfrn", r = "v17_8_zopolwe v17_8_1y2v1nfrw v17_8_1y2v1nfry", p = "v17_8_zopolwg v17_8_zopolwf v17_8_1y2v1nfrx";
-export { l as animation, o as background, r as circle, p as line, n as row };
+    default: "v17_10_zopolw5 v17_10_zopolw0 v17_10_1y2v1nf9n",
+    alternative: "v17_10_zopolw6 v17_10_zopolw1 v17_10_1y2v1nf9n",
+    brand: "v17_10_zopolw7 v17_10_zopolw2 v17_10_1y2v1nf9q",
+    negative: "v17_10_zopolw8 v17_10_zopolw3 v17_10_1y2v1nf9p",
+    media: "v17_10_zopolw9 v17_10_zopolw4 v17_10_1y2v1nf9p"
+}, n = "v17_10_zopolwc v17_10_zopolwb v17_10_1y2v1nfs0", p = "v17_10_zopolwd v17_10_1y2v1nfry v17_10_1y2v1nfsd v17_10_1y2v1nfs7", l = "v17_10_zopolwe v17_10_1y2v1nfsg v17_10_1y2v1nfsi", w = "v17_10_zopolwg v17_10_zopolwf v17_10_1y2v1nfsh";
+export { n as animation, o as background, l as circle, w as line, p as row };

package/dist-es/skins/blau.js

@@ -87,6 +87,16 @@ const e = {
             backgroundDropZoneNegativeDragover: r(e.white, 0.17),
             backgroundDropZoneMediaHover: r(e.grey6, 0.05),
             backgroundDropZoneMediaDragover: r(e.grey6, 0.08),
+            messageBubbleBackgroundOutgoing: e.grey1,
+            messageBubbleBackgroundOutgoingBrand: e.grey1,
+            messageBubbleBackgroundOutgoingAlternative: e.grey1,
+            messageBubbleBackgroundOutgoingNegative: e.grey1,
+            messageBubbleBackgroundOutgoingMedia: e.grey1,
+            messageBubbleBackgroundIncoming: e.blauBluePrimary20,
+            messageBubbleBackgroundIncomingBrand: e.white,
+            messageBubbleBackgroundIncomingAlternative: e.white,
+            messageBubbleBackgroundIncomingNegative: e.white,
+            messageBubbleBackgroundIncomingMedia: e.white,
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey3,
@@ -396,6 +406,16 @@ const e = {
             backgroundDropZoneNegativeDragover: r(e.white, 0.15),
             backgroundDropZoneMediaHover: r(e.white, 0.03),
             backgroundDropZoneMediaDragover: r(e.white, 0.05),
+            messageBubbleBackgroundOutgoing: e.darkModeGrey,
+            messageBubbleBackgroundOutgoingBrand: e.darkModeGrey,
+            messageBubbleBackgroundOutgoingAlternative: e.darkModeGrey,
+            messageBubbleBackgroundOutgoingNegative: e.darkModeGrey,
+            messageBubbleBackgroundOutgoingMedia: e.darkModeGrey,
+            messageBubbleBackgroundIncoming: e.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: e.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: e.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: e.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: e.darkModeGrey,
             skeletonWave: e.grey5,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -795,6 +815,28 @@ const e = {
                 },
                 weight: "light"
             },
+            feedbackScreenDescription: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
+            },
+            feedbackScreenTitle: {
+                lineHeight: {
+                    desktop: 40,
+                    mobile: 32
+                },
+                size: {
+                    desktop: 32,
+                    mobile: 24
+                },
+                weight: "light"
+            },
             headerPretitle: {
                 lineHeight: {
                     desktop: 24,
@@ -1179,6 +1221,16 @@ const e = {
                     mobile: 16,
                     desktop: 16
                 }
+            },
+            boxedSmallPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8
+                }
             }
         }
     });

package/dist-es/skins/defaults.js

@@ -219,6 +219,28 @@ const e = {
         },
         weight: "bold"
     },
+    feedbackScreenDescription: {
+        lineHeight: {
+            desktop: 24,
+            mobile: 24
+        },
+        size: {
+            desktop: 18,
+            mobile: 16
+        },
+        weight: "regular"
+    },
+    feedbackScreenTitle: {
+        lineHeight: {
+            desktop: 40,
+            mobile: 32
+        },
+        size: {
+            desktop: 32,
+            mobile: 24
+        },
+        weight: "light"
+    },
     title1: {
         lineHeight: {
             desktop: 20,
@@ -510,6 +532,16 @@ const e = {
             desktop: 16
         }
     },
+    boxedSmallPadding: {
+        top: {
+            mobile: 8,
+            desktop: 8
+        },
+        bottom: {
+            mobile: 8,
+            desktop: 8
+        }
+    },
     responsiveLayoutMargin: {
         mobile: 16,
         desktop: 48

package/dist-es/skins/esimflag.js

@@ -91,6 +91,16 @@ const e = {
             backgroundDropZoneNegativeDragover: r(e.white, 0.17),
             backgroundDropZoneMediaHover: r(e.blue55, 0.2),
             backgroundDropZoneMediaDragover: r(e.blue55, 0.4),
+            messageBubbleBackgroundOutgoing: e.blue10,
+            messageBubbleBackgroundOutgoingBrand: e.blue10,
+            messageBubbleBackgroundOutgoingAlternative: e.blue10,
+            messageBubbleBackgroundOutgoingNegative: e.blue10,
+            messageBubbleBackgroundOutgoingMedia: e.blue10,
+            messageBubbleBackgroundIncoming: e.grey1,
+            messageBubbleBackgroundIncomingBrand: e.white,
+            messageBubbleBackgroundIncomingAlternative: e.white,
+            messageBubbleBackgroundIncomingNegative: e.white,
+            messageBubbleBackgroundIncomingMedia: e.white,
             skeletonWave: e.grey2,
             borderLow: e.grey1,
             border: e.grey3,
@@ -401,6 +411,16 @@ const e = {
             backgroundDropZoneNegativeDragover: r(e.white, 0.08),
             backgroundDropZoneMediaHover: r(e.white, 0.03),
             backgroundDropZoneMediaDragover: r(e.white, 0.05),
+            messageBubbleBackgroundOutgoing: e.darkModeGrey6,
+            messageBubbleBackgroundOutgoingBrand: e.darkModeGrey6,
+            messageBubbleBackgroundOutgoingAlternative: e.darkModeGrey6,
+            messageBubbleBackgroundOutgoingNegative: e.darkModeGrey6,
+            messageBubbleBackgroundOutgoingMedia: e.darkModeGrey6,
+            messageBubbleBackgroundIncoming: e.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: e.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: e.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: e.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: e.darkModeGrey,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             borderHigh: e.grey5,
@@ -799,6 +819,28 @@ const e = {
                 },
                 weight: "bold"
             },
+            feedbackScreenDescription: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
+            },
+            feedbackScreenTitle: {
+                lineHeight: {
+                    desktop: 40,
+                    mobile: 32
+                },
+                size: {
+                    desktop: 32,
+                    mobile: 24
+                },
+                weight: "bold"
+            },
             headerPretitle: {
                 lineHeight: {
                     desktop: 24,
@@ -1183,6 +1225,16 @@ const e = {
                     mobile: 16,
                     desktop: 16
                 }
+            },
+            boxedSmallPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8
+                }
             }
         }
     });

package/dist-es/skins/movistar.js

@@ -98,6 +98,16 @@ const e = {
             backgroundDropZoneNegativeDragover: r(e.white, 0.17),
             backgroundDropZoneMediaHover: r(e.movistarBlack, 0.2),
             backgroundDropZoneMediaDragover: r(e.movistarBlack, 0.4),
+            messageBubbleBackgroundOutgoing: e.blueLight,
+            messageBubbleBackgroundOutgoingBrand: e.blueLight,
+            messageBubbleBackgroundOutgoingAlternative: e.blueLight,
+            messageBubbleBackgroundOutgoingNegative: e.blueLight,
+            messageBubbleBackgroundOutgoingMedia: e.blueLight,
+            messageBubbleBackgroundIncoming: e.grey100,
+            messageBubbleBackgroundIncomingBrand: e.white,
+            messageBubbleBackgroundIncomingAlternative: e.white,
+            messageBubbleBackgroundIncomingNegative: e.white,
+            messageBubbleBackgroundIncomingMedia: e.white,
             skeletonWave: e.grey200,
             borderLow: e.grey100,
             border: e.grey300,
@@ -407,6 +417,16 @@ const e = {
             backgroundDropZoneNegativeDragover: r(e.white, 0.05),
             backgroundDropZoneMediaHover: r(e.white, 0.03),
             backgroundDropZoneMediaDragover: r(e.white, 0.05),
+            messageBubbleBackgroundOutgoing: e.blueDark,
+            messageBubbleBackgroundOutgoingBrand: e.blueDark,
+            messageBubbleBackgroundOutgoingAlternative: e.blueDark,
+            messageBubbleBackgroundOutgoingNegative: e.blueDark,
+            messageBubbleBackgroundOutgoingMedia: e.blueDark,
+            messageBubbleBackgroundIncoming: e.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: e.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: e.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: e.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: e.darkModeGrey,
             skeletonWave: e.grey600,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -806,6 +826,28 @@ const e = {
                 },
                 weight: "bold"
             },
+            feedbackScreenDescription: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 22
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
+            },
+            feedbackScreenTitle: {
+                lineHeight: {
+                    desktop: 32,
+                    mobile: 28
+                },
+                size: {
+                    desktop: 28,
+                    mobile: 24
+                },
+                weight: "bold"
+            },
             headerPretitle: {
                 lineHeight: {
                     desktop: 24,
@@ -1187,6 +1229,16 @@ const e = {
                     desktop: 16
                 }
             },
+            boxedSmallPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8
+                }
+            },
             responsiveLayoutMargin: {
                 mobile: 16,
                 desktop: 48

package/dist-es/skins/o2.js

@@ -2,6 +2,7 @@ import { O2_SKIN as o } from "./constants.js";
 import { applyAlpha as r } from "../utils/color.js";
 const e = {
     beyondBlue: "#0050FF",
+    beyondBlue5: "#F2F6FF",
     beyondBlue10: "#E5EDFF",
     beyondBlue15: "#CCDCFF",
     beyondBlue30: "#80A7FF",
@@ -94,6 +95,16 @@ const e = {
             backgroundDropZoneNegativeDragover: r(e.white, 0.17),
             backgroundDropZoneMediaHover: r(e.beyondBlue90, 0.2),
             backgroundDropZoneMediaDragover: r(e.beyondBlue90, 0.4),
+            messageBubbleBackgroundOutgoing: e.beyondBlue5,
+            messageBubbleBackgroundOutgoingBrand: e.beyondBlue5,
+            messageBubbleBackgroundOutgoingAlternative: e.beyondBlue5,
+            messageBubbleBackgroundOutgoingNegative: e.beyondBlue5,
+            messageBubbleBackgroundOutgoingMedia: e.beyondBlue5,
+            messageBubbleBackgroundIncoming: e.grey20,
+            messageBubbleBackgroundIncomingBrand: e.white,
+            messageBubbleBackgroundIncomingAlternative: e.white,
+            messageBubbleBackgroundIncomingNegative: e.white,
+            messageBubbleBackgroundIncomingMedia: e.white,
             skeletonWave: e.grey30,
             borderLow: e.grey20,
             border: e.grey30,
@@ -402,6 +413,16 @@ const e = {
             backgroundDropZoneNegativeDragover: r(e.white, 0.05),
             backgroundDropZoneMediaHover: r(e.white, 0.03),
             backgroundDropZoneMediaDragover: r(e.white, 0.05),
+            messageBubbleBackgroundOutgoing: e.darkModeGrey6,
+            messageBubbleBackgroundOutgoingBrand: e.darkModeGrey6,
+            messageBubbleBackgroundOutgoingAlternative: e.darkModeGrey6,
+            messageBubbleBackgroundOutgoingNegative: e.darkModeGrey6,
+            messageBubbleBackgroundOutgoingMedia: e.darkModeGrey6,
+            messageBubbleBackgroundIncoming: e.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: e.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: e.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: e.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: e.darkModeGrey,
             navigationBarBackground: e.darkModeBlack,
             skeletonWave: e.grey80,
             borderLow: e.darkModeBlack,
@@ -802,6 +823,28 @@ const e = {
                 },
                 weight: "bold"
             },
+            feedbackScreenDescription: {
+                lineHeight: {
+                    desktop: 24,
+                    mobile: 24
+                },
+                size: {
+                    desktop: 18,
+                    mobile: 16
+                },
+                weight: "regular"
+            },
+            feedbackScreenTitle: {
+                lineHeight: {
+                    desktop: 40,
+                    mobile: 32
+                },
+                size: {
+                    desktop: 32,
+                    mobile: 24
+                },
+                weight: "bold"
+            },
             headerPretitle: {
                 lineHeight: {
                     desktop: 24,
@@ -1183,6 +1226,16 @@ const e = {
                     desktop: 16
                 }
             },
+            boxedSmallPadding: {
+                top: {
+                    mobile: 8,
+                    desktop: 8
+                },
+                bottom: {
+                    mobile: 8,
+                    desktop: 8
+                }
+            },
             responsiveLayoutMargin: {
                 mobile: 16,
                 desktop: 48