@telefonica/mistica 11.12.0 → 12.0.0

package/dist/skins/telefonica.js

@@ -40,7 +40,8 @@ var palette = {
     white: "#FFFFFF",
     // specific for dark mode:
     darkModeBlack: "#191919",
-    darkModeGrey: "#242424"
+    darkModeGrey: "#242424",
+    darkModeGrey6: "#313235"
 };
 exports.palette = palette;
 var getTelefonicaSkin = function getTelefonicaSkin() {
@@ -109,7 +110,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             feedbackInfoBackground: palette.grey9,
             // GLOBAL
             brand: palette.telefonicaBlue,
-            brandDark: palette.telefonicaBlue70,
+            brandHigh: palette.telefonicaBlue70,
             inverse: palette.white,
             neutralHigh: palette.grey9,
             neutralMedium: palette.grey5,
@@ -120,7 +121,6 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.telefonicaBlue,
             // STATES
             error: palette.coral,
             success: palette.turquoise,
@@ -133,18 +133,15 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textAppBar: palette.grey4,
             textAppBarSelected: palette.telefonicaBlue,
             // TAGS
-            tagBackgroundSuccess: palette.turquoise10,
-            tagBackgroundWarning: palette.ambar10,
-            tagBackgroundError: palette.coral10,
-            tagBackgroundPromo: palette.orchid10,
-            tagBackgroundActive: palette.grey1,
-            tagBackgroundInactive: palette.grey1,
-            textTagSuccess: palette.turquoise70,
-            textTagWarning: palette.ambar70,
-            textTagError: palette.coral70,
-            textTagPromo: palette.orchid70,
-            textTagActive: palette.telefonicaBlue,
-            textTagInactive: palette.grey6
+            successLow: palette.turquoise10,
+            warningLow: palette.ambar10,
+            errorLow: palette.coral10,
+            promoLow: palette.orchid10,
+            brandLow: palette.grey1,
+            successHigh: palette.turquoise70,
+            warningHigh: palette.ambar70,
+            errorHigh: palette.coral70,
+            promoHigh: palette.orchid70
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -191,16 +188,15 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.grey8,
-            brandDark: palette.grey6,
+            brandHigh: palette.grey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey6,
+            neutralLow: palette.darkModeGrey6,
             textPrimary: palette.grey2,
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.telefonicaBlue30,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -208,18 +204,15 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textAppBar: palette.grey5,
             textAppBarSelected: palette.grey2,
             // TAGS
-            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
-            textTagSuccess: palette.turquoise40,
-            textTagWarning: palette.ambar40,
-            textTagError: palette.coral40,
-            textTagPromo: palette.orchid40,
-            textTagActive: palette.telefonicaBlue30,
-            textTagInactive: palette.grey4
+            successLow: (0, _color).applyAlpha(palette.white, 0.05),
+            warningLow: (0, _color).applyAlpha(palette.white, 0.05),
+            errorLow: (0, _color).applyAlpha(palette.white, 0.05),
+            promoLow: (0, _color).applyAlpha(palette.white, 0.05),
+            brandLow: (0, _color).applyAlpha(palette.white, 0.05),
+            successHigh: palette.turquoise40,
+            warningHigh: palette.ambar40,
+            errorHigh: palette.coral40,
+            promoHigh: palette.orchid40
         }
     };
 };

package/dist/skins/telefonica.js.flow

@@ -36,5 +36,6 @@ declare export var palette: {
   +white: "#FFFFFF",
   +darkModeBlack: "#191919",
   +darkModeGrey: "#242424",
+  +darkModeGrey6: "#313235",
 };
 declare export var getTelefonicaSkin: GetKnownSkin;

package/dist/skins/types.d.ts

@@ -2,7 +2,7 @@ export declare type SkinVariant = 'prominent';
 export declare type KnownSkinName = 'Movistar' | 'O2' | 'O2-classic' | 'Vivo' | 'Telefonica' | 'Blau';
 export declare type SkinName = KnownSkinName | string;
 export declare type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
