Update demo

Author: gilbarbara

demo/package.json

@@ -1,25 +1,25 @@
 {
   "name": "react-floater-demo",
-  "version": "0.9.4",
+  "version": "1.0.0",
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@gilbarbara/components": "^0.14.1",
-    "@gilbarbara/eslint-config": "^0.8.1",
-    "@gilbarbara/hooks": "^0.8.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@gilbarbara/components": "^0.15.4",
+    "@gilbarbara/eslint-config": "^0.8.8",
+    "@gilbarbara/hooks": "^0.10.4",
     "@gilbarbara/prettier-config": "^1.0.0",
     "disable-scroll": "^0.6.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-floater": "latest",
     "react-scripts": "5.0.1",
-    "typescript": "^5.5.4"
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0"
+    "@types/node": "^22.15.21",
+    "@types/react": "^18.3.22",
+    "@types/react-dom": "^18.3.7"
   },
   "scripts": {
     "start": "react-scripts start",

demo/src/examples/Target.tsx

@@ -8,7 +8,7 @@ export default React.forwardRef<HTMLDivElement, any>(({ onMount }, ref) => {
   }, [onMount]);
 
   return (
-    <div ref={ref} className="target">
+    <div ref={ref} className="target" style={{ height: 64, width: 64, margin: '0 auto' }}>
       <Floater content="I have a click event to my repo!" event="hover" placement="top">
         <Anchor
           display="inline-flex"

demo/src/examples/WithStyledComponents.tsx

@@ -1,4 +1,4 @@
-import Floater, { CustomComponentProps } from 'react-floater';
+  import Floater, { CustomComponentProps } from 'react-floater';
 import styled from '@emotion/styled';
 import { Button } from '@gilbarbara/components';
 
@@ -36,14 +36,33 @@ export default function WithStyledComponents({ cb }: any) {
   return (
     <Column>
       <Floater
+        arrow={
+          <svg
+            height="100px"
+            version="1.1"
+            viewBox="0 0 10 100"
+            width="10px"
+            xmlns="http://www.w3.org/2000/svg"
+            transform="rotate(180)"
+          >
+            <g>
+              <path
+                d="M5.19249228e-07,5.16768813 C0.000571745188,2.3180242 2.3238984,6.52762368e-06 5.17356233,6.52762368e-06 C7.4961469,-0.00369898343 9.46628897,1.57062447 10.1275925,3.67813093 C11.5918888,8.26905035 5.18127186,100.000007 5.18127186,100.000007 L1.9635443,41.3615605 C0.907405183,22.0686414 -0.000792731847,5.40502691 5.19249228e-07,5.16768813 Z M5.18507488,2.58554059 C3.75638551,2.5874823 2.59249512,3.74291582 2.59443184,5.17160518 C2.59160462,6.52075954 3.7928988,13.3574741 4.95859452,14.5045202 C6.56709198,13.5758538 7.69207267,4.78979882 7.69207267,4.78979882 C7.50203478,3.55199808 6.48229278,2.58749911 5.18507488,2.58554059 Z"
+                fill="currentColor"
+              />
+            </g>
+          </svg>
+        }
         callback={cb}
         component={CustomFloater}
         disableFlip
         placement="bottom-start"
         portalElement="#portalElement"
         styles={{
           arrow: {
-            color: '#9ec2ff',
+            length: 80,
+            spread: 10,
+            color: '#6ba2ff',
           },
         }}
       >