feat: rename tldr to message

src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { pushModal } from "@/components/modals";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -229,7 +229,7 @@ const EquityPlanForm = ({
                               shareClasses,
                               subtitle: (
                                 <Tldr
-                                  message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+                                  description="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
                                   cta={{
                                     label: "Learn more",
                                     // TODO - this link should be updated to the correct URL
@@ -262,7 +262,7 @@ const EquityPlanForm = ({
                             shareClasses,
                             subtitle: (
                               <Tldr
-                                message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+                                description="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
                                 cta={{
                                   label: "Learn more",
                                   // TODO - this link should be updated to the correct URL

src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/page.tsx

@@ -1,5 +1,5 @@
 import EmptyState from "@/components/common/empty-state";
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { Card } from "@/components/ui/card";
 import { withServerComponentSession } from "@/server/auth";
 import { db } from "@/server/db";
@@ -54,7 +54,7 @@ const EquityPlanPage = async () => {
           shareClasses={shareClasses}
           subtitle={
             <Tldr
-              message="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
+              description="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
               cta={{
                 label: "Learn more",
                 // TODO - this link should be updated to the correct URL
@@ -84,7 +84,7 @@ const EquityPlanPage = async () => {
             title="Create an equity plan"
             subtitle={
               <Tldr
-                message="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
+                description="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
                 cta={{
                   label: "Learn more",
                   // TODO - this link should be updated to the correct URL

src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/table.tsx

@@ -7,10 +7,10 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { Card } from "@/components/ui/card";
-import { type EquityPlanMutationType } from "@/trpc/routers/equity-plan/schema";
-import { type ShareClassMutationType } from "@/trpc/routers/share-class/schema";
+import type { EquityPlanMutationType } from "@/trpc/routers/equity-plan/schema";
+import type { ShareClassMutationType } from "@/trpc/routers/share-class/schema";
 import { RiEqualizer2Line } from "@remixicon/react";
 import EquityPlanModal from "./modal";
 const formatter = new Intl.NumberFormat("en-US");
@@ -49,7 +49,7 @@ const EquityPlanTable = ({
             <TableHead>Cancellation behavior</TableHead>
             <TableHead>Board approval date</TableHead>
             <TableHead>Plan effective date</TableHead>
-            <TableHead></TableHead>
+            <TableHead />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -81,7 +81,7 @@ const EquityPlanTable = ({
                   shareClasses={shareClasses}
                   subtitle={
                     <Tldr
-                      message="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
+                      description="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
                       cta={{
                         label: "Learn more",
                         // TODO - this link should be updated to the correct URL

src/app/(authenticated)/(dashboard)/[publicId]/securities/options/page.tsx

@@ -1,5 +1,5 @@
 import EmptyState from "@/components/common/empty-state";
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import OptionTable from "@/components/securities/options/option-table";
 import { Card } from "@/components/ui/card";
 import { api } from "@/trpc/server";
@@ -51,7 +51,7 @@ const OptionsPage = async () => {
             title="Collect options for Stakeholders"
             subtitle={
               <Tldr
-                message="Manage stock options by adding them. 
+                description="Manage stock options by adding them. 
              Add approval dates, notes, grantId for the stakeholders. "
                 cta={{
                   label: "Learn more",

src/app/(authenticated)/(dashboard)/[publicId]/settings/api/components/create-key.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import Message from "@/components/common/message";
 import Modal from "@/components/common/modal";
-import Tldr from "@/components/common/tldr";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { api } from "@/trpc/react";
@@ -56,7 +56,7 @@ const CreateApiKey = () => {
         title="API key created"
         subtitle={
           <Tldr
-            message="
+            description="
             You will not see this key again, so please make sure to copy and store it in a safe place.
           "
           />

src/app/(authenticated)/(dashboard)/[publicId]/settings/api/components/table.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { dayjsExt } from "@/common/dayjs";
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { Card } from "@/components/ui/card";
 import { api } from "@/trpc/react";
 import { RiMore2Fill } from "@remixicon/react";
@@ -59,7 +59,7 @@ const ApiKeysTable = ({ keys }: { keys: ApiKey[] }) => {
     <Card className="mx-auto mt-3 w-[28rem] sm:w-[38rem] md:w-full">
       <div className="mx-3">
         <Tldr
-          message="
+          description="
           For security reasons, we have no ways to retrieve your complete API keys. If you lose your API key, you will need to create or rotate and replace with a new one.
         "
         />

src/app/(authenticated)/(dashboard)/[publicId]/share-classes/create-share-class-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { pushModal } from "@/components/modals";
 import { Button } from "@/components/ui/button";
 import type { ShareClassMutationType } from "@/trpc/routers/share-class/schema";
@@ -23,7 +23,7 @@ export const CreateShareButton = ({
           shareClasses,
           subtitle: (
             <Tldr
-              message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+              description="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
               cta={{
                 label: "Learn more",
                 // TODO - this link should be updated to the correct URL

src/app/(authenticated)/(dashboard)/[publicId]/share-classes/edit-share-class-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { pushModal } from "@/components/modals";
 import type { ShareClassMutationType } from "@/trpc/routers/share-class/schema";
 import { RiEqualizer2Line } from "@remixicon/react";
@@ -26,7 +26,7 @@ export const EditShareClassButton = ({
           shareClasses,
           subtitle: (
             <Tldr
-              message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+              description="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
               cta={{
                 label: "Learn more",
                 href: "https://captable.inc/help",

src/components/common/tldr.tsx → src/components/common/message.tsx

@@ -1,15 +1,17 @@
 import { RiInformationLine } from "@remixicon/react";
 import Link from "next/link";
 
-type TldrProps = {
-  message: string;
+type MessageProps = {
+  description: string;
   cta?: {
     label: string;
     href: string;
   };
+
+  children?: React.ReactNode;
 };
 
-const Tldr = ({ message, cta }: TldrProps) => {
+const Message = ({ description, cta, children }: MessageProps) => {
   return (
     <div className="mt-3 rounded-md bg-teal-50 p-4 text-left">
       <div className="flex">
@@ -21,7 +23,7 @@ const Tldr = ({ message, cta }: TldrProps) => {
         </div>
         <div className="ml-3">
           <div className="text-sm text-teal-600">
-            <p>{message}</p>
+            <p>{description}</p>
           </div>
 
           {cta && (
@@ -40,10 +42,12 @@ const Tldr = ({ message, cta }: TldrProps) => {
               </div>
             </div>
           )}
+
+          {children && <div className="mt-4">{children}</div>}
         </div>
       </div>
     </div>
   );
 };
 
-export default Tldr;
+export default Message;

src/components/dashboard/navbar/command-menu.tsx

@@ -24,7 +24,7 @@ import { RiSearchLine } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { pushModal } from "@/components/modals";
 
 type CommandOption = {
@@ -51,7 +51,7 @@ const Pages: CommandOption[] = [
         title: "Add a stakeholder",
         subtitle: (
           <Tldr
-            message="Manage stakeholders by adding them. 
+            description="Manage stakeholders by adding them. 
           Categorize, assign roles, and maintain contact info for investors, partners, and clients."
             cta={{
               label: "Learn more",
@@ -96,7 +96,7 @@ const Pages: CommandOption[] = [
         shareClasses: [],
         subtitle: (
           <Tldr
-            message="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
+            description="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
             cta={{
               label: "Learn more",
               // TODO - this link should be updated to the correct URL
@@ -119,7 +119,7 @@ const Pages: CommandOption[] = [
         shareClasses: [],
         subtitle: (
           <Tldr
-            message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+            description="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
             cta={{
               label: "Learn more",
               // TODO - this link should be updated to the correct URL

src/components/modals/equity-pan/equity-plan-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { popModal, pushModal } from "@/components/modals";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -227,7 +227,7 @@ export const EquityPlanForm = ({
                               shareClasses,
                               subtitle: (
                                 <Tldr
-                                  message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+                                  description="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
                                   cta={{
                                     label: "Learn more",
                                     // TODO - this link should be updated to the correct URL
@@ -260,7 +260,7 @@ export const EquityPlanForm = ({
                             shareClasses,
                             subtitle: (
                               <Tldr
-                                message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+                                description="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
                                 cta={{
                                   label: "Learn more",
                                   // TODO - this link should be updated to the correct URL

src/components/safe/form/index.tsx

@@ -7,6 +7,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 
+import Message from "@/components/common/message";
 import { StakeholderSelector } from "@/components/stakeholder/stakeholder-selector";
 import { Button } from "@/components/ui/button";
 import { LinearCombobox } from "@/components/ui/combobox";
@@ -259,6 +260,10 @@ export const SafeForm: React.FC<SafeFormProps> = ({ type }) => {
           />
         </div>
 
+        {/* <Tldr
+          description="A Simple Agreement for Future Equity (SAFE) is an agreement between an investor and a company that provides the investor with the right to receive equity in the future, upon the occurrence of certain events."
+        > */}
+
         <div className="mt-8 flex justify-end">
           <Button disabled={isSubmitting} loading={isSubmitting} type="submit">
             {type === "create"

src/components/securities/shares/steps/general-details.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { pushModal } from "@/components/modals";
 // import { EmptySelect } from "@/components/securities/shared/EmptySelect";
 import { Button } from "@/components/ui/button";
@@ -147,7 +147,7 @@ export const GeneralDetails = ({ shareClasses = [] }: GeneralDetailsProps) => {
                               title: "Create a share class",
                               subtitle: (
                                 <Tldr
-                                  message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+                                  description="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
                                   cta={{
                                     label: "Learn more",
                                     // TODO - this link should be updated to the correct URL

src/components/stakeholder/stakeholder-dropdown.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { pushModal } from "@/components/modals";
 import { Button } from "@/components/ui/button";
 import {
@@ -31,7 +31,7 @@ export default function StakeholderDropdown() {
                   title: "Add a stakeholder",
                   subtitle: (
                     <Tldr
-                      message="Manage stakeholders by adding them. 
+                      description="Manage stakeholders by adding them. 
               Categorize, assign roles, and maintain contact info for investors, partners, and clients."
                       cta={{
                         label: "Learn more",
@@ -59,7 +59,7 @@ export default function StakeholderDropdown() {
                   title: "Add or Import Stakeholders",
                   subtitle: (
                     <Tldr
-                      message="Manage stakeholders by adding them. 
+                      description="Manage stakeholders by adding them. 
               Categorize, assign roles, and maintain contact info for investors, partners, and clients."
                       cta={{
                         label: "Learn more",

src/components/stakeholder/stakeholder-selector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Tldr from "@/components/common/tldr";
+import Message from "@/components/common/message";
 import { pushModal } from "@/components/modals";
 import { LinearCombobox } from "@/components/ui/combobox";
 import { api } from "@/trpc/react";
@@ -51,7 +51,7 @@ export function StakeholderSelector({ onSelect }: StakeholderSelectorType) {
             title: "Add a stakeholder",
             subtitle: (
               <Tldr
-                message="Manage stakeholders by adding them. 
+                description="Manage stakeholders by adding them. 
               Categorize, assign roles, and maintain contact info for investors, partners, and clients."
                 cta={{
                   label: "Learn more",