@wavemaker/foundation-css 11.14.3-rc.6401 → 11.15.0-2.247

package/src/tokens/mobile/components/search/search.json

@@ -216,6 +216,48 @@
               "description": "Sets the ripple effect color of search buttons (the visual feedback when buttons are pressed). This determines what color the ripple effect appears in when the search button is clicked.<br>CSS variable: --wm-search-btn-ripple-color"
             }
           }
+        },
+        "padding": {
+          "top": {
+            "value": "{space.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the top padding (vertical spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-top"
+            }
+          },
+          "bottom": {
+            "value": "{space.0.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the bottom padding (vertical spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-bottom"
+            }
+          },
+          "left": {
+            "value": "{space.6.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the left padding (horizontal spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-left"
+            }
+          },
+          "right": {
+            "value": "{space.6.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the right padding (horizontal spacing) of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-padding-right"
+            }
+          }
+        },
+        "width": {
+          "value": "auto",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the width of search button. Acceptable units: px.<br>CSS variable: --wm-search-btn-width"
+          }
         }
       },
       "placeholder": {
@@ -236,7 +278,7 @@
           "type": "color",
           "attributes": {
             "subtype": "color",
-            "description": "Sets the background color of search autocomplete items (suggestions that appear in the dropdown). This determines what color the background of autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-background"
+            "description": "Sets the background color of data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the background of data complete message appears in.<br>CSS variable: --wm-search-data-complete-background"
           }
         },
         "padding": {
@@ -245,7 +287,7 @@
             "type": "space",
             "attributes": {
               "subtype": "space",
-              "description": "Controls the top padding (vertical spacing) of search autocomplete items. This creates breathing room at the top of autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-top"
+              "description": "Controls the top padding (vertical spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-top"
             }
           },
           "bottom": {
@@ -253,7 +295,7 @@
             "type": "space",
             "attributes": {
               "subtype": "space",
-              "description": "Controls the bottom padding (vertical spacing) of search autocomplete items. This creates breathing room at the bottom of autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-bottom"
+              "description": "Controls the bottom padding (vertical spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-bottom"
             }
           },
           "left": {
@@ -261,7 +303,7 @@
             "type": "space",
             "attributes": {
               "subtype": "space",
-              "description": "Controls the left padding (horizontal spacing) of search autocomplete items. This creates breathing room on the left side of autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-left"
+              "description": "Controls the left padding (horizontal spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-left"
             }
           },
           "right": {
@@ -269,7 +311,7 @@
             "type": "space",
             "attributes": {
               "subtype": "space",
-              "description": "Controls the right padding (horizontal spacing) of search autocomplete items. This creates breathing room on the right side of autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-right"
+              "description": "Controls the right padding (horizontal spacing) of search data complete message (which appears after the last item or when no results are found in suggestions). Acceptable units: px.<br>CSS variable: --wm-search-data-complete-padding-right"
             }
           }
         },
@@ -279,7 +321,7 @@
             "type": "color",
             "attributes": {
               "subtype": "color",
-              "description": "Sets the text color of search autocomplete items. This determines what color the text in autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-text-color"
+              "description": "Sets the text color of search data complete message (which appears after the last item or when no results are found in suggestions). This determines what color the text in autocomplete items appears in.<br>CSS variable: --wm-search-data-complete-text-color"
             }
           },
           "font": {
@@ -288,7 +330,7 @@
               "type": "font",
               "attributes": {
                 "subtype": "font-size",
-                "description": "Controls the font size of search autocomplete item text. This affects how large the text appears in autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-text-font-size"
+                "description": "Controls the font size of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how large the text appears in autocomplete items. Acceptable units: px.<br>CSS variable: --wm-search-data-complete-text-font-size"
               }
             },
             "family": {
@@ -296,7 +338,7 @@
               "type": "font",
               "attributes": {
                 "subtype": "font-family",
-                "description": "Sets the font family of search autocomplete item text. This determines which font is used for the text in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-family"
+                "description": "Sets the font family of search data complete message text (which appears after the last item or when no results are found in suggestions). This determines which font is used for the text in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-family"
               }
             },
             "weight": {
@@ -304,7 +346,7 @@
               "type": "font",
               "attributes": {
                 "subtype": "font-weight",
-                "description": "Controls the font weight (boldness) of search autocomplete item text. This affects how bold the text appears in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-weight"
+                "description": "Controls the font weight (boldness) of search data complete message text (which appears after the last item or when no results are found in suggestions). This affects how bold the text appears in autocomplete items.<br>CSS variable: --wm-search-data-complete-text-font-weight"
               }
             }
           }
@@ -407,6 +449,88 @@
             }
           }
         }
