@exponential_app/eui 0.2.1 → 0.4.0

package/fixtures/theme-resolved.json

@@ -742,6 +742,174 @@
             }
           ]
         },
+        "ZoomableImage": {
+          "root": [
+            {
+              "style": {
+                "backgroundColor": "#00000000"
+              }
+            }
+          ],
+          "image": [
+            {
+              "style": {
+                "borderRadius": "$radius.md"
+              }
+            }
+          ],
+          "pill": [
+            {
+              "style": {
+                "padding": 4,
+                "gap": 2,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.popover",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.lg",
+                "backdropBlur": "$blur.lg"
+              }
+            }
+          ],
+          "zoomOut": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "percent": [
+            {
+              "style": {
+                "height": 28,
+                "paddingHorizontal": "$spacing.md",
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "zoomIn": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "divider": [
+            {
+              "style": {
+                "width": 1,
+                "height": 16,
+                "backgroundColor": "$color.border"
+              }
+            }
+          ],
+          "fit": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            }
+          ]
+        },
         "QrCode": {
           "root": [
             {
@@ -3426,103 +3594,309 @@
                 "backgroundColor": "$color.primary"
               }
             }
-          ]
-        },
-        "AudioPlayer": {
-          "controls": [
+          ],
+          "counter": [
             {
               "style": {
-                "height": "$control.row"
+                "height": 20,
+                "paddingHorizontal": "$spacing.sm",
+                "borderRadius": "$radius.full",
+                "backgroundColor": "#0000008c",
+                "color": "#ffffff",
+                "fontSize": "$type.size.xs",
+                "lineHeight": 20,
+                "fontWeight": "$type.weight.medium"
               }
             }
           ],
-          "track": [
+          "thumbnails": [
             {
               "style": {
-                "fontFamily": "$type.family.sans",
-                "fontSize": "$type.size.sm",
-                "lineHeight": "$type.lineHeight.sm",
-                "fontWeight": "$type.weight.medium",
-                "color": "$color.foreground"
+                "gap": "$spacing.sm"
               }
             }
-          ]
-        },
-        "TreeGuides": {
-          "line": [
+          ],
+          "thumbnail": [
             {
               "style": {
-                "color": "$color.border",
-                "width": "$control.hairline"
+                "width": 52,
+                "height": 52,
+                "borderRadius": "$radius.md",
+                "borderWidth": "$border.thick",
+                "borderColor": "#00000000",
+                "backgroundColor": "$color.muted",
+                "opacity": 0.7,
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
               }
-            }
-          ]
-        },
-        "Chart": {
-          "axis": [
+            },
             {
+              "when": {
+                "state": "hover"
+              },
               "style": {
-                "color": "$color.mutedForeground",
-                "fontSize": "$type.size.xs",
-                "fontFamily": "$type.family.sans"
+                "opacity": 1
               }
-            }
-          ],
-          "grid": [
+            },
             {
+              "when": {
+                "state": "focus"
+              },
               "style": {
-                "color": "$color.border"
+                "borderColor": "$color.ring"
               }
-            }
-          ],
-          "legend": [
+            },
             {
+              "when": {
+                "state": "selected"
+              },
               "style": {
-                "color": "$color.mutedForeground",
-                "fontSize": "$type.size.xs",
-                "gap": "$spacing.sm"
+                "borderColor": "$color.foreground",
+                "opacity": 1
               }
             }
