@dust-tt/sparkle 0.2.182 → 0.2.184

package/src/icons/stroke/Square3Stack3D.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgSquare3Stack3D = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M2 7c3.333-2 6.666-4.001 10-6 3.334 1.999 6.667 4 10 6l-10 6L2 7Zm10-3.668L5.887 7 12 10.667 18.113 7 12 3.332Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M4.083 10.75 2 12l10 6 10-6-2.083-1.25L12 15.5l-7.917-4.75Z"
+    />
+    <path
+      fill="currentColor"
+      d="m2 17 2.083-1.25L12 20.5l7.917-4.75L22 17l-10 6-10-6Z"
+    />
+  </svg>
+);
+export default SvgSquare3Stack3D;

package/src/icons/stroke/Star.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgStar = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m12 18.26-7.053 3.948 1.575-7.928L.588 8.792l8.027-.952L12 .5l3.385 7.34 8.027.952-5.934 5.488 1.575 7.928-7.053-3.948Zm0-2.292 4.247 2.377-.948-4.773 3.573-3.305-4.833-.573-2.038-4.419-2.039 4.42-4.833.572 3.573 3.305-.948 4.773L12 15.968Z"
+    />
+  </svg>
+);
+export default SvgStar;

package/src/icons/stroke/Stop.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgStop = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M17 7H7v10h10V7ZM5 5v14h14V5H5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgStop;

package/src/icons/stroke/Table.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTable = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M2 22h20V2H2v20Zm9-18v4H4V4h7ZM4 14v-4h7v4H4Zm0 2h7v4H4v-4Zm9 0h7v4h-7v-4Zm7-2h-7v-4h7v4Zm0-10v4h-7V4h7Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgTable;

package/src/icons/stroke/Template.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTemplate = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M21 3v18H3V3h18ZM11 13H5v6h6v-6Zm2 6h6V5h-6v14ZM11 5H5v6h6V5Z"
+    />
+  </svg>
+);
+export default SvgTemplate;

package/src/icons/stroke/TestTube.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTestTube = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17 2v2h-1v14a4 4 0 0 1-8 0V4H7V2h10Zm-3 8h-4v8a2 2 0 1 0 4 0v-8Zm-1 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-2-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3-8h-4v4h4V4Z"
+    />
+  </svg>
+);
+export default SvgTestTube;

package/src/icons/stroke/Time.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTime = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm1-8h4v2h-6V7h2v5Z"
+    />
+  </svg>
+);
+export default SvgTime;

package/src/icons/stroke/Trash.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTrash = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M16 5h4v2h-1v12a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V7H4V5h4V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2Zm1 2H7v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7Zm-7-3v1h4V4h-4Z"
+    />
+  </svg>
+);
+export default SvgTrash;

package/src/icons/stroke/Triangle.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTriangle = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 3 1.608 21h20.784L12 3Zm0 4L5.072 19h13.856L12 7Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgTriangle;

package/src/icons/stroke/User.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgUser = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M17 8A5 5 0 1 1 7 8a5 5 0 0 1 10 0Zm-2 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M12 14a8 8 0 0 0-8 8h2a6 6 0 0 1 12 0h2a8 8 0 0 0-8-8Z"
+    />
+  </svg>
+);
+export default SvgUser;

package/src/icons/stroke/UserArrow.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgUserArrow = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M9 13A5 5 0 1 0 9 3a5 5 0 0 0 0 10Zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M1 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0H1ZM22 13l-4-4v3h-4v2h4v3l4-4Z"
+    />
+  </svg>
+);
+export default SvgUserArrow;