+      },
+      "clear-btn":{
+        "icon":{
+          "color":{
+            "value":"{color.on-surface.@.value}",
+            "type":"color",
+            "attributes":{
+              "subtype":"color",
+              "description":"Sets the color of search clear button icons. This determines what color the clear button icons appear in.<br>CSS variable: --wm-search-clear-btn-icon-color"
+            }
+          },
+          "size":{
+            "value":"{icon.size.@.value}",
+            "type":"space",
+            "attributes":{
+              "subtype":"icon-size",
+              "description":"Controls the size of search clear button icons. This affects how large the clear button icons appear. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-icon-size"
+            }
+          }
+        },
+        "padding":{
+          "top":{
+            "value":"{space.0.value}",
+            "type":"space",
+            "attributes":{
+              "subtype":"space",
+              "description":"Controls the top padding (vertical spacing) of search clear button. This creates breathing room at the top of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-top"
+            }
+          },
+          "bottom":{
+            "value":"{space.0.value}",
+            "type":"space",
+            "attributes":{
+              "subtype":"space",
+              "description":"Controls the bottom padding (vertical spacing) of search clear button. This creates breathing room at the bottom of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-bottom"
+            }
+          },
+          "left":{
+            "value":"{space.0.value}",
+            "type":"space",
+            "attributes":{
+              "subtype":"space",
+              "description":"Controls the left padding (horizontal spacing) of search clear button. This creates breathing room on the left side of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-left"
+            }
+          },
+          "right":{
+            "value":"{space.0.value}",
+            "type":"space",
+            "attributes":{
+              "subtype":"space",
+              "description":"Controls the right padding (horizontal spacing) of search clear button. This creates breathing room on the right side of search clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-padding-right"
+            }
+          }
+        },
+        "border":{
+          "radius":{
+            "value":"{radius.sm.value}",
+            "type":"radius",
+            "attributes":{
+              "subtype":"radius",
+              "description":"Controls the border radius of search clear button. This determines the roundness of the corners of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-border-radius"
+            }
+          }
+        },
+        "background":{
+          "color":{
+            "value":"{color.transparent.@.value}",
+            "type":"color",
+            "attributes":{
+              "subtype":"color",
+              "description":"Sets the background color of search clear button. This determines the color of the clear button.<br>CSS variable: --wm-search-clear-btn-background-color"
+            }
+          }
+        },
+        "width":{
+          "value":"{space.9.value}",
+          "type":"space",
+          "attributes":{
+            "subtype":"space",
+            "description":"Controls the width of search clear button. This determines the width of the clear button. Acceptable units: px.<br>CSS variable: --wm-search-clear-btn-width"
+          }
+        }
       }
     }
   },

package/src/tokens/mobile/components/switch/switch.json

@@ -8,7 +8,7 @@
         "states": {
           "selected": {
             "selector": {
-              "mobile": "-btn-selected"
+              "mobile": "-btn-selected, .app-switch-btn-selected-text"
             }
           },
           "disabled": {
@@ -57,6 +57,16 @@
             }
           }
         },
+        "text": {
+          "transform": {
+            "value": "capitalize",
+            "type": "font",
+            "attributes": {
+              "subtype": "text-transform",
+              "description": "Controls text transformation for switch button text (the text content within clickable buttons). 'none' keeps the original case, 'uppercase' makes all text uppercase, 'lowercase' makes all text lowercase, and 'capitalize' capitalizes the first letter of each word.<br>CSS variable: --wm-switch-button-text-transform"
+            }
+          }
+        },
         "height": {
           "value": "{space.10.value}",
           "type": "space",
@@ -158,6 +168,42 @@
                   "description": "Sets the border color of selected switch buttons. This maintains the border outline even when the button is selected, helping to maintain visual consistency with the overall switch component design.<br>CSS variable: --wm-switch-button-border-color (selected state)"
                 }
               }
+            },
+            "font": {
+              "size": {
+                "value": "{label.large.font-size.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-size",
+                  "description": "Controls the font size of switch button text. This affects how large the text appears on switch buttons. Acceptable units: px.<br>CSS variable: --wm-switch-button-font-size"
+                }
+              },
+              "family": {
+                "value": "{font.family.brand.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-family",
+                  "description": "Sets the font family of switch button text. This determines which font is used for the text on switch buttons.<br>CSS variable: --wm-switch-button-font-family"
+                }
+              },
+              "weight": {
+                "value": "{font.weight.500.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-weight",
+                  "description": "Controls the font weight (boldness) of switch button text. This affects how bold the text appears on switch buttons.<br>CSS variable: --wm-switch-button-font-weight"
+                }
+              }
+            },
+            "text": {
+              "transform": {
+                "value": "capitalize",
+                "type": "font",
+                "attributes": {
+                  "subtype": "text-transform",
+                  "description": "Controls text transformation for switch button text (the text content within clickable buttons). 'none' keeps the original case, 'uppercase' makes all text uppercase, 'lowercase' makes all text lowercase, and 'capitalize' capitalizes the first letter of each word.<br>CSS variable: --wm-switch-button-text-transform"
+                }
+              }
             }
           }
         },