-          ],
-          "tooltip": [
+          ]
+        },
+        "Mosaic": {
+          "root": [
             {
               "style": {
-                "backgroundColor": "$color.popover",
-                "color": "$color.popoverForeground",
-                "borderWidth": "$border.hairline",
-                "borderColor": "$color.border",
-                "borderRadius": "$radius.md",
-                "boxShadow": "$shadow.md",
-                "padding": "$spacing.sm",
-                "fontSize": "$type.size.xs"
+                "gap": 10
               }
             }
           ],
-          "title": [
+          "side": [
             {
               "style": {
-                "fontSize": "$type.size.sm",
-                "lineHeight": "$type.lineHeight.sm",
-                "fontWeight": "$type.weight.semibold",
-                "color": "$color.foreground",
-                "fontFamily": "$type.family.sans"
+                "gap": 10
               }
             }
           ],
-          "valueLabel": [
+          "lead": [
             {
               "style": {
-                "fontSize": "$type.size.xs",
-                "color": "$color.foreground",
-                "fontFamily": "$type.family.sans"
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
               }
-            }
-          ]
-        },
-        "Unknown": {
-          "root": [
+            },
             {
-              "style": {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "pair": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "top": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "bottom": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "more": [
+            {
+              "style": {
+                "backgroundColor": "#0000008c"
+              }
+            }
+          ],
+          "moreLabel": [
+            {
+              "style": {
+                "color": "#ffffff",
+                "fontSize": "$type.size.xl",
+                "lineHeight": "$type.lineHeight.xl",
+                "fontWeight": "$type.weight.semibold"
+              }
+            }
+          ]
+        },
+        "AudioPlayer": {
+          "controls": [
+            {
+              "style": {
+                "height": "$control.row"
+              }
+            }
+          ],
+          "track": [
+            {
+              "style": {
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "color": "$color.foreground"
+              }
+            }
+          ]
+        },
+        "TreeGuides": {
+          "line": [
+            {
+              "style": {
+                "color": "$color.border",
+                "width": "$control.hairline"
+              }
+            }
+          ]
+        },
+        "Chart": {
+          "axis": [
+            {
+              "style": {
+                "color": "$color.mutedForeground",
+                "fontSize": "$type.size.xs",
+                "fontFamily": "$type.family.sans"
+              }
+            }
+          ],
+          "grid": [
+            {
+              "style": {
+                "color": "$color.border"
+              }
+            }
+          ],
+          "legend": [
+            {
+              "style": {
+                "color": "$color.mutedForeground",
+                "fontSize": "$type.size.xs",
+                "gap": "$spacing.sm"
+              }
+            }
+          ],
+          "tooltip": [
+            {
+              "style": {
+                "backgroundColor": "$color.popover",
+                "color": "$color.popoverForeground",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "borderRadius": "$radius.md",
+                "boxShadow": "$shadow.md",
+                "padding": "$spacing.sm",
+                "fontSize": "$type.size.xs"
+              }
+            }
+          ],
+          "title": [
+            {
+              "style": {
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.semibold",
+                "color": "$color.foreground",
+                "fontFamily": "$type.family.sans"
+              }
+            }
+          ],
+          "valueLabel": [
+            {
+              "style": {
+                "fontSize": "$type.size.xs",
+                "color": "$color.foreground",
+                "fontFamily": "$type.family.sans"
+              }
+            }
+          ]
+        },
+        "Unknown": {
+          "root": [
+            {
+              "style": {
                 "borderWidth": "$border.hairline",
                 "borderColor": "$color.destructive",
                 "borderRadius": "$radius.md",
@@ -4421,8 +4795,9 @@
           "cell": [
             {
               "style": {
-                "height": "$control.row",
-                "paddingHorizontal": "$spacing.sm"
+                "minHeight": "$control.row",
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs"
               }
             },
             {
@@ -4430,7 +4805,7 @@
                 "density": "compact"
               },
               "style": {
-                "height": "$control.rowCompact"
+                "minHeight": "$control.rowCompact"
               }
             }
           ],
@@ -5684,6 +6059,88 @@
             }
           ]
         },
+        "Outline": {
+          "caption": [
+            {
+              "style": {
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs",
+                "fontSize": 11,
+                "lineHeight": 16,
+                "fontWeight": "$type.weight.medium",
+                "letterSpacing": 0.5,
+                "textTransform": "uppercase",
+                "color": "$color.mutedForeground"
+              }
+            }
+          ],
+          "row": [
+            {
+              "style": {
+                "borderRadius": "$radius.sm",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent"
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "active": true
+              },
+              "style": {
+                "backgroundColor": "$color.accent"
+              }
+            }
+          ],
+          "bar": [
+            {
+              "style": {
+                "backgroundColor": "$color.foreground"
+              }
+            }
+          ],
+          "title": [
+            {
+              "style": {
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "color": "$color.mutedForeground"
+              }
+            },
+            {
+              "when": {
+                "active": true
+              },
+              "style": {
+                "color": "$color.foreground",
+                "fontWeight": "$type.weight.medium"
+              }
+            }
+          ],
+          "count": [
+            {
+              "style": {
+                "color": "$color.mutedForeground"
+              }
+            }
+          ]
+        },
         "AppBar": {
           "root": [
             {
@@ -6825,74 +7282,242 @@
             },
             {
               "when": {
-                "tone": "warning"
+                "tone": "warning"
+              },
+              "style": {
+                "color": "$color.warning"
+              }
+            },
+            {
+              "when": {
+                "tone": "danger"
+              },
+              "style": {
+                "color": "$color.destructive"
+              }
+            },
+            {
+              "when": {
+                "tone": "info"
+              },
+              "style": {
+                "color": "$color.info"
+              }
+            },
+            {
+              "when": {
+                "tone": "neutral"
+              },
+              "style": {
+                "color": "$color.mutedForeground"
+              }
+            }
+          ]
+        },
+        "Avatar": {
+          "root": [
+            {
+              "style": {
+                "width": "$control.avatarMd",
+                "height": "$control.avatarMd",
+                "borderRadius": "$radius.full"
+              }
+            },
+            {
+              "when": {
+                "size": "sm"
+              },
+              "style": {
+                "width": "$control.avatarSm",
+                "height": "$control.avatarSm"
+              }
+            },
+            {
+              "when": {
+                "size": "lg"
+              },
+              "style": {
+                "width": "$control.avatarLg",
+                "height": "$control.avatarLg"
+              }
+            }
+          ],
+          "fallback": [
+            {
+              "style": {
+                "backgroundColor": "$color.muted",
+                "color": "$color.mutedForeground",
+                "fontSize": "$type.size.sm",
+                "fontWeight": "$type.weight.medium",
+                "fontFamily": "$type.family.sans"
+              }
+            }
+          ]
+        },
+        "ZoomableImage": {
+          "root": [
+            {
+              "style": {
+                "backgroundColor": "#00000000"
+              }
+            }
+          ],
+          "image": [
+            {
+              "style": {
+                "borderRadius": "$radius.md"
+              }
+            }
+          ],
+          "pill": [
+            {
+              "style": {
+                "padding": 4,
+                "gap": 2,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.popover",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.lg",
+                "backdropBlur": "$blur.lg"
+              }
+            }
+          ],
+          "zoomOut": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "percent": [
+            {
+              "style": {
+                "height": 28,
+                "paddingHorizontal": "$spacing.md",
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
               },
               "style": {
-                "color": "$color.warning"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
               "when": {
-                "tone": "danger"
+                "state": "disabled"
               },
               "style": {
-                "color": "$color.destructive"
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "zoomIn": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
               }
             },
             {
               "when": {
-                "tone": "info"
+                "state": "hover"
               },
               "style": {
-                "color": "$color.info"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
               "when": {
-                "tone": "neutral"
+                "state": "disabled"
               },
               "style": {
-                "color": "$color.mutedForeground"
+                "opacity": "$opacity.disabled"
               }
             }
-          ]
-        },
-        "Avatar": {
-          "root": [
+          ],
+          "divider": [
             {
               "style": {
-                "width": "$control.avatarMd",
-                "height": "$control.avatarMd",
-                "borderRadius": "$radius.full"
+                "width": 1,
+                "height": 16,
+                "backgroundColor": "$color.border"
+              }
+            }
+          ],
+          "fit": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
               }
             },
             {
               "when": {
-                "size": "sm"
+                "state": "hover"
               },
               "style": {
-                "width": "$control.avatarSm",
-                "height": "$control.avatarSm"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
               "when": {
-                "size": "lg"
+                "state": "disabled"
               },
               "style": {
-                "width": "$control.avatarLg",
-                "height": "$control.avatarLg"
+                "opacity": "$opacity.disabled"
               }
-            }
-          ],
-          "fallback": [
+            },
             {
+              "when": {
+                "state": "selected"
+              },
               "style": {
-                "backgroundColor": "$color.muted",
-                "color": "$color.mutedForeground",
-                "fontSize": "$type.size.sm",
-                "fontWeight": "$type.weight.medium",
-                "fontFamily": "$type.family.sans"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             }
           ]
@@ -9754,13 +10379,219 @@
                 "borderRadius": "$radius.full",
                 "backgroundColor": "$color.border"
               }
-            },
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "backgroundColor": "$color.primary"
+              }
+            }
+          ],
+          "counter": [
+            {
+              "style": {
+                "height": 20,
+                "paddingHorizontal": "$spacing.sm",
+                "borderRadius": "$radius.full",
+                "backgroundColor": "#0000008c",
+                "color": "#ffffff",
+                "fontSize": "$type.size.xs",
+                "lineHeight": 20,
+                "fontWeight": "$type.weight.medium"
+              }
+            }
+          ],
+          "thumbnails": [
+            {
+              "style": {
+                "gap": "$spacing.sm"
+              }
+            }
+          ],
+          "thumbnail": [
+            {
+              "style": {
+                "width": 52,
+                "height": 52,
+                "borderRadius": "$radius.md",
+                "borderWidth": "$border.thick",
+                "borderColor": "#00000000",
+                "backgroundColor": "$color.muted",
+                "opacity": 0.7,
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 1
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "borderColor": "$color.foreground",
+                "opacity": 1
+              }
+            }
+          ]
+        },
+        "Mosaic": {
+          "root": [
+            {
+              "style": {
+                "gap": 10
+              }
+            }
+          ],
+          "side": [
+            {
+              "style": {
+                "gap": 10
+              }
+            }
+          ],
+          "lead": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "pair": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "top": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "bottom": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "more": [
+            {
+              "style": {
+                "backgroundColor": "#0000008c"
+              }
+            }
+          ],
+          "moreLabel": [
             {
-              "when": {
-                "state": "selected"
-              },
               "style": {
-                "backgroundColor": "$color.primary"
+                "color": "#ffffff",
+                "fontSize": "$type.size.xl",
+                "lineHeight": "$type.lineHeight.xl",
+                "fontWeight": "$type.weight.semibold"
               }
             }
           ]
@@ -10833,8 +11664,9 @@
           "cell": [
             {
               "style": {
-                "height": "$control.row",
-                "paddingHorizontal": "$spacing.sm"
+                "minHeight": "$control.row",
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs"
               }
             },
             {
@@ -10842,7 +11674,7 @@
                 "density": "compact"
               },
               "style": {
-                "height": "$control.rowCompact"
+                "minHeight": "$control.rowCompact"
               }
             }
           ],
