@exponential_app/eui 0.3.0 → 0.4.0

package/dist/conformance.js

@@ -1,9 +1,9 @@
-import"./chunks/index-abcjanhc.js";
+import"./chunks/index-f9wkb6aq.js";
 import {
   MODES2,
   BUILTIN_THEME_IDS2,
   HOST_CONTRACT_VERSION2
-} from "./chunks/index-h3zgfghf.js";
+} from "./chunks/index-vkn82srs.js";
 // packages/exponential-ui/fixtures/catalog-components.json
 var catalog_components_default = {
   $comment: `AUTO-GENERATED by packages/exponential-ui/scripts/generate.ts — do not edit.
@@ -2896,6 +2896,117 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
         }
       }
     },
+    {
+      name: "ZoomableImage/example",
+      node: {
+        id: "zoomable-image",
+        component: "ZoomableImage",
+        props: {
+          src: "https://example.com/screenshot.png",
+          alt: "Screenshot",
+          naturalWidth: 1440,
+          naturalHeight: 900
+        }
+      }
+    },
+    {
+      name: "ZoomableImage/initial=auto",
+      node: {
+        id: "zoomable-image",
+        component: "ZoomableImage",
+        props: {
+          src: "https://example.com/screenshot.png",
+          alt: "Screenshot",
+          naturalWidth: 1440,
+          naturalHeight: 900,
+          initial: "auto"
+        }
+      }
+    },
+    {
+      name: "ZoomableImage/initial=fit",
+      node: {
+        id: "zoomable-image",
+        component: "ZoomableImage",
+        props: {
+          src: "https://example.com/screenshot.png",
+          alt: "Screenshot",
+          naturalWidth: 1440,
+          naturalHeight: 900,
+          initial: "fit"
+        }
+      }
+    },
+    {
+      name: "ZoomableImage/initial=fitWidth",
+      node: {
+        id: "zoomable-image",
+        component: "ZoomableImage",
+        props: {
+          src: "https://example.com/screenshot.png",
+          alt: "Screenshot",
+          naturalWidth: 1440,
+          naturalHeight: 900,
+          initial: "fitWidth"
+        }
+      }
+    },
+    {
+      name: "ZoomableImage/initial=actual",
+      node: {
+        id: "zoomable-image",
+        component: "ZoomableImage",
+        props: {
+          src: "https://example.com/screenshot.png",
+          alt: "Screenshot",
+          naturalWidth: 1440,
+          naturalHeight: 900,
+          initial: "actual"
+        }
+      }
+    },
+    {
+      name: "ZoomableImage/controls=auto",
+      node: {
+        id: "zoomable-image",
+        component: "ZoomableImage",
+        props: {
+          src: "https://example.com/screenshot.png",
+          alt: "Screenshot",
+          naturalWidth: 1440,
+          naturalHeight: 900,
+          controls: "auto"
+        }
+      }
+    },
+    {
+      name: "ZoomableImage/controls=always",
+      node: {
+        id: "zoomable-image",
+        component: "ZoomableImage",
+        props: {
+          src: "https://example.com/screenshot.png",
+          alt: "Screenshot",
+          naturalWidth: 1440,
+          naturalHeight: 900,
+          controls: "always"
+        }
+      }
+    },
+    {
+      name: "ZoomableImage/controls=none",
+      node: {
+        id: "zoomable-image",
+        component: "ZoomableImage",
+        props: {
+          src: "https://example.com/screenshot.png",
+          alt: "Screenshot",
+          naturalWidth: 1440,
+          naturalHeight: 900,
+          controls: "none"
+        }
+      }
+    },
     {
       name: "Icon/example",
       node: {
@@ -3344,8 +3455,8 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
               value: "issue"
             },
             {
-              label: "Run",
-              value: "run"
+              label: "Session",
+              value: "session"
             }
           ],
           value: "issue"
@@ -3373,8 +3484,8 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
               value: "issue"
             },
             {
-              label: "Run",
-              value: "run"
+              label: "Session",
+              value: "session"
             }
           ],
           value: "issue",
@@ -3403,8 +3514,8 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
               value: "issue"
             },
             {
-              label: "Run",
-              value: "run"
+              label: "Session",
+              value: "session"
             }
           ],
           value: "issue",
@@ -3433,8 +3544,8 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
               value: "issue"
             },
             {
-              label: "Run",
-              value: "run"
+              label: "Session",
+              value: "session"
             }
           ],
           value: "issue",
@@ -3463,8 +3574,8 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
               value: "issue"
             },
             {
-              label: "Run",
-              value: "run"
+              label: "Session",
+              value: "session"
             }
           ],
           value: "issue",
@@ -3493,8 +3604,8 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
               value: "issue"
             },
             {
-              label: "Run",
-              value: "run"
+              label: "Session",
+              value: "session"
             }
           ],
           value: "issue",
@@ -3523,8 +3634,8 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
               value: "issue"
             },
             {
-              label: "Run",
-              value: "run"
+              label: "Session",
+              value: "session"
             }
           ],
           value: "issue",
@@ -3553,8 +3664,8 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
               value: "issue"
             },
             {
-              label: "Run",
-              value: "run"
+              label: "Session",
+              value: "session"
             }
           ],
           value: "issue",
@@ -7386,6 +7497,82 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
         }
       }
     },
+    {
+      name: "Table/wide",
+      node: {
+        id: "table",
+        component: "Table",
+        props: {
+          columns: [
+            {
+              key: "issue",
+              label: "Issue",
+              width: 96
+            },
+            {
+              key: "title",
+              label: "Title"
+            },
+            {
+              key: "board",
+              label: "Board"
+            },
+            {
+              key: "assignee",
+              label: "Assignee"
+            },
+            {
+              key: "status",
+              label: "Status",
+              type: "badge"
+            },
+            {
+              key: "summary",
+              label: "Summary",
+              truncate: true
+            },
+            {
+              key: "estimate",
+              label: "Estimate",
+              type: "number",
+              align: "end"
+            }
+          ],
+          rows: [
+            {
+              id: "a",
+              issue: "APP-9",
+              title: "Fix crash when uploading HEIC photos from the share sheet",
+              board: "Mobile",
+              assignee: "Alice Lindqvist",
+              status: "In progress",
+              summary: "The share extension hands over a file URL the uploader cannot read once the sheet closes",
+              estimate: 3
+            },
+            {
+              id: "b",
+              issue: "APP-21",
+              title: "Offline queue for issue edits",
+              board: "Sync",
+              assignee: "Bob Okafor",
+              status: "Todo",
+              summary: "Edits made without a connection are lost on relaunch",
+              estimate: 8
+            },
+            {
+              id: "c",
+              issue: "APP-18",
+              title: "Reduce cold start below 800 ms",
+              board: "Performance",
+              assignee: "Chen Wei",
+              status: "Done",
+              summary: "Defer the sync bootstrap until after the first frame",
+              estimate: 5
+            }
+          ]
+        }
+      }
+    },
     {
       name: "Chart/example",
       node: {
@@ -10395,6 +10582,733 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           status: "read"
         }
       }
+    },
+    {
+      name: "Motion/example",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      name: "Motion/autoplay=true",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          autoplay: true
+        }
+      }
+    },
+    {
+      name: "Motion/autoplay=false",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          autoplay: false
+        }
+      }
+    },
+    {
+      name: "Motion/loop=true",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          loop: true
+        }
+      }
+    },
+    {
+      name: "Motion/loop=false",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          loop: false
+        }
+      }
+    },
+    {
+      name: "Motion/direction=forward",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          direction: "forward"
+        }
+      }
+    },
+    {
+      name: "Motion/direction=reverse",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          direction: "reverse"
+        }
+      }
+    },
+    {
+      name: "Motion/direction=alternate",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          direction: "alternate"
+        }
+      }
+    },
+    {
+      name: "Motion/play=true",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          play: true
+        }
+      }
+    },
+    {
+      name: "Motion/play=false",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          play: false
+        }
+      }
+    },
+    {
+      name: "Motion/fit=contain",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          fit: "contain"
+        }
+      }
+    },
+    {
+      name: "Motion/fit=cover",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          fit: "cover"
+        }
+      }
+    },
+    {
+      name: "Motion/fit=fill",
+      node: {
+        id: "motion",
+        component: "Motion",
+        props: {
+          size: [
+            48,
+            48
+          ],
+          duration: 1000,
+          layers: [
+            {
+              type: "shape",
+              transform: {
+                position: [
+                  24,
+                  24
+                ],
+                rotation: {
+                  keys: [
+                    {
+                      t: 0,
+                      v: 0
+                    },
+                    {
+                      t: 1000,
+                      v: 360
+                    }
+                  ]
+                }
+              },
+              shapes: [
+                {
+                  type: "ellipse",
+                  size: [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  type: "trim",
+                  end: 70
+                },
+                {
+                  type: "stroke",
+                  color: "$color.primary",
+                  width: 4
+                }
+              ]
+            }
+          ],
+          fit: "fill"
+        }
+      }
     }
   ]
 };
@@ -12472,6 +13386,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -12572,6 +13487,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -12672,6 +13588,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row-reverse",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -12769,6 +13686,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -12869,6 +13787,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -12969,6 +13888,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -13069,6 +13989,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -13169,6 +14090,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -13244,6 +14166,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -13345,6 +14268,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -43539,6 +44463,7 @@ Source of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.jso
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -66376,6 +67301,174 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
             }
           ]
         },
+        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: [
             {
@@ -70261,8 +71354,9 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
           cell: [
             {
               style: {
-                height: "$control.row",
-                paddingHorizontal: "$spacing.sm"
+                minHeight: "$control.row",
+                paddingHorizontal: "$spacing.sm",
+                paddingVertical: "$spacing.xs"
               }
             },
             {
@@ -70270,7 +71364,7 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
                 density: "compact"
               },
               style: {
-                height: "$control.rowCompact"
+                minHeight: "$control.rowCompact"
               }
             }
           ],
@@ -72819,6 +73913,174 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
             }
           ]
         },
+        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: [
             {
@@ -76961,8 +78223,9 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
           cell: [
             {
               style: {
-                height: "$control.row",
-                paddingHorizontal: "$spacing.sm"
+                minHeight: "$control.row",
+                paddingHorizontal: "$spacing.sm",
+                paddingVertical: "$spacing.xs"
               }
             },
             {
@@ -76970,7 +78233,7 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
                 density: "compact"
               },
               style: {
-                height: "$control.rowCompact"
+                minHeight: "$control.rowCompact"
               }
             }
           ],
@@ -79631,6 +80894,174 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
             }
           ]
         },
+        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: [
             {
@@ -84002,8 +85433,9 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
           cell: [
             {
               style: {
-                height: "$control.row",
-                paddingHorizontal: "$spacing.sm"
+                minHeight: "$control.row",
+                paddingHorizontal: "$spacing.sm",
+                paddingVertical: "$spacing.xs"
               }
             },
             {
@@ -84011,7 +85443,7 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
                 density: "compact"
               },
               style: {
-                height: "$control.rowCompact"
+                minHeight: "$control.rowCompact"
               }
             }
           ],
@@ -86691,6 +88123,174 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
             }
           ]
         },
+        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: [
             {
@@ -90833,8 +92433,9 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
           cell: [
             {
               style: {
-                height: "$control.row",
-                paddingHorizontal: "$spacing.sm"
+                minHeight: "$control.row",
+                paddingHorizontal: "$spacing.sm",
+                paddingVertical: "$spacing.xs"
               }
             },
             {
@@ -90842,7 +92443,7 @@ Source of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential
                 density: "compact"
               },
               style: {
-                height: "$control.rowCompact"
+                minHeight: "$control.rowCompact"
               }
             }
           ],
@@ -96782,6 +98383,1476 @@ var theme_recipes_default = {
         }
       }
     },
+    {
+      component: "ZoomableImage",
+      part: "root",
+      props: {
+        controls: "auto"
+      },
+      visuals: {
+        neutral: {
+          light: {
+            default: {
+              backgroundColor: "#00000000"
+            }
+          },
+          dark: {
+            default: {
+              backgroundColor: "#00000000"
+            }
+          }
+        },
+        exponential: {
+          light: {
+            default: {
+              backgroundColor: "#00000000"
+            }
+          },
+          dark: {
+            default: {
+              backgroundColor: "#00000000"
+            }
+          }
+        },
+        playful: {
+          light: {
+            default: {
+              backgroundColor: "#00000000"
+            }
+          },
+          dark: {
+            default: {
+              backgroundColor: "#00000000"
+            }
+          }
+        },
+        orange: {
+          light: {
+            default: {
+              backgroundColor: "#00000000"
+            }
+          },
+          dark: {
+            default: {
+              backgroundColor: "#00000000"
+            }
+          }
+        }
+      }
+    },
+    {
+      component: "ZoomableImage",
+      part: "image",
+      props: {
+        controls: "auto"
+      },
+      visuals: {
+        neutral: {
+          light: {
+            default: {
+              borderRadius: 8
+            }
+          },
+          dark: {
+            default: {
+              borderRadius: 8
+            }
+          }
+        },
+        exponential: {
+          light: {
+            default: {
+              borderRadius: 10
+            }
+          },
+          dark: {
+            default: {
+              borderRadius: 10
+            }
+          }
+        },
+        playful: {
+          light: {
+            default: {
+              borderRadius: 14
+            }
+          },
+          dark: {
+            default: {
+              borderRadius: 14
+            }
+          }
+        },
+        orange: {
+          light: {
+            default: {
+              borderRadius: 10
+            }
+          },
+          dark: {
+            default: {
+              borderRadius: 10
+            }
+          }
+        }
+      }
+    },
+    {
+      component: "ZoomableImage",
+      part: "pill",
+      props: {
+        controls: "auto"
+      },
+      visuals: {
+        neutral: {
+          light: {
+            default: {
+              padding: 4,
+              gap: 2,
+              borderRadius: 9999,
+              backgroundColor: "#ffffff",
+              borderWidth: 1,
+              borderColor: "#e5e5e5",
+              boxShadow: [
+                {
+                  x: 0,
+                  y: 10,
+                  blur: 15,
+                  spread: -3,
+                  color: "#0000001a"
+                },
+                {
+                  x: 0,
+                  y: 4,
+                  blur: 6,
+                  spread: -4,
+                  color: "#0000001a"
+                }
+              ],
+              backdropBlur: 16
+            }
+          },
+          dark: {
+            default: {
+              padding: 4,
+              gap: 2,
+              borderRadius: 9999,
+              backgroundColor: "#171717",
+              borderWidth: 1,
+              borderColor: "#ffffff1a",
+              boxShadow: [
+                {
+                  x: 0,
+                  y: 10,
+                  blur: 15,
+                  spread: -3,
+                  color: "#00000066"
+                },
+                {
+                  x: 0,
+                  y: 4,
+                  blur: 6,
+                  spread: -4,
+                  color: "#00000066"
+                }
+              ],
+              backdropBlur: 16
+            }
+          }
+        },
+        exponential: {
+          light: {
+            default: {
+              padding: 4,
+              gap: 2,
+              borderRadius: 9999,
+              backgroundColor: "#ffffff",
+              borderWidth: 1,
+              borderColor: "#e5e5e5",
+              boxShadow: [
+                {
+                  x: 0,
+                  y: 12,
+                  blur: 32,
+                  spread: -8,
+                  color: "#00000014"
+                }
+              ],
+              backdropBlur: 16
+            }
+          },
+          dark: {
+            default: {
+              padding: 4,
+              gap: 2,
+              borderRadius: 9999,
+              backgroundColor: "#171717",
+              borderWidth: 1,
+              borderColor: "#ffffff1a",
+              boxShadow: [
+                {
+                  x: 0,
+                  y: 12,
+                  blur: 32,
+                  spread: -8,
+                  color: "#00000066"
+                }
+              ],
+              backdropBlur: 16
+            }
+          }
+        },
+        playful: {
+          light: {
+            default: {
+              padding: 4,
+              gap: 2,
+              borderRadius: 9999,
+              backgroundColor: "#ffffff",
+              borderWidth: 2,
+              borderColor: "#e9d5ff",
+              boxShadow: [
+                {
+                  x: 0,
+                  y: 16,
+                  blur: 32,
+                  spread: -6,
+                  color: "#7c3aed33"
+                }
+              ],
+              backdropBlur: 16
+            }
+          },
+          dark: {
+            default: {
+              padding: 4,
+              gap: 2,
+              borderRadius: 9999,
+              backgroundColor: "#2a1b4d",
+              borderWidth: 2,
+              borderColor: "#4c3a7a",
+              boxShadow: [
+                {
+                  x: 0,
+                  y: 16,
+                  blur: 32,
+                  spread: -6,
+                  color: "#00000073"
+                }
+              ],
+              backdropBlur: 16
+            }
+          }
+        },
+        orange: {
+          light: {
+            default: {
+              padding: 4,
+              gap: 2,
+              borderRadius: 9999,
+              backgroundColor: "#ffffff",
+              borderWidth: 1,
+              borderColor: "#e5e5e5",
+              boxShadow: [
+                {
+                  x: 0,
+                  y: 12,
+                  blur: 32,
+                  spread: -8,
+                  color: "#00000014"
+                }
+              ],
+              backdropBlur: 16
+            }
+          },
+          dark: {
+            default: {
+              padding: 4,
+              gap: 2,
+              borderRadius: 9999,
+              backgroundColor: "#171717",
+              borderWidth: 1,
+              borderColor: "#ffffff1a",
+              boxShadow: [
+                {
+                  x: 0,
+                  y: 12,
+                  blur: 32,
+                  spread: -8,
+                  color: "#00000066"
+                }
+              ],
+              backdropBlur: 16
+            }
+          }
+        }
+      }
+    },
+    {
+      component: "ZoomableImage",
+      part: "zoomOut",
+      props: {
+        controls: "auto"
+      },
+      visuals: {
+        neutral: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#262626",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        },
+        exponential: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#ffffff1c",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        },
+        playful: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#1f1235",
+              backgroundColor: "#00000000",
+              transition: 160
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#881337",
+              backgroundColor: "#ffe4e6",
+              transition: 160
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#1f1235",
+              backgroundColor: "#00000000",
+              transition: 160,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#00000000",
+              transition: 160
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#4c1d95",
+              transition: 160
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#00000000",
+              transition: 160,
+              opacity: 0.5
+            }
+          }
+        },
+        orange: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#7c2d12",
+              backgroundColor: "#ffedd5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fed7aa",
+              backgroundColor: "#431407",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        }
+      }
+    },
+    {
+      component: "ZoomableImage",
+      part: "percent",
+      props: {
+        controls: "auto"
+      },
+      visuals: {
+        neutral: {
+          light: {
+            default: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              fontFamily: "Geist",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            hover: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              fontFamily: "Geist",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            disabled: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              fontFamily: "Geist",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              fontFamily: "Geist",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            hover: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#262626",
+              fontFamily: "Geist",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            disabled: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              fontFamily: "Geist",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        },
+        exponential: {
+          light: {
+            default: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            hover: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            disabled: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            hover: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#ffffff1c",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            disabled: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        },
+        playful: {
+          light: {
+            default: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#1f1235",
+              backgroundColor: "#00000000",
+              fontFamily: "Nunito",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 600,
+              transition: 160
+            },
+            hover: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#881337",
+              backgroundColor: "#ffe4e6",
+              fontFamily: "Nunito",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 600,
+              transition: 160
+            },
+            disabled: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#1f1235",
+              backgroundColor: "#00000000",
+              fontFamily: "Nunito",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 600,
+              transition: 160,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#00000000",
+              fontFamily: "Nunito",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 600,
+              transition: 160
+            },
+            hover: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#4c1d95",
+              fontFamily: "Nunito",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 600,
+              transition: 160
+            },
+            disabled: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#00000000",
+              fontFamily: "Nunito",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 600,
+              transition: 160,
+              opacity: 0.5
+            }
+          }
+        },
+        orange: {
+          light: {
+            default: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            hover: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#7c2d12",
+              backgroundColor: "#ffedd5",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            disabled: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            hover: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fed7aa",
+              backgroundColor: "#431407",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120
+            },
+            disabled: {
+              height: 28,
+              paddingHorizontal: 12,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              fontFamily: "Inter",
+              fontSize: 14,
+              lineHeight: 20,
+              fontWeight: 500,
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        }
+      }
+    },
+    {
+      component: "ZoomableImage",
+      part: "zoomIn",
+      props: {
+        controls: "auto"
+      },
+      visuals: {
+        neutral: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#262626",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        },
+        exponential: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#ffffff1c",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        },
+        playful: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#1f1235",
+              backgroundColor: "#00000000",
+              transition: 160
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#881337",
+              backgroundColor: "#ffe4e6",
+              transition: 160
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#1f1235",
+              backgroundColor: "#00000000",
+              transition: 160,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#00000000",
+              transition: 160
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#4c1d95",
+              transition: 160
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#00000000",
+              transition: 160,
+              opacity: 0.5
+            }
+          }
+        },
+        orange: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#7c2d12",
+              backgroundColor: "#ffedd5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fed7aa",
+              backgroundColor: "#431407",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            }
+          }
+        }
+      }
+    },
+    {
+      component: "ZoomableImage",
+      part: "divider",
+      props: {
+        controls: "auto"
+      },
+      visuals: {
+        neutral: {
+          light: {
+            default: {
+              width: 1,
+              height: 16,
+              backgroundColor: "#e5e5e5"
+            }
+          },
+          dark: {
+            default: {
+              width: 1,
+              height: 16,
+              backgroundColor: "#ffffff1a"
+            }
+          }
+        },
+        exponential: {
+          light: {
+            default: {
+              width: 1,
+              height: 16,
+              backgroundColor: "#e5e5e5"
+            }
+          },
+          dark: {
+            default: {
+              width: 1,
+              height: 16,
+              backgroundColor: "#ffffff1a"
+            }
+          }
+        },
+        playful: {
+          light: {
+            default: {
+              width: 1,
+              height: 16,
+              backgroundColor: "#e9d5ff"
+            }
+          },
+          dark: {
+            default: {
+              width: 1,
+              height: 16,
+              backgroundColor: "#4c3a7a"
+            }
+          }
+        },
+        orange: {
+          light: {
+            default: {
+              width: 1,
+              height: 16,
+              backgroundColor: "#e5e5e5"
+            }
+          },
+          dark: {
+            default: {
+              width: 1,
+              height: 16,
+              backgroundColor: "#ffffff1a"
+            }
+          }
+        }
+      }
+    },
+    {
+      component: "ZoomableImage",
+      part: "fit",
+      props: {
+        controls: "auto"
+      },
+      visuals: {
+        neutral: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            },
+            selected: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              transition: 120
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#262626",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            },
+            selected: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#262626",
+              transition: 120
+            }
+          }
+        },
+        exponential: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            },
+            selected: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#171717",
+              backgroundColor: "#f5f5f5",
+              transition: 120
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#ffffff1c",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            },
+            selected: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#ffffff1c",
+              transition: 120
+            }
+          }
+        },
+        playful: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#1f1235",
+              backgroundColor: "#00000000",
+              transition: 160
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#881337",
+              backgroundColor: "#ffe4e6",
+              transition: 160
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#1f1235",
+              backgroundColor: "#00000000",
+              transition: 160,
+              opacity: 0.5
+            },
+            selected: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#881337",
+              backgroundColor: "#ffe4e6",
+              transition: 160
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#00000000",
+              transition: 160
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#4c1d95",
+              transition: 160
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#00000000",
+              transition: 160,
+              opacity: 0.5
+            },
+            selected: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#f5f3ff",
+              backgroundColor: "#4c1d95",
+              transition: 160
+            }
+          }
+        },
+        orange: {
+          light: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#7c2d12",
+              backgroundColor: "#ffedd5",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#0a0a0a",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            },
+            selected: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#7c2d12",
+              backgroundColor: "#ffedd5",
+              transition: 120
+            }
+          },
+          dark: {
+            default: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120
+            },
+            hover: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fed7aa",
+              backgroundColor: "#431407",
+              transition: 120
+            },
+            disabled: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fafafa",
+              backgroundColor: "#00000000",
+              transition: 120,
+              opacity: 0.5
+            },
+            selected: {
+              width: 28,
+              height: 28,
+              borderRadius: 9999,
+              color: "#fed7aa",
+              backgroundColor: "#431407",
+              transition: 120
+            }
+          }
+        }
+      }
+    },
     {
       component: "Icon",
       part: "root",
@@ -112123,56 +115194,64 @@ var theme_recipes_default = {
         neutral: {
           light: {
             default: {
-              height: 40,
-              paddingHorizontal: 8
+              minHeight: 40,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           },
           dark: {
             default: {
-              height: 40,
-              paddingHorizontal: 8
+              minHeight: 40,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           }
         },
         exponential: {
           light: {
             default: {
-              height: 32,
-              paddingHorizontal: 8
+              minHeight: 32,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           },
           dark: {
             default: {
-              height: 32,
-              paddingHorizontal: 8
+              minHeight: 32,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           }
         },
         playful: {
           light: {
             default: {
-              height: 44,
-              paddingHorizontal: 8
+              minHeight: 44,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           },
           dark: {
             default: {
-              height: 44,
-              paddingHorizontal: 8
+              minHeight: 44,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           }
         },
         orange: {
           light: {
             default: {
-              height: 32,
-              paddingHorizontal: 8
+              minHeight: 32,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           },
           dark: {
             default: {
-              height: 32,
-              paddingHorizontal: 8
+              minHeight: 32,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           }
         }
@@ -112191,56 +115270,64 @@ var theme_recipes_default = {
         neutral: {
           light: {
             default: {
-              height: 32,
-              paddingHorizontal: 8
+              minHeight: 32,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           },
           dark: {
             default: {
-              height: 32,
-              paddingHorizontal: 8
+              minHeight: 32,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           }
         },
         exponential: {
           light: {
             default: {
-              height: 28,
-              paddingHorizontal: 8
+              minHeight: 28,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           },
           dark: {
             default: {
-              height: 28,
-              paddingHorizontal: 8
+              minHeight: 28,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           }
         },
         playful: {
           light: {
             default: {
-              height: 32,
-              paddingHorizontal: 8
+              minHeight: 32,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           },
           dark: {
             default: {
-              height: 32,
-              paddingHorizontal: 8
+              minHeight: 32,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           }
         },
         orange: {
           light: {
             default: {
-              height: 28,
-              paddingHorizontal: 8
+              minHeight: 28,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           },
           dark: {
             default: {
-              height: 28,
-              paddingHorizontal: 8
+              minHeight: 28,
+              paddingHorizontal: 8,
+              paddingVertical: 4
             }
           }
         }
@@ -171828,6 +174915,7 @@ var bind_time_default = {
           display: "flex",
           flexDirection: "row",
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -171886,6 +174974,7 @@ var bind_time_default = {
               display: "flex",
               flexDirection: "row",
               alignItems: "stretch",
+              gap: "$spacing.lg",
               width: "100%",
               minHeight: 0
             },
@@ -171971,6 +175060,7 @@ var bind_time_default = {
               display: "flex",
               flexDirection: "row",
               alignItems: "stretch",
+              gap: "$spacing.lg",
               width: "100%",
               minHeight: 0
             },
@@ -172054,6 +175144,7 @@ var bind_time_default = {
               display: "flex",
               flexDirection: "row",
               alignItems: "stretch",
+              gap: "$spacing.lg",
               width: "100%",
               minHeight: 0
             },
@@ -237745,5 +240836,5 @@ export {
   conformanceManifest
 };
 
-//# debugId=B4F16FA0E2220CEB64756E2164756E21
+//# debugId=EA0B0B2CD897598664756E2164756E21
 //# sourceMappingURL=conformance.js.map