update useRect signature

Author: Chance Strickland

packages/tabs/examples/animated-bar.example.js

@@ -85,7 +85,7 @@ function ExampleAnimatedTab({ index, ...props }) {
 
   // measure the size of our element, only listen to rect if active
   const ref = React.useRef();
-  const rect = useRect(ref, isSelected);
+  const rect = useRect(ref, { observe: isSelected });
 
   // get the style changing function from context
   const setActiveRect = React.useContext(AnimatedContext);

website/src/pages/tabs.mdx

@@ -808,7 +808,7 @@ With a little composition we can animate the selected tab bar.
 
     // measure the size of our element, only listen to rect if active
     const ref = React.useRef();
-    const rect = useRect(ref, isSelected);
+    const rect = useRect(ref, { observe: isSelected });
 
     // get the style changing function from context
     const setActiveRect = useContext(AnimatedContext);

website/src/styles/app.scss

@@ -332,6 +332,16 @@ button#hamburger {
   white-space: nowrap;
 }
 
+[data-reach-slider-input][data-orientation="horizontal"] {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+[data-reach-slider-input][data-orientation="vertical"] {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
 .alert-buttons {
   text-align: center;
   margin-top: 20px;