-export declare type FontWeight = 'light' | 'regular' | 'medium';
+export declare type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
 declare type TextPresetName = 'text5' | 'text6' | 'text7' | 'text8' | 'text9' | 'text10';
 export declare type TextPresetsConfig = {
     [preset in TextPresetName]: {
@@ -71,7 +71,7 @@ export declare type Colors = {
     feedbackErrorBackground: string;
     feedbackInfoBackground: string;
     brand: string;
-    brandDark: string;
+    brandHigh: string;
     inverse: string;
     neutralHigh: string;
     neutralLow: string;
@@ -85,7 +85,6 @@ export declare type Colors = {
     textPrimaryInverse: string;
     textSecondary: string;
     textSecondaryInverse: string;
-    textAmount: string;
     textButtonPrimary: string;
     textButtonPrimaryInverse: string;
     textButtonPrimaryInverseSelected: string;
@@ -103,17 +102,14 @@ export declare type Colors = {
     textNavigationSearchBarText: string;
     textAppBar: string;
     textAppBarSelected: string;
-    tagBackgroundSuccess: string;
-    tagBackgroundWarning: string;
-    tagBackgroundError: string;
-    tagBackgroundPromo: string;
-    tagBackgroundActive: string;
-    tagBackgroundInactive: string;
-    textTagSuccess: string;
-    textTagWarning: string;
-    textTagError: string;
-    textTagPromo: string;
-    textTagActive: string;
-    textTagInactive: string;
+    successLow: string;
+    warningLow: string;
+    errorLow: string;
+    promoLow: string;
+    brandLow: string;
+    successHigh: string;
+    warningHigh: string;
+    errorHigh: string;
+    promoHigh: string;
 };
 export {};

package/dist/skins/types.js.flow

@@ -10,7 +10,7 @@ export type KnownSkinName =
   | "Blau";
 export type SkinName = KnownSkinName | string;
 export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
-export type FontWeight = "light" | "regular" | "medium";
+export type FontWeight = "light" | "regular" | "medium" | "bold";
 declare type TextPresetName =
   | "text5"
   | "text6"
@@ -87,7 +87,7 @@ export type Colors = {
   feedbackErrorBackground: string,
   feedbackInfoBackground: string,
   brand: string,
-  brandDark: string,
+  brandHigh: string,
   inverse: string,
   neutralHigh: string,
   neutralLow: string,
@@ -101,7 +101,6 @@ export type Colors = {
   textPrimaryInverse: string,
   textSecondary: string,
   textSecondaryInverse: string,
-  textAmount: string,
   textButtonPrimary: string,
   textButtonPrimaryInverse: string,
   textButtonPrimaryInverseSelected: string,
@@ -119,17 +118,14 @@ export type Colors = {
   textNavigationSearchBarText: string,
   textAppBar: string,
   textAppBarSelected: string,
-  tagBackgroundSuccess: string,
-  tagBackgroundWarning: string,
-  tagBackgroundError: string,
-  tagBackgroundPromo: string,
-  tagBackgroundActive: string,
-  tagBackgroundInactive: string,
-  textTagSuccess: string,
-  textTagWarning: string,
-  textTagError: string,
-  textTagPromo: string,
-  textTagActive: string,
-  textTagInactive: string,
+  successLow: string,
+  warningLow: string,
+  errorLow: string,
+  promoLow: string,
+  brandLow: string,
+  successHigh: string,
+  warningHigh: string,
+  errorHigh: string,
+  promoHigh: string,
 };
 declare export {};

package/dist/skins/vivo.js

@@ -108,18 +108,17 @@ var getVivoSkin = function getVivoSkin() {
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.vivoPurple,
-            brandDark: palette.vivoPurpleDark,
+            brandHigh: palette.vivoPurpleDark,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey3,
+            neutralLow: palette.grey1,
             promo: palette.vivoPurple,
             highlight: palette.pink,
             textPrimary: palette.grey6,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.vivoPurple,
             // STATES
             error: palette.pepper,
             success: palette.vivoGreen,
@@ -132,18 +131,15 @@ var getVivoSkin = function getVivoSkin() {
             textAppBar: palette.grey4,
             textAppBarSelected: palette.vivoPurple,
             // TAGS
-            tagBackgroundSuccess: palette.vivoGreenLight10,
-            tagBackgroundWarning: palette.orangeLight10,
-            tagBackgroundError: palette.pepperLight10,
-            tagBackgroundPromo: palette.vivoPurpleLight10,
-            tagBackgroundActive: palette.vivoPurpleLight10,
-            tagBackgroundInactive: palette.grey1,
-            textTagSuccess: palette.vivoGreenDark,
-            textTagWarning: palette.orangeDark,
-            textTagError: palette.pepperDark80,
-            textTagPromo: palette.vivoPurple,
-            textTagActive: palette.vivoPurple,
-            textTagInactive: palette.grey5
+            successLow: palette.vivoGreenLight10,
+            warningLow: palette.orangeLight10,
+            errorLow: palette.pepperLight10,
+            promoLow: palette.vivoPurpleLight10,
+            brandLow: palette.vivoPurpleLight10,
+            successHigh: palette.vivoGreenDark,
+            warningHigh: palette.orangeDark,
+            errorHigh: palette.pepperDark80,
+            promoHigh: palette.vivoPurple
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -193,7 +189,7 @@ var getVivoSkin = function getVivoSkin() {
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.darkModeGrey6,
             brand: palette.vivoPurpleLight80,
-            brandDark: palette.darkModeGrey6,
+            brandHigh: palette.darkModeGrey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -203,7 +199,6 @@ var getVivoSkin = function getVivoSkin() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.vivoPurpleLight50,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -211,18 +206,15 @@ var getVivoSkin = function getVivoSkin() {
             textAppBar: palette.grey5,
             textAppBarSelected: palette.grey2,
             // TAGS
-            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
-            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
-            textTagSuccess: palette.vivoGreenLight30,
-            textTagWarning: palette.orangeLight40,
-            textTagError: palette.pepperLight40,
-            textTagPromo: palette.vivoPurpleLight50,
-            textTagActive: palette.vivoPurpleLight50,
-            textTagInactive: palette.grey4
+            successLow: (0, _color).applyAlpha(palette.white, 0.05),
+            warningLow: (0, _color).applyAlpha(palette.white, 0.05),
+            errorLow: (0, _color).applyAlpha(palette.white, 0.05),
+            promoLow: (0, _color).applyAlpha(palette.white, 0.05),
+            brandLow: (0, _color).applyAlpha(palette.white, 0.05),
+            successHigh: palette.vivoGreenLight30,
+            warningHigh: palette.orangeLight40,
+            errorHigh: palette.pepperLight40,
+            promoHigh: palette.vivoPurpleLight50
         }
     };
 };

package/dist/snackbar.js

@@ -127,7 +127,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             minWidth: SNACKBAR_MIN_WIDTH,
             minHeight: SNACKBAR_MIN_HEIGHT,
             padding: "".concat(PADDING_Y, "px ").concat(PADDING_X, "px"),
-            borderRadius: 4,
+            borderRadius: 8,
             position: "fixed",
             bottom: 24,
             zIndex: 1000,

package/dist/tag.js

@@ -146,28 +146,28 @@ var Tag = function Tag(param) {
     }
     var tagTypeToColors = {
         promo: [
-            colors.textTagPromo,
-            colors.tagBackgroundPromo
+            colors.promoHigh,
+            colors.promoLow
         ],
         active: [
-            colors.textTagActive,
-            colors.tagBackgroundActive
+            colors.brand,
+            colors.brandLow
         ],
         inactive: [
-            colors.textTagInactive,
-            colors.tagBackgroundInactive
+            colors.neutralMedium,
+            colors.neutralLow
         ],
         success: [
-            colors.textTagSuccess,
-            colors.tagBackgroundSuccess
+            colors.successHigh,
+            colors.successLow
         ],
         warning: [
-            colors.textTagWarning,
-            colors.tagBackgroundWarning
+            colors.warningHigh,
+            colors.warningLow
         ],
         error: [
-            colors.textTagError,
-            colors.tagBackgroundError
+            colors.errorHigh,
+            colors.errorLow
         ]
     };
     var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor = _type1[0], backgroundColor = _type1[1];

package/dist/text-field-components.js

@@ -287,7 +287,7 @@ var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
         border: (_obj1 = {
             overflow: "hidden",
             border: "1px solid ".concat(theme.colors.border),
-            borderRadius: 4,
+            borderRadius: 8,
             height: function height(param) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 60;

package/dist/text.js

@@ -70,7 +70,8 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     var mapToWeight = {
         light: 300,
         regular: 400,
-        medium: 500
+        medium: 500,
+        bold: 700
     };
     var _obj;
     var inverseColorsMap = (_obj = {}, _defineProperty(_obj, theme.colors.textPrimary, theme.colors.textPrimaryInverse), _defineProperty(_obj, theme.colors.textSecondary, theme.colors.textSecondaryInverse), _defineProperty(_obj, theme.colors.textLink, theme.colors.textLinkInverse), _obj);
@@ -119,9 +120,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return wordBreak ? "anywhere" : "inherit";
             },
             "@supports not (overflow-wrap: anywhere)": {
+                // "overflow-wrap: anywhere" is not supported in Safari
+                // "word-break: break-word" has the same effect as "word-break: normal" and "overflow-wrap: anywhere",
+                // regardless of the actual value of the overflow-wrap property.
                 wordBreak: function wordBreak(param) {
                     var wordBreak1 = param.wordBreak;
-                    return wordBreak1 ? "break-all" : "inherit";
+                    return wordBreak1 ? "break-word" : "inherit";
                 }
             },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
@@ -140,10 +144,11 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function wordBreak(param) {
-                var wordBreak2 = param.wordBreak;
-                return wordBreak2 ? "break-all" : "normal";
+                var truncate = param.truncate;
+                return truncate === 1 || truncate === true ? "break-all" : "break-word";
             },
             "@supports (overflow-wrap: anywhere)": {
+                overflowWrap: "anywhere",
                 wordBreak: function wordBreak(param) {
                     var truncate = param.truncate;
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
@@ -221,8 +226,8 @@ var Text8 = function Text8(props) {
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
-        desktopSize: 40,
-        desktopLineHeight: "48px",
+        desktopSize: 48,
+        desktopLineHeight: "56px",
         weight: textPresets.text8.weight
     }, props, {
         children: props.children

package/dist/tooltip.js

@@ -152,7 +152,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         arrow: {
             position: "absolute",
-            backgroundColor: theme.colors.background,
+            backgroundColor: theme.colors.backgroundContainer,
             width: arrowSize,
             height: arrowSize,
             top: 0,
@@ -194,7 +194,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         },
         arrowWrapper: {
             position: "absolute",
-            color: theme.colors.background,
+            color: theme.colors.backgroundContainer,
             width: arrowWrapperWidth,
             height: arrowWrapperHeight,
             overflow: "hidden"
@@ -208,10 +208,10 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             width: "auto",
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
             padding: 16,
-            backgroundColor: theme.colors.background,
+            backgroundColor: theme.colors.backgroundContainer,
             zIndex: 12,
             border: "1px solid ".concat(theme.colors.divider),
-            borderRadius: 2
+            borderRadius: 8
         },
         title: {
             margin: 0,

package/dist/video.js

@@ -103,10 +103,6 @@ var useStyles = (0, _jss).createUseStyles(function() {
             objectFit: "cover",
             maxWidth: "100%",
             maxHeight: "100%",
-            borderRadius: function borderRadius(param) {
-                var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 4;
-            },
             "@supports (aspect-ratio: 1 / 1)": {
                 aspectRatio: function aspectRatio(param) {
                     var aspectRatio1 = param.aspectRatio;
@@ -126,10 +122,6 @@ var useStyles = (0, _jss).createUseStyles(function() {
             }
         },
         wrapper: {
-            borderRadius: function borderRadius(param) {
-                var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 4;
-            },
             overflow: "hidden",
             maxWidth: "100%",
             maxHeight: "100%",
@@ -166,7 +158,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     // if aspect ratio is 0, we use the original video proportions
     var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
     var classes = useStyles({
-        noBorderRadius: noBorderRadius,
         aspectRatio: withCssAspectRatio ? ratio : undefined,
         width: props.width
     });
@@ -197,9 +188,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         width = props.width;
         height = props.height;
     } else if (typeof props.width === "number") {
-        height = props.width / ratio;
+        height = ratio ? props.width / ratio : undefined;
     } else if (typeof props.height === "number") {
-        width = props.height * ratio;
+        width = ratio ? props.height * ratio : undefined;
     } else {
         width = props.width || "100%";
     }
@@ -225,8 +216,12 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
+        poster: poster || TRANSPARENT_PIXEL
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        style: {
+            // For some reason adding this style with JSS doesn't add the border radius in safari
+            borderRadius: noBorderRadius ? 0 : 8
+        },
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
             return /*#__PURE__*/ (0, _jsxRuntime).jsx("source", {
@@ -240,9 +235,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             style: {
                 width: width,
                 height: height,
+                // adding the poster as background image avoids the flicker in Safari
                 backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
                 backgroundSize: "cover",
-                backgroundPosition: "50% 50%"
+                backgroundPosition: "50% 50%",
+                borderRadius: noBorderRadius ? 0 : 8
             },
             className: classes.wrapper,
             children: video1

package/dist-es/avatar.js

@@ -164,9 +164,9 @@ var Avatar = function(_param) {
     var colors = useTheme().colors;
     var isInverse = useIsInverseVariant();
     var _backgroundColor;
-    var backgroundColor = (_backgroundColor = props.backgroundColor) !== null && _backgroundColor !== void 0 ? _backgroundColor : isInverse ? colors.brandDark : colors.tagBackgroundActive;
+    var backgroundColor = (_backgroundColor = props.backgroundColor) !== null && _backgroundColor !== void 0 ? _backgroundColor : isInverse ? colors.brandHigh : colors.brandLow;
     var _textColor;
-    var textColor = (_textColor = props.textColor) !== null && _textColor !== void 0 ? _textColor : isInverse ? colors.textPrimaryInverse : colors.textTagActive;
+    var textColor = (_textColor = props.textColor) !== null && _textColor !== void 0 ? _textColor : isInverse ? colors.textPrimaryInverse : colors.brand;
     var ref = _slicedToArray(React.useState(false), 2), imgLoadError = ref[0], setImgLoadError = ref[1];
     var classes = useStyles({
         textColor: textColor,

package/dist-es/boxed.js

@@ -50,7 +50,7 @@ var useStyles = createUseStyles(function(param1) {
                 }
                 return "1px solid ".concat(colors.border);
             },
-            borderRadius: 4,
+            borderRadius: 8,
             overflow: "hidden"
         }
     };

package/dist-es/button.js

@@ -92,7 +92,7 @@ var BORDER_PX = 1.5;
 var SPINNER_MARGIN_PX = 8;
 var X_PADDING_PX = 16 - BORDER_PX;
 var Y_PADDING_PX = 12 - BORDER_PX;
-var X_SMALL_PADDING_PX = 8 - BORDER_PX;
+var X_SMALL_PADDING_PX = 12 - BORDER_PX;
 var Y_SMALL_PADDING_PX = 6 - BORDER_PX;
 var commonClasses = function() {
     return {

package/dist-es/callout.js

@@ -29,7 +29,7 @@ var useStyles = createUseStyles(function(param) {
     return {
         container: {
             background: colors.backgroundAlternative,
-            borderRadius: 4,
+            borderRadius: 8,
             padding: 16,
             overflow: "hidden",
             display: "flex",