package/src/icons/stroke/UserGroup.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgUserGroup = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0H4ZM5.223 6.24A7.012 7.012 0 0 0 5 8c0 1.936.786 3.689 2.057 4.956A3.5 3.5 0 0 1 5.224 6.24ZM19 8a6.978 6.978 0 0 1-2.056 4.956 3.5 3.5 0 0 0 1.834-6.716c.145.563.222 1.152.222 1.76ZM.174 22a6.5 6.5 0 0 1 5.797-7.979A9.984 9.984 0 0 0 2 22H.174ZM22 22h1.826a6.5 6.5 0 0 0-5.797-7.979A9.984 9.984 0 0 1 22 22Z"
+    />
+  </svg>
+);
+export default SvgUserGroup;

package/src/icons/stroke/UserPlus.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgUserPlus = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M9 13A5 5 0 1 0 9 3a5 5 0 0 0 0 10Zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M1 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0H1ZM18 12V9h2v3h3v2h-3v3h-2v-3h-3v-2h3Z"
+    />
+  </svg>
+);
+export default SvgUserPlus;

package/src/icons/stroke/Wrench.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgWrench = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.329 3.272a3.5 3.5 0 0 1 4.255 4.962l10.709 10.71-1.415 1.414L8.17 9.648a3.502 3.502 0 0 1-4.962-4.255L5.443 7.63a1.5 1.5 0 0 0 2.122-2.121L5.329 3.272Zm10.367 1.883 3.182-1.768 1.415 1.415-1.768 3.182-1.768.353-2.121 2.121-1.415-1.414 2.122-2.121.353-1.768ZM8.98 13.287l1.414 1.414-5.303 5.303a1 1 0 0 1-1.492-1.327l.077-.087 5.304-5.303Z"
+    />
+  </svg>
+);
+export default SvgWrench;

package/src/icons/stroke/XCircle.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgXCircle = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-9.414 2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586Z"
+    />
+  </svg>
+);
+export default SvgXCircle;

package/src/icons/stroke/XMark.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgXMark = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m12 10.5 4.95-5L18.5 7l-5 5 5 4.95-1.55 1.55-4.95-5-5 5L5.5 17l5-5-5-5 1.55-1.5 4.95 5Z"
+    />
+  </svg>
+);
+export default SvgXMark;

package/src/icons/stroke/index.ts

