@dub/ui 0.0.0

package/src/hooks/use-local-storage.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export default function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: T) => void] {
+  const [storedValue, setStoredValue] = useState(initialValue);
+
+  useEffect(() => {
+    // Retrieve from localStorage
+    const item = window.localStorage.getItem(key);
+    if (item) {
+      setStoredValue(JSON.parse(item));
+    }
+  }, [key]);
+
+  const setValue = (value: T) => {
+    // Save state
+    setStoredValue(value);
+    // Save to localStorage
+    window.localStorage.setItem(key, JSON.stringify(value));
+  };
+  return [storedValue, setValue];
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+
+export default function useMediaQuery() {
+  const [device, setDevice] = useState<"mobile" | "tablet" | "desktop" | null>(
+    null,
+  );
+  const [dimensions, setDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const checkDevice = () => {
+      if (window.matchMedia("(max-width: 640px)").matches) {
+        setDevice("mobile");
+      } else if (
+        window.matchMedia("(min-width: 641px) and (max-width: 1024px)").matches
+      ) {
+        setDevice("tablet");
+      } else {
+        setDevice("desktop");
+      }
+      setDimensions({ width: window.innerWidth, height: window.innerHeight });
+    };
+
+    // Initial detection
+    checkDevice();
+
+    // Listener for windows resize
+    window.addEventListener("resize", checkDevice);
+
+    // Cleanup listener
+    return () => {
+      window.removeEventListener("resize", checkDevice);
+    };
+  }, []);
+
+  return {
+    device,
+    width: dimensions?.width,
+    height: dimensions?.height,
+    isMobile: device === "mobile",
+    isTablet: device === "tablet",
+    isDesktop: device === "desktop",
+  };
+}

package/src/hooks/use-scroll.ts

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from "react";
+
+export default function useScroll(threshold: number) {
+  const [scrolled, setScrolled] = useState(false);
+
+  const onScroll = useCallback(() => {
+    setScrolled(window.scrollY > threshold);
+  }, [threshold]);
+
+  useEffect(() => {
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [onScroll]);
+
+  // also check on first load
+  useEffect(() => {
+    onScroll();
+  }, [onScroll]);
+
+  return scrolled;
+}

package/src/icon-menu.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface MenuIconProps {
+  icon: ReactNode;
+  text: string;
+}
+
+export function IconMenu({ icon, text }: MenuIconProps) {
+  return (
+    <div className="flex items-center justify-start space-x-2">
+      {icon}
+      <p className="text-sm">{text}</p>
+    </div>
+  );
+}

package/src/icons/copy.tsx

@@ -0,0 +1,18 @@
+export default function Copy({ className }: { className?: string }) {
+  return (
+    <svg
+      fill="none"
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="14"
+      height="14"
+      className={className}
+    >
+      <path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z" />
+    </svg>
+  );
+}

package/src/icons/expanding-arrow.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@dub/utils";
+
+export default function ExpandingArrow({ className }: { className?: string }) {
+  return (
+    <div className="group relative flex items-center">
+      <svg
+        className={cn(
+          "absolute h-4 w-4 transition-all group-hover:translate-x-1 group-hover:opacity-0",
+          className,
+        )}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
+        ></path>
+      </svg>
+      <svg
+        className={`${
+          className ? className : "h-4 w-4"
+        } absolute opacity-0 transition-all group-hover:translate-x-1 group-hover:opacity-100`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
+        ></path>
+      </svg>
+    </div>
+  );
+}

package/src/icons/facebook.tsx

@@ -0,0 +1,23 @@
+export default function Facebook({
+  className,
+  fill = "#1977f3",
+}: {
+  className?: string;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1365.12"
+      height="1365.12"
+      viewBox="0 0 14222 14222"
+      className={className}
+    >
+      <circle cx="7111" cy="7112" r="7111" fill={fill} />
+      <path
+        d="M9879 9168l315-2056H8222V5778c0-562 275-1111 1159-1111h897V2917s-814-139-1592-139c-1624 0-2686 984-2686 2767v1567H4194v2056h1806v4969c362 57 733 86 1111 86s749-30 1111-86V9168z"
+        fill="#fff"
+      />
+    </svg>
+  );
+}

package/src/icons/github.tsx

@@ -0,0 +1,14 @@
+export default function Github({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}

package/src/icons/google.tsx

@@ -0,0 +1,12 @@
+export default function Google({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 488 512"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
+    </svg>
+  );
+}

package/src/icons/index.tsx

@@ -0,0 +1,22 @@
+// custom icons
+export { default as Copy } from "./copy";
+export { default as ExpandingArrow } from "./expanding-arrow";
+export { default as Photo } from "./photo";
+export { default as Tick } from "./tick";
+
+// loaders
+export { default as LoadingCircle } from "./loading-circle";
+export { default as LoadingDots } from "./loading-dots";
+export { default as LoadingSpinner } from "./loading-spinner";
+
+// dub logos
+export { default as Logo } from "./logo";
+export { default as LogoType } from "./logotype";
+
+// brand logos
+export { default as Facebook } from "./facebook";
+export { default as Github } from "./github";
+export { default as Google } from "./google";
+export { default as LinkedIn } from "./linkedin";
+export { default as Twitter } from "./twitter";
+export { default as Unsplash } from "./unsplash";

package/src/icons/linkedin.tsx

@@ -0,0 +1,22 @@
+export default function LinkedIn({
+  className,
+  fill = "#027ab5",
+}: {
+  className?: string;
+  fill?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        fill={fill}
+        d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
+      />
+    </svg>
+  );
+}

package/src/icons/loading-circle.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@dub/utils";
+
+export default function LoadingCircle({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "h-4 w-4 animate-spin fill-gray-600 text-gray-200",
+        className,
+      )}
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+  );
+}

package/src/icons/loading-dots.css

@@ -0,0 +1,40 @@
+.loading-dots {
+  display: inline-flex;
+  align-items: center;
+}
+
+.loading-dots .spacer {
+  margin-right: 2px;
+}
+
+.loading-dots span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+
+.loading-dots span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+
+.loading-dots span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}