@@ -12165,6 +12997,88 @@
             }
           ]
         },
+        "Outline": {
+          "caption": [
+            {
+              "style": {
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs",
+                "fontSize": 11,
+                "lineHeight": 16,
+                "fontWeight": "$type.weight.medium",
+                "letterSpacing": 0.5,
+                "textTransform": "uppercase",
+                "color": "$color.mutedForeground"
+              }
+            }
+          ],
+          "row": [
+            {
+              "style": {
+                "borderRadius": "$radius.sm",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent"
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "active": true
+              },
+              "style": {
+                "backgroundColor": "$color.accent"
+              }
+            }
+          ],
+          "bar": [
+            {
+              "style": {
+                "backgroundColor": "$color.foreground"
+              }
+            }
+          ],
+          "title": [
+            {
+              "style": {
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "color": "$color.mutedForeground"
+              }
+            },
+            {
+              "when": {
+                "active": true
+              },
+              "style": {
+                "color": "$color.foreground",
+                "fontWeight": "$type.weight.medium"
+              }
+            }
+          ],
+          "count": [
+            {
+              "style": {
+                "color": "$color.mutedForeground"
+              }
+            }
+          ]
+        },
         "AppBar": {
           "root": [
             {
@@ -13345,78 +14259,246 @@
             },
             {
               "when": {
-                "tone": "danger"
+                "tone": "danger"
+              },
+              "style": {
+                "color": "$color.destructive"
+              }
+            },
+            {
+              "when": {
+                "tone": "info"
+              },
+              "style": {
+                "color": "$color.info"
+              }
+            },
+            {
+              "when": {
+                "tone": "neutral"
+              },
+              "style": {
+                "color": "$color.mutedForeground"
+              }
+            }
+          ]
+        },
+        "Avatar": {
+          "root": [
+            {
+              "style": {
+                "width": "$control.avatarMd",
+                "height": "$control.avatarMd",
+                "borderRadius": "$radius.full"
+              }
+            },
+            {
+              "when": {
+                "size": "sm"
+              },
+              "style": {
+                "width": "$control.avatarSm",
+                "height": "$control.avatarSm"
+              }
+            },
+            {
+              "when": {
+                "size": "lg"
+              },
+              "style": {
+                "width": "$control.avatarLg",
+                "height": "$control.avatarLg"
+              }
+            },
+            {
+              "style": {
+                "borderRadius": "$radius.lg"
+              }
+            }
+          ],
+          "fallback": [
+            {
+              "style": {
+                "backgroundColor": "$color.muted",
+                "color": "$color.mutedForeground",
+                "fontSize": "$type.size.sm",
+                "fontWeight": "$type.weight.medium",
+                "fontFamily": "$type.family.sans"
+              }
+            },
+            {
+              "style": {
+                "backgroundColor": "$color.secondary",
+                "color": "$color.secondaryForeground",
+                "fontWeight": "$type.weight.bold"
+              }
+            }
+          ]
+        },
+        "ZoomableImage": {
+          "root": [
+            {
+              "style": {
+                "backgroundColor": "#00000000"
+              }
+            }
+          ],
+          "image": [
+            {
+              "style": {
+                "borderRadius": "$radius.md"
+              }
+            }
+          ],
+          "pill": [
+            {
+              "style": {
+                "padding": 4,
+                "gap": 2,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.popover",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.lg",
+                "backdropBlur": "$blur.lg"
+              }
+            }
+          ],
+          "zoomOut": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "percent": [
+            {
+              "style": {
+                "height": 28,
+                "paddingHorizontal": "$spacing.md",
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "zoomIn": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
               },
               "style": {
-                "color": "$color.destructive"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
               "when": {
-                "tone": "info"
+                "state": "disabled"
               },
               "style": {
-                "color": "$color.info"
+                "opacity": "$opacity.disabled"
               }
-            },
+            }
+          ],
+          "divider": [
             {
-              "when": {
-                "tone": "neutral"
-              },
               "style": {
-                "color": "$color.mutedForeground"
+                "width": 1,
+                "height": 16,
+                "backgroundColor": "$color.border"
               }
             }
-          ]
-        },
-        "Avatar": {
-          "root": [
+          ],
+          "fit": [
             {
               "style": {
-                "width": "$control.avatarMd",
-                "height": "$control.avatarMd",
-                "borderRadius": "$radius.full"
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
               }
             },
             {
               "when": {
-                "size": "sm"
+                "state": "hover"
               },
               "style": {
-                "width": "$control.avatarSm",
-                "height": "$control.avatarSm"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
               "when": {
-                "size": "lg"
+                "state": "disabled"
               },
               "style": {
-                "width": "$control.avatarLg",
-                "height": "$control.avatarLg"
-              }
-            },
-            {
-              "style": {
-                "borderRadius": "$radius.lg"
-              }
-            }
-          ],
-          "fallback": [
-            {
-              "style": {
-                "backgroundColor": "$color.muted",
-                "color": "$color.mutedForeground",
-                "fontSize": "$type.size.sm",
-                "fontWeight": "$type.weight.medium",
-                "fontFamily": "$type.family.sans"
+                "opacity": "$opacity.disabled"
               }
             },
             {
+              "when": {
+                "state": "selected"
+              },
               "style": {
-                "backgroundColor": "$color.secondary",
-                "color": "$color.secondaryForeground",
-                "fontWeight": "$type.weight.bold"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             }
           ]
@@ -16399,21 +17481,227 @@
               }
             }
           ],