@@ -0,0 +1,115 @@
+export { default as ArrowDownStrokeIcon } from "./ArrowDown";
+export { default as ArrowDownCircleStrokeIcon } from "./ArrowDownCircle";
+export { default as ArrowDownOnSquareStrokeIcon } from "./ArrowDownOnSquare";
+export { default as ArrowLeftStrokeIcon } from "./ArrowLeft";
+export { default as ArrowPathStrokeIcon } from "./ArrowPath";
+export { default as ArrowRightStrokeIcon } from "./ArrowRight";
+export { default as ArrowUpStrokeIcon } from "./ArrowUp";
+export { default as ArrowUpOnSquareStrokeIcon } from "./ArrowUpOnSquare";
+export { default as AttachmentStrokeIcon } from "./Attachment";
+export { default as BackspaceStrokeIcon } from "./Backspace";
+export { default as BookmarkStrokeIcon } from "./Bookmark";
+export { default as BookOpenStrokeIcon } from "./BookOpen";
+export { default as BracesStrokeIcon } from "./Braces";
+export { default as CardStrokeIcon } from "./Card";
+export { default as ChatBubbleBottomCenterPlusStrokeIcon } from "./ChatBubbleBottomCenterPlus";
+export { default as ChatBubbleBottomCenterTextStrokeIcon } from "./ChatBubbleBottomCenterText";
+export { default as ChatBubbleLeftRightStrokeIcon } from "./ChatBubbleLeftRight";
+export { default as CheckStrokeIcon } from "./Check";
+export { default as CheckCircleStrokeIcon } from "./CheckCircle";
+export { default as ChevronDownStrokeIcon } from "./ChevronDown";
+export { default as ChevronLeftStrokeIcon } from "./ChevronLeft";
+export { default as ChevronRightStrokeIcon } from "./ChevronRight";
+export { default as ChevronUpStrokeIcon } from "./ChevronUp";
+export { default as ChevronUpDownStrokeIcon } from "./ChevronUpDown";
+export { default as CircleStrokeIcon } from "./Circle";
+export { default as ClipboardStrokeIcon } from "./Clipboard";
+export { default as ClipboardCheckStrokeIcon } from "./ClipboardCheck";
+export { default as ClockStrokeIcon } from "./Clock";
+export { default as CloudArrowDownStrokeIcon } from "./CloudArrowDown";
+export { default as CloudArrowLeftRightStrokeIcon } from "./CloudArrowLeftRight";
+export { default as CloudArrowUpStrokeIcon } from "./CloudArrowUp";
+export { default as CloudXStrokeIcon } from "./CloudX";
+export { default as Cog6ToothStrokeIcon } from "./Cog6Tooth";
+export { default as CommandStrokeIcon } from "./Command";
+export { default as CommandLineStrokeIcon } from "./CommandLine";
+export { default as CubeStrokeIcon } from "./Cube";
+export { default as DashStrokeIcon } from "./Dash";
+export { default as DocumentStrokeIcon } from "./Document";
+export { default as DocumentDuplicateStrokeIcon } from "./DocumentDuplicate";
+export { default as DocumentPileStrokeIcon } from "./DocumentPile";
+export { default as DocumentPlusStrokeIcon } from "./DocumentPlus";
+export { default as DocumentTextStrokeIcon } from "./DocumentText";
+export { default as DustStrokeIcon } from "./Dust";
+export { default as EmotionLaughStrokeIcon } from "./EmotionLaugh";
+export { default as EqualizerStrokeIcon } from "./Equalizer";
+export { default as ExclamationCircleStrokeIcon } from "./ExclamationCircle";
+export { default as ExternalLinkStrokeIcon } from "./ExternalLink";
+export { default as EyeStrokeIcon } from "./Eye";
+export { default as EyeSlashStrokeIcon } from "./EyeSlash";
+export { default as FlagStrokeIcon } from "./Flag";
+export { default as FolderStrokeIcon } from "./Folder";
+export { default as FolderOpenStrokeIcon } from "./FolderOpen";
+export { default as FullscreenStrokeIcon } from "./Fullscreen";
+export { default as FullscreenExitStrokeIcon } from "./FullscreenExit";
+export { default as GlobeAltStrokeIcon } from "./GlobeAlt";
+export { default as GrabStrokeIcon } from "./Grab";
+export { default as HandHeartStrokeIcon } from "./HandHeart";
+export { default as HandThumbDownStrokeIcon } from "./HandThumbDown";
+export { default as HandThumbUpStrokeIcon } from "./HandThumbUp";
+export { default as HeartAltStrokeIcon } from "./HeartAlt";
+export { default as HexagonStrokeIcon } from "./Hexagon";
+export { default as ImageStrokeIcon } from "./Image";
+export { default as InformationCircleStrokeIcon } from "./InformationCircle";
+export { default as KeyStrokeIcon } from "./Key";
+export { default as LightbulbStrokeIcon } from "./Lightbulb";
+export { default as LinkStrokeIcon } from "./Link";
+export { default as ListStrokeIcon } from "./List";
+export { default as ListAddStrokeIcon } from "./ListAdd";
+export { default as ListCheckStrokeIcon } from "./ListCheck";
+export { default as ListRemoveStrokeIcon } from "./ListRemove";
+export { default as LockStrokeIcon } from "./Lock";
+export { default as LoginStrokeIcon } from "./Login";
+export { default as LogoutStrokeIcon } from "./Logout";
+export { default as MagicStrokeIcon } from "./Magic";
+export { default as MagnifyingGlassStrokeIcon } from "./MagnifyingGlass";
+export { default as MenuStrokeIcon } from "./Menu";
+export { default as MoreStrokeIcon } from "./More";
+export { default as MovingMailStrokeIcon } from "./MovingMail";
+export { default as PaintStrokeIcon } from "./Paint";
+export { default as PaperAirplaneStrokeIcon } from "./PaperAirplane";
+export { default as PauseStrokeIcon } from "./Pause";
+export { default as PencilSquareStrokeIcon } from "./PencilSquare";
+export { default as PlanetStrokeIcon } from "./Planet";
+export { default as PlayStrokeIcon } from "./Play";
+export { default as PlusStrokeIcon } from "./Plus";
+export { default as PlusCircleStrokeIcon } from "./PlusCircle";
+export { default as PushpinStrokeIcon } from "./Pushpin";
+export { default as PuzzleStrokeIcon } from "./Puzzle";
+export { default as QuestionMarkCircleStrokeIcon } from "./QuestionMarkCircle";
+export { default as ReactionStrokeIcon } from "./Reaction";
+export { default as RectangleStrokeIcon } from "./Rectangle";
+export { default as RobotStrokeIcon } from "./Robot";
+export { default as RocketStrokeIcon } from "./Rocket";
+export { default as ScanStrokeIcon } from "./Scan";
+export { default as ServerStrokeIcon } from "./Server";
+export { default as ShakeHandsStrokeIcon } from "./ShakeHands";
+export { default as ShapesStrokeIcon } from "./Shapes";
+export { default as SparklesStrokeIcon } from "./Sparkles";
+export { default as SquareStrokeIcon } from "./Square";
+export { default as Square3Stack3DStrokeIcon } from "./Square3Stack3D";
+export { default as StarStrokeIcon } from "./Star";
+export { default as StopStrokeIcon } from "./Stop";
+export { default as TableStrokeIcon } from "./Table";
+export { default as TemplateStrokeIcon } from "./Template";
+export { default as TestTubeStrokeIcon } from "./TestTube";
+export { default as TimeStrokeIcon } from "./Time";
+export { default as TrashStrokeIcon } from "./Trash";
+export { default as TriangleStrokeIcon } from "./Triangle";
+export { default as UserStrokeIcon } from "./User";
+export { default as UserArrowStrokeIcon } from "./UserArrow";
+export { default as UserGroupStrokeIcon } from "./UserGroup";
+export { default as UserPlusStrokeIcon } from "./UserPlus";
+export { default as WrenchStrokeIcon } from "./Wrench";
+export { default as XCircleStrokeIcon } from "./XCircle";
+export { default as XMarkStrokeIcon } from "./XMark";

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./components";
+export { SparkleContext } from "./context";
+export * from "./icons";
+export * from "./lib";
+export * from "./logo";

