fix(Panel): use native scroll (#677)

Author: tenphi

.changeset/lovely-lies-retire.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Use native scrolls in Panel by default.

.changeset/silly-dragons-buy.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Apply various fixes to the new scrollbar style.

src/components/layout/Panel.tsx

@@ -52,7 +52,7 @@ const PanelInnerElement = tasty({
     right: 0,
     bottom: 0,
     overflow: 'auto',
-    styledScrollbar: true,
+    scrollbar: 'thin #dark.2',
     gridColumns: 'minmax(100%, 100%)',
     gridRows: {
       '': 'initial',

tasty.md

@@ -283,6 +283,7 @@ const StyledButton = tasty(Button, {
 
 - Use the `@` prefix to reference custom properties or tokens defined in your theme or component.
 - Example: `padding: '@local-padding'` uses the value of the `@local-padding` property.
+- Use brackets to define the fallback value: `padding: '@(local-padding, 1x)'`.
 - Define custom tokens in the `styles` object:
 
 ```jsx