-          "indicator": [
+          "indicator": [
+            {
+              "style": {
+                "width": 8,
+                "height": 8,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.border"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "backgroundColor": "$color.primary"
+              }
+            }
+          ],
+          "counter": [
+            {
+              "style": {
+                "height": 20,
+                "paddingHorizontal": "$spacing.sm",
+                "borderRadius": "$radius.full",
+                "backgroundColor": "#0000008c",
+                "color": "#ffffff",
+                "fontSize": "$type.size.xs",
+                "lineHeight": 20,
+                "fontWeight": "$type.weight.medium"
+              }
+            }
+          ],
+          "thumbnails": [
+            {
+              "style": {
+                "gap": "$spacing.sm"
+              }
+            }
+          ],
+          "thumbnail": [
+            {
+              "style": {
+                "width": 52,
+                "height": 52,
+                "borderRadius": "$radius.md",
+                "borderWidth": "$border.thick",
+                "borderColor": "#00000000",
+                "backgroundColor": "$color.muted",
+                "opacity": 0.7,
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 1
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "borderColor": "$color.foreground",
+                "opacity": 1
+              }
+            }
+          ]
+        },
+        "Mosaic": {
+          "root": [
+            {
+              "style": {
+                "gap": 10
+              }
+            }
+          ],
+          "side": [
+            {
+              "style": {
+                "gap": 10
+              }
+            }
+          ],
+          "lead": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "pair": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "top": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "bottom": [
+            {
+              "style": {
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "opacity": 0.92
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            }
+          ],
+          "more": [
             {
               "style": {
-                "width": 8,
-                "height": 8,
-                "borderRadius": "$radius.full",
-                "backgroundColor": "$color.border"
+                "backgroundColor": "#0000008c"
               }
-            },
+            }
+          ],
+          "moreLabel": [
             {
-              "when": {
-                "state": "selected"
-              },
               "style": {
-                "backgroundColor": "$color.primary"
+                "color": "#ffffff",
+                "fontSize": "$type.size.xl",
+                "lineHeight": "$type.lineHeight.xl",
+                "fontWeight": "$type.weight.semibold"
               }
             }
           ]
@@ -17586,8 +18874,9 @@
           "cell": [
             {
               "style": {
-                "height": "$control.row",
-                "paddingHorizontal": "$spacing.sm"
+                "minHeight": "$control.row",
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs"
               }
             },
             {
@@ -17595,7 +18884,7 @@
                 "density": "compact"
               },
               "style": {
-                "height": "$control.rowCompact"
+                "minHeight": "$control.rowCompact"
               }
             }
           ],
