@talismn/orb 0.0.0-pr771-20230519010247

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @talismn/orb
+
+## 0.0.0-pr771-20230519010247
+
+### Minor Changes
+
+- 254d37f2: init
+
+### Patch Changes
+
+- Updated dependencies [f7aca48b]
+- Updated dependencies [01bf239b]
+- Updated dependencies [48f0222e]
+- Updated dependencies [01bf239b]
+  - @talismn/util@0.0.0-pr771-20230519010247

package/README.md

@@ -0,0 +1,25 @@
+# @talismn/orb
+
+Display Talisman orbs in any dapp !
+
+## Setup in a dapp (or extension) to use this library
+
+Install :
+
+```bash
+# for npm
+npm install @talismn/orb
+
+# for yarn
+yarn add @talismn/orb
+```
+
+## Usage
+
+```tsx
+import { TalismanOrb } from "@talismn/orb"
+
+const Avatar: FC<{ address: string }> = ({ address }) => {
+  return <TalismanOrb seed={address} />
+}
+```

package/dist/declarations/src/components/TalismanOrb.d.ts

@@ -0,0 +1,19 @@
+import { FC } from "react";
+declare type TalismanOrbProps = {
+    seed: string;
+    width?: number;
+    height?: number;
+    className?: string;
+};
+export declare const useTalismanOrb: (seed: string) => {
+    id: string;
+    bgColor1: string;
+    bgColor2: string;
+    glowColor: string;
+    transform: string;
+    cx: number;
+    cy: number;
+    isEthereum: boolean;
+};
+export declare const TalismanOrb: FC<TalismanOrbProps>;
+export {};

package/dist/declarations/src/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./TalismanOrb";

package/dist/declarations/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/talismn-orb.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

package/dist/talismn-orb.cjs.dev.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var util = require('@talismn/util');
+var md5 = require('blueimp-md5');
+var Color = require('color');
+var nanoid = require('nanoid');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var md5__default = /*#__PURE__*/_interopDefault(md5);
+var Color__default = /*#__PURE__*/_interopDefault(Color);
+
+const djb2 = str => {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i);
+  return hash;
+};
+const valueFromHash = (hash, max) => {
+  return (max + djb2(hash)) % max;
+};
+const colorFromHash = hash => {
+  const hue = valueFromHash(hash, 360);
+  return Color__default["default"].hsv(hue, 100, 100);
+};
+const rotateText = (text, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars);
+const useTalismanOrb = seed => {
+  return react.useMemo(() => {
+    const isEthereum = seed?.startsWith("0x");
+    try {
+      // seed may be specific to a ss58 prefix, get the base address
+      // eslint-disable-next-line no-var
+      var address = isEthereum ? seed : util.encodeAnyAddress(seed);
+    } catch (err) {
+      address = seed;
+    }
+
+    // derive 3 hashs from the seed, used to generate the 3 colors
+    const hash1 = md5__default["default"](address);
+    const hash2 = rotateText(hash1, 1);
+    const hash3 = rotateText(hash1, 2);
+
+    // the 2 darkest ones will be used as gradient BG
+    // the lightest one will be used as gradient circle, to mimic a 3D lighting effect
+    const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort((c1, c2) => c1.lightness() - c2.lightness());
+
+    // random location in top left corner, avoid beeing to close from the center
+    const dotX = 10 + valueFromHash(hash1, 10);
+    const dotY = 10 + valueFromHash(hash2, 10);
+
+    // global rotation
+    const rotation = valueFromHash(hash1, 360);
+    return {
+      id: nanoid.nanoid(),
+      //multiple avatars should cohabit on the same pageaa
+      bgColor1: colors[0].hex(),
+      bgColor2: colors[1].hex(),
+      glowColor: colors[2].hex(),
+      transform: `rotate(${rotation} 32 32)`,
+      cx: dotX,
+      cy: dotY,
+      isEthereum
+    };
+  }, [seed]);
+};
+const TalismanOrb = ({
+  seed,
+  width = "1em",
+  height = "1em",
+  className
+}) => {
+  const {
+    id,
+    bgColor1,
+    bgColor2,
+    transform,
+    glowColor,
+    cx,
+    cy,
+    isEthereum
+  } = useTalismanOrb(seed);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    width: width,
+    height: height,
+    viewBox: `0 0 64 64`,
+    className: className,
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("defs", {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("linearGradient", {
+        id: `${id}-bg`,
+        children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
+          offset: "20%",
+          stopColor: bgColor1
+        }), /*#__PURE__*/jsxRuntime.jsx("stop", {
+          offset: "100%",
+          stopColor: bgColor2
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("radialGradient", {
+        id: `${id}-circle`,
+        children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
+          offset: "10%",
+          stopColor: glowColor
+        }), /*#__PURE__*/jsxRuntime.jsx("stop", {
+          offset: "100%",
+          stopColor: "transparent"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("clipPath", {
+        id: `${id}-clip`,
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "32",
+          cy: "32",
+          r: "32"
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      clipPath: `url(#${id}-clip)`,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
+        transform: transform,
+        children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+          fill: `url(#${id}-bg)`,
+          x: 0,
+          y: 0,
+          width: 64,
+          height: 64
+        }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+          fill: `url(#${id}-circle)`,
+          cx: cx,
+          cy: cy,
+          r: 45,
+          opacity: 0.7
+        })]
+      }), isEthereum && /*#__PURE__*/jsxRuntime.jsxs("g", {
+        opacity: "0.75",
+        transform: "scale(0.7) translate(14 14)",
+        children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z",
+          fill: "white"
+        }), /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z",
+          fill: "white"
+        })]
+      })]
+    })]
+  });
+};
+
+exports.TalismanOrb = TalismanOrb;
+exports.useTalismanOrb = useTalismanOrb;

package/dist/talismn-orb.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./talismn-orb.cjs.prod.js");
+} else {
+  module.exports = require("./talismn-orb.cjs.dev.js");
+}

package/dist/talismn-orb.cjs.prod.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var util = require('@talismn/util');
+var md5 = require('blueimp-md5');
+var Color = require('color');
+var nanoid = require('nanoid');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var md5__default = /*#__PURE__*/_interopDefault(md5);
+var Color__default = /*#__PURE__*/_interopDefault(Color);
+
+const djb2 = str => {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i);
+  return hash;
+};
+const valueFromHash = (hash, max) => {
+  return (max + djb2(hash)) % max;
+};
+const colorFromHash = hash => {
+  const hue = valueFromHash(hash, 360);
+  return Color__default["default"].hsv(hue, 100, 100);
+};
+const rotateText = (text, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars);
+const useTalismanOrb = seed => {
+  return react.useMemo(() => {
+    const isEthereum = seed?.startsWith("0x");
+    try {
+      // seed may be specific to a ss58 prefix, get the base address
+      // eslint-disable-next-line no-var
+      var address = isEthereum ? seed : util.encodeAnyAddress(seed);
+    } catch (err) {
+      address = seed;
+    }
+
+    // derive 3 hashs from the seed, used to generate the 3 colors
+    const hash1 = md5__default["default"](address);
+    const hash2 = rotateText(hash1, 1);
+    const hash3 = rotateText(hash1, 2);
+
+    // the 2 darkest ones will be used as gradient BG
+    // the lightest one will be used as gradient circle, to mimic a 3D lighting effect
+    const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort((c1, c2) => c1.lightness() - c2.lightness());
+
+    // random location in top left corner, avoid beeing to close from the center
+    const dotX = 10 + valueFromHash(hash1, 10);
+    const dotY = 10 + valueFromHash(hash2, 10);
+
+    // global rotation
+    const rotation = valueFromHash(hash1, 360);
+    return {
+      id: nanoid.nanoid(),
+      //multiple avatars should cohabit on the same pageaa
+      bgColor1: colors[0].hex(),
+      bgColor2: colors[1].hex(),
+      glowColor: colors[2].hex(),
+      transform: `rotate(${rotation} 32 32)`,
+      cx: dotX,
+      cy: dotY,
+      isEthereum
+    };
+  }, [seed]);
+};
+const TalismanOrb = ({
+  seed,
+  width = "1em",
+  height = "1em",
+  className
+}) => {
+  const {
+    id,
+    bgColor1,
+    bgColor2,
+    transform,
+    glowColor,
+    cx,
+    cy,
+    isEthereum
+  } = useTalismanOrb(seed);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    width: width,
+    height: height,
+    viewBox: `0 0 64 64`,
+    className: className,
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("defs", {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("linearGradient", {
+        id: `${id}-bg`,
+        children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
+          offset: "20%",
+          stopColor: bgColor1
+        }), /*#__PURE__*/jsxRuntime.jsx("stop", {
+          offset: "100%",
+          stopColor: bgColor2
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("radialGradient", {
+        id: `${id}-circle`,
+        children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
+          offset: "10%",
+          stopColor: glowColor
+        }), /*#__PURE__*/jsxRuntime.jsx("stop", {
+          offset: "100%",
+          stopColor: "transparent"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("clipPath", {
+        id: `${id}-clip`,
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "32",
+          cy: "32",
+          r: "32"
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      clipPath: `url(#${id}-clip)`,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
+        transform: transform,
+        children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+          fill: `url(#${id}-bg)`,
+          x: 0,
+          y: 0,
+          width: 64,
+          height: 64
+        }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+          fill: `url(#${id}-circle)`,
+          cx: cx,
+          cy: cy,
+          r: 45,
+          opacity: 0.7
+        })]
+      }), isEthereum && /*#__PURE__*/jsxRuntime.jsxs("g", {
+        opacity: "0.75",
+        transform: "scale(0.7) translate(14 14)",
+        children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z",
+          fill: "white"
+        }), /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z",
+          fill: "white"
+        })]
+      })]
+    })]
+  });
+};
+
+exports.TalismanOrb = TalismanOrb;
+exports.useTalismanOrb = useTalismanOrb;

package/dist/talismn-orb.esm.js

@@ -0,0 +1,142 @@
+import { encodeAnyAddress } from '@talismn/util';
+import md5 from 'blueimp-md5';
+import Color from 'color';
+import { nanoid } from 'nanoid';
+import { useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const djb2 = str => {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i);
+  return hash;
+};
+const valueFromHash = (hash, max) => {
+  return (max + djb2(hash)) % max;
+};
+const colorFromHash = hash => {
+  const hue = valueFromHash(hash, 360);
+  return Color.hsv(hue, 100, 100);
+};
+const rotateText = (text, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars);
+const useTalismanOrb = seed => {
+  return useMemo(() => {
+    const isEthereum = seed?.startsWith("0x");
+    try {
+      // seed may be specific to a ss58 prefix, get the base address
+      // eslint-disable-next-line no-var
+      var address = isEthereum ? seed : encodeAnyAddress(seed);
+    } catch (err) {
+      address = seed;
+    }
+
+    // derive 3 hashs from the seed, used to generate the 3 colors
+    const hash1 = md5(address);
+    const hash2 = rotateText(hash1, 1);
+    const hash3 = rotateText(hash1, 2);
+
+    // the 2 darkest ones will be used as gradient BG
+    // the lightest one will be used as gradient circle, to mimic a 3D lighting effect
+    const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort((c1, c2) => c1.lightness() - c2.lightness());
+
+    // random location in top left corner, avoid beeing to close from the center
+    const dotX = 10 + valueFromHash(hash1, 10);
+    const dotY = 10 + valueFromHash(hash2, 10);
+
+    // global rotation
+    const rotation = valueFromHash(hash1, 360);
+    return {
+      id: nanoid(),
+      //multiple avatars should cohabit on the same pageaa
+      bgColor1: colors[0].hex(),
+      bgColor2: colors[1].hex(),
+      glowColor: colors[2].hex(),
+      transform: `rotate(${rotation} 32 32)`,
+      cx: dotX,
+      cy: dotY,
+      isEthereum
+    };
+  }, [seed]);
+};
+const TalismanOrb = ({
+  seed,
+  width = "1em",
+  height = "1em",
+  className
+}) => {
+  const {
+    id,
+    bgColor1,
+    bgColor2,
+    transform,
+    glowColor,
+    cx,
+    cy,
+    isEthereum
+  } = useTalismanOrb(seed);
+  return /*#__PURE__*/jsxs("svg", {
+    width: width,
+    height: height,
+    viewBox: `0 0 64 64`,
+    className: className,
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsxs("defs", {
+      children: [/*#__PURE__*/jsxs("linearGradient", {
+        id: `${id}-bg`,
+        children: [/*#__PURE__*/jsx("stop", {
+          offset: "20%",
+          stopColor: bgColor1
+        }), /*#__PURE__*/jsx("stop", {
+          offset: "100%",
+          stopColor: bgColor2
+        })]
+      }), /*#__PURE__*/jsxs("radialGradient", {
+        id: `${id}-circle`,
+        children: [/*#__PURE__*/jsx("stop", {
+          offset: "10%",
+          stopColor: glowColor
+        }), /*#__PURE__*/jsx("stop", {
+          offset: "100%",
+          stopColor: "transparent"
+        })]
+      }), /*#__PURE__*/jsx("clipPath", {
+        id: `${id}-clip`,
+        children: /*#__PURE__*/jsx("circle", {
+          cx: "32",
+          cy: "32",
+          r: "32"
+        })
+      })]
+    }), /*#__PURE__*/jsxs("g", {
+      clipPath: `url(#${id}-clip)`,
+      children: [/*#__PURE__*/jsxs("g", {
+        transform: transform,
+        children: [/*#__PURE__*/jsx("rect", {
+          fill: `url(#${id}-bg)`,
+          x: 0,
+          y: 0,
+          width: 64,
+          height: 64
+        }), /*#__PURE__*/jsx("circle", {
+          fill: `url(#${id}-circle)`,
+          cx: cx,
+          cy: cy,
+          r: 45,
+          opacity: 0.7
+        })]
+      }), isEthereum && /*#__PURE__*/jsxs("g", {
+        opacity: "0.75",
+        transform: "scale(0.7) translate(14 14)",
+        children: [/*#__PURE__*/jsx("path", {
+          d: "M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z",
+          fill: "white"
+        }), /*#__PURE__*/jsx("path", {
+          d: "M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z",
+          fill: "white"
+        })]
+      })]
+    })]
+  });
+};
+
+export { TalismanOrb, useTalismanOrb };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@talismn/orb",
+  "version": "0.0.0-pr771-20230519010247",
+  "author": "Talisman",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "directory": "packages/balances-react",
+    "type": "git",
+    "url": "https://github.com/talismansociety/talisman.git"
+  },
+  "main": "dist/talismn-orb.cjs.js",
+  "module": "dist/talismn-orb.esm.js",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "lint": "eslint src --max-warnings 0",
+    "clean": "rm -rf dist && rm -rf .turbo rm -rf node_modules"
+  },
+  "dependencies": {
+    "@talismn/util": "0.0.0-pr771-20230519010247",
+    "blueimp-md5": "2.19.0",
+    "color": "4.2.3",
+    "nanoid": "3.3.6"
+  },
+  "devDependencies": {
+    "@talismn/eslint-config": "0.0.0-pr771-20230519010247",
+    "@talismn/tsconfig": "0.0.2",
+    "@types/react": "18.0.14",
+    "@types/react-dom": "18.0.5",
+    "eslint": "^8.15.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "4.6.4"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

package/src/components/TalismanOrb.tsx

@@ -0,0 +1,118 @@
+import { encodeAnyAddress } from "@talismn/util"
+import md5 from "blueimp-md5"
+import Color from "color"
+import { nanoid } from "nanoid"
+import { FC, useMemo } from "react"
+
+const djb2 = (str: string) => {
+  let hash = 5381
+  for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i)
+  return hash
+}
+
+const valueFromHash = (hash: string, max: number) => {
+  return (max + djb2(hash)) % max
+}
+
+const colorFromHash = (hash: string) => {
+  const hue = valueFromHash(hash, 360)
+  return Color.hsv(hue, 100, 100)
+}
+
+const rotateText = (text: string, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars)
+
+type TalismanOrbProps = { seed: string; width?: number; height?: number; className?: string }
+
+export const useTalismanOrb = (seed: string) => {
+  return useMemo(() => {
+    const isEthereum = seed?.startsWith("0x")
+    try {
+      // seed may be specific to a ss58 prefix, get the base address
+      // eslint-disable-next-line no-var
+      var address = isEthereum ? seed : encodeAnyAddress(seed)
+    } catch (err) {
+      address = seed
+    }
+
+    // derive 3 hashs from the seed, used to generate the 3 colors
+    const hash1 = md5(address)
+    const hash2 = rotateText(hash1, 1)
+    const hash3 = rotateText(hash1, 2)
+
+    // the 2 darkest ones will be used as gradient BG
+    // the lightest one will be used as gradient circle, to mimic a 3D lighting effect
+    const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(
+      (c1, c2) => c1.lightness() - c2.lightness()
+    )
+
+    // random location in top left corner, avoid beeing to close from the center
+    const dotX = 10 + valueFromHash(hash1, 10)
+    const dotY = 10 + valueFromHash(hash2, 10)
+
+    // global rotation
+    const rotation = valueFromHash(hash1, 360)
+
+    return {
+      id: nanoid(), //multiple avatars should cohabit on the same pageaa
+      bgColor1: colors[0].hex(),
+      bgColor2: colors[1].hex(),
+      glowColor: colors[2].hex(),
+      transform: `rotate(${rotation} 32 32)`,
+      cx: dotX,
+      cy: dotY,
+      isEthereum,
+    }
+  }, [seed])
+}
+
+export const TalismanOrb: FC<TalismanOrbProps> = ({
+  seed,
+  width = "1em",
+  height = "1em",
+  className,
+}) => {
+  const { id, bgColor1, bgColor2, transform, glowColor, cx, cy, isEthereum } = useTalismanOrb(seed)
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 64 64`}
+      className={className}
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient id={`${id}-bg`}>
+          <stop offset="20%" stopColor={bgColor1} />
+          <stop offset="100%" stopColor={bgColor2} />
+        </linearGradient>
+        <radialGradient id={`${id}-circle`}>
+          <stop offset="10%" stopColor={glowColor} />
+          <stop offset="100%" stopColor="transparent" />
+        </radialGradient>
+        <clipPath id={`${id}-clip`}>
+          <circle cx="32" cy="32" r="32" />
+        </clipPath>
+      </defs>
+      <g clipPath={`url(#${id}-clip)`}>
+        <g transform={transform}>
+          <rect fill={`url(#${id}-bg)`} x={0} y={0} width={64} height={64} />
+          <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />
+        </g>
+        {isEthereum && (
+          <g opacity="0.75" transform="scale(0.7) translate(14 14)">
+            <path
+              d="M12.8101 32.76L32.0001 44.62L51.1901 32.76L32.0001 -0.0699997L12.8101 32.76Z"
+              fill="white"
+            />
+            <path
+              d="M12.8101 36.48L32.0001 48.43L51.1901 36.48L32.0001 63.93L12.8101 36.48Z"
+              fill="white"
+            />
+          </g>
+        )}
+      </g>
+    </svg>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./TalismanOrb"

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components"

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@talismn/tsconfig/es6-react.json",
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "exclude": ["node_modules", ".next", ".turbo", ".dist", "**/*.spec.ts", "**/*.test.ts"]
+}