@exponential_app/eui 0.3.0 → 0.4.0

package/fixtures/theme-recipes.json

@@ -4026,6 +4026,1476 @@
         }
       }
     },
+    {
+      "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",
@@ -19367,56 +20837,64 @@
         "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
             }
           }
         }
@@ -19435,56 +20913,64 @@
         "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
             }
           }
         }