@@ -171,7 +217,6 @@
             }
           }
         }
-
       }
     }
   }

package/src/tokens/mobile/components/tabbar/tabbar.json

@@ -23,6 +23,34 @@
                     "description": "Controls the height of tabbar components (navigation bars with tabs at the bottom of the screen). This determines the vertical size of the tabbar. Acceptable units: px.<br>CSS variable: --wm-tabbar-height"
                 }
             },
+            "border": {
+                "top": {
+                    "width": {
+                        "value": "{border.width.0.value}",
+                        "type": "border",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the border top width of tabbar. This determines border top width of the tabbar. Acceptable units: %, px.<br>CSS variable: --wm-tabbar-border-top-width"
+                        }
+                    },
+                    "color": {
+                        "value": "{color.scrim.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the border top color of tabbar. This determines what color the border top of the tabbar menu appears in.<br>CSS variable: --wm-tabbar-border-top-color"
+                        }
+                    },
+                    "style": {
+                        "value": "{border.style.solid.value}",
+                        "type": "radius",
+                        "attributes": {
+                            "subtype": "border-style",
+                            "description": "Sets the border top style. Acceptable values: solid, dashed, dotted.<br>CSS variable: --wm-tabbar-border-top-style"
+                        }
+                    }
+                }
+            },
             "box-shadow": {
                 "value": "{elevation.shadow.1.value}",
                 "type": "radius",
@@ -115,20 +143,10 @@
                     },
                     "width": {
                         "value": "{spacer.7.value}",
-                        "type": "spacer",
-                        "attributes": {
-                            "subtype": "space",
-                            "description": "Controls the minimum width of tabbar items. This determines the minimum horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-width"
-                        }
-                    }
-                },
-                "margin": {
-                    "bottom": {
-                        "value": "{space.4.value}",
                         "type": "space",
                         "attributes": {
                             "subtype": "space",
-                            "description": "Controls the bottom margin (vertical spacing) of tabbar items. This creates spacing below tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-margin-bottom"
+                            "description": "Controls the minimum width of tabbar items. This determines the minimum horizontal size of tab items. Acceptable units: px.<br>CSS variable: --wm-tabbar-item-min-width"
                         }
                     }
                 },

package/src/tokens/mobile/components/tabs/tabs.json

@@ -147,19 +147,31 @@
             }
           },
           "text": {
-            "value": "{color.outline.@.value}",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-text"
+            "color": {
+              "value": "{color.outline.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-text"
+              }
             }
           },
-          "icon":{
-            "value": "{color.outline.@.value}",
-            "type": "color",
-            "attributes": {
-              "subtype": "color",
-              "description": "Sets the color of tab item heading icons (icons that appear in tab labels). This determines what color the icons appear in, which should match or complement the tab text color for visual consistency.<br>CSS variable: --wm-tabs-item-heading-icon"
+          "icon": {
+            "size": {
+                  "value": "{icon.size.@.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "font",
+                    "description": "Controls the size of tab item heading icons. This determines how large the icons appear in tab headings.<br>CSS variable: --wm-tabs-item-heading-icon-size"
+                  }
+                },
+            "color": {
+              "value": "{color.outline.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of tab item heading icons (icons that appear in tab labels). This determines what color the icons appear in, which should match or complement the tab text color for visual consistency.<br>CSS variable: --wm-tabs-item-heading-icon-color"
+              }
             }
           },
           "indicator": {
@@ -190,16 +202,6 @@
               "description": "Controls the display property of tab item icons. This determines how icons are displayed in the layout.<br>CSS variable: --wm-tabs-item-heading-icon-display"
             }
           },