package/src/index_with_tw_base.ts

@@ -0,0 +1,2 @@
+import "./styles/global_with_tw_base.css";
+export * from "./index";

package/src/lib/avatar/types.ts

@@ -0,0 +1,13 @@
+import type {
+  Emoji,
+  EmojiMartData as EmojiData,
+  Skin as EmojiSkin,
+} from "@emoji-mart/data";
+
+export type EmojiSkinType = Pick<Emoji, "id" | "name" | "keywords"> & {
+  native: string;
+  shortcodes: string;
+  unified: string;
+};
+
+export { EmojiData, EmojiSkin };

package/src/lib/avatar/utils.ts

@@ -0,0 +1,56 @@
+import data from "@emoji-mart/data";
+
+import { EmojiData } from "@sparkle/lib/avatar/types";
+
+const EMOJI_URL_REGEXP = /\/emojis\/bg-([^/]*)\/([^/]*)\/([^/.]*)/;
+
+export type AvatarBackgroundColorType = `bg-${string}`;
+
+/**
+ * This helper extracts emojis and background color from a Dust url.
+ * URL structure is defined as such:
+ * https://{host}/emojis/bg-{backgroundColor}/{id}/{unified}.
+ */
+export function getEmojiAndBackgroundFromUrl(url: string) {
+  const emojiData: EmojiData = data as EmojiData;
+
+  const match = url.match(EMOJI_URL_REGEXP);
+  if (match) {
+    const [, backgroundColor, id, unified] = match;
+
+    const emojiUnicodes = Object.values(emojiData.emojis).find(
+      (e) => e.id === id
+    );
+    if (!emojiUnicodes) {
+      return null;
+    }
+
+    const skinEmoji = emojiUnicodes.skins.find((s) => s.unified === unified);
+    if (!skinEmoji) {
+      return null;
+    }
+
+    const prefixedBackgroundColor: AvatarBackgroundColorType = `bg-${backgroundColor}`;
+
+    return {
+      backgroundColor: prefixedBackgroundColor,
+      id,
+      unified,
+      skinEmoji: skinEmoji.native,
+    };
+  }
+
+  return null;
+}
+
+export function createEmojiAndBackgroundUrlSuffix({
+  backgroundColor,
+  id,
+  unified,
+}: {
+  backgroundColor: AvatarBackgroundColorType;
+  id: string;
+  unified: string;
+}) {
+  return `emojis/${backgroundColor}/${id}/${unified}`;
+}