package/src/icons/loading-dots.tsx

@@ -0,0 +1,13 @@
+import "./loading-dots.css";
+
+const LoadingDots = () => {
+  return (
+    <span className="loading-dots">
+      <span />
+      <span />
+      <span />
+    </span>
+  );
+};
+
+export default LoadingDots;

package/src/icons/loading-spinner.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@dub/utils";
+
+export default function LoadingSpinner({ className }: { className?: string }) {
+  return (
+    <div className={cn("h-5 w-5", className)}>
+      <div
+        style={{
+          position: "relative",
+          top: "50%",
+          left: "50%",
+        }}
+        className={cn("loading-spinner", "h-5 w-5", className)}
+      >
+        {[...Array(12)].map((_, i) => (
+          <div
+            key={i}
+            style={{
+              animationDelay: `${-1.2 + 0.1 * i}s`,
+              background: "gray",
+              position: "absolute",
+              borderRadius: "1rem",
+              width: "30%",
+              height: "8%",
+              left: "-10%",
+              top: "-4%",
+              transform: `rotate(${30 * i}deg) translate(120%)`,
+            }}
+            className="animate-spinner"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/icons/logo.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@dub/utils";
+
+export default function Logo({ className }: { className?: string }) {
+  return (
+    <svg
+      width="191"
+      height="191"
+      viewBox="0 0 191 191"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("h-10 w-10 text-black", className)}
+    >
+      <g clipPath="url(#clip0_1301_107)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M122 -14H144 9.17859 129.788 5.96937 122 3.72462V-14ZM122 3.72462C113.586 1.29941 104.695 0 95.5 0C42.7568 0 0 42.7568 0 95.5C0 148.243 42.7568 191 95.5 191C148.243 191 191 148.243 191 95.5C191 60.462 172.131 29.8311 144 13.2146V100V148H122V140.897C114.258 146.018 104.977 149 95 149C67.938 149 46 127.062 46 100C46 72.938 67.938 51 95 51C104.977 51 114.258 53.982 122 59.1034V3.72462Z"
+          fill="currentColor"
+          shapeRendering="geometricPrecision"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1301_107">
+          <rect width="191" height="191" rx="95.5" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/icons/logotype.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@dub/utils";
+
+export default function LogoType({ className }: { className?: string }) {
+  return (
+    <svg
+      width="834"
+      height="236"
+      viewBox="0 0 834 236"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("h-6 w-24", className)}
+    >
+      <path
+        d="M266 119.5C266 181.632 215.632 232 153.5 232C91.368 232 41 181.632 41 119.5C41 57.368 91.368 7 153.5 7C215.632 7 266 57.368 266 119.5Z"
+        fill="currentColor"
+      />
+      <mask
+        id="mask0_46_2"
+        style={{
+          maskType: "alpha",
+        }}
+        maskUnits="userSpaceOnUse"
+        x="41"
+        y="7"
+        width="225"
+        height="225"
+      >
+        <path
+          d="M266 119.5C266 181.632 215.632 232 153.5 232C91.368 232 41 181.632 41 119.5C41 57.368 91.368 7 153.5 7C215.632 7 266 57.368 266 119.5Z"
+          fill="currentColor"
+        />
+      </mask>
+      <g mask="url(#mask0_46_2)">
+        <ellipse cx="153" cy="124.5" rx="58" ry="57.5" fill="white" />
+        <path d="M185 -10H211V181H185V-10Z" fill="white" />
+      </g>
+      <path
+        d="M397.25 213.75C385.25 213.75 374.833 211.083 366 205.75C357.167 200.417 350.25 192.917 345.25 183.25C340.417 173.417 338 161.917 338 148.75C338 135.417 340.5 123.75 345.5 113.75C350.5 103.583 357.583 95.6667 366.75 90C376.083 84.3333 387.083 81.5 399.75 81.5C407.583 81.5 414.833 82.9167 421.5 85.75C428.333 88.5833 433.583 92.3333 437.25 97V22H475.75V210.5H439.5L437.5 194.5C434.167 200.167 428.833 204.833 421.5 208.5C414.333 212 406.25 213.75 397.25 213.75ZM406.5 178.5C412.5 178.5 417.75 177.25 422.25 174.75C426.917 172.083 430.5 168.417 433 163.75C435.667 158.917 437 153.417 437 147.25C437 140.917 435.667 135.417 433 130.75C430.5 126.083 426.917 122.5 422.25 120C417.75 117.333 412.5 116 406.5 116C400.5 116 395.25 117.333 390.75 120C386.25 122.667 382.75 126.333 380.25 131C377.917 135.667 376.75 141.083 376.75 147.25C376.75 153.417 377.917 158.833 380.25 163.5C382.75 168.167 386.25 171.833 390.75 174.5C395.25 177.167 400.5 178.5 406.5 178.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M587.662 85.5H626.162C626.162 85.5 626.162 148.5 626.162 164C626.162 179.5 623.786 191.5 616.5 200.5C609.214 209.5 594 213.75 582.162 213.75C570.324 213.75 564.412 213.75 564.412 213.75C564.412 213.75 556.662 213.75 549.162 213.75C534.995 213.75 523.745 209.333 515.412 200.5C507.245 191.5 503.162 179.333 503.162 164V85.5H541.662V150C541.662 160.167 543.495 167.667 547.162 172.5C550.829 177.167 556.579 179.5 564.412 179.5C572.745 179.5 578.662 177.25 582.162 172.75C585.829 168.083 587.662 160.667 587.662 150.5V85.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M691.303 210.5H655.053V22H693.553V100C697.386 94.3333 703.053 89.8333 710.553 86.5C718.219 83 726.553 81.25 735.553 81.25C747.219 81.25 757.303 84.0833 765.803 89.75C774.469 95.4167 781.136 103.333 785.803 113.5C790.469 123.667 792.803 135.583 792.803 149.25C792.803 162.083 790.219 173.417 785.053 183.25C780.053 192.917 772.969 200.417 763.803 205.75C754.803 211.083 744.386 213.75 732.553 213.75C723.886 213.75 715.969 212 708.803 208.5C701.803 204.833 696.636 200.167 693.303 194.5L691.303 210.5ZM693.803 147.25C693.803 153.417 695.053 158.917 697.553 163.75C700.219 168.417 703.803 172.083 708.303 174.75C712.969 177.25 718.303 178.5 724.303 178.5C730.469 178.5 735.719 177.167 740.053 174.5C744.553 171.833 747.969 168.167 750.303 163.5C752.803 158.833 754.053 153.417 754.053 147.25C754.053 141.083 752.803 135.667 750.303 131C747.969 126.333 744.553 122.667 740.053 120C735.719 117.333 730.469 116 724.303 116C718.303 116 712.969 117.333 708.303 120C703.803 122.5 700.219 126.083 697.553 130.75C695.053 135.417 693.803 140.917 693.803 147.25Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/photo.tsx

@@ -0,0 +1,20 @@
+export default function Photo({ className }: { className?: string }) {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="24"
+      className={className}
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <path d="M21 15l-5-5L5 21" />
+    </svg>
+  );
+}

package/src/icons/tick.tsx

@@ -0,0 +1,18 @@
+export default function Tick({ className }: { className: string }) {
+  return (
+    <svg
+      fill="none"
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="14"
+      height="14"
+      className={className}
+    >
+      <path d="M20 6L9 17l-5-5" />
+    </svg>
+  );
+}

package/src/icons/twitter.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@dub/utils";
+
+export default function Twitter({ className }: { className?: string }) {
+  return (
+    <div className="group">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 248 204"
+        className={cn("group-hover:hidden", className)}
+      >
+        <path
+          fill="currentColor"
+          d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"
+        />
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1668.56 1221.19"
+        className={cn("hidden scale-150 group-hover:block", className)}
+      >
+        <g transform="translate(52.390088,-25.058597)">
+          <path
+            fill="currentColor"
+            d="M283.94,167.31l386.39,516.64L281.5,1104h87.51l340.42-367.76L984.48,1104h297.8L874.15,558.3l361.92-390.99
+		h-87.51l-313.51,338.7l-253.31-338.7H283.94z M412.63,231.77h136.81l604.13,807.76h-136.81L412.63,231.77z"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}

package/src/icons/unsplash.tsx

@@ -0,0 +1,17 @@
+export default function Unsplash({ className }: { className?: string }) {
+  return (
+    <svg
+      width="32"
+      height="32"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      className={className}
+    >
+      <path
+        d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"
+        fill="currentColor"
+        fillRule="nonzero"
+      />
+    </svg>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,35 @@
+// styles
+import "./styles.css";
+
+// components
+export * from "./accordion";
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./form";
+export * from "./modal";
+export * from "./popover";
+export * from "./switch";
+export * from "./tooltip";
+
+// hooks
+export * from "./hooks";
+
+// icons
+export * from "./icons";
+
+// layout
+export * from "./background";
+export * from "./footer";
+export * from "./max-width-wrapper";
+export * from "./nav";
+export * from "./nav-mobile";
+
+// content
+export * from "./content";
+
+// misc
+export * from "./copy-button";
+export * from "./icon-menu";
+export * from "./link-preview";
+export * from "./tab-select";