From f5e8c140b50bd7ee1d21098bc7a227a2c60af2fb Mon Sep 17 00:00:00 2001
From: Christy Presler <6210279+cpresler@users.noreply.github.com>
Date: Thu, 8 Feb 2024 15:42:08 -0500
Subject: [PATCH] Adding Links to Change Logs (#63)

Co-authored-by: Christy Presler <cpresler@users.noreply.github.com>
---
 widget-src/Widget.tsx                   |   9 +-
 widget-src/components/Button.tsx        |  57 ++---
 widget-src/components/ChangeLogRow.tsx  |  62 +++++-
 widget-src/components/Footer.tsx        |   6 +-
 widget-src/components/header/Meta.tsx   |   4 +-
 widget-src/components/log/AddLink.tsx   |  51 +++++
 widget-src/components/log/Link.tsx      | 188 ++++++++++++++++
 widget-src/components/log/LinkForm.tsx  | 277 ++++++++++++++++++++++++
 widget-src/components/log/LinkList.tsx  |  44 ++++
 widget-src/components/log/Type.tsx      |   4 +-
 widget-src/svgs/ActionAddIcon.tsx       |   4 +-
 widget-src/svgs/ActionDeleteIcon.tsx    |   4 +-
 widget-src/svgs/ActionEditIcon.tsx      |   4 +-
 widget-src/svgs/ActionLinkIcon.tsx      |   6 +-
 widget-src/svgs/BrandAsanaIcon.tsx      |   6 +-
 widget-src/svgs/BrandAtlassianIcon.tsx  |   7 +
 widget-src/svgs/BrandBasecampIcon.tsx   |   7 +
 widget-src/svgs/BrandBitbucketIcon.tsx  |  11 +-
 widget-src/svgs/BrandChatGptIcon.tsx    |   7 +
 widget-src/svgs/BrandClickUpIcon.tsx    |   8 +
 widget-src/svgs/BrandCodePen.tsx        |   7 +
 widget-src/svgs/BrandCodeSandbox.tsx    |   7 +
 widget-src/svgs/BrandFigmaIcon.tsx      |   4 +-
 widget-src/svgs/BrandFramer.tsx         |   7 +
 widget-src/svgs/BrandGithubIcon.tsx     |   7 +-
 widget-src/svgs/BrandGitlabIcon.tsx     |   4 +-
 widget-src/svgs/BrandGoogleIcon.tsx     |   8 +
 widget-src/svgs/BrandJiraIcon.tsx       |   7 -
 widget-src/svgs/BrandMicrosoftIcon.tsx  |   7 +
 widget-src/svgs/BrandMiroIcon.tsx       |   7 +
 widget-src/svgs/BrandMondayIcon.tsx     |  10 +
 widget-src/svgs/BrandMuralIcon.tsx      |   7 +
 widget-src/svgs/BrandNotionIcon.tsx     |   4 +-
 widget-src/svgs/BrandSlack.tsx          |  15 ++
 widget-src/svgs/BrandSmartsheetIcon.tsx |   7 +
 widget-src/svgs/BrandStorybookIcon.tsx  |   5 +-
 widget-src/svgs/BrandTeamsIcon.tsx      |   8 +
 widget-src/svgs/BrandTrelloIcon.tsx     |   9 +
 widget-src/svgs/Check.tsx               |   6 +-
 widget-src/svgs/FileHistory.tsx         |   9 +
 widget-src/svgs/Prototype.tsx           |   7 +
 widget-src/types/ChangeLog.ts           |   9 +-
 widget-src/types/LinkTypes.ts           |   6 +
 widget-src/utilities/Regexes.ts         |  51 +++++
 44 files changed, 899 insertions(+), 85 deletions(-)
 create mode 100644 widget-src/components/log/AddLink.tsx
 create mode 100644 widget-src/components/log/Link.tsx
 create mode 100644 widget-src/components/log/LinkForm.tsx
 create mode 100644 widget-src/components/log/LinkList.tsx
 create mode 100644 widget-src/svgs/BrandAtlassianIcon.tsx
 create mode 100644 widget-src/svgs/BrandBasecampIcon.tsx
 create mode 100644 widget-src/svgs/BrandChatGptIcon.tsx
 create mode 100644 widget-src/svgs/BrandClickUpIcon.tsx
 create mode 100644 widget-src/svgs/BrandCodePen.tsx
 create mode 100644 widget-src/svgs/BrandCodeSandbox.tsx
 create mode 100644 widget-src/svgs/BrandFramer.tsx
 create mode 100644 widget-src/svgs/BrandGoogleIcon.tsx
 delete mode 100644 widget-src/svgs/BrandJiraIcon.tsx
 create mode 100644 widget-src/svgs/BrandMicrosoftIcon.tsx
 create mode 100644 widget-src/svgs/BrandMiroIcon.tsx
 create mode 100644 widget-src/svgs/BrandMondayIcon.tsx
 create mode 100644 widget-src/svgs/BrandMuralIcon.tsx
 create mode 100644 widget-src/svgs/BrandSlack.tsx
 create mode 100644 widget-src/svgs/BrandSmartsheetIcon.tsx
 create mode 100644 widget-src/svgs/BrandTeamsIcon.tsx
 create mode 100644 widget-src/svgs/BrandTrelloIcon.tsx
 create mode 100644 widget-src/svgs/FileHistory.tsx
 create mode 100644 widget-src/svgs/Prototype.tsx
 create mode 100644 widget-src/types/LinkTypes.ts
 create mode 100644 widget-src/utilities/Regexes.ts

diff --git a/widget-src/Widget.tsx b/widget-src/Widget.tsx
index 22e4c5b..a2067f2 100644
--- a/widget-src/Widget.tsx
+++ b/widget-src/Widget.tsx
@@ -14,7 +14,7 @@ function Widget() {
   const [showDescription, setShowDescription] = useSyncedState('showDescription', true);
   const [showStatus, setShowStatus] = useSyncedState('showStatus', '0');
   const [showVersion, setShowVersion] = useSyncedState('showVersion', false);
-  const [showBranding, setShowBranding] = useSyncedState('showBranding', true);
+  const [showBranding, setShowBranding] = useSyncedState('showBradning', true); // fixing the typo messes with branding state on existing widgets
   const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', false);
   // Meta Data
   const [createdDate, setCreatedDate] = useSyncedState('createdDate', 0);
@@ -33,7 +33,12 @@ function Widget() {
       editedDate: Date.now(),
       user: currentUser,
       editCount: 0,
-      showTypeMenu: false,
+      state: {
+        showTypeMenu: false,
+        showLinkForm: false,
+        linkFormError: { label: false, url: false }
+      },
+      links: [],
     });
     setChangeIds([changeToAdd, ...changeIds]);
     setUpdatedDate(Date.now());
diff --git a/widget-src/components/Button.tsx b/widget-src/components/Button.tsx
index a8ac590..24f0bc6 100644
--- a/widget-src/components/Button.tsx
+++ b/widget-src/components/Button.tsx
@@ -1,36 +1,25 @@
-import { ActionEditIcon } from '../svgs/ActionEditIcon';
-import { ActionDeleteIcon } from '../svgs/ActionDeleteIcon';
 import { COLOR, FONT, GAP, PADDING, RADIUS, SPACE } from '../utilities/Styles';
 
 const { widget } = figma;
 const { AutoLayout, Frame, SVG, Text } = widget;
 
 interface ButtonProps {
-  label: 'Edit' | 'Delete';
-  hideLabel: boolean;
+  label: string;
+  hideLabel?: boolean;
   action: () => void;
+  iconSrc?: string;
 }
 
 export const Button = ({
   label,
-  hideLabel,
+  hideLabel = false,
   action,
+  iconSrc
 }: ButtonProps) => {
-  let svgSrc = '';
-  switch (label) {
-    case 'Edit':
-      svgSrc = <ActionEditIcon />;
-      break;
-    case 'Delete':
-      svgSrc = <ActionDeleteIcon />;
-      break;
-    default:
-      break;
-  }
 
   return (
     <AutoLayout
-      name="Button"
+      name={`button-${label}`}
       fill={COLOR.white}
       cornerRadius={RADIUS.sm}
       overflow="visible"
@@ -43,22 +32,24 @@ export const Button = ({
       horizontalAlignItems="center"
       verticalAlignItems="center"
     >
-      <Frame name="Icon" overflow="visible" width={SPACE.xxs} height={SPACE.xxs}>
-        <SVG
-          name={label}
-          x={{
-            type: 'center',
-            offset: PADDING.none,
-          }}
-          y={{
-            type: 'center',
-            offset: PADDING.none,
-          }}
-          height={SPACE.xxs}
-          width={SPACE.xxs}
-          src={svgSrc}
-        />
-      </Frame>
+      {iconSrc && (
+        <Frame name="Icon" overflow="visible" width={SPACE.xxs} height={SPACE.xxs}>
+          <SVG
+            name={label}
+            x={{
+              type: 'center',
+              offset: PADDING.none,
+            }}
+            y={{
+              type: 'center',
+              offset: PADDING.none,
+            }}
+            height={SPACE.xs}
+            width={SPACE.xs}
+            src={iconSrc}
+          />
+        </Frame>
+      )}
       <Text
         name="Label"
         fill={COLOR.greyDark}
diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx
index d4e979b..46f5f34 100644
--- a/widget-src/components/ChangeLogRow.tsx
+++ b/widget-src/components/ChangeLogRow.tsx
@@ -6,6 +6,11 @@ import { Type } from './log/Type';
 import { formatDate } from '../utilities/Utils';
 import { COLOR, FONT, GAP, PADDING, SPACE } from '../utilities/Styles';
 import { TypeMenu } from './log/TypeMenu';
+import { ActionDeleteIcon } from '../svgs/ActionDeleteIcon';
+import { ActionLinkIcon } from '../svgs/ActionLinkIcon';
+import { LinkForm } from './log/LinkForm';
+import { LinkList } from './log/LinkList';
+import { AddLink } from './log/AddLink';
 
 const { widget } = figma;
 const { AutoLayout, Input, Rectangle, Text } = widget;
@@ -69,7 +74,7 @@ export const ChangeLogRow = ({
             width="fill-parent"
             verticalAlignItems="center"
           >
-            {!!changeLog.showTypeMenu && (
+            {!!changeLog.state?.showTypeMenu && (
               <TypeMenu
                 currentType={changeLog.type === 'added' ? 'none' : changeLog.type}
                 selectType={(newType) => {
@@ -81,12 +86,18 @@ export const ChangeLogRow = ({
                         type: newType,
                         editCount: addEdit ? changeLog.editCount + 1 : changeLog.editCount,
                         editedDate: addEdit ? Date.now() : changeLog.editedDate,
-                        showTypeMenu: !changeLog.showTypeMenu,
+                        state: {
+                          ...changeLog.state,
+                          showTypeMenu: !changeLog.state?.showTypeMenu,
+                        },
                       });
                       setUpdatedDate(Date.now());
                   } else {
                     updateChange({
-                      showTypeMenu: !changeLog.showTypeMenu,
+                      state: {
+                        ...changeLog.state,
+                        showTypeMenu: !changeLog.state?.showTypeMenu,
+                      },
                     })
                   }
                 }}
@@ -98,11 +109,17 @@ export const ChangeLogRow = ({
                 action={() => {
                   // toggle log type menu
                   updateChange({
-                    showTypeMenu: !changeLog.showTypeMenu,
+                    state: {
+                      ...changeLog.state,
+                      showTypeMenu: !changeLog.state?.showTypeMenu,
+                    }
                   })
                   // hide all other log type menues
                   updateOthers({
-                    showTypeMenu: false,
+                    state: {
+                      ...changeLog.state,
+                      showTypeMenu: false,
+                    }
                   })
                 }}
               />
@@ -136,7 +153,7 @@ export const ChangeLogRow = ({
                 horizontalAlignItems="end"
                 verticalAlignItems="center"
               >
-                <Button label="Delete" hideLabel={true} action={deleteChange} />
+                <Button label="Delete" hideLabel={true} iconSrc={<ActionDeleteIcon />} action={deleteChange} />
               </AutoLayout>
             )}
           </AutoLayout>
@@ -177,7 +194,38 @@ export const ChangeLogRow = ({
               </Text>
             )}
           </AutoLayout>
-          {/* <Links name="Links" /> */}
+          <AutoLayout
+            width="fill-parent"
+            horizontalAlignItems="end"
+            direction="vertical"
+          >
+            <LinkList
+              links={changeLog.links}
+              deleteLink={(linkToDelete) => {
+                updateChange({
+                  links: changeLog.links ? changeLog.links.filter(link => link.key !== linkToDelete) : []
+                })
+              }}
+            />
+            <AutoLayout
+              width="fill-parent"
+              horizontalAlignItems="end"
+              verticalAlignItems="center"
+            >
+              {!!changeLog.state?.showLinkForm ? (
+                <LinkForm
+                  changeLog={changeLog}
+                  updateChange={updateChange}
+                  setUpdatedDate={setUpdatedDate}
+                  />
+              ) : (
+                <AddLink
+                  changeLog={changeLog}
+                  updateChange={updateChange}  
+                />
+              )} 
+            </AutoLayout>
+          </AutoLayout>
         </AutoLayout>
       </AutoLayout>
       <Rectangle
diff --git a/widget-src/components/Footer.tsx b/widget-src/components/Footer.tsx
index 5aacb99..185a979 100644
--- a/widget-src/components/Footer.tsx
+++ b/widget-src/components/Footer.tsx
@@ -1,7 +1,7 @@
 import { LogoFormidable } from '../svgs/LogoFormidable';
 import { COLOR, GAP, OPACITY, SPACE } from '../utilities/Styles';
 
-const { widget, showUI } = figma;
+const { widget, openExternal } = figma;
 const { AutoLayout, Rectangle, SVG } = widget;
 
 interface FooterProps {
@@ -19,9 +19,7 @@ export const Footer = ({ showBranding }: FooterProps) => (
         verticalAlignItems="center"
         opacity={OPACITY.semiOpaque}
         onClick={() => {
-          const url = 'https://formidable.com/open-source/';
-          const openLinkUIString = `<script>window.open('${url}','_blank');</script>`;
-          showUI(openLinkUIString, { visible: false });
+          openExternal("https://formidable.com/open-source/");
         }}
         hoverStyle={{
           opacity: OPACITY.opaque,
diff --git a/widget-src/components/header/Meta.tsx b/widget-src/components/header/Meta.tsx
index 6b4eec7..668cb96 100644
--- a/widget-src/components/header/Meta.tsx
+++ b/widget-src/components/header/Meta.tsx
@@ -72,11 +72,11 @@ export const Meta = ({
             }}
             overflow="visible"
             spacing={GAP.md}
-            padding={PADDING.sm}
+            padding={PADDING.xs}
             horizontalAlignItems="end"
             verticalAlignItems="center"
           >
-            <SVG name="Vector" height={SPACE.xs} width={SPACE.xs} src={<ActionAddIcon />} />
+            <SVG name="Vector" height={SPACE.sm} width={SPACE.sm} src={<ActionAddIcon />} />
           </AutoLayout>
         </AutoLayout>
       )}
diff --git a/widget-src/components/log/AddLink.tsx b/widget-src/components/log/AddLink.tsx
new file mode 100644
index 0000000..2327b56
--- /dev/null
+++ b/widget-src/components/log/AddLink.tsx
@@ -0,0 +1,51 @@
+import { ChangeLog } from '../../types/ChangeLog';
+import { Button } from '../Button';
+import { COLOR, FONT } from '../../utilities/Styles';
+import { ActionLinkIcon } from '../../svgs/ActionLinkIcon';
+
+const { widget } = figma;
+const { AutoLayout, Text } = widget;
+
+interface AddLinkProps {
+  changeLog: ChangeLog;
+  updateChange: (changes: Partial<ChangeLog>) => void;
+}
+
+export const AddLink = ({
+  changeLog,
+  updateChange,
+}: AddLinkProps) => {
+  return (
+    <AutoLayout
+      width="fill-parent"
+      horizontalAlignItems="end"
+      verticalAlignItems="center"
+    >
+      {changeLog.links && changeLog.links.length > 7 ? (
+        <Text
+          fill={COLOR.greyDark}
+          lineHeight={FONT.lineHeight.xs}
+          fontFamily={FONT.family}
+          fontSize={FONT.size.xs}
+          letterSpacing={FONT.letterSpacing.sm}
+          fontWeight={FONT.weight.regular}
+        >
+          Link maximum (8) reached.
+        </Text>
+      ) : (
+        <Button
+          label="Add Link"
+          iconSrc={<ActionLinkIcon color={COLOR.greyDark} />}
+          action={() => {
+            updateChange({
+              state: {
+                ...changeLog.state,
+                showLinkForm: true,
+              }
+            })
+          }}
+        />
+      )}
+    </AutoLayout>
+  )
+}
\ No newline at end of file
diff --git a/widget-src/components/log/Link.tsx b/widget-src/components/log/Link.tsx
new file mode 100644
index 0000000..1f96620
--- /dev/null
+++ b/widget-src/components/log/Link.tsx
@@ -0,0 +1,188 @@
+
+import { BrandFigmaIcon } from '../../svgs/BrandFigmaIcon';
+import { BrandAsanaIcon } from '../../svgs/BrandAsanaIcon';
+import { BrandBitbucketIcon } from '../../svgs/BrandBitbucketIcon';
+import { BrandGithubIcon } from '../../svgs/BrandGithubIcon';
+import { BrandGitlabIcon } from '../../svgs/BrandGitlabIcon';
+import { BrandAtlassianIcon } from '../../svgs/BrandAtlassianIcon';
+import { BrandNotionIcon } from '../../svgs/BrandNotionIcon';
+import { BrandStorybookIcon } from '../../svgs/BrandStorybookIcon';
+import { ActionDeleteIcon } from '../../svgs/ActionDeleteIcon';
+import { ActionLinkIcon } from '../../svgs/ActionLinkIcon';
+import { FileHistory } from '../../svgs/FileHistory';
+import { BrandGoogleIcon } from '../../svgs/BrandGoogleIcon';
+import { BrandTrelloIcon } from '../../svgs/BrandTrelloIcon';
+import { Prototype } from '../../svgs/Prototype';
+import { BrandCodePenIcon } from '../../svgs/BrandCodePen';
+import { BrandCodeSandboxIcon } from '../../svgs/BrandCodeSandbox';
+import { BrandFramerIcon } from '../../svgs/BrandFramer';
+import { BrandSlackIcon } from '../../svgs/BrandSlack';
+import { BrandBasecampIcon } from '../../svgs/BrandBasecampIcon';
+import { BrandChatGptIcon } from '../../svgs/BrandChatGptIcon';
+import { BrandClickUpIcon } from '../../svgs/BrandClickUpIcon';
+import { BrandMiroIcon } from '../../svgs/BrandMiroIcon';
+import { BrandMondayIcon } from '../../svgs/BrandMondayIcon';
+import { BrandMuralIcon } from '../../svgs/BrandMuralIcon';
+import { BrandSmartsheetIcon } from '../../svgs/BrandSmartsheetIcon';
+import { BrandTeamsIcon } from '../../svgs/BrandTeamsIcon';
+import { BrandMicrosoftIcon } from '../../svgs/BrandMicrosoftIcon';
+import { COLOR, FONT, GAP, PADDING, RADIUS, SPACE } from '../../utilities/Styles';
+
+const { widget, openExternal } = figma;
+const { AutoLayout, Frame, SVG, Text } = widget;
+
+interface LinkProps {
+  label: string,
+  url: string,
+  icon?: string,
+  key: string,
+  deleteLink: () => void;
+}
+
+export const Link = ({
+  label,
+  url,
+  icon = <ActionLinkIcon color={COLOR.greyDark} />,
+  key,
+  deleteLink,
+}: LinkProps) => {
+
+  const assignSvg = (iconString: string) => {
+    switch (iconString) {
+      case "figmaVersion":
+        return <FileHistory color={COLOR.greyDark} />;
+      case "figmaPrototype":
+        return <Prototype color={COLOR.greyDark} />;
+      case "figma":
+        return <BrandFigmaIcon color={COLOR.greyDark} />;
+      case "asana":
+        return <BrandAsanaIcon color={COLOR.greyDark} />;
+      case "atlassian":
+        return <BrandAtlassianIcon color={COLOR.greyDark} />;
+      case "basecamp":
+        return <BrandBasecampIcon color={COLOR.greyDark} />;
+      case "bitbucket":
+        return <BrandBitbucketIcon color={COLOR.greyDark} />;
+      case "chatgpt":
+        return <BrandChatGptIcon color={COLOR.greyDark} />;
+      case "clickup":
+        return <BrandClickUpIcon color={COLOR.greyDark} />;
+      case "codepen":
+        return <BrandCodePenIcon color={COLOR.greyDark} />;
+      case "codesandbox":
+        return <BrandCodeSandboxIcon color={COLOR.greyDark} />;
+      case "framer":
+        return <BrandFramerIcon color={COLOR.greyDark} />;
+      case "github":
+        return <BrandGithubIcon color={COLOR.greyDark} />;
+      case "gitlab":
+        return <BrandGitlabIcon color={COLOR.greyDark} />;
+      case "google":
+        return <BrandGoogleIcon color={COLOR.greyDark} />;
+      case "miro":
+        return <BrandMiroIcon color={COLOR.greyDark} />;
+      case "monday":
+        return <BrandMondayIcon color={COLOR.greyDark} />;
+      case "mural":
+        return <BrandMuralIcon color={COLOR.greyDark} />;
+      case "notion":
+        return <BrandNotionIcon color={COLOR.greyDark} />;
+      case "slack":
+        return <BrandSlackIcon color={COLOR.greyDark} />;
+      case "smartsheet":
+        return <BrandSmartsheetIcon color={COLOR.greyDark} />;
+      case "storybook":
+        return <BrandStorybookIcon color={COLOR.greyDark} />;
+      case "teams":
+        return <BrandTeamsIcon color={COLOR.greyDark} />;
+      case "microsoft":
+        return <BrandMicrosoftIcon color={COLOR.greyDark} />;
+      case "trello":
+        return <BrandTrelloIcon color={COLOR.greyDark} />;
+      case "link":
+      default:
+        return <ActionLinkIcon color={COLOR.greyDark} />;
+    }
+  }
+
+  return (
+    <AutoLayout
+      name={`link_${label}`}
+      key={key}
+    >
+      <AutoLayout
+        fill={COLOR.greyLight}
+        onClick={ () => openExternal(url) }
+        spacing={GAP.sm}
+        padding={{
+          vertical: PADDING.xs,
+          left: PADDING.sm,
+          right: PADDING.md,
+        }}
+        cornerRadius={{
+          topLeft: RADIUS.xs,
+          topRight: RADIUS.none,
+          bottomRight: RADIUS.none,
+          bottomLeft: RADIUS.xs,
+        }}
+        hoverStyle={{ fill: COLOR.grey }}
+        height={SPACE.sm}
+      >
+        <Frame name="Icon" overflow="visible" width={SPACE.xxs} height={SPACE.xxs}>
+          <SVG
+            name={label}
+            x={{
+              type: 'center',
+              offset: PADDING.none,
+            }}
+            y={{
+              type: 'center',
+              offset: PADDING.none,
+            }}
+            height={SPACE.xs}
+            width={SPACE.xs}
+            src={assignSvg(icon)}
+          />
+        </Frame>
+        <Text
+          name="Label"
+          fill={COLOR.greyDark}
+          verticalAlignText="center"
+          lineHeight={FONT.lineHeight.xs}
+          fontFamily={FONT.family}
+          fontSize={FONT.size.xs}
+          letterSpacing={FONT.letterSpacing.sm}
+          fontWeight={FONT.weight.bold}
+          textCase="upper"
+        >
+          {label}
+        </Text>
+      </AutoLayout>
+      <AutoLayout
+        name="delete link"
+        onClick={() => deleteLink()}
+        padding={{
+          left: PADDING.sm,
+          right: PADDING.sm,
+        }}
+        cornerRadius={{
+          topLeft: RADIUS.none,
+          topRight: RADIUS.xs,
+          bottomRight: RADIUS.xs,
+          bottomLeft: RADIUS.none,
+        }}
+        fill={COLOR.greyLight}
+        hoverStyle={{ fill: COLOR.grey }}
+        height={SPACE.sm}
+        verticalAlignItems="center"
+      >
+        <SVG
+          name="delete"
+          height={SPACE.xxs}
+          width={SPACE.xxs}
+          src={<ActionDeleteIcon color={COLOR.greyDark} />}
+        />
+      </AutoLayout>
+    </AutoLayout>
+  )
+}
\ No newline at end of file
diff --git a/widget-src/components/log/LinkForm.tsx b/widget-src/components/log/LinkForm.tsx
new file mode 100644
index 0000000..c7da3e3
--- /dev/null
+++ b/widget-src/components/log/LinkForm.tsx
@@ -0,0 +1,277 @@
+import { ChangeLog } from '../../types/ChangeLog';
+import { Button } from '../Button';
+import { randomId } from '../../utilities/Utils';
+import { COLOR, FONT, GAP, PADDING, RADIUS, SPACE } from '../../utilities/Styles';
+import {
+  rxUrl,
+  rxAsana,
+  rxBitbucket,
+  rxFigma,
+  rxFigmaProto,
+  rxFigmaVersion,
+  rxGithub,
+  rxGitlab,
+  rxGoogle,
+  rxAtlassian,
+  rxNotion,
+  rxStorybook,
+  rxTrello,
+  rxCodePen,
+  rxCodeSandbox,
+  rxFramer,
+  rxSlack,
+  rxBasecamp,
+  rxChatGpt,
+  rxClickUp,
+  rxMiro,
+  rxMonday,
+  rxMural,
+  rxSmartsheet,
+  rxTeams,
+  rxMicrosoft
+} from '../../utilities/Regexes';
+import { ActionDeleteIcon } from '../../svgs/ActionDeleteIcon';
+
+
+const { widget } = figma;
+const { AutoLayout, Input, Text } = widget;
+
+interface LinkFormProps {
+  changeLog: ChangeLog;
+  updateChange: (changes: Partial<ChangeLog>) => void;
+  setUpdatedDate: (updatedDate: number) => void;
+}
+
+export const LinkForm = ({
+  changeLog,
+  updateChange,
+  setUpdatedDate,
+}: LinkFormProps) => {
+
+  const validUrl = (address: string | undefined) => {
+    if (address === undefined) {
+      return false;
+    }
+    return address !== '' && rxUrl.test(address);
+  }
+
+  const validLabel = (label: string | undefined) => {
+    if (label === undefined) {
+      return false;
+    }
+    return label !== '' && label.length <= 40;
+  }
+
+  const assignIcon = (url: string) => {
+    switch (true) {
+      case rxFigmaVersion.test(url):
+        return "figmaVersion";
+      case rxFigmaProto.test(url):
+        return "figmaPrototype";
+      case rxFigma.test(url):
+        return "figma";
+      case rxAsana.test(url):
+        return "asana";
+      case rxAtlassian.test(url):
+        return "atlassian";
+      case rxBasecamp.test(url):
+        return "basecamp";
+      case rxBitbucket.test(url):
+        return "bitbucket";
+      case rxChatGpt.test(url):
+        return "chatgpt";
+      case rxClickUp.test(url):
+        return "clickup";
+      case rxCodePen.test(url):
+        return "codepen";
+      case rxCodeSandbox.test(url):
+        return "codesandbox";
+      case rxFramer.test(url):
+        return "framer";
+      case rxGithub.test(url):
+        return "github";
+      case rxGitlab.test(url):
+        return "gitlab";
+      case rxGoogle.test(url):
+        return "google";
+      case rxMiro.test(url):
+        return "miro";
+      case rxMonday.test(url):
+        return "monday";
+      case rxMural.test(url):
+        return "mural";
+      case rxNotion.test(url):
+        return "notion";
+      case rxSlack.test(url):
+        return "slack";
+      case rxSmartsheet.test(url):
+        return "smartsheet";
+      case rxStorybook.test(url):
+        return "storybook";
+      case rxTeams.test(url):
+        return "teams";
+      case rxMicrosoft.test(url):
+        return "microsoft";
+      case rxTrello.test(url):
+        return "trello";
+      default:
+        return "link";
+    }
+  }
+
+  const errorMsg = (labelError: boolean, urlError: boolean) => {
+    switch (true) {
+      case (labelError && urlError):
+        return "A link label (40 character maximum) and valid url (including 'https://') are required.";
+      case (labelError):
+        return "A link label (40 character maximum) is required.";
+      case (urlError):
+        return "A valid url (including 'https://') is required.";
+      default:
+        return "";
+    }
+  }
+
+  return (
+    <AutoLayout
+      width="fill-parent"
+      direction="vertical"
+      spacing={GAP.sm}
+      horizontalAlignItems="end"
+      verticalAlignItems="center"
+    >
+      <AutoLayout
+        width="fill-parent"
+        horizontalAlignItems="end"
+        verticalAlignItems="center"
+        spacing={GAP.md}
+      >
+        <Input 
+          name="LinkLabel"
+          fill={COLOR.black}
+          inputFrameProps={{
+            fill: COLOR.white,
+            stroke: !!changeLog.state?.linkFormError?.label ? COLOR.red : COLOR.grey,
+            strokeWidth: SPACE.one,
+            cornerRadius: RADIUS.xs,
+            padding: { horizontal: PADDING.xs, vertical: PADDING.xs }
+          }}
+          placeholder="Link Label"
+          width={SPACE.lg}
+          lineHeight={FONT.lineHeight.xs}
+          fontSize={FONT.size.xs}
+          fontFamily={FONT.family}
+          value={changeLog.state?.link?.label || ''}
+          onTextEditEnd={(e) => {
+            const trimmedLabel = e.characters.trim()
+            updateChange({
+              state: {
+                ...changeLog.state,
+                link: {
+                  ...changeLog.state?.link,
+                  label: trimmedLabel,
+                  url: changeLog.state?.link?.url || '',
+                  key: changeLog.state?.link?.key || '',
+                },
+                linkFormError: {
+                  label: !validLabel(trimmedLabel),
+                  url: !!changeLog.state?.linkFormError?.url,
+                }
+              },
+            })
+          }}
+        />
+        <Input 
+          name="LinkUrl"
+          fill={COLOR.black}
+          inputFrameProps={{
+            fill: COLOR.white,
+            stroke: !!changeLog.state?.linkFormError?.url ? COLOR.red : COLOR.grey,
+            strokeWidth: SPACE.one,
+            cornerRadius: RADIUS.xs,
+            padding: { horizontal: PADDING.xs, vertical: PADDING.xs }
+          }}
+          width="fill-parent"
+          placeholder="https://figma.com"
+          lineHeight={FONT.lineHeight.xs}
+          fontSize={FONT.size.xs}
+          fontFamily={FONT.family}
+          value={changeLog.state?.link?.url || ''}
+          onTextEditEnd={(e) => {
+            const trimmedUrl = e.characters.trim();
+            updateChange({
+              state: {
+                ...changeLog.state,
+                link: {
+                  ...changeLog.state?.link,
+                  label: changeLog.state?.link?.label || '',
+                  url: trimmedUrl,
+                  icon: assignIcon(trimmedUrl),
+                  key: changeLog.state?.link?.key || '',
+                },
+                linkFormError: {
+                  label: !!changeLog.state?.linkFormError?.label,
+                  url: !validUrl(trimmedUrl),
+                }
+              },
+            })
+          }}
+        />
+        <Button label="Add" action={() => {
+          const labelValid = validLabel(changeLog.state?.link?.label);
+          const urlValid = validUrl(changeLog.state?.link?.url);
+          const linkKey= `link-${randomId()}`;
+
+          if (labelValid && urlValid) {
+            updateChange({
+              links: !!changeLog.links ? [...changeLog.links, { ...changeLog.state?.link, key: linkKey }] : [{...changeLog.state?.link, key: linkKey }],
+              editCount: changeLog.editCount + 1,
+              editedDate: Date.now(),
+              state: {
+                showLinkForm: false,
+                link: { label: '', url: '', key: '', icon: '' },
+                linkFormError: {
+                  label: false,
+                  url: false,
+                }
+              }
+            })
+            setUpdatedDate(Date.now());
+          } else {
+            updateChange({
+              state: {
+                ...changeLog.state,
+                linkFormError: {
+                  label: !labelValid,
+                  url: !urlValid
+                }
+              }
+            })
+          }
+        }} />
+        <Button
+          label="Cancel"
+          hideLabel={true}
+          iconSrc={<ActionDeleteIcon color={COLOR.greyDark} />}
+          action={() => {
+            updateChange({
+              state: {
+                showLinkForm: false,
+                link: { label: '', url: '', key: '', icon: '' },
+                linkFormError: { label: false, url: false, }
+              }
+            })
+          }}
+        />
+      </AutoLayout>
+      <Text
+        fill={COLOR.red}
+        fontSize={FONT.size.xs}
+        fontFamily={FONT.family}
+      >
+        {errorMsg(!!changeLog.state?.linkFormError?.label, !!changeLog.state?.linkFormError?.url)}
+      </Text>
+    </AutoLayout>
+  )
+
+}
\ No newline at end of file
diff --git a/widget-src/components/log/LinkList.tsx b/widget-src/components/log/LinkList.tsx
new file mode 100644
index 0000000..7d80d2a
--- /dev/null
+++ b/widget-src/components/log/LinkList.tsx
@@ -0,0 +1,44 @@
+import { LinkType } from "../../types/LinkTypes";
+import { PADDING, COLOR, GAP } from "../../utilities/Styles";
+import { Link } from "./Link";
+
+const { widget} = figma;
+const { AutoLayout  } = widget;
+
+interface LinkListProps {
+  links?: Array<LinkType>;
+  deleteLink: (linkKey: string) => void;
+}
+
+export const LinkList = ({
+  links,
+  deleteLink,
+}: LinkListProps) => {
+  return(
+    <>
+    {!!links && links.length > 0 &&  (
+      <AutoLayout
+        name="Log Links"
+        overflow="visible"
+        width="fill-parent"
+        direction="horizontal"
+        wrap
+        padding={{
+          vertical: PADDING.sm,
+        }}
+        spacing={GAP.md}
+      >
+        {links.map((link) => (
+          <Link
+            label={!!link.label ? link.label : "Link"}
+            url={!!link.url ? link.url : ""}
+            key={link.key}
+            icon={link.icon ? link.icon : "link"}
+            deleteLink={() => deleteLink(link.key)}
+          />
+        ))}
+      </AutoLayout>
+    )}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/widget-src/components/log/Type.tsx b/widget-src/components/log/Type.tsx
index 834cb87..d1343be 100644
--- a/widget-src/components/log/Type.tsx
+++ b/widget-src/components/log/Type.tsx
@@ -75,10 +75,10 @@ export const Type = ({ type, isActive = false, action }: TypeProps) => {
       strokeDashPattern={showStroke ? [GAP.sm, GAP.sm] : []}
     >
       {isActive && (
-        <SVG name="Active" height={PADDING.sm} width={PADDING.md} src={<Check color={txColor}/>} />
+        <SVG name="Active" height={PADDING.md} width={PADDING.md} src={<Check color={txColor}/>} />
       )}
       {type === ('none' || 'added') && (
-        <SVG name="Add" height={PADDING.sm} width={PADDING.sm}  src={<ActionAddIcon color={txColor}/>} />
+        <SVG name="Add" height={PADDING.md} width={PADDING.md}  src={<ActionAddIcon color={txColor}/>} />
       )}
       <Text
         name="Type"
diff --git a/widget-src/svgs/ActionAddIcon.tsx b/widget-src/svgs/ActionAddIcon.tsx
index 2ec5bcc..1e3dbbc 100644
--- a/widget-src/svgs/ActionAddIcon.tsx
+++ b/widget-src/svgs/ActionAddIcon.tsx
@@ -1,7 +1,7 @@
 import { COLOR } from "../utilities/Styles";
 
 export const ActionAddIcon = ( {color = COLOR.black} ) => (
-  `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M8 0C8.55228 0 9 0.447715 9 1V7H15C15.5523 7 16 7.44772 16 8C16 8.55228 15.5523 9 15 9H9V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V9H1C0.447715 9 0 8.55228 0 8C0 7.44772 0.447715 7 1 7H7V1C7 0.447715 7.44772 0 8 0Z"/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="${color}" d="M13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5Z"/>
   </svg>`
 );
\ No newline at end of file
diff --git a/widget-src/svgs/ActionDeleteIcon.tsx b/widget-src/svgs/ActionDeleteIcon.tsx
index 4d0ac2c..af2c708 100644
--- a/widget-src/svgs/ActionDeleteIcon.tsx
+++ b/widget-src/svgs/ActionDeleteIcon.tsx
@@ -1,7 +1,7 @@
 import { COLOR } from "../utilities/Styles";
 
 export const ActionDeleteIcon = ( {color = COLOR.black} ) => (
-  `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L8.41421 7L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L7 8.41421L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z"/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="${color}" d="M5.70711 4.2929C5.31659 3.90238 4.68342 3.90238 4.2929 4.2929C3.90237 4.68343 3.90237 5.31659 4.2929 5.70712L10.5858 12L4.2929 18.2929C3.90237 18.6834 3.90237 19.3166 4.2929 19.7071C4.68342 20.0976 5.31659 20.0976 5.70711 19.7071L12 13.4142L18.2936 19.7078C18.6841 20.0984 19.3173 20.0984 19.7078 19.7078C20.0983 19.3173 20.0983 18.6841 19.7078 18.2936L13.4142 12L19.7078 5.7064C20.0983 5.31588 20.0983 4.68272 19.7078 4.29219C19.3173 3.90167 18.6841 3.90167 18.2936 4.29219L12 10.5858L5.70711 4.2929Z"/>
   </svg>`
 );
diff --git a/widget-src/svgs/ActionEditIcon.tsx b/widget-src/svgs/ActionEditIcon.tsx
index e611ca2..57690db 100644
--- a/widget-src/svgs/ActionEditIcon.tsx
+++ b/widget-src/svgs/ActionEditIcon.tsx
@@ -1,7 +1,7 @@
 import { COLOR } from "../utilities/Styles";
 
 export const ActionEditIcon = ( {color = COLOR.black} ) => (
-  `<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M18.8596 2.11774C18.6197 2.02435 18.3627 1.98152 18.1049 1.99216C17.8471 2.0028 17.5946 2.06665 17.3636 2.17939C17.1325 2.29212 16.9282 2.45116 16.7634 2.64596C16.7455 2.66711 16.7267 2.68751 16.7071 2.7071L15.4142 4L18 6.58578L19.2929 5.29289C19.3158 5.27 19.3398 5.24824 19.3648 5.22768C19.5625 5.06504 19.7235 4.86367 19.8378 4.63669C19.9522 4.40974 20.0174 4.16195 20.0298 3.90908C20.0422 3.65621 20.0014 3.40342 19.9099 3.16673C19.8183 2.93003 19.6779 2.71434 19.4972 2.53362C19.3165 2.35289 19.0994 2.21112 18.8596 2.11774ZM16.5858 8L14 5.41421L3.39491 16.0193L2.42524 19.5748L5.9807 18.6051L16.5858 8ZM13.2926 3.2932L1.79292 14.7929C1.66986 14.9159 1.58105 15.069 1.53526 15.2369L0.0352593 20.7369C-0.0591621 21.0831 0.0391663 21.4534 0.292916 21.7071C0.546667 21.9609 0.916928 22.0592 1.26314 21.9648L6.76314 20.4648C6.93104 20.419 7.08407 20.3302 7.20713 20.2071L20.6754 6.73886C21.0692 6.40589 21.392 5.99707 21.624 5.53643C21.8639 5.06023 22.0014 4.53929 22.0274 4.00687C22.0535 3.47445 21.9676 2.94261 21.7752 2.44534C21.5829 1.94809 21.2886 1.49659 20.9114 1.11941C20.5343 0.742247 20.0825 0.447663 19.5852 0.254029C19.088 0.0604016 18.5557 -0.0281446 18.0224 -0.00613944C17.4891 0.0158658 16.9661 0.147957 16.4865 0.381965C16.0203 0.609442 15.605 0.928483 15.2657 1.32007L13.2926 3.2932Z"/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M13.2657 5.32007C13.605 4.92848 14.0203 4.60944 14.4865 4.38197C14.966 4.14796 15.4891 4.01587 16.0224 3.99386C16.5557 3.97186 17.0879 4.0604 17.5852 4.25403C18.0825 4.44766 18.5343 4.74225 18.9114 5.11941C19.2886 5.49659 19.5829 5.94809 19.7752 6.44534C19.9675 6.94261 20.0535 7.47445 20.0274 8.00687C20.0013 8.53929 19.8639 9.06023 19.624 9.53643C19.392 9.99707 19.0691 10.4059 18.6753 10.7389L16.709 12.7053L16.7071 12.7071L16.7053 12.709L11.2071 18.2071C11.0841 18.3302 10.931 18.419 10.7631 18.4648L5.26312 19.9648C4.91691 20.0592 4.54664 19.9609 4.29289 19.7071C4.03914 19.4534 3.94081 19.0831 4.03524 18.7369L5.53524 13.2369C5.58103 13.069 5.66984 12.9159 5.79289 12.7929L13.2657 5.32007ZM16.1049 5.99216C16.3627 5.98152 16.6197 6.02435 16.8595 6.11774C17.0994 6.21112 17.3165 6.35289 17.4972 6.53362C17.6779 6.71434 17.8183 6.93003 17.9099 7.16673C18.0014 7.40342 18.0422 7.65621 18.0298 7.90908C18.0174 8.16195 17.9521 8.40974 17.8378 8.63669C17.7235 8.86367 17.5625 9.06504 17.3648 9.22768C17.3398 9.24824 17.3158 9.27 17.2929 9.29289L16 10.5858L13.4142 8L14.7071 6.7071C14.7267 6.68751 14.7455 6.66711 14.7634 6.64596C14.9282 6.45116 15.1325 6.29212 15.3636 6.17939C15.5946 6.06665 15.8471 6.0028 16.1049 5.99216ZM14.5858 12L9.98068 16.6051L6.42522 17.5748L7.39489 14.0193L12 9.41421L14.5858 12Z"/>
   </svg>`
 );
diff --git a/widget-src/svgs/ActionLinkIcon.tsx b/widget-src/svgs/ActionLinkIcon.tsx
index c6b9819..6072c30 100644
--- a/widget-src/svgs/ActionLinkIcon.tsx
+++ b/widget-src/svgs/ActionLinkIcon.tsx
@@ -1,7 +1,9 @@
 import { COLOR } from "../utilities/Styles";
 
 export const ActionLinkIcon = ( {color = COLOR.black} ) => (
-  `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M13.5354 2.46448C12.4746 2.46448 11.4571 2.8859 10.707 3.63605L9.29278 5.05026C8.90226 5.44079 8.26909 5.44079 7.87857 5.05026C7.48804 4.65974 7.48804 4.02657 7.87857 3.63605L9.29278 2.22184C10.418 1.09662 11.9441 0.464478 13.5354 0.464478C15.1267 0.464478 16.6528 1.09662 17.7781 2.22184C18.9033 3.34706 19.5354 4.87318 19.5354 6.46448C19.5354 8.05578 18.9033 9.5819 17.7781 10.7071L16.3638 12.1213C15.9733 12.5119 15.3402 12.5119 14.9496 12.1213C14.5591 11.7308 14.5591 11.0976 14.9496 10.7071L16.3638 9.2929C17.114 8.54276 17.5354 7.52534 17.5354 6.46448C17.5354 5.40361 17.114 4.3862 16.3638 3.63605C15.6137 2.8859 14.5963 2.46448 13.5354 2.46448ZM13.5354 6.46448C13.9259 6.855 13.9259 7.48817 13.5354 7.87869L7.87857 13.5355C7.48804 13.9261 6.85488 13.9261 6.46436 13.5355C6.07383 13.145 6.07383 12.5119 6.46436 12.1213L12.1212 6.46448C12.5117 6.07395 13.1449 6.07395 13.5354 6.46448ZM5.05014 7.87869C5.44067 8.26921 5.44067 8.90238 5.05014 9.2929L3.63593 10.7071C2.88578 11.4573 2.46436 12.4747 2.46436 13.5355C2.46436 14.5964 2.88578 15.6138 3.63593 16.364C4.38607 17.1141 5.40349 17.5355 6.46436 17.5355C7.52522 17.5355 8.54264 17.1141 9.29278 16.364L10.707 14.9498C11.0975 14.5592 11.7307 14.5592 12.1212 14.9498C12.5117 15.3403 12.5117 15.9734 12.1212 16.364L10.707 17.7782C9.58178 18.9034 8.05565 19.5355 6.46436 19.5355C4.87306 19.5355 3.34693 18.9034 2.22171 17.7782C1.0965 16.653 0.464355 15.1268 0.464355 13.5355C0.464355 11.9442 1.0965 10.4181 2.22171 9.2929L3.63593 7.87869C4.02645 7.48817 4.65962 7.48817 5.05014 7.87869Z"/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M6.74679 12.7029C6.13036 13.3122 5.78405 14.1384 5.78405 15C5.78405 15.8616 6.13036 16.6879 6.74679 17.2971C7.36323 17.9063 8.1993 18.2485 9.07107 18.2485C9.94284 18.2485 10.7789 17.9063 11.3953 17.2971L12.6096 16.0971C13.0024 15.7089 13.6393 15.7089 14.0321 16.0971C14.4249 16.4853 14.4249 17.1147 14.0321 17.5029L12.8179 18.7029C11.8242 19.685 10.4764 20.2367 9.07107 20.2367C7.66575 20.2367 6.31799 19.685 5.32428 18.7029C4.33057 17.7209 3.77231 16.3889 3.77231 15C3.77231 13.6111 4.33057 12.2791 5.32428 11.2971L6.53849 10.0971C6.93131 9.70885 7.56819 9.70885 7.96101 10.0971C8.35382 10.4853 8.35382 11.1147 7.96101 11.5029L6.74679 12.7029Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M10.1811 7.90292C9.78831 7.5147 9.78831 6.88527 10.1811 6.49705L11.3953 5.29705C12.3891 4.31497 13.7368 3.76324 15.1421 3.76324C16.5474 3.76324 17.8952 4.31497 18.8889 5.29705C19.8826 6.27913 20.4409 7.61111 20.4409 8.99998C20.4409 10.3889 19.8826 11.7208 18.8889 12.7029L17.6747 13.9029C17.2819 14.2911 16.645 14.2911 16.2522 13.9029C15.8594 13.5147 15.8594 12.8853 16.2522 12.4971L17.4664 11.2971C18.0828 10.6878 18.4292 9.86155 18.4292 8.99998C18.4292 8.13842 18.0828 7.31213 17.4664 6.70291C16.85 6.09369 16.0139 5.75144 15.1421 5.75144C14.2704 5.75144 13.4343 6.09369 12.8179 6.70291L11.6036 7.90292C11.2108 8.29113 10.5739 8.29113 10.1811 7.90292Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M8.96691 15.1029C8.57409 14.7147 8.57409 14.0853 8.96691 13.6971L13.8238 8.89706C14.2166 8.50884 14.8535 8.50884 15.2463 8.89706C15.6391 9.28528 15.6391 9.9147 15.2463 10.3029L10.3894 15.1029C9.99661 15.4911 9.35973 15.4911 8.96691 15.1029Z"/>
   </svg>`
 );
diff --git a/widget-src/svgs/BrandAsanaIcon.tsx b/widget-src/svgs/BrandAsanaIcon.tsx
index 0fc695c..b9e209f 100644
--- a/widget-src/svgs/BrandAsanaIcon.tsx
+++ b/widget-src/svgs/BrandAsanaIcon.tsx
@@ -1,8 +1,10 @@
 import { COLOR } from "../utilities/Styles";
 
 export const BrandAsanaIcon = ( {color = COLOR.black} ) => (
-  `<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-    <path fill='${color}' d='M12.521 8.44112C10.599 8.44112 9.039 10.0205 9.039 11.969C9.039 13.9206 10.599 15.5 12.521 15.5C14.4405 15.5 16 13.9181 16 11.969C16 10.0225 14.4425 8.44112 12.521 8.44112ZM3.479 8.44112C1.5595 8.44112 0 10.0205 0 11.969C0 13.9206 1.56 15.5 3.479 15.5C5.401 15.5 6.961 13.9181 6.961 11.969C6.961 10.0225 5.4035 8.44112 3.479 8.44112ZM11.479 4.03096C11.479 5.97999 9.9215 7.55888 8 7.55888C6.0785 7.55888 4.521 5.97948 4.521 4.03096C4.521 2.08194 6.0785 0.5 8 0.5C9.9215 0.5 11.479 2.08194 11.479 4.03096Z'/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M7 14.05C5.75736 14.05 4.75 15.0573 4.75 16.3C4.75 17.5426 5.75736 18.55 7 18.55C8.24264 18.55 9.25 17.5426 9.25 16.3C9.25 15.0573 8.24264 14.05 7 14.05ZM3.25 16.3C3.25 14.2289 4.92893 12.55 7 12.55C9.07107 12.55 10.75 14.2289 10.75 16.3C10.75 18.3711 9.07107 20.05 7 20.05C4.92893 20.05 3.25 18.3711 3.25 16.3Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M17 14.05C15.7574 14.05 14.75 15.0573 14.75 16.3C14.75 17.5426 15.7574 18.55 17 18.55C18.2426 18.55 19.25 17.5426 19.25 16.3C19.25 15.0573 18.2426 14.05 17 14.05ZM13.25 16.3C13.25 14.2289 14.9289 12.55 17 12.55C19.0711 12.55 20.75 14.2289 20.75 16.3C20.75 18.3711 19.0711 20.05 17 20.05C14.9289 20.05 13.25 18.3711 13.25 16.3Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M12 5.5C10.7574 5.5 9.75 6.50736 9.75 7.75C9.75 8.99264 10.7574 10 12 10C13.2426 10 14.25 8.99264 14.25 7.75C14.25 6.50736 13.2426 5.5 12 5.5ZM8.25 7.75C8.25 5.67893 9.92893 4 12 4C14.0711 4 15.75 5.67893 15.75 7.75C15.75 9.82107 14.0711 11.5 12 11.5C9.92893 11.5 8.25 9.82107 8.25 7.75Z"/>
   </svg>`
 );
 
diff --git a/widget-src/svgs/BrandAtlassianIcon.tsx b/widget-src/svgs/BrandAtlassianIcon.tsx
new file mode 100644
index 0000000..5735e04
--- /dev/null
+++ b/widget-src/svgs/BrandAtlassianIcon.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandAtlassianIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M14.7893 18.4594C14.5488 17.983 14.3094 17.5189 14.0734 17.0612C13.4516 15.8559 12.8525 14.6943 12.3143 13.4645L12.3078 13.4496L12.301 13.4348C11.6957 12.1297 11.4247 10.6943 11.5125 9.25831C11.5647 8.40496 11.7426 7.5673 12.0379 6.77167C13.9851 10.6664 15.9339 14.5624 17.884 18.4594H14.7893ZM19.215 19.9594H14.4737C14.2901 19.9798 14.1049 19.9391 13.9468 19.8437C13.7886 19.7482 13.6663 19.6033 13.5988 19.4313C13.3261 18.8856 13.046 18.3425 12.7656 17.7986C12.6342 17.5438 12.5027 17.2888 12.3718 17.0333C12.0188 16.344 11.6703 15.651 11.3402 14.9472C11.2034 14.6555 11.0697 14.3619 10.9402 14.0659C10.4426 12.9929 10.1376 11.845 10.0351 10.6743C10.0336 10.6568 10.0321 10.6392 10.0306 10.6217C10.0294 10.6062 10.0281 10.5906 10.0269 10.5751C9.99062 10.1079 9.98656 9.63735 10.0153 9.16674C10.1184 7.48223 10.639 5.84986 11.5303 4.41677C11.641 4.22939 11.8771 4 12.0578 4C12.2385 4 12.4532 4.25006 12.5512 4.44411C14.9714 9.28536 17.3938 14.1284 19.8184 18.9732C20.1799 19.6674 20.0132 19.9521 19.215 19.9594ZM10.8585 17.3679C10.8252 17.9276 10.7341 18.4844 10.5854 19.0292C10.356 19.9108 10.2306 19.9661 9.34242 19.9661L7.15652 19.9594H4.69122C3.99705 19.9594 3.84434 19.6814 4.14975 19.0705C5.39452 16.6086 6.62794 14.1513 7.85003 11.6986C8.0978 11.1828 8.30691 11.0503 8.58872 11.2527C8.68613 11.3226 8.79224 11.4326 8.91164 11.5806C9.59348 12.3763 10.1137 13.2939 10.4466 14.2819C10.4478 14.2857 10.4491 14.2894 10.4503 14.2931C10.5386 14.5563 10.6135 14.8246 10.6747 15.0968C10.8426 15.8442 10.9037 16.6087 10.8585 17.3679ZM8.5438 13.668C7.74689 15.2632 6.9452 16.8603 6.13873 18.4594H7.1611L9.18199 18.4656C9.42616 17.4689 9.4365 16.4284 9.21118 15.4256C9.07259 14.8089 8.84729 14.2173 8.5438 13.668ZM4.63924 18.4576C4.63926 18.4576 4.64043 18.4576 4.64267 18.4579Z"/>
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandBasecampIcon.tsx b/widget-src/svgs/BrandBasecampIcon.tsx
new file mode 100644
index 0000000..54a9bb3
--- /dev/null
+++ b/widget-src/svgs/BrandBasecampIcon.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandBasecampIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="${color}" d="M12 5.35001C7.69333 5.35001 4.32 10.83 4 15.4567C5.352 17.8033 8.61 18.6833 12 18.6833C15.39 18.6833 18.65 17.8033 20 15.4567C19.68 10.8287 16.3067 5.35001 12 5.35001ZM12.1 17.6167C5.74 17.6167 5.12933 14.9273 5.12933 14.9273C5.36769 13.6349 6.68951 10.4967 8.1 10.4967C9.2 10.4967 9.66 12.0567 10.56 12.0567C11.46 12.0567 13.4093 8.59667 14.1093 8.59667C14.8073 8.59667 15.9893 9.89667 16.956 11.0967C17.9446 12.3252 18.7084 13.4269 18.9693 14.968C18.9693 14.968 18.4587 17.6167 12.0987 17.6167H12.1Z"/>
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandBitbucketIcon.tsx b/widget-src/svgs/BrandBitbucketIcon.tsx
index e1beb23..eb0d2d5 100644
--- a/widget-src/svgs/BrandBitbucketIcon.tsx
+++ b/widget-src/svgs/BrandBitbucketIcon.tsx
@@ -1,3 +1,8 @@
-export const BrandBitbucketIcon: string = `<svg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
-<path d='M0.518012 7.8214e-05C0.236505 -0.00478878 0.00500011 0.218119 0 0.491644C0 0.522306 0.00250006 0.550048 0.00800018 0.57779L2.18255 13.4349C2.23705 13.7595 2.52656 13.9975 2.86506 14H13.3003C13.5553 14.0024 13.7718 13.8253 13.8133 13.5819L15.9929 0.583144C16.0399 0.312052 15.8499 0.0560486 15.5708 0.0127324C15.5393 0.00786541 15.5108 0.0049452 15.4823 0.0049452L0.518012 7.8214e-05ZM9.67972 9.29019H6.34914L5.44812 4.70694H10.4872L9.67972 9.29019Z' fill='#2F2D2E'/>
-</svg>`;
+import { COLOR } from "../utilities/Styles";
+
+export const BrandBitbucketIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M5.67277 6.5L7.51921 17.5H16.4808L18.3272 6.5H5.67277ZM4.49092 5C4.18172 5 3.94664 5.27783 3.99782 5.58277L6.16596 18.4993C6.21447 18.7883 6.46465 19 6.75769 19H17.2423C17.5354 19 17.7855 18.7883 17.834 18.4993L20.0022 5.58277C20.0534 5.27783 19.8183 5 19.5091 5H4.49092Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M7.62808 8.20001H16.291L14.9363 15.8H9.11504L7.62808 8.20001ZM9.45 9.70001L10.35 14.3H13.68L14.5 9.70001H9.45Z"/>
+  </svg>`
+);
\ No newline at end of file
diff --git a/widget-src/svgs/BrandChatGptIcon.tsx b/widget-src/svgs/BrandChatGptIcon.tsx
new file mode 100644
index 0000000..4fc211e
--- /dev/null
+++ b/widget-src/svgs/BrandChatGptIcon.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandChatGptIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="${color}" d="M18.8605 10.5383C19.216 9.45185 19.0975 8.24691 18.5247 7.25926C17.6555 5.73827 15.8975 4.9679 14.179 5.32346C13.4284 4.47407 12.3222 4 11.1765 4C9.41851 4 7.87777 5.12593 7.32468 6.78519C6.19875 7.02222 5.23085 7.71358 4.65801 8.72099C3.78888 10.242 3.98641 12.1383 5.15184 13.442C4.79629 14.5481 4.93456 15.7333 5.5074 16.721C6.37653 18.242 8.13456 19.0321 9.85308 18.6568C10.6234 19.5062 11.7099 20 12.8555 20C14.6136 20 16.1543 18.8741 16.7074 17.2148C17.8333 16.9778 18.8012 16.2864 19.3741 15.279C20.2432 13.758 20.0457 11.842 18.8605 10.5383ZM12.8555 18.9531C12.1444 18.9531 11.4728 18.716 10.9395 18.2617C10.9592 18.242 11.0185 18.2222 11.0383 18.2025L14.2185 16.3654C14.3765 16.2667 14.4753 16.1086 14.4753 15.9111V11.4272L15.8185 12.1975C15.8383 12.1975 15.8383 12.2173 15.8383 12.237V15.9506C15.858 17.6099 14.5148 18.9531 12.8555 18.9531ZM6.41604 16.2074C6.06048 15.5951 5.94196 14.884 6.06048 14.1926C6.08024 14.2123 6.11974 14.2321 6.15925 14.2519L9.3395 16.0889C9.49752 16.1877 9.69505 16.1877 9.85308 16.0889L13.7444 13.837V15.3975C13.7444 15.4173 13.7444 15.437 13.7247 15.437L10.5049 17.2938C9.0827 18.1235 7.24567 17.6296 6.41604 16.2074ZM5.58641 9.25432C5.94196 8.64198 6.49505 8.18765 7.1469 7.93086V11.7235C7.1469 11.9012 7.24567 12.079 7.40369 12.1778L11.2951 14.4296L9.95184 15.2C9.93209 15.2 9.91233 15.2198 9.91233 15.2L6.69258 13.3432C5.23085 12.5136 4.75678 10.6765 5.58641 9.25432ZM16.6481 11.8222L12.7568 9.57037L14.1 8.8C14.1197 8.8 14.1395 8.78025 14.1395 8.8L17.3592 10.6568C18.8012 11.4864 19.2753 13.3235 18.4457 14.7457C18.0901 15.358 17.537 15.8123 16.8852 16.0494V12.2765C16.9049 12.0988 16.8062 11.921 16.6481 11.8222ZM17.9716 9.80741C17.9518 9.78765 17.9123 9.7679 17.8728 9.74815L14.6926 7.91111C14.5346 7.81235 14.337 7.81235 14.179 7.91111L10.2876 10.163V8.60247C10.2876 8.58272 10.2876 8.56296 10.3074 8.56296L13.5271 6.70617C14.9691 5.87654 16.7864 6.37037 17.616 7.81235C17.9716 8.40494 18.0901 9.11605 17.9716 9.80741ZM9.55678 12.5728L8.21357 11.8025C8.19382 11.8025 8.19382 11.7827 8.19382 11.763V8.04938C8.19382 6.39012 9.53703 5.04691 11.1963 5.04691C11.9074 5.04691 12.579 5.28395 13.1123 5.73827C13.0926 5.75802 13.0531 5.77778 13.0136 5.79753L9.83332 7.63457C9.6753 7.73333 9.57653 7.89136 9.57653 8.08889V12.5728H9.55678ZM10.2876 10.9926L12.0259 9.98519L13.7642 10.9926V12.9877L12.0259 13.9951L10.2876 12.9877V10.9926Z" />
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandClickUpIcon.tsx b/widget-src/svgs/BrandClickUpIcon.tsx
new file mode 100644
index 0000000..208ae00
--- /dev/null
+++ b/widget-src/svgs/BrandClickUpIcon.tsx
@@ -0,0 +1,8 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandClickUpIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M12.5343 3.78881C12.249 3.54167 11.8257 3.54133 11.5401 3.78788L5.35885 9.12299C5.04205 9.39642 5.00592 9.87449 5.27797 10.1924L7.22014 12.4622C7.49363 12.7818 7.97474 12.8185 8.29352 12.544L12.0355 9.32173L15.7314 12.5193C16.0476 12.7929 16.5253 12.7597 16.8006 12.4451L18.7662 10.1987C19.0436 9.88172 19.0102 9.39963 18.6919 9.12384L12.5343 3.78881ZM6.89674 9.77707L12.0357 5.34153L17.1477 9.77057L16.1563 10.9035L12.0378 7.34025L7.87724 10.923L6.89674 9.77707Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M8.67878 13.9814C8.42795 13.6569 7.9524 13.5824 7.61285 13.8446L5.24948 15.6698C4.91325 15.9294 4.8596 16.4069 5.11156 16.7346C7.00695 19.1997 9.39802 20.6 12.178 20.6C14.9831 20.6 17.3544 19.1978 19.2054 16.7006C19.4521 16.3677 19.3892 15.8896 19.0461 15.6364L16.6359 13.8581C16.2891 13.6022 15.8134 13.6893 15.5708 14.0216C14.4671 15.5333 13.3526 16.1084 12.178 16.1084C11.0056 16.1084 9.86184 15.5121 8.67878 13.9814ZM6.76868 16.3918L7.96403 15.4686C9.20374 16.8602 10.5915 17.6084 12.178 17.6084C13.7587 17.6084 15.1297 16.8838 16.3215 15.4902L17.5397 16.3891C16.0031 18.2027 14.2023 19.1 12.178 19.1C10.1711 19.1 8.34774 18.1989 6.76868 16.3918Z" />
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandCodePen.tsx b/widget-src/svgs/BrandCodePen.tsx
new file mode 100644
index 0000000..2cc04ae
--- /dev/null
+++ b/widget-src/svgs/BrandCodePen.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandCodePenIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M12.4178 3.87705C12.2984 3.79681 12.1547 3.75 12 3.75C11.8453 3.75 11.7016 3.79681 11.5822 3.87704L4.10537 8.73699C4.02803 8.78478 3.95825 8.84744 3.90062 8.92417C3.89195 8.9357 3.88362 8.94747 3.87564 8.95946C3.7888 9.0898 3.74808 9.23796 3.75 9.38422V14.6158C3.74806 14.7637 3.78972 14.9135 3.87859 15.045C3.88495 15.0544 3.89153 15.0636 3.89831 15.0728C3.95642 15.1509 4.02707 15.2147 4.1055 15.2631L11.5823 20.123C11.6948 20.1986 11.8289 20.2445 11.9733 20.2495L11.9833 20.2498L12 20.25C12.0128 20.25 12.0256 20.2497 12.0383 20.249C12.1784 20.242 12.3083 20.1965 12.4177 20.123L19.8945 15.2631C19.9706 15.2161 20.0394 15.1547 20.0965 15.0796C20.0994 15.0758 20.1023 15.072 20.1051 15.0681C20.1083 15.0638 20.1114 15.0595 20.1144 15.0551L20.1214 15.045C20.2103 14.9136 20.2519 14.7638 20.25 14.6159V9.38413C20.2519 9.23789 20.2112 9.08977 20.1244 8.95945L20.1144 8.94491C20.1086 8.93662 20.1027 8.92844 20.0965 8.92039C20.0394 8.84538 19.9707 8.784 19.8946 8.73699L12.4178 3.87705ZM11.25 5.88201L5.84074 9.39803L8.25 11.0845L11.25 8.98451V5.88201ZM12.75 8.98451V5.88201L18.1593 9.39803L15.75 11.0845L12.75 8.98451ZM17.0578 12L18.75 10.8155V13.1845L17.0578 12ZM12 10.2905L9.55784 12L12 13.7095L14.4422 12L12 10.2905ZM5.25 10.8155L6.94215 12L5.25 13.1845V10.8155ZM8.25 12.9155L5.84075 14.602L11.25 18.118V15.0155L8.25 12.9155ZM18.1593 14.602L15.75 12.9155L12.75 15.0155V18.118L18.1593 14.602Z"/>
+  </svg>`
+);
\ No newline at end of file
diff --git a/widget-src/svgs/BrandCodeSandbox.tsx b/widget-src/svgs/BrandCodeSandbox.tsx
new file mode 100644
index 0000000..b1e95f2
--- /dev/null
+++ b/widget-src/svgs/BrandCodeSandbox.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandCodeSandboxIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M11.9979 3.54999C11.5959 3.54999 11.2009 3.65566 10.8525 3.85641L5.44989 6.94362L5.44699 6.94529C5.09861 7.14643 4.80924 7.43564 4.60793 7.78392C4.40661 8.13221 4.30042 8.52807 4.3 8.93035V15.107C4.30042 15.5093 4.40661 15.9044 4.60793 16.2527C4.80924 16.601 5.09861 16.8902 5.44699 17.0913L5.44989 17.093L10.8509 20.1793L10.8525 20.1802C11.2008 20.381 11.5958 20.4866 11.9979 20.4866C12.4 20.4866 12.795 20.3809 13.1434 20.1802L13.1449 20.1793L18.546 17.093L18.5488 17.0913C18.8972 16.8902 19.1866 16.601 19.3879 16.2527C19.5892 15.9044 19.6954 15.5086 19.6958 15.1063V8.92958C19.6954 8.5273 19.5892 8.13221 19.3879 7.78392C19.1866 7.43564 18.8972 7.14642 18.5489 6.94528L13.1449 3.85732L13.1434 3.85644C12.795 3.65567 12.4 3.54999 11.9979 3.54999ZM11.6009 5.15636C11.7216 5.08667 11.8585 5.04999 11.9979 5.04999C12.1373 5.04999 12.2742 5.08668 12.3949 5.15637L13.9262 6.03138L11.9979 7.14549L10.0697 6.03139L11.598 5.15803L11.6009 5.15636ZM8.56221 6.89279L6.57997 8.02549L11.9979 11.1596L17.4159 8.02549L15.4336 6.89278L12.3731 8.66108C12.141 8.79521 11.8549 8.79521 11.6227 8.66108L8.56221 6.89279ZM5.8 11.5854V9.30719L11.2479 12.4586V18.6785L9.27396 17.5506V14.0255C9.27396 13.7576 9.1311 13.5101 8.89917 13.3761L5.8 11.5854ZM12.7479 18.6785L14.7219 17.5506V14.0255C14.7219 13.7576 14.8647 13.5101 15.0967 13.3761L18.1958 11.5854V9.3072L12.7479 12.4586V18.6785ZM18.1958 13.3178L16.2219 14.4583V16.6934L17.7989 15.7923L17.8001 15.7916C17.9201 15.722 18.0198 15.6222 18.0893 15.502C18.1588 15.3817 18.1956 15.2452 18.1958 15.1062V13.3178ZM5.8 15.1058V13.3178L7.77396 14.4583V16.6934L6.19699 15.7923L6.19577 15.7916C6.07573 15.722 5.97602 15.6222 5.90658 15.502C5.83696 15.3816 5.8002 15.245 5.8 15.1058Z"/>
+  </svg>`
+);
\ No newline at end of file
diff --git a/widget-src/svgs/BrandFigmaIcon.tsx b/widget-src/svgs/BrandFigmaIcon.tsx
index e8ef37b..9879b15 100644
--- a/widget-src/svgs/BrandFigmaIcon.tsx
+++ b/widget-src/svgs/BrandFigmaIcon.tsx
@@ -1,7 +1,7 @@
 import { COLOR } from "../utilities/Styles";
 
 export const BrandFigmaIcon = ( {color = COLOR.black} ) => (
-  `<svg width='12' height='16' viewBox='0 0 12 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <path fill='${color}' d='M6 8.00056C6 4.44603 11.5 4.44603 11.5 8.00056C11.5 11.5551 6 11.5551 6 8.00056ZM0.5 13.3341C0.5 11.8601 1.72973 10.6676 3.24974 10.6676H5.99948V13.3341C5.99948 16.8886 0.5 16.8886 0.5 13.3341ZM6 0.000500004V5.33404H8.74974C12.4152 5.33404 12.4152 0.000500004 8.74974 0.000500004H6ZM0.5 2.66702C0.5 4.14103 1.72973 5.33354 3.24974 5.33354L6 5.33404V0.000500004L3.24974 0C1.72973 0 0.5 1.19301 0.5 2.66702ZM0.5 8.00056C0.5 9.47457 1.72973 10.6676 3.24974 10.6676H5.99948L6 5.33404L3.24974 5.33354C1.72973 5.33354 0.5 6.52655 0.5 8.00056Z'/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M7.25366 14.625C7.16156 14.6994 7.07303 14.779 6.98851 14.8635C6.35558 15.4964 6 16.3549 6 17.25C6 18.1451 6.35558 19.0036 6.98851 19.6365C7.62145 20.2694 8.47989 20.625 9.375 20.625C10.2701 20.625 11.1286 20.2694 11.7615 19.6365C12.3944 19.0036 12.75 18.1451 12.75 17.25V14.8062C12.9334 14.9288 13.1287 15.0333 13.3334 15.1181C13.7429 15.2877 14.1818 15.375 14.625 15.375C15.0682 15.375 15.5071 15.2877 15.9166 15.1181C16.326 14.9485 16.6981 14.6999 17.0115 14.3865C17.3249 14.0731 17.5735 13.701 17.7431 13.2916C17.9127 12.8821 18 12.4432 18 12C18 11.5568 17.9127 11.1179 17.7431 10.7084C17.5735 10.299 17.3249 9.92691 17.0115 9.61351C16.9272 9.52923 16.8387 9.44964 16.7463 9.375C16.8387 9.30037 16.9272 9.22077 17.0115 9.13649C17.3249 8.82309 17.5735 8.45103 17.7431 8.04156C17.9127 7.63208 18 7.19321 18 6.75C18 6.30679 17.9127 5.86792 17.7431 5.45844C17.5735 5.04897 17.3249 4.67691 17.0115 4.36351C16.6981 4.05012 16.326 3.80152 15.9166 3.63191C15.5071 3.4623 15.0682 3.375 14.625 3.375H9.375C8.47989 3.375 7.62145 3.73058 6.98851 4.36351C6.35558 4.99645 6 5.85489 6 6.75C6 7.64511 6.35558 8.50355 6.98851 9.13649C7.07303 9.221 7.16156 9.30057 7.25366 9.375C7.16156 9.44944 7.07303 9.529 6.98851 9.61351C6.35558 10.2464 6 11.1049 6 12C6 12.8951 6.35558 13.7535 6.98851 14.3865C7.07303 14.471 7.16156 14.5506 7.25366 14.625ZM9.375 4.875C8.87772 4.875 8.40081 5.07254 8.04917 5.42417C7.69754 5.77581 7.5 6.25272 7.5 6.75C7.5 7.24728 7.69754 7.72419 8.04917 8.07582C8.40081 8.42746 8.87772 8.625 9.375 8.625H11.25V4.875H9.375ZM11.25 15.375H9.375C8.87772 15.375 8.40081 15.5725 8.04917 15.9242C7.69754 16.2758 7.5 16.7527 7.5 17.25C7.5 17.7473 7.69754 18.2242 8.04917 18.5758C8.40081 18.9275 8.87772 19.125 9.375 19.125C9.87228 19.125 10.3492 18.9275 10.7008 18.5758C11.0525 18.2242 11.25 17.7473 11.25 17.25V15.375ZM9.375 10.125C8.87772 10.125 8.40081 10.3225 8.04917 10.6742C7.69754 11.0258 7.5 11.5027 7.5 12C7.5 12.4973 7.69754 12.9742 8.04917 13.3258C8.40081 13.6775 8.87772 13.875 9.375 13.875H11.25V10.125H9.375ZM12.75 12C12.75 12.2462 12.7985 12.49 12.8927 12.7175C12.987 12.945 13.1251 13.1517 13.2992 13.3258C13.4733 13.4999 13.68 13.638 13.9075 13.7323C14.135 13.8265 14.3788 13.875 14.625 13.875C14.8712 13.875 15.115 13.8265 15.3425 13.7323C15.57 13.638 15.7767 13.4999 15.9508 13.3258C16.1249 13.1517 16.263 12.945 16.3573 12.7175C16.4515 12.49 16.5 12.2462 16.5 12C16.5 11.7538 16.4515 11.51 16.3573 11.2825C16.263 11.055 16.1249 10.8483 15.9508 10.6742C15.7767 10.5001 15.57 10.362 15.3425 10.2677C15.115 10.1735 14.8712 10.125 14.625 10.125C14.3788 10.125 14.135 10.1735 13.9075 10.2677C13.68 10.362 13.4733 10.5001 13.2992 10.6742C13.1251 10.8483 12.987 11.055 12.8927 11.2825C12.7985 11.51 12.75 11.7538 12.75 12ZM14.625 8.625C14.8712 8.625 15.115 8.5765 15.3425 8.48227C15.57 8.38805 15.7767 8.24993 15.9508 8.07582C16.1249 7.90172 16.263 7.69502 16.3573 7.46753C16.4515 7.24005 16.5 6.99623 16.5 6.75C16.5 6.50377 16.4515 6.25995 16.3573 6.03247C16.263 5.80498 16.1249 5.59828 15.9508 5.42417C15.7767 5.25007 15.57 5.11195 15.3425 5.01773C15.115 4.9235 14.8712 4.875 14.625 4.875H12.75V8.625H14.625Z"/>
   </svg>`
 );
diff --git a/widget-src/svgs/BrandFramer.tsx b/widget-src/svgs/BrandFramer.tsx
new file mode 100644
index 0000000..9c09b03
--- /dev/null
+++ b/widget-src/svgs/BrandFramer.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandFramerIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M6.30709 4.21299C6.42318 3.93273 6.69665 3.75 7 3.75H17C17.4142 3.75 17.75 4.08579 17.75 4.5V9.5C17.75 9.91421 17.4142 10.25 17 10.25H13.8107L17.5303 13.9697C17.7448 14.1842 17.809 14.5068 17.6929 14.787C17.5768 15.0673 17.3033 15.25 17 15.25H12.75V19.5C12.75 19.8033 12.5673 20.0768 12.287 20.1929C12.0068 20.309 11.6842 20.2448 11.4697 20.0303L6.46967 15.0303C6.32902 14.8897 6.25 14.6989 6.25 14.5V9.5C6.25 9.08579 6.58579 8.75 7 8.75H10.1893L6.46967 5.03033C6.25517 4.81583 6.191 4.49324 6.30709 4.21299ZM12.3107 8.75H16.25V5.25H8.81066L12.3107 8.75ZM11.6893 10.25H7.75V13.75H15.1893L11.6893 10.25ZM8.81066 15.25L11.25 17.6893V15.25H8.81066Z"/>
+  </svg>`
+);
\ No newline at end of file
diff --git a/widget-src/svgs/BrandGithubIcon.tsx b/widget-src/svgs/BrandGithubIcon.tsx
index 93a682e..fa086cc 100644
--- a/widget-src/svgs/BrandGithubIcon.tsx
+++ b/widget-src/svgs/BrandGithubIcon.tsx
@@ -1,7 +1,8 @@
 import { COLOR } from "../utilities/Styles";
 
 export const BrandGithubIcon = ( {color = COLOR.black} ) => (
-  `<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <path fill='${color}' d='M8.0005 0.000512621C3.58072 0.000512621 0 3.67451 0 8.20255C0 11.8284 2.29214 14.9016 5.46884 15.9858C5.87037 16.0632 6.01538 15.8094 6.01538 15.59C6.01538 15.3952 6.01088 14.88 6.00788 14.1962C3.78124 14.6904 3.31221 13.0935 3.31221 13.0935C2.94768 12.1483 2.42165 11.8945 2.42165 11.8945C1.69761 11.3875 2.47916 11.3983 2.47916 11.3983C3.28121 11.4542 3.70323 12.2415 3.70323 12.2415C4.41678 13.4965 5.57535 13.1335 6.03388 12.9223C6.10388 12.3938 6.3124 12.0303 6.53941 11.8279C4.7633 11.6223 2.89568 10.9174 2.89568 7.77451C2.89568 6.8769 3.2057 6.14589 3.71823 5.57175C3.62973 5.36619 3.35871 4.5306 3.78874 3.40077C3.78874 3.40077 4.45828 3.18188 5.98887 4.24199C6.62942 4.06001 7.30946 3.96928 7.989 3.96466C8.66904 3.96928 9.34858 4.06052 9.98912 4.24199C11.5107 3.18188 12.1798 3.40077 12.1798 3.40077C12.6093 4.5306 12.3383 5.36567 12.2603 5.57175C12.7678 6.14589 13.0778 6.87741 13.0778 7.77451C13.0778 10.9246 11.2077 11.6192 9.42959 11.8197C9.70761 12.0652 9.96812 12.5701 9.96812 13.3365C9.96812 14.4335 9.95812 15.3173 9.95812 15.5844C9.95812 15.7976 10.0981 16.054 10.5102 15.9714C13.7104 14.8985 16 11.8227 16 8.20204C16 3.674 12.4193 0 7.9995 0L8.0005 0.000512621Z'/>
-  </svg>`
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="${color}" d="M6.4 4V3.25C6.0587 3.25 5.76043 3.48044 5.67428 3.81068C5.43091 4.74362 5.40499 5.71347 5.59653 6.65427C5.04903 7.54146 4.78677 8.57849 4.85005 9.62435C4.86184 12.4367 6.91632 14.1617 9.16923 14.6241C9.10297 14.784 9.04585 14.9481 8.9984 15.1155C8.8889 15.502 8.83154 15.9007 8.82595 16.3001C8.25902 16.4946 7.84076 16.5229 7.52586 16.4814C7.13537 16.4299 6.82324 16.2608 6.5159 16.0146C6.35813 15.8882 6.20799 15.7468 6.04552 15.5894L5.974 15.52C5.83735 15.387 5.68569 15.2395 5.5331 15.1076C5.1724 14.7958 4.67404 14.45 4 14.45C3.58579 14.45 3.25 14.7858 3.25 15.2C3.25 15.6142 3.58579 15.95 4 15.95C4.12596 15.95 4.2766 16.0042 4.55215 16.2424C4.66851 16.343 4.78354 16.4547 4.9212 16.5885L5.00182 16.6668C5.16838 16.8281 5.36137 17.0117 5.5781 17.1853C6.01976 17.5391 6.58214 17.87 7.32989 17.9686C7.7936 18.0297 8.2964 17.9972 8.85 17.8572V20C8.85 20.4142 9.18578 20.75 9.6 20.75C10.0142 20.75 10.35 20.4142 10.35 20V16.8164C10.3509 16.7779 10.3488 16.7391 10.3436 16.7004C10.3009 16.3048 10.3339 15.9044 10.4416 15.5245C10.5499 15.1421 10.7354 14.783 10.9868 14.4671C11.1661 14.2417 11.2006 13.9337 11.0756 13.6743C10.9505 13.4149 10.688 13.25 10.4 13.25C8.28036 13.25 6.35 11.8636 6.35 9.6C6.35 9.58368 6.34946 9.56736 6.3484 9.55108C6.29449 8.72644 6.52816 7.90861 7.00959 7.23692C7.13941 7.05579 7.18196 6.82631 7.12571 6.61068C6.98429 6.06858 6.9392 5.51081 6.99044 4.95872C7.31549 5.10834 7.76874 5.36406 8.35 5.8C8.51856 5.92642 8.73253 5.97611 8.93956 5.9369C10.9593 5.55437 13.0407 5.55437 15.0604 5.9369C15.2675 5.97611 15.4814 5.92642 15.65 5.8C16.2253 5.36853 16.6752 5.11361 16.9995 4.96335C17.0465 5.51798 17.0038 6.07828 16.8713 6.62257C16.8196 6.83475 16.863 7.05891 16.9901 7.23649C17.4731 7.91131 17.7045 8.72406 17.6515 9.5521C17.6505 9.56805 17.65 9.58402 17.65 9.6C17.65 11.8636 15.7196 13.25 13.6 13.25C13.3127 13.25 13.0507 13.4141 12.9252 13.6726C12.7998 13.931 12.8331 14.2384 13.0108 14.4641C13.5129 15.1015 13.7441 15.9108 13.6546 16.7172C13.6515 16.7447 13.65 16.7723 13.65 16.8V20C13.65 20.4142 13.9858 20.75 14.4 20.75C14.8142 20.75 15.15 20.4142 15.15 20V16.8397C15.2271 16.0798 15.1129 15.3195 14.8263 14.625C17.0811 14.1639 19.1384 12.4384 19.1499 9.62385C19.2122 8.57434 18.9509 7.53924 18.4 6.64885C18.5783 5.71373 18.5545 4.7501 18.3287 3.82257C18.2469 3.48652 17.9459 3.25 17.6 3.25V4C17.6 3.25 17.5994 3.25 17.5989 3.25L17.5978 3.25L17.5955 3.25001L17.5906 3.25006L17.5801 3.25024C17.5727 3.25042 17.5645 3.2507 17.5555 3.25112C17.5376 3.25196 17.5166 3.25336 17.4925 3.25562C17.4443 3.26013 17.3841 3.26804 17.3118 3.2816C17.1671 3.30873 16.9753 3.35827 16.7367 3.44775C16.311 3.60739 15.7379 3.89351 15.017 4.40507C13.022 4.06498 10.978 4.06498 8.98297 4.40507C8.26214 3.89351 7.68903 3.60739 7.26334 3.44775C7.02472 3.35827 6.83291 3.30873 6.68821 3.2816C6.61593 3.26804 6.55567 3.26013 6.5075 3.25562C6.48343 3.25336 6.46242 3.25196 6.44449 3.25112C6.43552 3.2507 6.42733 3.25042 6.41991 3.25024L6.40937 3.25006L6.40454 3.25001L6.40223 3.25L6.4011 3.25C6.40055 3.25 6.4 3.25 6.4 4Z"/>
+  </svg>
+  `
 );
diff --git a/widget-src/svgs/BrandGitlabIcon.tsx b/widget-src/svgs/BrandGitlabIcon.tsx
index 72e3dc8..2a04720 100644
--- a/widget-src/svgs/BrandGitlabIcon.tsx
+++ b/widget-src/svgs/BrandGitlabIcon.tsx
@@ -1,7 +1,7 @@
 import { COLOR } from "../utilities/Styles";
 
 export const BrandGitlabIcon = ( {color = COLOR.black} ) => (
-  `<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-    <path fill='${color}' d='M15.9693 9.07599L15.0758 6.27181L13.2998 0.714855C13.2083 0.428382 12.8133 0.428382 12.7218 0.714855L10.9457 6.26927H5.05513L3.2791 0.714855C3.1876 0.428382 2.78959 0.428382 2.70109 0.714855L0.925058 6.26927L0.0290434 9.07599C-0.0514579 9.33041 0.0395436 9.61128 0.250547 9.77004L8.00068 15.5L15.7508 9.77004C15.9613 9.61128 16.0528 9.33295 15.9693 9.07599Z'/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M6.6805 3.75074C6.93019 3.74148 7.17693 3.81934 7.37676 3.97337C7.40672 3.99646 7.43489 4.02179 7.46103 4.04913C7.58065 4.17426 7.66944 4.32617 7.7194 4.49285L9.42161 9.51711H14.5825L16.3224 4.46483C16.3273 4.45061 16.3326 4.43654 16.3384 4.42264C16.4166 4.23339 16.5457 4.07079 16.71 3.95175L16.7259 3.94054C16.9123 3.81271 17.1335 3.74689 17.3581 3.75084C17.3867 3.75134 17.4152 3.75348 17.4436 3.75724C17.6564 3.78549 17.8567 3.87686 18.0176 4.02048C18.1599 4.13552 18.2723 4.28485 18.343 4.45597C18.3492 4.4711 18.355 4.48643 18.3602 4.50193L21.1818 12.8385C21.2788 13.13 21.2721 13.4455 21.1632 13.7325C21.0584 14.0084 20.866 14.2403 20.6181 14.3951L12.4301 20.1148C12.1726 20.2947 11.8302 20.2951 11.5723 20.1157L3.32526 14.3783C3.08864 14.2101 2.9104 13.9707 2.81866 13.6933C2.72686 13.4156 2.72712 13.1161 2.8194 12.8386L2.82123 12.8331L5.67549 4.46688C5.68058 4.45196 5.68613 4.43721 5.69215 4.42264C5.77035 4.23338 5.89952 4.07079 6.0638 3.95175L6.07969 3.94054C6.25739 3.81867 6.46675 3.75316 6.6805 3.75074ZM6.69164 6.13394L8.17349 10.5078C8.27664 10.8122 8.56236 11.0171 8.88383 11.0171H15.1174C15.4375 11.0171 15.7223 10.814 15.8265 10.5113L17.3315 6.14133L19.7185 13.1938L11.9997 18.5857L4.2766 13.2129L6.69164 6.13394Z"/>
   </svg>`
 );
diff --git a/widget-src/svgs/BrandGoogleIcon.tsx b/widget-src/svgs/BrandGoogleIcon.tsx
new file mode 100644
index 0000000..c39b6f7
--- /dev/null
+++ b/widget-src/svgs/BrandGoogleIcon.tsx
@@ -0,0 +1,8 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandGoogleIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M12 4.75C7.99594 4.75 4.75 7.99594 4.75 12C4.75 16.0041 7.99594 19.25 12 19.25C16.0041 19.25 19.25 16.0041 19.25 12C19.25 7.99594 16.0041 4.75 12 4.75ZM3.25 12C3.25 7.16751 7.16751 3.25 12 3.25C16.8325 3.25 20.75 7.16751 20.75 12C20.75 16.8325 16.8325 20.75 12 20.75C7.16751 20.75 3.25 16.8325 3.25 12Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M12 8.75C10.2051 8.75 8.75 10.2051 8.75 12C8.75 13.7949 10.2051 15.25 12 15.25C13.5368 15.25 14.8244 14.1833 15.163 12.75H12.25V11.25H16.75V12C16.75 14.6233 14.6233 16.75 12 16.75C9.37665 16.75 7.25 14.6233 7.25 12C7.25 9.37665 9.37665 7.25 12 7.25C13.3115 7.25 14.5 7.78248 15.3587 8.64125L15.8891 9.17159L14.8284 10.2322L14.2981 9.7019C13.7091 9.11295 12.8977 8.75 12 8.75Z"/>
+  </svg>`
+);
\ No newline at end of file
diff --git a/widget-src/svgs/BrandJiraIcon.tsx b/widget-src/svgs/BrandJiraIcon.tsx
deleted file mode 100644
index 820b7ac..0000000
--- a/widget-src/svgs/BrandJiraIcon.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { COLOR } from "../utilities/Styles";
-
-export const BrandJiraIcon = ( {color = COLOR.black} ) => (
-  `<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <path fill='${color}' d='M15.8061 7.552L8.00032 0L0.191927 7.552C-0.0639757 7.802 -0.0639757 8.203 0.191927 8.4505L8.00032 16L15.8061 8.4505C16.0646 8.2055 16.0646 7.7995 15.8061 7.552ZM8.00032 10.367L5.55296 8L8.00032 5.6355L10.4451 8L8.00032 10.367Z'/>
-  </svg>`
-);
diff --git a/widget-src/svgs/BrandMicrosoftIcon.tsx b/widget-src/svgs/BrandMicrosoftIcon.tsx
new file mode 100644
index 0000000..4e6251b
--- /dev/null
+++ b/widget-src/svgs/BrandMicrosoftIcon.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandMicrosoftIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M13.2392 4.20529C12.473 3.76804 11.533 3.767 10.7658 4.20255L5.77686 7.03493C4.98857 7.48247 4.50429 8.32165 4.51121 9.22809L4.5539 14.8155C4.5607 15.7067 5.04146 16.5269 5.81575 16.9683L10.7855 19.8012C11.5463 20.2349 12.4786 20.2389 13.2431 19.8117L18.2095 17.0366C19.0054 16.5918 19.4961 15.749 19.4899 14.8372L19.4515 9.18517C19.4454 8.29361 18.965 7.47276 18.1906 7.03086L13.2392 4.20529ZM17.99 14.8474L17.9515 9.19538C17.9491 8.83876 17.7569 8.51042 17.4472 8.33366L15.758 7.36975C15.7613 7.66806 15.7648 7.95293 15.7682 8.22487C15.7794 9.12905 15.7889 9.8905 15.7804 10.5272C15.7671 11.5302 15.7105 12.3269 15.5112 12.981C15.1732 14.0908 14.449 14.6882 13.3779 15.3045C13.6475 15.4507 13.9371 15.6065 14.2488 15.7743C14.7151 16.0252 15.2314 16.3031 15.8044 16.6153C15.8184 16.6229 15.8321 16.6309 15.8454 16.6393L17.4778 15.7272C17.7962 15.5493 17.9925 15.2121 17.99 14.8474ZM14.2973 17.5044C14.0421 17.3665 13.7979 17.2351 13.5645 17.1095C12.7682 16.6809 12.0978 16.3201 11.545 16.004C10.6742 15.5061 10.0048 15.0703 9.52928 14.5789C8.67018 13.6911 8.53155 12.702 8.52937 11.3422C8.24399 11.5238 7.93637 11.7214 7.60203 11.9361C7.15643 12.2224 6.66333 12.5391 6.11228 12.889C6.08852 12.9041 6.06424 12.9177 6.03954 12.9298L6.05385 14.804C6.05657 15.1605 6.24888 15.4886 6.55859 15.6651L11.5283 18.4981C11.8327 18.6716 12.2056 18.6732 12.5114 18.5023L14.2973 17.5044ZM14.25 6.5092L12.4957 5.50809C12.1892 5.33319 11.8133 5.33277 11.5064 5.50699L6.51743 8.33937C6.20211 8.51838 6.0084 8.85406 6.01117 9.21663L6.02605 11.165C6.28448 10.9996 6.53074 10.8414 6.76555 10.6906C7.52649 10.2019 8.16746 9.79021 8.71193 9.45998C9.56958 8.93979 10.2752 8.56559 10.9356 8.38792C12.1376 8.0645 13.0749 8.43067 14.2784 9.09756C14.2757 8.83911 14.2723 8.56538 14.2687 8.27466L14.2687 8.27359C14.2621 7.74506 14.2548 7.16038 14.25 6.5092ZM11.3253 9.8364C12.0692 9.63625 12.5753 9.83858 14.2744 10.8227C14.2534 11.6336 14.1937 12.1585 14.0763 12.544C13.8589 13.2576 13.4396 13.5821 11.8376 14.437C11.2428 14.078 10.8627 13.7998 10.6072 13.5358C10.0687 12.9793 10.0024 12.4357 10.0407 10.4466C10.0408 10.4372 10.0409 10.4279 10.0407 10.4186C10.5909 10.1075 10.9905 9.92648 11.3253 9.8364Z"/>
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandMiroIcon.tsx b/widget-src/svgs/BrandMiroIcon.tsx
new file mode 100644
index 0000000..ac0b13e
--- /dev/null
+++ b/widget-src/svgs/BrandMiroIcon.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandMiroIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M3.80938 4.79286C3.60916 4.29355 3.97684 3.75 4.51478 3.75H6.65333C6.85013 3.75 7.03927 3.82635 7.18093 3.96297L8.55963 5.29272L8.34441 4.8312C8.10946 4.32735 8.47726 3.75 9.0332 3.75H11.1717C11.3257 3.75 11.4761 3.7968 11.6029 3.88418L12.8226 4.7246C12.6823 4.25597 13.0293 3.75 13.5525 3.75H15.6895C15.8328 3.75 15.9733 3.79054 16.0945 3.86694L19.8678 6.24371C20.1705 6.43444 20.3098 6.80304 20.2089 7.14634L16.5155 19.7044C16.4204 20.0279 16.1235 20.25 15.7864 20.25H13.5464C13.0877 20.25 12.7335 19.8467 12.7928 19.3918L13.2858 15.6093L11.9941 19.7179C11.8945 20.0346 11.601 20.25 11.269 20.25H9.02944C8.55652 20.25 8.19846 19.8227 8.28115 19.3571L8.84777 16.1666L7.46114 19.7634C7.34813 20.0565 7.06633 20.25 6.75201 20.25H4.5123C4.03023 20.25 3.66999 19.807 3.76826 19.3351L5.77542 9.6958L3.80938 4.79286ZM5.60879 5.25L7.24073 9.31974C7.30304 9.47513 7.31807 9.64547 7.28394 9.80938L5.42226 18.75H6.24421L10.0679 8.83148L6.35461 5.25H5.60879ZM10.1948 5.25L11.6131 8.29143C11.687 8.44985 11.7102 8.62719 11.6796 8.79929L9.91244 18.75H10.726L14.2529 7.53178L10.9415 5.25H10.1948ZM15.7729 6.83434L14.8441 5.25H15.4758L18.6205 7.23084L15.2327 18.75H14.3891L15.876 7.34233C15.899 7.16625 15.8627 6.98753 15.7729 6.83434Z" />
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandMondayIcon.tsx b/widget-src/svgs/BrandMondayIcon.tsx
new file mode 100644
index 0000000..52b6586
--- /dev/null
+++ b/widget-src/svgs/BrandMondayIcon.tsx
@@ -0,0 +1,10 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandMondayIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M8.14066 7.69574C8.84313 6.69258 10.2257 6.44878 11.2289 7.1512C12.232 7.85362 12.4759 9.23626 11.7734 10.2394L7.53398 16.294C6.83151 17.2972 5.44889 17.5409 4.44574 16.8386C3.44258 16.1362 3.19878 14.7535 3.9012 13.7503L8.14066 7.69574ZM10.5447 9.37902C10.7719 9.05452 10.6931 8.6072 10.3685 8.37992C10.044 8.15271 9.59672 8.23151 9.36938 8.5561L5.12993 14.6107C4.90268 14.9352 4.98156 15.3826 5.30608 15.6098C5.63062 15.837 6.07793 15.7582 6.30524 15.4337L10.5447 9.37902Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M14.4153 7.69574C15.1178 6.69258 16.5004 6.44878 17.5036 7.1512C18.5067 7.85362 18.7505 9.23626 18.0481 10.2394L13.8086 16.294C13.1062 17.2972 11.7236 17.5409 10.7204 16.8386C9.71725 16.1362 9.47344 14.7535 10.1759 13.7503L14.4153 7.69574ZM16.8194 9.37902C17.0466 9.05452 16.9678 8.6072 16.6432 8.37992C16.3187 8.15271 15.8714 8.23151 15.6441 8.5561L11.4046 14.6107C11.1773 14.9352 11.2562 15.3826 11.5808 15.6098C11.9053 15.837 12.3526 15.7582 12.5799 15.4337L16.8194 9.37902Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M18.2826 17.1848C19.5073 17.1848 20.5 16.1921 20.5 14.9674C20.5 13.7428 19.5073 12.75 18.2826 12.75C17.0579 12.75 16.0652 13.7428 16.0652 14.9674C16.0652 16.1921 17.0579 17.1848 18.2826 17.1848ZM19 14.9674C19 15.3636 18.6788 15.6848 18.2826 15.6848C17.8864 15.6848 17.5652 15.3636 17.5652 14.9674C17.5652 14.5712 17.8864 14.25 18.2826 14.25C18.6788 14.25 19 14.5712 19 14.9674Z" />
+  </svg>
+  `
+);
diff --git a/widget-src/svgs/BrandMuralIcon.tsx b/widget-src/svgs/BrandMuralIcon.tsx
new file mode 100644
index 0000000..2fc9581
--- /dev/null
+++ b/widget-src/svgs/BrandMuralIcon.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandMuralIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="${color}" d="M7.66734 8.12047C8.41379 8.12047 9.0142 8.73355 9.0142 9.48L9.01421 18.2949L14.9696 18.2949L14.9696 9.46733C14.9696 8.72211 15.5915 8.12245 16.3363 8.12048C17.0811 8.12248 17.6795 8.73477 17.6795 9.48L17.6795 18.2949H20V9.46735C19.9771 7.4472 18.3446 5.804 16.34 5.8L16.3363 5.79999H16.3327C14.3238 5.80397 12.67 7.4414 12.67 9.46733V15.9744H11.3185V9.48H11.32C11.3038 7.4516 9.67951 5.79999 7.66734 5.79999C5.65936 5.79999 4.00689 7.44474 4.00002 9.46735L4 9.48V18.2949H6.32049V9.48C6.32049 8.73355 6.92089 8.12047 7.66734 8.12047Z" />
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandNotionIcon.tsx b/widget-src/svgs/BrandNotionIcon.tsx
index 6784288..e81e2b5 100644
--- a/widget-src/svgs/BrandNotionIcon.tsx
+++ b/widget-src/svgs/BrandNotionIcon.tsx
@@ -1,7 +1,7 @@
 import { COLOR } from "../utilities/Styles";
 
 export const BrandNotionIcon = ( {color = COLOR.black} ) => (
-  `<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <path fill='${color}' d='M2.76126 2.80466C3.27724 3.20814 3.47269 3.17964 4.44679 3.11714L13.6301 2.58867C13.8256 2.58867 13.663 2.40118 13.5973 2.36968L12.0718 1.31224C11.7815 1.09325 11.3906 0.846268 10.6437 0.905764L1.7538 1.53073C1.42806 1.55923 1.36291 1.71572 1.49321 1.84071L2.76126 2.80466ZM3.31216 4.85955V14.127C3.31216 14.6245 3.57015 14.812 4.15388 14.7805L14.2467 14.2205C14.8304 14.189 14.8982 13.8481 14.8982 13.4421V4.23708C14.8982 3.8306 14.7351 3.61462 14.377 3.64611L3.83126 4.23708C3.44037 4.26858 3.31268 4.45307 3.31268 4.85705L3.31216 4.85955ZM13.2747 5.35402C13.3398 5.63551 13.2747 5.91399 12.9813 5.94799L12.4955 6.04198V12.8826C12.0718 13.1016 11.684 13.2266 11.3609 13.2266C10.8397 13.2266 10.7094 13.0701 10.3211 12.6041L7.13978 7.81289V12.4481L8.14671 12.6671C8.14671 12.6671 8.14671 13.2271 7.33522 13.2271L5.09567 13.3521C5.03052 13.2271 5.09567 12.9146 5.32395 12.8546L5.90768 12.6981V6.57096L5.09619 6.50846C5.03104 6.22697 5.19418 5.8235 5.64709 5.7925L8.04925 5.63601L11.3609 10.4897V6.19548L10.5166 6.10148C10.4514 5.7605 10.7094 5.51051 11.0351 5.48151L13.2747 5.35402ZM1.00746 0.690276L10.256 0.0368118C11.3906 -0.0571831 11.684 0.00531352 12.3975 0.502786L15.3511 2.49468C15.8369 2.83566 16 2.92965 16 3.30213V14.221C16 14.906 15.7394 15.3095 14.8325 15.372L4.08821 15.9944C3.40962 16.0259 3.08388 15.9319 2.7253 15.497L0.550897 12.7886C0.162611 12.2911 0 11.9187 0 11.4842V1.77922C0 1.21925 0.260595 0.753273 1.00694 0.690776L1.00746 0.690276Z'/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="${color}" d="M6.76126 6.80466C7.27724 7.20814 7.47269 7.17964 8.44679 7.11714L17.6302 6.58867C17.8256 6.58867 17.663 6.40118 17.5973 6.36968L16.0718 5.31224C15.7815 5.09325 15.3906 4.84627 14.6437 4.90576L5.7538 5.53073C5.42806 5.55923 5.36291 5.71572 5.49321 5.84071L6.76126 6.80466ZM7.31216 8.85955V18.127C7.31216 18.6245 7.57015 18.812 8.15388 18.7805L18.2467 18.2205C18.8305 18.189 18.8982 17.8481 18.8982 17.4421V8.23708C18.8982 7.8306 18.7351 7.61462 18.377 7.64611L7.83127 8.23708C7.44037 8.26858 7.31268 8.45307 7.31268 8.85705L7.31216 8.85955ZM17.2747 9.35402C17.3398 9.63551 17.2747 9.91399 16.9813 9.94799L16.4955 10.042V16.8826C16.0718 17.1016 15.684 17.2266 15.3609 17.2266C14.8397 17.2266 14.7094 17.0701 14.3211 16.6041L11.1398 11.8129V16.4481L12.1467 16.6671C12.1467 16.6671 12.1467 17.2271 11.3352 17.2271L9.09567 17.3521C9.03052 17.2271 9.09567 16.9146 9.32395 16.8546L9.90768 16.6981V10.571L9.09619 10.5085C9.03104 10.227 9.19418 9.8235 9.64709 9.7925L12.0493 9.63601L15.3609 14.4897V10.1955L14.5166 10.1015C14.4514 9.7605 14.7094 9.51051 15.0351 9.48151L17.2747 9.35402ZM5.00746 4.69028L14.256 4.03681C15.3906 3.94282 15.684 4.00531 16.3975 4.50279L19.3511 6.49468C19.8369 6.83566 20 6.92965 20 7.30213V18.221C20 18.906 19.7394 19.3095 18.8325 19.372L8.08821 19.9944C7.40962 20.0259 7.08388 19.9319 6.7253 19.497L4.5509 16.7886C4.16261 16.2911 4 15.9187 4 15.4842V5.77922C4 5.21925 4.26112 4.75277 5.00746 4.69028Z"/>
   </svg>`
 );
diff --git a/widget-src/svgs/BrandSlack.tsx b/widget-src/svgs/BrandSlack.tsx
new file mode 100644
index 0000000..715e092
--- /dev/null
+++ b/widget-src/svgs/BrandSlack.tsx
@@ -0,0 +1,15 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandSlackIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M14.0806 5.12996C14.0349 5.17775 13.982 5.26996 13.982 5.42977V9.68818C13.982 9.84799 14.0349 9.9402 14.0806 9.98799C14.1268 10.0363 14.1917 10.068 14.2781 10.068C14.3646 10.068 14.4294 10.0363 14.4756 9.98799C14.5213 9.9402 14.5742 9.84799 14.5742 9.68818V5.42977C14.5742 5.26996 14.5213 5.17775 14.4756 5.12996C14.4294 5.08165 14.3646 5.04999 14.2781 5.04999C14.1917 5.04999 14.1268 5.08165 14.0806 5.12996ZM12.482 5.42977C12.482 4.37297 13.2545 3.54999 14.2781 3.54999C15.3017 3.54999 16.0742 4.37297 16.0742 5.42977V9.68818C16.0742 10.745 15.3017 11.568 14.2781 11.568C13.2545 11.568 12.482 10.745 12.482 9.68818V5.42977Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M17.9854 8.08042C18.3139 7.94435 18.6753 7.90875 19.0241 7.97812C19.3728 8.04748 19.6931 8.2187 19.9445 8.47011C20.1959 8.72152 20.3671 9.04184 20.4365 9.39056C20.5059 9.73928 20.4703 10.1007 20.3342 10.4292C20.1981 10.7577 19.9677 11.0385 19.6721 11.236C19.3765 11.4335 19.0289 11.539 18.6733 11.539H16.8756V9.74128C16.8756 9.38572 16.9811 9.03816 17.1786 8.74253C17.3761 8.4469 17.6569 8.21648 17.9854 8.08042ZM18.7314 9.44929C18.6737 9.43781 18.6138 9.4437 18.5594 9.46624C18.505 9.48877 18.4585 9.52693 18.4258 9.57588C18.3931 9.62484 18.3756 9.6824 18.3756 9.74128V10.039H18.6733C18.7322 10.039 18.7898 10.0215 18.8387 9.98881C18.8877 9.9561 18.9259 9.9096 18.9484 9.8552C18.9709 9.8008 18.9768 9.74095 18.9653 9.6832C18.9538 9.62545 18.9255 9.57241 18.8839 9.53077C18.8422 9.48913 18.7892 9.46078 18.7314 9.44929Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M9.54219 14.062C9.49652 14.1098 9.4436 14.202 9.4436 14.3618V18.6202C9.4436 18.78 9.49652 18.8722 9.54219 18.92C9.58837 18.9683 9.65326 19 9.7397 19C9.82614 19 9.89103 18.9683 9.9372 18.92C9.98288 18.8722 10.0358 18.78 10.0358 18.6202V14.3618C10.0358 14.202 9.98288 14.1098 9.9372 14.062C9.89103 14.0137 9.82614 13.982 9.7397 13.982C9.65326 13.982 9.58837 14.0137 9.54219 14.062ZM7.9436 14.3618C7.9436 13.305 8.7161 12.482 9.7397 12.482C10.7633 12.482 11.5358 13.305 11.5358 14.3618V18.6202C11.5358 19.677 10.7633 20.5 9.7397 20.5C8.7161 20.5 7.9436 19.677 7.9436 18.6202V14.3618Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M4.34894 12.785C4.64457 12.5875 4.99214 12.482 5.34769 12.482H7.1454V14.2797C7.1454 14.6353 7.03996 14.9828 6.84243 15.2785C6.64489 15.5741 6.36413 15.8045 6.03564 15.9406C5.70716 16.0767 5.3457 16.1123 4.99698 16.0429C4.64826 15.9735 4.32794 15.8023 4.07652 15.5509C3.82511 15.2995 3.6539 14.9792 3.58453 14.6304C3.51517 14.2817 3.55077 13.9203 3.68683 13.5918C3.82289 13.2633 4.05331 12.9825 4.34894 12.785ZM5.34769 13.982C5.28881 13.982 5.23125 13.9995 5.1823 14.0322C5.13334 14.0649 5.09518 14.1114 5.07265 14.1658C5.05012 14.2202 5.04422 14.2801 5.05571 14.3378C5.0672 14.3956 5.09555 14.4486 5.13718 14.4902C5.17882 14.5319 5.23187 14.5602 5.28961 14.5717C5.34736 14.5832 5.40722 14.5773 5.46162 14.5548C5.51602 14.5322 5.56251 14.4941 5.59522 14.4451C5.62794 14.3962 5.6454 14.3386 5.6454 14.2797V13.982H5.34769Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M14.062 14.0806C14.0137 14.1268 13.982 14.1917 13.982 14.2781C13.982 14.3646 14.0137 14.4294 14.062 14.4756C14.1098 14.5213 14.202 14.5742 14.3618 14.5742H18.6202C18.78 14.5742 18.8722 14.5213 18.92 14.4756C18.9683 14.4295 19 14.3646 19 14.2781C19 14.1917 18.9683 14.1268 18.92 14.0806C18.8722 14.0349 18.78 13.982 18.6202 13.982H14.3618C14.202 13.982 14.1098 14.0349 14.062 14.0806ZM12.482 14.2781C12.482 13.2545 13.305 12.482 14.3618 12.482H18.6202C19.677 12.482 20.5 13.2545 20.5 14.2781C20.5 15.3017 19.677 16.0742 18.6202 16.0742H14.3618C13.305 16.0742 12.482 15.3017 12.482 14.2781Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M12.482 16.9239H14.2797C14.6353 16.9239 14.9829 17.0293 15.2785 17.2269C15.5741 17.4244 15.8045 17.7052 15.9406 18.0337C16.0767 18.3621 16.1123 18.7236 16.0429 19.0723C15.9735 19.421 15.8023 19.7414 15.5509 19.9928C15.2995 20.2442 14.9792 20.4154 14.6304 20.4848C14.2817 20.5541 13.9203 20.5185 13.5918 20.3825C13.2633 20.2464 12.9825 20.016 12.785 19.7204C12.5875 19.4247 12.482 19.0772 12.482 18.7216V16.9239ZM13.982 18.4239V18.7216C13.982 18.7805 13.9995 18.8381 14.0322 18.887C14.0649 18.936 14.1114 18.9741 14.1658 18.9967C14.2202 19.0192 14.2801 19.0251 14.3378 19.0136C14.3956 19.0021 14.4486 18.9738 14.4902 18.9321C14.5319 18.8905 14.5602 18.8374 14.5717 18.7797C14.5832 18.7219 14.5773 18.6621 14.5548 18.6077C14.5322 18.5533 14.4941 18.5068 14.4451 18.4741C14.3962 18.4414 14.3386 18.4239 14.2797 18.4239H13.982Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M5.12996 9.54217C5.08165 9.58835 5.04999 9.65323 5.04999 9.73967C5.04999 9.8261 5.08165 9.89099 5.12996 9.93717C5.17776 9.98285 5.26997 10.0358 5.42978 10.0358H9.68819C9.84801 10.0358 9.9402 9.98285 9.98799 9.93718C10.0363 9.891 10.068 9.82611 10.068 9.73967C10.068 9.65322 10.0363 9.58833 9.98799 9.54216C9.9402 9.49649 9.84801 9.44357 9.68819 9.44357H5.42978C5.26997 9.44357 5.17776 9.49649 5.12996 9.54217ZM3.54999 9.73967C3.54999 8.71606 4.37299 7.94357 5.42978 7.94357H9.68819C10.745 7.94357 11.568 8.71608 11.568 9.73967C11.568 10.7633 10.745 11.5358 9.68819 11.5358H5.42978C4.37299 11.5358 3.54999 10.7633 3.54999 9.73967Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M9.39059 3.58453C9.73931 3.51517 10.1008 3.55077 10.4293 3.68683C10.7577 3.82289 11.0385 4.05331 11.236 4.34894C11.4336 4.64457 11.539 4.99214 11.539 5.34769V7.1454H9.74131C9.38576 7.1454 9.03819 7.03996 8.74256 6.84243C8.44693 6.64489 8.21651 6.36413 8.08045 6.03564C7.94438 5.70716 7.90878 5.3457 7.97815 4.99698C8.04751 4.64826 8.21873 4.32794 8.47014 4.07652C8.72155 3.82511 9.04187 3.6539 9.39059 3.58453ZM9.85523 5.07265C9.80084 5.05012 9.74098 5.04422 9.68323 5.05571C9.62548 5.0672 9.57243 5.09555 9.5308 5.13718C9.48916 5.17882 9.46081 5.23186 9.44932 5.28961C9.43784 5.34736 9.44373 5.40722 9.46626 5.46162C9.4888 5.51602 9.52695 5.56251 9.57591 5.59522C9.62487 5.62794 9.68243 5.6454 9.74131 5.6454H10.039V5.34769C10.039 5.28881 10.0216 5.23125 9.98884 5.1823C9.95613 5.13334 9.90963 5.09518 9.85523 5.07265Z" />
+  </svg>
+  `
+);
\ No newline at end of file
diff --git a/widget-src/svgs/BrandSmartsheetIcon.tsx b/widget-src/svgs/BrandSmartsheetIcon.tsx
new file mode 100644
index 0000000..a24d99b
--- /dev/null
+++ b/widget-src/svgs/BrandSmartsheetIcon.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandSmartsheetIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="${color}" d="M8.01563 10.5351C8.01563 10.5351 8.669 9.54531 9.56001 9.54531C10.9065 9.50509 12.0154 12.0395 12.2133 12.3953C13.7181 8.91054 16.2126 5.96012 18.2327 4H5.75834V18.3956C5.75834 18.95 5.69905 19.4652 5.6 20C7.22367 19.7228 8.82758 19.3269 10.372 18.7725C14.1539 17.3665 15.6387 15.8816 15.6387 15.8816L15.7378 15.7826L15.7973 15.9014C16.0349 16.4955 16.3911 17.0301 16.7476 17.5646C17.2624 18.218 17.5398 18.2775 17.7377 18.218C17.9555 18.1587 18.0743 17.7825 18.1329 17.2082C18.1925 16.6143 18.232 15.3271 18.232 13.7234V5.10934C14.6084 9.76248 11.8959 16.7322 11.8959 16.7322C11.8959 16.7322 10.0948 10.5149 8.01563 10.5351Z" />
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandStorybookIcon.tsx b/widget-src/svgs/BrandStorybookIcon.tsx
index 0bc42ac..2c12f2e 100644
--- a/widget-src/svgs/BrandStorybookIcon.tsx
+++ b/widget-src/svgs/BrandStorybookIcon.tsx
@@ -1,7 +1,8 @@
 import { COLOR } from "../utilities/Styles";
 
 export const BrandStorybookIcon = ( {color = COLOR.black} ) => (
-  `<svg width='14' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <path fill='${color}' d='M10.1782 0.160854L10.0967 1.96802C10.0942 2.0695 10.2127 2.13199 10.2946 2.0695L11.0088 1.5356L11.6152 2.00151C11.6941 2.0535 11.7999 2.00151 11.805 1.90753L11.7366 0.0693714L12.6355 0.00188385C13.1022 -0.0296103 13.5 0.337822 13.5 0.801236V15.1996C13.5 15.658 13.1123 16.0224 12.6487 15.9989L1.78246 15.52C1.36085 15.502 1.02072 15.1661 1.00757 14.7467L0.50143 1.5486C0.475111 1.10618 0.815234 0.72575 1.26316 0.702254L10.1706 0.147857L10.1782 0.160854ZM8.10662 6.20124C8.10662 6.51368 10.2395 6.36021 10.529 6.14675C10.529 4.01414 9.36892 2.88685 7.24973 2.88685C5.12498 2.88685 3.94416 4.03514 3.94416 5.74832C3.94416 8.71377 7.99325 8.76576 7.99325 10.3855C7.99325 10.8544 7.77713 11.1198 7.28415 11.1198C6.63579 11.1198 6.37209 10.7944 6.40651 9.68009C6.40651 9.44064 3.94416 9.35965 3.86267 9.68009C3.68097 12.3671 5.36792 13.1455 7.30288 13.1455C9.18773 13.1455 10.6586 12.1536 10.6586 10.3595C10.6586 7.18056 6.54114 7.26604 6.54114 5.69383C6.54114 5.04795 7.02906 4.96197 7.30288 4.96197C7.60858 4.96197 8.14661 5.00896 8.10713 6.20674L8.10662 6.20124Z'/>
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="${color}" d="M15.5553 10.1198C15.5126 10.3331 13.1842 10.5285 13.0988 10.2298C13.2268 8.56565 11.5488 8.71164 11.5488 9.65135C11.5488 10.8461 15.6858 11.2301 15.6858 14.3024C15.6858 16.5223 13.8425 17.1698 12.2637 17.1698C11.4092 17.1698 8.50873 17.076 8.76475 13.6197C8.85009 13.3636 11.2708 13.3636 11.3988 13.6623C11.2281 15.5398 12.9678 15.4127 12.9678 14.3451C12.9678 12.7663 8.63674 12.6383 8.85009 9.438C8.90413 8.62743 9.49014 6.74978 12.0504 6.74978C12.9048 6.74978 15.5553 6.79151 15.5553 10.1198Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M5.43067 5.53313C5.41297 5.09796 5.74663 4.72859 6.18135 4.7021L17.6779 4.00151C18.138 3.97347 18.5265 4.33907 18.5265 4.80003V19.2606C18.5265 19.7174 18.1446 20.0815 17.6883 20.0596L6.73012 19.5348C6.31617 19.515 5.98589 19.1823 5.96905 18.7683L5.43067 5.53313ZM7.44177 18.0672L6.95732 6.15759L14.6883 5.68648L14.6584 6.66397C14.6545 6.78969 14.7978 6.86403 14.8984 6.78849L15.5918 6.26763L16.1626 6.72657C16.2629 6.80726 16.4116 6.73234 16.4064 6.60368L16.3657 5.58426L17.0265 5.54399V18.5262L7.44177 18.0672Z"/>
   </svg>`
 );
diff --git a/widget-src/svgs/BrandTeamsIcon.tsx b/widget-src/svgs/BrandTeamsIcon.tsx
new file mode 100644
index 0000000..ee01f51
--- /dev/null
+++ b/widget-src/svgs/BrandTeamsIcon.tsx
@@ -0,0 +1,8 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandTeamsIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M13.1699 4.08261C12.5919 3.99801 12.0017 4.07875 11.4677 4.31549C10.9336 4.55224 10.4775 4.93531 10.1521 5.42041C9.82663 5.90551 9.64514 6.47283 9.6286 7.05676C9.6262 7.14147 9.63795 7.2233 9.6617 7.29999H4.9C4.1268 7.29999 3.5 7.92679 3.5 8.69999V15.33C3.5 16.1032 4.1268 16.73 4.9 16.73H8.04345C8.04109 16.8312 8.05928 16.9345 8.10048 17.034C8.85816 18.8641 10.6979 19.925 12.522 19.9701L12.5405 19.9705L12.5589 19.9701C13.8347 19.9388 15.0459 19.4025 15.9264 18.4788C16.1265 18.269 16.3058 18.043 16.4631 17.8042L17.2177 17.808L17.2338 17.808C18.0998 17.8074 18.9302 17.463 19.5426 16.8507C20.155 16.2383 20.4993 15.4073 20.5 14.5412V10.8939C20.5 10.2428 20.0656 9.69256 19.471 9.5173C19.679 9.30269 19.8446 9.05064 19.959 8.77435C20.0783 8.48654 20.1396 8.17808 20.1396 7.86656C20.1396 7.23742 19.8897 6.63405 19.4448 6.18918C19 5.74431 18.3966 5.49438 17.7674 5.49438C17.1383 5.49438 16.5349 5.74431 16.0901 6.18918C15.9669 6.31238 15.8586 6.44773 15.7665 6.59242C15.7443 6.47006 15.7147 6.34874 15.6777 6.22915C15.5049 5.67113 15.1777 5.17341 14.7339 4.79355C14.2901 4.41369 13.7479 4.16721 13.1699 4.08261ZM9.61436 16.73C10.1781 17.7794 11.3366 18.4339 12.5406 18.47C13.4122 18.4438 14.2387 18.0753 14.8408 17.4438C15.4471 16.8078 15.7762 15.9573 15.7559 15.0788L15.7556 15.0702V10.959L13.1489 10.958C13.0728 10.958 12.9993 10.9467 12.93 10.9256V15.33C12.93 16.1032 12.3032 16.73 11.53 16.73H9.61436ZM12.93 8.73208C12.9567 8.72397 12.9842 8.71725 13.0123 8.71205C13.3082 8.6572 13.5826 8.5197 13.8037 8.31545C14.0247 8.11121 14.1835 7.84855 14.2616 7.55786C14.3396 7.26717 14.3338 6.96032 14.2448 6.6728C14.1558 6.38528 13.9872 6.12883 13.7585 5.93311C13.5298 5.73739 13.2504 5.61039 12.9526 5.5668C12.6548 5.52321 12.3507 5.56481 12.0756 5.68679C11.8004 5.80877 11.5654 6.00615 11.3977 6.2561C11.23 6.50605 11.1365 6.79836 11.128 7.09922C11.126 7.16904 11.1146 7.23637 11.0949 7.29999H11.53C12.3032 7.29999 12.93 7.92679 12.93 8.69999V8.73208ZM17.2556 15.0531V10.959H19V14.5409C18.9996 15.0095 18.8133 15.4587 18.4819 15.79C18.1506 16.1214 17.7012 16.3077 17.2326 16.308H17.2235L17.117 16.3075C17.2172 15.9007 17.2647 15.4792 17.2556 15.0531ZM15.864 9.45827L15.8858 9.45898H16.0092C15.8268 9.25753 15.6801 9.02599 15.5758 8.77435C15.5425 8.6938 15.5136 8.61163 15.4894 8.52823C15.3231 8.86094 15.0973 9.16249 14.8216 9.41723C14.8067 9.43098 14.7917 9.44458 14.7765 9.45802H15.8545L15.864 9.45827ZM17.1507 7.24984C17.3143 7.08627 17.5361 6.99438 17.7674 6.99438C17.9988 6.99438 18.2206 7.08627 18.3842 7.24984C18.5477 7.4134 18.6396 7.63524 18.6396 7.86656C18.6396 7.98109 18.6171 8.0945 18.5732 8.20032C18.5294 8.30614 18.4651 8.40229 18.3842 8.48328C18.3032 8.56426 18.207 8.62851 18.1012 8.67234C17.9954 8.71617 17.882 8.73873 17.7674 8.73873C17.6529 8.73873 17.5395 8.71617 17.4337 8.67234C17.3279 8.62851 17.2317 8.56426 17.1507 8.48328C17.0697 8.40229 17.0055 8.30614 16.9617 8.20032C16.9178 8.09451 16.8953 7.98109 16.8953 7.86656C16.8953 7.63524 16.9872 7.4134 17.1507 7.24984ZM5 15.23V8.79999H11.43V15.23H5Z" />
+  <path fill="${color}" d="M9.954 10.5616V9.86411H6.47619V10.5616H7.79079V14.1605H8.6336V10.5616H9.954Z" />
+  </svg>`
+);
diff --git a/widget-src/svgs/BrandTrelloIcon.tsx b/widget-src/svgs/BrandTrelloIcon.tsx
new file mode 100644
index 0000000..63a68f5
--- /dev/null
+++ b/widget-src/svgs/BrandTrelloIcon.tsx
@@ -0,0 +1,9 @@
+import { COLOR } from "../utilities/Styles";
+
+export const BrandTrelloIcon = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M6.36111 5.5C5.88553 5.5 5.5 5.88553 5.5 6.36111V17.6389C5.5 18.1145 5.88553 18.5 6.36111 18.5H17.6389C18.1145 18.5 18.5 18.1145 18.5 17.6389V6.36111C18.5 5.88553 18.1145 5.5 17.6389 5.5H6.36111ZM4 6.36111C4 5.05711 5.05711 4 6.36111 4H17.6389C18.9429 4 20 5.05711 20 6.36111V17.6389C20 18.9429 18.9429 20 17.6389 20H6.36111C5.05711 20 4 18.9429 4 17.6389V6.36111Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M7.22219 7.97219C7.22219 7.55798 7.55798 7.22219 7.97219 7.22219H10.3889C10.8031 7.22219 11.1389 7.55798 11.1389 7.97219V15.2222C11.1389 15.6364 10.8031 15.9722 10.3889 15.9722H7.97219C7.55798 15.9722 7.22219 15.6364 7.22219 15.2222V7.97219ZM8.72219 8.72219V14.4722H9.63886V8.72219H8.72219Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M12.8611 7.97219C12.8611 7.55798 13.1969 7.22219 13.6111 7.22219H16.0278C16.442 7.22219 16.7778 7.55798 16.7778 7.97219V12C16.7778 12.4142 16.442 12.75 16.0278 12.75H13.6111C13.1969 12.75 12.8611 12.4142 12.8611 12V7.97219ZM14.3611 8.72219V11.25H15.2778V8.72219H14.3611Z"/>
+  </svg>`
+);
\ No newline at end of file
diff --git a/widget-src/svgs/Check.tsx b/widget-src/svgs/Check.tsx
index 358e312..596cb30 100644
--- a/widget-src/svgs/Check.tsx
+++ b/widget-src/svgs/Check.tsx
@@ -1,7 +1,7 @@
 import { COLOR } from "../utilities/Styles";
 
 export const Check = ( {color = COLOR.black} ) => (
-  `<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M17.7071 0.292893C18.0976 0.683417 18.0976 1.31658 17.7071 1.70711L6.70711 12.7071C6.31658 13.0976 5.68342 13.0976 5.29289 12.7071L0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289C0.683417 5.90237 1.31658 5.90237 1.70711 6.29289L6 10.5858L16.2929 0.292893C16.6834 -0.0976311 17.3166 -0.0976311 17.7071 0.292893Z"/>
-   </svg>`
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M19.7071 6.29289C20.0976 6.68342 20.0976 7.31658 19.7071 7.70711L10.0821 17.3321C9.69158 17.7226 9.05842 17.7226 8.66789 17.3321L4.29289 12.9571C3.90237 12.5666 3.90237 11.9334 4.29289 11.5429C4.68342 11.1524 5.31658 11.1524 5.70711 11.5429L9.375 15.2108L18.2929 6.29289C18.6834 5.90237 19.3166 5.90237 19.7071 6.29289Z"/>
+  </svg>`
 );
\ No newline at end of file
diff --git a/widget-src/svgs/FileHistory.tsx b/widget-src/svgs/FileHistory.tsx
new file mode 100644
index 0000000..5987d7b
--- /dev/null
+++ b/widget-src/svgs/FileHistory.tsx
@@ -0,0 +1,9 @@
+import { COLOR } from "../utilities/Styles";
+
+export const FileHistory = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M8.25 3.75C7.65327 3.75 7.08097 3.98705 6.65901 4.40901C6.23706 4.83097 6 5.40326 6 6V8.25C6 8.66421 6.33579 9 6.75 9C7.16422 9 7.5 8.66421 7.5 8.25V6C7.5 5.80109 7.57902 5.61032 7.71967 5.46967C7.86033 5.32902 8.05109 5.25 8.25 5.25H13.5V7.5C13.5 8.09674 13.7371 8.66903 14.159 9.09099C14.581 9.51294 15.1533 9.75 15.75 9.75H18V18C18 18.1989 17.921 18.3897 17.7803 18.5303C17.6397 18.671 17.4489 18.75 17.25 18.75H15.75C15.3358 18.75 15 19.0858 15 19.5C15 19.9142 15.3358 20.25 15.75 20.25H17.25C17.8467 20.25 18.419 20.0129 18.841 19.591C19.2629 19.169 19.5 18.5967 19.5 18V9.00171L19.5 9L19.5 8.99829V8.25C19.5 8.05108 19.421 7.86032 19.2803 7.71967L15.5303 3.96967C15.3897 3.82902 15.1989 3.75 15 3.75H8.25ZM15 5.56066V7.5C15 7.69891 15.079 7.88968 15.2197 8.03033C15.3603 8.17098 15.5511 8.25 15.75 8.25H17.6893L15 5.56066Z" />
+  <path fill="${color}" d="M10.5 13.5C10.5 13.0858 10.1642 12.75 9.74998 12.75C9.33577 12.75 8.99998 13.0858 8.99998 13.5V15.1875C8.99998 15.4101 9.09885 15.6211 9.26985 15.7636L10.3948 16.7011C10.7131 16.9663 11.186 16.9233 11.4511 16.6051C11.7163 16.2869 11.6733 15.814 11.3551 15.5488L10.5 14.8362V13.5Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M4.5 15C4.5 12.1005 6.8505 9.75003 9.75 9.75003C12.6495 9.75003 15 12.1005 15 15C15 17.8995 12.6495 20.25 9.75 20.25C6.8505 20.25 4.5 17.8995 4.5 15ZM9.75 11.25C7.67893 11.25 6 12.929 6 15C6 17.0711 7.67893 18.75 9.75 18.75C11.8211 18.75 13.5 17.0711 13.5 15C13.5 12.929 11.8211 11.25 9.75 11.25Z" />
+  </svg>`
+);
\ No newline at end of file
diff --git a/widget-src/svgs/Prototype.tsx b/widget-src/svgs/Prototype.tsx
new file mode 100644
index 0000000..bcad83f
--- /dev/null
+++ b/widget-src/svgs/Prototype.tsx
@@ -0,0 +1,7 @@
+import { COLOR } from "../utilities/Styles";
+
+export const Prototype = ( {color = COLOR.black} ) => (
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="${color}" d="M5.44061 3.34172C5.68141 3.21025 5.97479 3.22076 6.20557 3.36912L18.65 11.3691C18.8647 11.5071 18.9944 11.7448 18.9944 12C18.9944 12.2552 18.8647 12.4929 18.65 12.6309L6.20557 20.6309C5.97479 20.7792 5.68141 20.7898 5.44061 20.6583C5.1998 20.5268 5.05 20.2744 5.05 20V4C5.05 3.72565 5.1998 3.47318 5.44061 3.34172ZM6.55 5.37375V18.6263L16.8575 12L6.55 5.37375Z"/>
+  </svg>`
+);
\ No newline at end of file
diff --git a/widget-src/types/ChangeLog.ts b/widget-src/types/ChangeLog.ts
index c65c22b..ae250ba 100644
--- a/widget-src/types/ChangeLog.ts
+++ b/widget-src/types/ChangeLog.ts
@@ -1,4 +1,5 @@
 import { ChangeType } from "./ChangeTypes"
+import { LinkType } from "./LinkTypes";
 
 export interface ChangeLog {
   createdDate: number;
@@ -7,5 +8,11 @@ export interface ChangeLog {
   user: User | null;
   change: string;
   editCount: number;
-  showTypeMenu?: boolean;
+  links?: LinkType[];
+  state?: {
+    showTypeMenu?: boolean;
+    link?: LinkType,
+    showLinkForm?: boolean;
+    linkFormError?: { label: boolean, url: boolean };
+  };
 }
diff --git a/widget-src/types/LinkTypes.ts b/widget-src/types/LinkTypes.ts
new file mode 100644
index 0000000..01969b7
--- /dev/null
+++ b/widget-src/types/LinkTypes.ts
@@ -0,0 +1,6 @@
+export interface LinkType { 
+  label?: string,
+  url?: string,
+  icon?: string,
+  key: string,
+}
\ No newline at end of file
diff --git a/widget-src/utilities/Regexes.ts b/widget-src/utilities/Regexes.ts
new file mode 100644
index 0000000..3524bc3
--- /dev/null
+++ b/widget-src/utilities/Regexes.ts
@@ -0,0 +1,51 @@
+export const rxUrl = new RegExp(/^(http(s)?:\/\/.)[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=!]*)$/gi);
+
+export const rxAsana = new RegExp(/asana\.com/);
+
+export const rxBitbucket = new RegExp(/bitbucket\.org/);
+
+export const rxBasecamp = new RegExp(/basecamp\.com/);
+
+export const rxChatGpt = new RegExp(/chat\.openai\.com/);
+
+export const rxClickUp = new RegExp(/app\.clickup\.com/);
+
+export const rxCodePen = new RegExp(/codepen\.io/);
+
+export const rxCodeSandbox = new RegExp(/codesandbox\.io/);
+
+export const rxFigma = new RegExp(/figma\.com\/file\//);
+
+export const rxFigmaVersion = new RegExp(/(figma\.com\/file\/).+(version-id)/);
+
+export const rxFigmaProto = new RegExp(/figma\.com\/proto\//);
+
+export const rxFramer= new RegExp(/framer\./);
+
+export const rxGithub = new RegExp(/github\.com/);
+
+export const rxGitlab = new RegExp(/gitlab\.com/);
+
+export const rxGoogle = new RegExp(/google\.com/);
+
+export const rxAtlassian = new RegExp(/(jira)|(atlassian)/);
+
+export const rxMicrosoft = new RegExp(/(microsoft\.com)|(office\.com)/);
+
+export const rxMiro = new RegExp(/miro\.com\/app\//);
+
+export const rxMonday = new RegExp(/monday\.com/);
+
+export const rxMural = new RegExp(/app\.mural\.co/);
+
+export const rxNotion = new RegExp(/notion\./);
+
+export const rxSlack = new RegExp(/slack\.com/);
+
+export const rxSmartsheet = new RegExp(/smartsheet\.com/);
+
+export const rxTeams = new RegExp(/teams\.microsoft\.com/);
+
+export const rxStorybook = new RegExp(/(storybook)|(\/story\/)|(chromatic)/);
+
+export const rxTrello = new RegExp(/trello\./);