@@ -18950,6 +20239,88 @@
             }
           ]
         },
+        "Outline": {
+          "caption": [
+            {
+              "style": {
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs",
+                "fontSize": 11,
+                "lineHeight": 16,
+                "fontWeight": "$type.weight.medium",
+                "letterSpacing": 0.5,
+                "textTransform": "uppercase",
+                "color": "$color.mutedForeground"
+              }
+            }
+          ],
+          "row": [
+            {
+              "style": {
+                "borderRadius": "$radius.sm",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent"
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "active": true
+              },
+              "style": {
+                "backgroundColor": "$color.accent"
+              }
+            }
+          ],
+          "bar": [
+            {
+              "style": {
+                "backgroundColor": "$color.foreground"
+              }
+            }
+          ],
+          "title": [
+            {
+              "style": {
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "color": "$color.mutedForeground"
+              }
+            },
+            {
+              "when": {
+                "active": true
+              },
+              "style": {
+                "color": "$color.foreground",
+                "fontWeight": "$type.weight.medium"
+              }
+            }
+          ],
+          "count": [
+            {
+              "style": {
+                "color": "$color.mutedForeground"
+              }
+            }
+          ]
+        },
         "AppBar": {
           "root": [
             {
@@ -20151,44 +21522,212 @@
                 "color": "$color.mutedForeground"
               }
             }
-          ]
-        },
-        "Avatar": {
-          "root": [
+          ]
+        },
+        "Avatar": {
+          "root": [
+            {
+              "style": {
+                "width": "$control.avatarMd",
+                "height": "$control.avatarMd",
+                "borderRadius": "$radius.full"
+              }
+            },
+            {
+              "when": {
+                "size": "sm"
+              },
+              "style": {
+                "width": "$control.avatarSm",
+                "height": "$control.avatarSm"
+              }
+            },
+            {
+              "when": {
+                "size": "lg"
+              },
+              "style": {
+                "width": "$control.avatarLg",
+                "height": "$control.avatarLg"
+              }
+            }
+          ],
+          "fallback": [
+            {
+              "style": {
+                "backgroundColor": "$color.muted",
+                "color": "$color.mutedForeground",
+                "fontSize": "$type.size.sm",
+                "fontWeight": "$type.weight.medium",
+                "fontFamily": "$type.family.sans"
+              }
+            }
+          ]
+        },
+        "ZoomableImage": {
+          "root": [
+            {
+              "style": {
+                "backgroundColor": "#00000000"
+              }
+            }
+          ],
+          "image": [
+            {
+              "style": {
+                "borderRadius": "$radius.md"
+              }
+            }
+          ],
+          "pill": [
+            {
+              "style": {
+                "padding": 4,
+                "gap": 2,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.popover",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.lg",
+                "backdropBlur": "$blur.lg"
+              }
+            }
+          ],
+          "zoomOut": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "percent": [
+            {
+              "style": {
+                "height": 28,
+                "paddingHorizontal": "$spacing.md",
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "zoomIn": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "divider": [
+            {
+              "style": {
+                "width": 1,
+                "height": 16,
+                "backgroundColor": "$color.border"
+              }
+            }
+          ],
+          "fit": [
             {
               "style": {
-                "width": "$control.avatarMd",
-                "height": "$control.avatarMd",
-                "borderRadius": "$radius.full"
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
               }
             },
             {
               "when": {
-                "size": "sm"
+                "state": "hover"
               },
               "style": {
-                "width": "$control.avatarSm",
-                "height": "$control.avatarSm"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
               "when": {
-                "size": "lg"
+                "state": "disabled"
               },
               "style": {
-                "width": "$control.avatarLg",
-                "height": "$control.avatarLg"
+                "opacity": "$opacity.disabled"
               }
-            }
-          ],
-          "fallback": [
+            },
             {
+              "when": {
+                "state": "selected"
+              },
               "style": {
-                "backgroundColor": "$color.muted",
-                "color": "$color.mutedForeground",
-                "fontSize": "$type.size.sm",
-                "fontWeight": "$type.weight.medium",
-                "fontFamily": "$type.family.sans"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             }
           ]
@@ -22834,90 +24373,316 @@
             },
             {
               "style": {
-                "backgroundColor": "$color.card",
-                "borderColor": "$color.border",
-                "boxShadow": "$shadow.none"
+                "backgroundColor": "$color.card",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.none"
+              }
+            }
+          ],
+          "field": [
+            {
+              "style": {
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontFamily": "$type.family.sans",
+                "color": "$color.foreground",
+                "minHeight": "$control.buttonMd"
+              }
+            }
+          ],
+          "placeholder": [
+            {
+              "style": {
+                "color": "$color.mutedForeground"
+              }
+            }
+          ],
+          "attachment": [
+            {
+              "style": {
+                "height": "$control.chip",
+                "paddingHorizontal": "$spacing.sm",
+                "borderRadius": "$radius.md",
+                "backgroundColor": "$color.muted",
+                "color": "$color.foreground",
+                "fontSize": "$type.size.xs"
+              }
+            }
+          ],
+          "send": [
+            {
+              "style": {
+                "width": "$control.buttonIcon",
+                "height": "$control.buttonIcon",
+                "borderRadius": "$radius.md",
+                "backgroundColor": "$color.primary",
+                "color": "$color.primaryForeground"
+              }
+            },
+            {
+              "when": {
+                "busy": true
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ]
+        },
+        "List": {
+          "divider": [
+            {
+              "style": {
+                "height": "$control.hairline",
+                "backgroundColor": "$color.border"
+              }
+            }
+          ],
+          "section": [
+            {
+              "style": {
+                "height": "$control.rowCompact",
+                "paddingHorizontal": "$spacing.sm",
+                "backgroundColor": "$color.background",
+                "color": "$color.mutedForeground",
+                "fontSize": "$type.size.xs",
+                "lineHeight": "$type.lineHeight.xs",
+                "fontWeight": "$type.weight.medium"
+              }
+            }
+          ]
+        },
+        "Resizable": {
+          "handle": [
+            {
+              "style": {
+                "backgroundColor": "$color.border",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "backgroundColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "state": "pressed"
+              },
+              "style": {
+                "backgroundColor": "$color.ring"
+              }
+            }
+          ],
+          "grip": [
+            {
+              "style": {
+                "width": 6,
+                "height": 24,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.border",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.background"
+              }
+            },
+            {
+              "when": {
+                "direction": "vertical"
+              },
+              "style": {
+                "width": 24,
+                "height": 6
+              }
+            }
+          ]
+        },
+        "Carousel": {
+          "root": [
+            {
+              "style": {
+                "gap": "$spacing.sm"
+              }
+            }
+          ],
+          "controls": [
+            {
+              "style": {
+                "gap": "$spacing.sm"
+              }
+            }
+          ],
+          "previous": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "next": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "indicator": [
+            {
+              "style": {
+                "width": 8,
+                "height": 8,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.border"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "backgroundColor": "$color.primary"
               }
             }
           ],
-          "field": [
+          "counter": [
             {
               "style": {
-                "fontSize": "$type.size.sm",
-                "lineHeight": "$type.lineHeight.sm",
-                "fontFamily": "$type.family.sans",
-                "color": "$color.foreground",
-                "minHeight": "$control.buttonMd"
+                "height": 20,
+                "paddingHorizontal": "$spacing.sm",
+                "borderRadius": "$radius.full",
+                "backgroundColor": "#0000008c",
+                "color": "#ffffff",
+                "fontSize": "$type.size.xs",
+                "lineHeight": 20,
+                "fontWeight": "$type.weight.medium"
               }
             }
           ],
-          "placeholder": [
+          "thumbnails": [
             {
               "style": {
-                "color": "$color.mutedForeground"
+                "gap": "$spacing.sm"
               }
             }
           ],
-          "attachment": [
+          "thumbnail": [
             {
               "style": {
-                "height": "$control.chip",
-                "paddingHorizontal": "$spacing.sm",
+                "width": 52,
+                "height": 52,
                 "borderRadius": "$radius.md",
+                "borderWidth": "$border.thick",
+                "borderColor": "#00000000",
                 "backgroundColor": "$color.muted",
-                "color": "$color.foreground",
-                "fontSize": "$type.size.xs"
+                "opacity": 0.7,
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
               }
-            }
-          ],
-          "send": [
+            },
             {
+              "when": {
+                "state": "hover"
+              },
               "style": {
-                "width": "$control.buttonIcon",
-                "height": "$control.buttonIcon",
-                "borderRadius": "$radius.md",
-                "backgroundColor": "$color.primary",
-                "color": "$color.primaryForeground"
+                "opacity": 1
               }
             },
             {
               "when": {
-                "busy": true
+                "state": "focus"
               },
               "style": {
-                "opacity": "$opacity.disabled"
+                "borderColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "borderColor": "$color.foreground",
+                "opacity": 1
               }
             }
           ]
         },
-        "List": {
-          "divider": [
+        "Mosaic": {
+          "root": [
             {
               "style": {
-                "height": "$control.hairline",
-                "backgroundColor": "$color.border"
+                "gap": 10
               }
             }
           ],
-          "section": [
+          "side": [
             {
               "style": {
-                "height": "$control.rowCompact",
-                "paddingHorizontal": "$spacing.sm",
-                "backgroundColor": "$color.background",
-                "color": "$color.mutedForeground",
-                "fontSize": "$type.size.xs",
-                "lineHeight": "$type.lineHeight.xs",
-                "fontWeight": "$type.weight.medium"
+                "gap": 10
               }
             }
-          ]
-        },
-        "Resizable": {
-          "handle": [
+          ],
+          "lead": [
             {
               "style": {
-                "backgroundColor": "$color.border",
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
                 "transition": "$motion.fast",
                 "transitionEasing": "$ease.standard"
               }
@@ -22927,7 +24692,7 @@
                 "state": "hover"
               },
               "style": {
-                "backgroundColor": "$color.ring"
+                "opacity": 0.92
               }
             },
             {
@@ -22935,64 +24700,47 @@
                 "state": "focus"
               },
               "style": {
-                "backgroundColor": "$color.ring"
-              }
-            },
-            {
-              "when": {
-                "state": "pressed"
-              },
-              "style": {
-                "backgroundColor": "$color.ring"
+                "borderColor": "$color.ring"
               }
             }
           ],
-          "grip": [
+          "pair": [
             {
               "style": {
-                "width": 6,
-                "height": 24,
-                "borderRadius": "$radius.full",
-                "backgroundColor": "$color.border",
+                "borderRadius": "$radius.lg",
                 "borderWidth": "$border.hairline",
-                "borderColor": "$color.background"
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
               }
             },
             {
               "when": {
-                "direction": "vertical"
+                "state": "hover"
               },
               "style": {
-                "width": 24,
-                "height": 6
-              }
-            }
-          ]
-        },
-        "Carousel": {
-          "root": [
-            {
-              "style": {
-                "gap": "$spacing.sm"
+                "opacity": 0.92
               }
-            }
-          ],
-          "controls": [
+            },
             {
+              "when": {
+                "state": "focus"
+              },
               "style": {
-                "gap": "$spacing.sm"
+                "borderColor": "$color.ring"
               }
             }
           ],
-          "previous": [
+          "top": [
             {
               "style": {
-                "width": 28,
-                "height": 28,
-                "borderRadius": "$radius.full",
-                "color": "$color.foreground",
-                "backgroundColor": "#00000000",
-                "transition": "$motion.fast"
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
               }
             },
             {
@@ -23000,28 +24748,27 @@
                 "state": "hover"
               },
               "style": {
-                "backgroundColor": "$color.accent",
-                "color": "$color.accentForeground"
+                "opacity": 0.92
               }
             },
             {
               "when": {
-                "state": "disabled"
+                "state": "focus"
               },
               "style": {
-                "opacity": "$opacity.disabled"
+                "borderColor": "$color.ring"
               }
             }
           ],
-          "next": [
+          "bottom": [
             {
               "style": {
-                "width": 28,
-                "height": 28,
-                "borderRadius": "$radius.full",
-                "color": "$color.foreground",
-                "backgroundColor": "#00000000",
-                "transition": "$motion.fast"
+                "borderRadius": "$radius.lg",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "backgroundColor": "$color.muted",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
               }
             },
             {
@@ -23029,34 +24776,32 @@
                 "state": "hover"
               },
               "style": {
-                "backgroundColor": "$color.accent",
-                "color": "$color.accentForeground"
+                "opacity": 0.92
               }
             },
             {
               "when": {
-                "state": "disabled"
+                "state": "focus"
               },
               "style": {
-                "opacity": "$opacity.disabled"
+                "borderColor": "$color.ring"
               }
             }
           ],
-          "indicator": [
+          "more": [
             {
               "style": {
-                "width": 8,
-                "height": 8,
-                "borderRadius": "$radius.full",
-                "backgroundColor": "$color.border"
+                "backgroundColor": "#0000008c"
               }
-            },
+            }
+          ],
+          "moreLabel": [
             {
-              "when": {
-                "state": "selected"
-              },
               "style": {
-                "backgroundColor": "$color.primary"
+                "color": "#ffffff",
+                "fontSize": "$type.size.xl",
+                "lineHeight": "$type.lineHeight.xl",
+                "fontWeight": "$type.weight.semibold"
               }
             }
           ]
@@ -24129,8 +25874,9 @@
           "cell": [
             {
               "style": {
-                "height": "$control.row",
-                "paddingHorizontal": "$spacing.sm"
+                "minHeight": "$control.row",
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs"
               }
             },
             {
@@ -24138,7 +25884,7 @@
                 "density": "compact"
               },
               "style": {
-                "height": "$control.rowCompact"
+                "minHeight": "$control.rowCompact"
               }
             }
           ],
@@ -25461,6 +27207,88 @@
             }
           ]
         },
+        "Outline": {
+          "caption": [
+            {
+              "style": {
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs",
+                "fontSize": 11,
+                "lineHeight": 16,
+                "fontWeight": "$type.weight.medium",
+                "letterSpacing": 0.5,
+                "textTransform": "uppercase",
+                "color": "$color.mutedForeground"
+              }
+            }
+          ],
+          "row": [
+            {
+              "style": {
+                "borderRadius": "$radius.sm",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast",
+                "transitionEasing": "$ease.standard"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent"
+              }
+            },
+            {
+              "when": {
+                "state": "focus"
+              },
+              "style": {
+                "borderColor": "$color.ring"
+              }
+            },
+            {
+              "when": {
+                "active": true
+              },
+              "style": {
+                "backgroundColor": "$color.accent"
+              }
+            }
+          ],
+          "bar": [
+            {
+              "style": {
+                "backgroundColor": "$color.foreground"
+              }
+            }
+          ],
+          "title": [
+            {
+              "style": {
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "color": "$color.mutedForeground"
+              }
+            },
+            {
+              "when": {
+                "active": true
+              },
+              "style": {
+                "color": "$color.foreground",
+                "fontWeight": "$type.weight.medium"
+              }
+            }
+          ],
+          "count": [
+            {
+              "style": {
+                "color": "$color.mutedForeground"
+              }
+            }
+          ]
+        },
         "AppBar": {
           "root": [
             {