-          "font": {
-            "size": {
-              "value": "{h6.font-size.value}",
-              "type": "font",
-              "attributes": {
-                "subtype": "icon-size",
-                "description": "Controls the font size of tab item icons. This affects how large the icons appear. Acceptable units: px.<br>CSS variable: --wm-tabs-item-heading-font-size (for icons)"
-              }
-            }
-          },
           "height": {
             "value": "1",
             "type": "size",
@@ -232,6 +234,32 @@
         "active": {
           "item": {
             "heading": {
+              "font": {
+                "size": {
+                  "value": "{h6.font-size.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "font-size",
+                    "description": "Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"
+                  }
+                },
+                "weight": {
+                  "value": "{h6.font-weight.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "font-weight",
+                    "description": "Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"
+                  }
+                }
+              },
+              "line-height": {
+                "value": "{h6.line-height.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "line-height",
+                  "description": "Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"
+                }
+              },
               "indicator": {
                 "height": {
                   "value": "3px",
@@ -259,19 +287,31 @@
                 }
               },
               "text": {
-                "value": "{color.primary.@.value}",
-                "type": "color",
-                "attributes": {
-                  "subtype": "color",
-                  "description": "Sets the text color of active tab item headings. This determines what color the text appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-text (active state)"
+                "color": {
+                  "value": "{color.primary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the text color of active tab item headings. This determines what color the text appears in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-text (active state)"
+                  }
                 }
               },
-              "icon":{
-                "value": "{color.primary.@.value}",
-                "type": "color",
-                "attributes": {
-                  "subtype": "color",
-                  "description": "Sets the color of active tab item heading icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon (active state)"
+              "icon": {
+                "size": {
+                  "value": "{icon.size.@.value}",
+                  "type": "font",
+                  "attributes": {
+                    "subtype": "font",
+                    "description": "Controls the size of active tab item heading icons. This determines how large the icons appear in active tab headings, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-size (active state)"
+                  }
+                },
+                "color": {
+                  "value": "{color.primary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color",
+                    "description": "Sets the color of active tab item heading icons. This determines what color the icons appear in for active tabs, typically matching the primary theme color.<br>CSS variable: --wm-tabs-item-heading-icon-color (active state)"
+                  }
                 }
               }
             }

package/src/tokens/mobile/components/tile/tile.json

@@ -110,9 +110,26 @@
           }
         }
       }
-
     },
     "mapping": {
+      "background": {
+        "color": {
+          "value": "{color.surface.container.low.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Controls the background color of tile components (rectangular content blocks that hold information). This determines the color of the tile. <br>CSS variable: --wm-tile-background-color"
+          }
+        }
+      },
+      "color": {
+        "value": "{color.on-surface.variant.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Controls the template color of tile components (rectangular content blocks that hold information). This determines the color of the tile template. <br>CSS variable: --wm-tile-color"
+        }
+      },
       "border": {
         "radius": {
           "value": "{radius.sm.value}",
@@ -173,7 +190,6 @@
           }
         }
       }
-      
     },
     "appearances": {
       "default": {

package/src/tokens/mobile/components/toggle/toggle.json

@@ -144,6 +144,32 @@
               }
             }
           },
+          "border": {
+            "color": {
+              "value": "{color.secondary.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of the border around toggle switches when they are in the on/checked state. This determines the color of the outline that defines the toggle switch shape in its on state.<br>CSS variable: --wm-toggle-border-color"
+              }
+            },
+            "radius": {
+              "value": "18px",
+              "type": "space",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the corner rounding of toggle switches when they are in the on/checked state. When set to a high value, the toggle appears with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-toggle-border-radius"
+              }
+            },
+            "width": {
+              "value": "2px",
+              "type": "border",
+              "attributes": {
+                "subtype": "border-width",
+                "description": "Controls the thickness of the border around toggle switches when they are in the on/checked state. This creates the outline that defines the toggle switch shape and makes it visible to users.<br>CSS variable: --wm-toggle-border-width"
+              }
+            }
+          },
           "handle": {
             "color": {
               "value": "{color.on-secondary.@.value}",
@@ -152,6 +178,48 @@
                 "subtype": "color",
                 "description": "Sets the color of toggle handles when the toggle is in the on/checked state. This determines what color the draggable part of the toggle appears in when enabled.<br>CSS variable: --wm-toggle-handle-color (on state)"
               }
+            },
+            "width": {
+              "value": "16px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the width of toggle handles when the toggle is in the on/checked state (the circular element that slides along the toggle track). This determines how wide the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-width"
+              }
+            },
+            "height": {
+              "value": "16px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the height of toggle handles when the toggle is in the on/checked state (the circular element that slides along the toggle track). This determines how tall the draggable part of the toggle appears.<br>CSS variable: --wm-toggle-handle-height"
+              }
+            },
+            "radius": {
+              "value": "18px",
+              "type": "space",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the corner rounding of toggle handles when the toggle is in the on/checked state (the circular element that slides along the toggle track). This makes the handle appear with rounded corners, creating a circular or pill-shaped appearance.<br>CSS variable: --wm-toggle-handle-radius"
+              }
+            },
+            "margin": {
+              "left": {
+                "value": "8px",
+                "type": "space",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls the left margin of toggle handles when the toggle is in the on/checked state (the spacing from the left edge of the toggle track). This determines the initial position of the handle when the toggle is in the off state.<br>CSS variable: --wm-toggle-handle-margin-left"
+                }
+              },
+              "right": {
+                "value": "1px",
+                "type": "space",
+                "attributes": {
+                  "subtype": "space",
+                  "description": "Controls the right margin of toggle handles when the toggle is in the on/checked state (the spacing from the right edge of the toggle track). This affects the positioning of the handle when the toggle is in the on state.<br>CSS variable: --wm-toggle-handle-margin-right"
+                }
+              }
             }
           }
         },