@lookiero/checkout 11.1.0 → 11.3.0

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.tsx

@@ -1,15 +1,15 @@
 import { PortalHost } from "@gorhom/portal";
 import React, { FC, useCallback, useMemo } from "react";
-import { Platform } from "react-native";
+import { Platform, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { generatePath, useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { Segment } from "@lookiero/sty-psp-segment";
-import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutProjection } from "../../../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
@@ -36,7 +36,7 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { ProductVariantPreview } from "../productVariantPreview/ProductVariantPreview";
-import { style } from "./ReturnQuestionsForm.style";
+import { style as returnQuestionsFormStyle } from "./ReturnQuestionsForm.style";
 
 const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
 
@@ -67,8 +67,11 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
   const navigate = useNavigate();
   const { basePath } = useStaticInfo();
   const logger = useLogger();
+  const screenSize = useScreenSize();
+  const isDektopScreen = screenSize === "L";
+  const isMobileScreen = screenSize === "S";
 
-  const { screen } = useDevice();
+  const style = useMemo(() => returnQuestionsFormStyle(), []);
 
   const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_TITLE });
   const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
@@ -129,7 +132,7 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
         <ItemDetailHeader onBack={handleOnBack} />
       </Box>
     ),
-    [handleOnBack],
+    [handleOnBack, style.headerWrapper],
   );
 
   const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
@@ -162,11 +165,11 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
         >
           <View style={style.background}>
             <AuroraLayout
-              fullWidth={!screen.L}
-              style={[style.layout, screen.L ? style.desktopLayoutSpacing : undefined]}
+              fullWidth={!isDektopScreen}
+              style={[style.layout, isDektopScreen ? style.desktopLayoutSpacing : undefined]}
             >
               <Box size={{ L: "2/3" }}>
-                <View style={[style.info, !screen.S && style.desktopInfo]}>
+                <View style={[style.info, !isMobileScreen && style.desktopInfo]}>
                   <Text level={3} heading>
                     {titleText}
                   </Text>
@@ -180,7 +183,7 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
                   returnQuestions={returnQuestions}
                 />
 
-                <View style={[style.submit, !screen.S && style.submitDesktop]}>
+                <View style={[style.submit, !isMobileScreen && style.submitDesktop]}>
                   <Button testID="return-questions-button" onPress={handleOnSubmit}>
                     {submitButtonText}
                   </Button>

package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.style.ts

@@ -1,58 +1,64 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const {
-  colorBgSurface,
-  borderRadius3,
-  borderRadiusFull,
-  borderWidth2,
-  colorBorderInput,
-  colorBgPrimaryLight,
-  space05,
-  space1,
-  space2,
-  space4,
-} = theme();
-
 const IMAGE_WIDTH = 104;
 const IMAGE_HEIGHT = 132;
 
-const style = StyleSheet.create({
-  container: {
-    alignItems: "flex-end",
-    borderBottomColor: colorBgPrimaryLight,
-    borderBottomWidth: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    paddingVertical: space4,
-  },
-  descriptionContainer: {
-    alignSelf: "stretch",
-    justifyContent: "space-between",
-    marginLeft: space2,
-  },
-  infoProductVariant: {
-    alignItems: "flex-start",
-  },
-  media: {
-    borderColor: colorBorderInput,
-    borderRadius: borderRadius3,
-    borderWidth: borderWidth2,
-    height: IMAGE_HEIGHT,
-    width: IMAGE_WIDTH,
-  },
-  row: {
-    alignItems: "flex-end",
-    flexDirection: "row",
-  },
-  sizeChange: {
-    backgroundColor: colorBgSurface,
-    borderRadius: borderRadiusFull,
-    marginTop: space4,
-    paddingBottom: space05,
-    paddingHorizontal: space2,
-    paddingTop: space1,
-  },
-});
+const style = () => {
+  const {
+    borderRadius3,
+    borderRadiusFull,
+    borderWidth2,
+    colorBgPrimaryLight,
+    colorBgSurface,
+    colorBorderInput,
+    colorTextMedium,
+    space05,
+    space1,
+    space2,
+    space4,
+  } = theme();
+
+  return StyleSheet.create({
+    container: {
+      alignItems: "flex-end",
+      borderBottomColor: colorBgPrimaryLight,
+      borderBottomWidth: 1,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      paddingVertical: space4,
+    },
+    descriptionContainer: {
+      alignSelf: "stretch",
+      justifyContent: "space-between",
+      marginLeft: space2,
+    },
+    infoProductVariant: {
+      alignItems: "flex-start",
+    },
+    media: {
+      borderColor: colorBorderInput,
+      borderRadius: borderRadius3,
+      borderWidth: borderWidth2,
+      height: IMAGE_HEIGHT,
+      width: IMAGE_WIDTH,
+    },
+    row: {
+      alignItems: "flex-end",
+      flexDirection: "row",
+    },
+    sizeChange: {
+      backgroundColor: colorBgSurface,
+      borderRadius: borderRadiusFull,
+      marginTop: space4,
+      paddingBottom: space05,
+      paddingHorizontal: space2,
+      paddingTop: space1,
+    },
+    text: {
+      color: colorTextMedium,
+    },
+  });
+};
 
 export { style, IMAGE_WIDTH };

package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { ImageStyle, Pressable, StyleProp, View } from "react-native";
-import { COLOR, Icon, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
-import { LazyImage } from "@lookiero/sty-psp-ui";
+import { Icon, LazyImage } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { ColorProjection, MediaProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { PriceProjection } from "../../../../../../projection/price/price";
@@ -11,7 +11,7 @@ import { size, SizeProjection } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { COLOR_I18N_PREFIX, DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { IMAGE_WIDTH, style } from "./ProductVariant.style";
+import { IMAGE_WIDTH, style as productVariantStyle } from "./ProductVariant.style";
 
 interface ProductVariantStyle {
   readonly image: StyleProp<ImageStyle>;
@@ -47,6 +47,8 @@ const ProductVariant: FC<ProductVariantProps> = ({
 
   const cdnImageUrl = useMediaImage();
 
+  const style = useMemo(() => productVariantStyle(), []);
+
   return (
     <Pressable
       pointerEvents={onPress ? "auto" : "none"}
@@ -67,13 +69,13 @@ const ProductVariant: FC<ProductVariantProps> = ({
 
         <View style={style.descriptionContainer}>
           <View style={style.infoProductVariant}>
-            <Text color={COLOR.TEXT_MEDIUM} level={2} detail>
+            <Text level={2} style={style.text} detail>
               {brand}
             </Text>
             <Text level={2} detail>
               {name}
             </Text>
-            <Text color={COLOR.TEXT_MEDIUM} level={2} detail>
+            <Text level={2} style={style.text} detail>
               {sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })} / {colorLabel}
             </Text>
 

package/src/infrastructure/ui/views/shared/components/productVariant/__snapshots__/ProductVariant.test.tsx.snap

@@ -339,10 +339,19 @@ exports[`ProductVariant component matches the snapshot for a non-unique size: no
             "fontStyle": "normal",
             "fontWeight": "normal",
             "height": 24,
+            "letterSpacing": -0.2,
+            "lineHeight": 24,
+            "minHeight": 24,
+            "minWidth": 24,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 0,
             "width": 24,
           },
         ]
       }
+      testID="icon"
     >
       
     </Text>
@@ -689,10 +698,19 @@ exports[`ProductVariant component matches the snapshot for an unique size: uniqu
             "fontStyle": "normal",
             "fontWeight": "normal",
             "height": 24,
+            "letterSpacing": -0.2,
+            "lineHeight": 24,
+            "minHeight": 24,
+            "minWidth": 24,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 0,
             "width": 24,
           },
         ]
       }
+      testID="icon"
     >
       
     </Text>

package/src/infrastructure/ui/views/summary/Summary.style.ts

@@ -2,88 +2,90 @@ import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 
-const {
-  colorTextMedium,
-  colorText,
-  colorBgPrimaryLight,
-  space2,
-  space3,
-  space4,
-  space6,
-  space12,
-  space16,
-  borderRadius4,
-  colorBgBase,
-} = theme();
+const style = () => {
+  const {
+    colorTextMedium,
+    colorText,
+    colorBgPrimaryLight,
+    space2,
+    space3,
+    space4,
+    space6,
+    space12,
+    space16,
+    borderRadius4,
+    colorBgBase,
+  } = theme();
 
-const style = StyleSheet.create({
-  contentWrapper: {
-    backgroundColor: colorBgBase,
-    flexGrow: 0,
-  },
-  description: {
-    color: colorTextMedium,
-    marginBottom: space6,
-  },
-  desktopContentWrapper: {
-    borderRadius: borderRadius4,
-    paddingHorizontal: space6,
-    paddingVertical: space12,
-  },
-  desktopLayoutSpacing: {
-    paddingVertical: space12,
-  },
-  desktopListSpacing: {
-    paddingRight: space16,
-  },
-  desktopResume: {
-    borderRadius: borderRadius4,
-  },
-  header: {
-    height: HEADER_HEIGHT,
-  },
-  mobileInfo: {
-    paddingHorizontal: space6,
-    paddingTop: space6,
-  },
-  mobileResume: {
-    shadowColor: colorText,
-    shadowOpacity: 0.15,
-    ...Platform.select({
-      web: {
-        shadowOffset: { width: 0, height: 8 },
-        shadowRadius: 18,
-        elevation: 0.5,
-      },
-    }),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } as any,
-  princingWrapper: {
-    padding: space6,
-  },
-  resume: {
-    overflow: "hidden",
-    backgroundColor: colorBgBase,
-    ...Platform.select({
-      web: {
-        position: "sticky",
-        top: space12,
-        alignSelf: "flex-start",
-      },
-    }),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } as any,
-  scrollView: {
-    backgroundColor: colorBgPrimaryLight,
-    flex: 1,
-  },
-  sticky: {
-    paddingBottom: space4,
-    paddingTop: space3,
-  },
-  title: {
-    marginBottom: space2,
-  },
-});
+  return StyleSheet.create({
+    contentWrapper: {
+      backgroundColor: colorBgBase,
+      flexGrow: 0,
+    },
+    description: {
+      color: colorTextMedium,
+      marginBottom: space6,
+    },
+    desktopContentWrapper: {
+      borderRadius: borderRadius4,
+      paddingHorizontal: space6,
+      paddingVertical: space12,
+    },
+    desktopLayoutSpacing: {
+      paddingVertical: space12,
+    },
+    desktopListSpacing: {
+      paddingRight: space16,
+    },
+    desktopResume: {
+      borderRadius: borderRadius4,
+    },
+    header: {
+      height: HEADER_HEIGHT,
+    },
+    mobileInfo: {
+      paddingHorizontal: space6,
+      paddingTop: space6,
+    },
+    mobileResume: {
+      shadowColor: colorText,
+      shadowOpacity: 0.15,
+      ...Platform.select({
+        web: {
+          shadowOffset: { width: 0, height: 8 },
+          shadowRadius: 18,
+          elevation: 0.5,
+        },
+      }),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
+    princingWrapper: {
+      padding: space6,
+    },
+    resume: {
+      overflow: "hidden",
+      backgroundColor: colorBgBase,
+      ...Platform.select({
+        web: {
+          position: "sticky",
+          top: space12,
+          alignSelf: "flex-start",
+        },
+      }),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
+    scrollView: {
+      backgroundColor: colorBgPrimaryLight,
+      flex: 1,
+    },
+    sticky: {
+      paddingBottom: space4,
+      paddingTop: space3,
+    },
+    title: {
+      marginBottom: space2,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/summary/Summary.tsx

@@ -1,10 +1,10 @@
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { generatePath, useMatch, useNavigate } from "react-router-native";
-import { Box, Text, Layout as AuroraLayout, useDevice, Spinner } from "@lookiero/aurora";
+import { Box, Text, Layout as AuroraLayout, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
@@ -18,7 +18,7 @@ import { Body } from "../../components/layouts/body/Body";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
-import { style } from "./Summary.style";
+import { style as summaryStyle } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 
 interface SummaryProps {
@@ -31,19 +31,23 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
     customer: { customerId, country, segment },
     basePath,
   } = useStaticInfo();
+  const screenSize = useScreenSize();
+  const isDesktopScreen = screenSize === "L";
+
+  const style = useMemo(() => summaryStyle(), []);
+
   const [pricingCollapsed, setPricingCollapsed] = useState(true);
   const [pricingHeight, setPricingHeight] = useState(0);
+
   const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TITLE });
   const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_DESCRIPTION });
   const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
-  const { screen } = useDevice();
 
   const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id as string });
   const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
 
   const navigate = useNavigate();
-
   const match = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
   const tab = match?.params.tab;
 
@@ -120,12 +124,12 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
         {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
 
         <AuroraLayout
-          fullWidth={!screen.L}
-          style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
+          fullWidth={!isDesktopScreen}
+          style={[isDesktopScreen && style.desktopLayoutSpacing, !isDesktopScreen && { paddingBottom: pricingHeight }]}
         >
-          <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
-            <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
-              <View style={!screen.L && style.mobileInfo}>
+          <Box size={{ L: "2/3" }} style={isDesktopScreen && style.desktopListSpacing}>
+            <View style={[style.contentWrapper, isDesktopScreen && style.desktopContentWrapper]}>
+              <View style={!isDesktopScreen && style.mobileInfo}>
                 <Text level={3} style={style.title} heading>
                   {titleText}
                 </Text>
@@ -138,8 +142,8 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
             </View>
           </Box>
 
-          {pricing && screen.L ? (
-            <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : style.mobileResume]}>
+          {pricing && isDesktopScreen ? (
+            <Box size={{ L: "1/3" }} style={[style.resume, isDesktopScreen ? style.desktopResume : style.mobileResume]}>
               <View style={style.princingWrapper}>
                 <CollapsiblePricing
                   collapsed={false}
@@ -155,7 +159,7 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
         </AuroraLayout>
       </ScrollView>
 
-      {pricing && !screen.L ? (
+      {pricing && !isDesktopScreen ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
             <CollapsiblePricing

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.style.ts

@@ -1,24 +1,26 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space1, space3 } = theme();
+const style = () => {
+  const { space1, space3 } = theme();
 
-const style = StyleSheet.create({
-  collapsed: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  collapsedContent: {
-    flex: 1,
-    marginBottom: space1,
-  },
-  iconContainer: {
-    alignItems: "center",
-    marginBottom: space3,
-  },
-  totalCollapsed: {
-    marginBottom: space1,
-  },
-});
+  return StyleSheet.create({
+    collapsed: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+    },
+    collapsedContent: {
+      flex: 1,
+      marginBottom: space1,
+    },
+    iconContainer: {
+      alignItems: "center",
+      marginBottom: space3,
+    },
+    totalCollapsed: {
+      marginBottom: space1,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.tsx

@@ -1,13 +1,14 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { Pressable, View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { Button, Icon, Text } from "@lookiero/aurora";
+import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Icon } from "@lookiero/sty-psp-ui";
 import { PricingProjection } from "../../../../../../projection/pricing/pricing";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Pricing } from "../pricing/Pricing";
-import { style } from "./CollapsiblePricing.style";
+import { style as collapsiblePricingStyle } from "./CollapsiblePricing.style";
 
 interface CollapsiblePricingProps {
   readonly pricing: PricingProjection;
@@ -49,6 +50,8 @@ const CollapsiblePricing: FC<CollapsiblePricingProps> = ({
     [notCollapsedOpacity.value],
   );
 
+  const style = useMemo(() => collapsiblePricingStyle(), []);
+
   return (
     <>
       {collapsible && (

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/__snapshots__/CollapsiblePricing.test.tsx.snap

@@ -77,11 +77,19 @@ exports[`Pricing component matches the snapshot for collaped pricing: collapsed
           {
             "color": "#0C0A0A",
             "fontFamily": "auroraicons",
-            "fontSize": 16,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "height": 16,
-            "width": 16,
+            "height": 24,
+            "letterSpacing": -0.2,
+            "lineHeight": 24,
+            "minHeight": 24,
+            "minWidth": 24,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 0,
+            "width": 24,
           },
         ]
       }
@@ -421,11 +429,19 @@ exports[`Pricing component matches the snapshot for non-collaped pricing: non-co
           {
             "color": "#0C0A0A",
             "fontFamily": "auroraicons",
-            "fontSize": 16,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "height": 16,
-            "width": 16,
+            "height": 24,
+            "letterSpacing": -0.2,
+            "lineHeight": 24,
+            "minHeight": 24,
+            "minWidth": 24,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 0,
+            "width": 24,
           },
         ]
       }