package/src/lib/index.ts

@@ -0,0 +1 @@
+export * as avatarUtils from "./avatar/utils";

package/src/lib/utils.ts

@@ -0,0 +1,37 @@
+import { useCallback, useState } from "react";
+
+export function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function assertNever(x: never): never {
+  throw new Error(`${x} is not of type never. This should never happen.`);
+}
+
+export function useCopyToClipboard(
+  resetInterval = 2000
+): [isCopied: boolean, copy: (d: ClipboardItem) => Promise<boolean>] {
+  const [isCopied, setCopied] = useState(false);
+
+  const copy = useCallback(
+    async (d: ClipboardItem) => {
+      if (!navigator?.clipboard) {
+        console.warn("Clipboard not supported");
+        return false;
+      }
+      try {
+        await navigator.clipboard.write([d]);
+        setCopied(true);
+        setTimeout(() => setCopied(false), resetInterval);
+        return true;
+      } catch (error) {
+        console.warn("Copy failed", error);
+        setCopied(false);
+        return false;
+      }
+    },
+    [resetInterval]
+  );
+
+  return [isCopied, copy];
+}

package/src/logo/Logo.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import SvgLogoColoredGrey from "./LogoColoredGrey";
+import SvgLogoFullColor from "./LogoFullColor";
+import SvgLogoSquareColoredGrey from "./LogoSquareColoredGrey";
+import SvgLogoSquareFullColor from "./LogoSquareFullColor";
+
+interface LogoProps {
+  type?: "full-color" | "colored-grey";
+  shape?: "square" | "full";
+  className?: string;
+}
+
+export function Logo({
+  type = "full-color",
+  shape = "full",
+  className = "",
+}: LogoProps) {
+  if (shape === "square") {
+    if (type === "colored-grey") {
+      return <SvgLogoSquareColoredGrey className={className} />;
+    } else {
+      return <SvgLogoSquareFullColor className={className} />;
+    }
+  } else {
+    if (type === "colored-grey") {
+      return <SvgLogoColoredGrey className={className} />;
+    } else {
+      return <SvgLogoFullColor className={className} />;
+    }
+  }
+}

package/src/logo/LogoColoredGrey.tsx

@@ -0,0 +1,26 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoColoredGrey = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 96 24"
+    {...props}
+  >
+    <path
+      fill="#64748B"
+      fillRule="evenodd"
+      d="M12 24c6.627 0 12-5.373 12-12 0 6.627 5.373 12 12 12s12-5.373 12-12v12h12a6 6 0 0 0 0-12H48c0-6.627-5.373-12-12-12S24 5.373 24 12c0-6.627-5.373-12-12-12S0 5.373 0 12s5.373 12 12 12Zm72-12H72v12h12V12Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#334155"
+      fillRule="evenodd"
+      d="M0 0h12v24H0V0Zm24 0h24v12H24V0Zm36 12h36V0H60a6 6 0 0 0 0 12Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgLogoColoredGrey;