From 3f3e4392fab87a613ac52130bda6f3549d996dc2 Mon Sep 17 00:00:00 2001
From: Markus Fichtner <markus.fichtner@vivid-planet.com>
Date: Mon, 12 Aug 2024 10:27:07 +0200
Subject: [PATCH 1/8] Support Icons in OneOfBlock Tabs

---
 .changeset/fluffy-points-think.md                     | 11 +++++++++++
 .../src/blocks/factories/createOneOfBlock.tsx         |  4 +++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fluffy-points-think.md

diff --git a/.changeset/fluffy-points-think.md b/.changeset/fluffy-points-think.md
new file mode 100644
index 0000000000..1ac8ef53c9
--- /dev/null
+++ b/.changeset/fluffy-points-think.md
@@ -0,0 +1,11 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Add Support for Icons in OneOfBlock tabs
+
+Usage:
+
+-   Add tabLabels to `createOneOfBlock` props
+    -   `tabLabels: { image: <Image />, damVideo: <Video />, youTubeVideo: <YouTube /> }`
+    -   the keys in the tabLabels need to be the same as the `supportedBlocks`
diff --git a/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx
index 23a3f6b00f..2d867c8e1e 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx
@@ -62,6 +62,7 @@ export interface CreateOneOfBlockOptions<T extends boolean> {
     name: string;
     displayName?: ReactNode;
     supportedBlocks: Record<BlockType, BlockInterface>;
+    tabLabels?: Record<BlockType, React.ReactNode>;
     category?: BlockCategory | CustomBlockCategory;
     variant?: "select" | "radio" | "toggle";
     allowEmpty?: T;
@@ -69,6 +70,7 @@ export interface CreateOneOfBlockOptions<T extends boolean> {
 
 export const createOneOfBlock = <T extends boolean = boolean>({
     supportedBlocks,
+    tabLabels,
     name,
     displayName = "Switch",
     category = BlockCategory.Other,
@@ -116,7 +118,7 @@ export const createOneOfBlock = <T extends boolean = boolean>({
     Object.entries(supportedBlocks).forEach(([blockType, block]) => {
         options.push({
             value: blockType,
-            label: block.displayName,
+            label: tabLabels && tabLabels[blockType] ? tabLabels[blockType] : block.displayName,
         });
     });
 

From 47911e3874ea54b9b7a6d31bdcd82ffa91706d0b Mon Sep 17 00:00:00 2001
From: Markus Fichtner <markus.fichtner@vivid-planet.com>
Date: Tue, 20 Aug 2024 14:58:30 +0200
Subject: [PATCH 2/8] Update Demo to include Tooltips

---
 .changeset/fluffy-points-think.md          | 23 +++++++++++++++++++--
 demo/admin/src/pages/blocks/MediaBlock.tsx | 24 ++++++++++++++++++++++
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/.changeset/fluffy-points-think.md b/.changeset/fluffy-points-think.md
index 1ac8ef53c9..2565f55227 100644
--- a/.changeset/fluffy-points-think.md
+++ b/.changeset/fluffy-points-think.md
@@ -2,10 +2,29 @@
 "@comet/blocks-admin": minor
 ---
 
-Add Support for Icons in OneOfBlock tabs
+Add support for custom tab labels in OneOfBlock tabs
 
 Usage:
 
 -   Add tabLabels to `createOneOfBlock` props
-    -   `tabLabels: { image: <Image />, damVideo: <Video />, youTubeVideo: <YouTube /> }`
+    -   ````ts
+        tabLabels: {
+                image: (
+                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
+                        <Image />
+                    </Tooltip>
+                ),
+                damVideo: (
+                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.dam" defaultMessage="Video (DAM)" />}>
+                        <Video />
+                    </Tooltip>
+                ),
+                youTubeVideo: (
+                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.youtube" defaultMessage="Video (YouTube)" />}>
+                        <YouTube />
+                    </Tooltip>
+                ),
+            }
+            ```
+        ````
     -   the keys in the tabLabels need to be the same as the `supportedBlocks`
diff --git a/demo/admin/src/pages/blocks/MediaBlock.tsx b/demo/admin/src/pages/blocks/MediaBlock.tsx
index 59b2945701..6fffcf0b90 100644
--- a/demo/admin/src/pages/blocks/MediaBlock.tsx
+++ b/demo/admin/src/pages/blocks/MediaBlock.tsx
@@ -1,3 +1,5 @@
+import { Tooltip } from "@comet/admin";
+import { Image, Video, Vimeo, YouTube } from "@comet/admin-icons";
 import { BlockCategory, createOneOfBlock } from "@comet/blocks-admin";
 import { DamImageBlock, DamVideoBlock, VimeoVideoBlock, YouTubeVideoBlock } from "@comet/cms-admin";
 import { FormattedMessage } from "react-intl";
@@ -9,4 +11,26 @@ export const MediaBlock = createOneOfBlock({
     allowEmpty: false,
     variant: "toggle",
     supportedBlocks: { image: DamImageBlock, damVideo: DamVideoBlock, youTubeVideo: YouTubeVideoBlock, vimeoVideo: VimeoVideoBlock },
+    labels: {
+        image: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
+                <Image />
+            </Tooltip>
+        ),
+        damVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.dam" defaultMessage="Video (DAM)" />}>
+                <Video />
+            </Tooltip>
+        ),
+        youTubeVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.youtube" defaultMessage="Video (YouTube)" />}>
+                <YouTube />
+            </Tooltip>
+        ),
+        vimeoVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.vimeo" defaultMessage="Video (Vimeo)" />}>
+                <Vimeo />
+            </Tooltip>
+        ),
+    },
 });

From 9461c4e1930c9f83aa7120bbba30d4d6da228a63 Mon Sep 17 00:00:00 2001
From: Markus Fichtner <markus.fichtner@vivid-planet.com>
Date: Tue, 22 Oct 2024 22:25:50 +0200
Subject: [PATCH 3/8] rename prop to labels

---
 .changeset/fluffy-points-think.md                         | 8 ++++----
 .../src/blocks/factories/createOneOfBlock.tsx             | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.changeset/fluffy-points-think.md b/.changeset/fluffy-points-think.md
index 2565f55227..80e6cc70b9 100644
--- a/.changeset/fluffy-points-think.md
+++ b/.changeset/fluffy-points-think.md
@@ -2,13 +2,13 @@
 "@comet/blocks-admin": minor
 ---
 
-Add support for custom tab labels in OneOfBlock tabs
+Add support for custom labels in OneOfBlock tabs
 
 Usage:
 
--   Add tabLabels to `createOneOfBlock` props
+-   Add labels to `createOneOfBlock` props
     -   ````ts
-        tabLabels: {
+        labels: {
                 image: (
                     <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
                         <Image />
@@ -27,4 +27,4 @@ Usage:
             }
             ```
         ````
-    -   the keys in the tabLabels need to be the same as the `supportedBlocks`
+    -   the keys in the labels need to be the same as the `supportedBlocks`
diff --git a/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx
index 2d867c8e1e..fe9af9220c 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createOneOfBlock.tsx
@@ -62,7 +62,7 @@ export interface CreateOneOfBlockOptions<T extends boolean> {
     name: string;
     displayName?: ReactNode;
     supportedBlocks: Record<BlockType, BlockInterface>;
-    tabLabels?: Record<BlockType, React.ReactNode>;
+    labels?: Record<BlockType, React.ReactNode>;
     category?: BlockCategory | CustomBlockCategory;
     variant?: "select" | "radio" | "toggle";
     allowEmpty?: T;
@@ -70,7 +70,7 @@ export interface CreateOneOfBlockOptions<T extends boolean> {
 
 export const createOneOfBlock = <T extends boolean = boolean>({
     supportedBlocks,
-    tabLabels,
+    labels,
     name,
     displayName = "Switch",
     category = BlockCategory.Other,
@@ -118,7 +118,7 @@ export const createOneOfBlock = <T extends boolean = boolean>({
     Object.entries(supportedBlocks).forEach(([blockType, block]) => {
         options.push({
             value: blockType,
-            label: tabLabels && tabLabels[blockType] ? tabLabels[blockType] : block.displayName,
+            label: labels && labels[blockType] ? labels[blockType] : block.displayName,
         });
     });
 

From fe647ef17c2a7deac083acc7515199797f6a0d6b Mon Sep 17 00:00:00 2001
From: Markus Fichtner <markus.fichtner@vivid-planet.com>
Date: Fri, 15 Nov 2024 15:27:09 +0100
Subject: [PATCH 4/8] Remove Tinting of Youtube and Vimeo Icons

---
 demo/admin/src/pages/blocks/MediaBlock.tsx   |   4 ++--
 packages/admin/admin-icons/.DS_Store         | Bin 0 -> 6148 bytes
 packages/admin/admin-icons/icons/vimeo.svg   |   3 +++
 packages/admin/admin-icons/icons/youtube.svg |   3 +++
 packages/admin/admin-icons/src/Vimeo.tsx     |  16 ----------------
 packages/admin/admin-icons/src/YouTube.tsx   |  16 ----------------
 packages/admin/admin-icons/src/index.ts      |   6 +-----
 7 files changed, 9 insertions(+), 39 deletions(-)
 create mode 100644 packages/admin/admin-icons/.DS_Store
 create mode 100644 packages/admin/admin-icons/icons/vimeo.svg
 create mode 100644 packages/admin/admin-icons/icons/youtube.svg
 delete mode 100644 packages/admin/admin-icons/src/Vimeo.tsx
 delete mode 100644 packages/admin/admin-icons/src/YouTube.tsx

diff --git a/demo/admin/src/pages/blocks/MediaBlock.tsx b/demo/admin/src/pages/blocks/MediaBlock.tsx
index 6fffcf0b90..235b3280c2 100644
--- a/demo/admin/src/pages/blocks/MediaBlock.tsx
+++ b/demo/admin/src/pages/blocks/MediaBlock.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from "@comet/admin";
-import { Image, Video, Vimeo, YouTube } from "@comet/admin-icons";
+import { Image, Video, Vimeo, Youtube } from "@comet/admin-icons";
 import { BlockCategory, createOneOfBlock } from "@comet/blocks-admin";
 import { DamImageBlock, DamVideoBlock, VimeoVideoBlock, YouTubeVideoBlock } from "@comet/cms-admin";
 import { FormattedMessage } from "react-intl";
@@ -24,7 +24,7 @@ export const MediaBlock = createOneOfBlock({
         ),
         youTubeVideo: (
             <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.youtube" defaultMessage="Video (YouTube)" />}>
-                <YouTube />
+                <Youtube />
             </Tooltip>
         ),
         vimeoVideo: (
diff --git a/packages/admin/admin-icons/.DS_Store b/packages/admin/admin-icons/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..d8d844af3d0e5ad8739cc0c55cf1aa5c1b2c9724
GIT binary patch
literal 6148
zcmeHKI|>3Z5S{S@f{mqRuHX%V=n1@lpdf;*plH37=kjR2`83O7r-kwcCNG)HOUNsB
zc0@#%xBWt7CL$BKp*(Epo9&zTY>*KJ!g0p+zPU7~b93nBz6%(4EJxYNS(*;tc4$<9
z3Qz$mKn1A4rxnNwJDGm^V4g<>sKC!FVBd!VH>`<mpnp0rcnbg=A?${^_Y%Nj0bosR
z0}+8~P=P_!Y%w(Gh?mT(iEUueMYH+PyjinDQNJDM7f%<hfgGs-73eB3jOEPg{~G?L
z|L>Bxq5@RluN2VHYO`A6Nm*NakF#1^;9I!mJmF@TI|YN6W1yE~EUX;QJt^{v&9Pq-
U+d!uy?sOo3222+k75KISFBrfS)c^nh

literal 0
HcmV?d00001

diff --git a/packages/admin/admin-icons/icons/vimeo.svg b/packages/admin/admin-icons/icons/vimeo.svg
new file mode 100644
index 0000000000..5f1fdb131c
--- /dev/null
+++ b/packages/admin/admin-icons/icons/vimeo.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" d="M 16 16 l 0 16 l 16 0 l 0 -16 z M0 0h16v16h-16z M13.9957 5.31394C13.9417 6.43918 13.1267 7.98039 11.5478 9.93624C9.91638 11.9787 8.53541 13 7.40766 13C6.70749 13 6.11663 12.3787 5.63232 11.1335C5.30991 9.99357 4.9875 8.85233 4.6637 7.71242C4.30393 6.46851 3.91925 5.8459 3.50689 5.8459C3.41695 5.8459 3.10284 6.02855 2.56457 6.38985L2 5.68991C2.59224 5.18861 3.17618 4.68732 3.75043 4.18603C4.54055 3.52875 5.13417 3.18344 5.52854 3.14744C6.46257 3.06078 7.03682 3.6754 7.25268 4.99263C7.48653 6.41252 7.64705 7.29645 7.73838 7.64176C8.0082 8.82033 8.30433 9.40828 8.62812 9.40828C8.87858 9.40828 9.25634 9.02565 9.76002 8.26171C10.2623 7.49777 10.5308 6.91648 10.5681 6.51651C10.6401 5.85656 10.3703 5.52592 9.76002 5.52592C9.4722 5.52592 9.17608 5.58992 8.87166 5.71524C9.46113 3.85405 10.5889 2.95013 12.2508 3.00212C13.4837 3.03679 14.0648 3.80739 13.9943 5.31261L13.9957 5.31394Z" fill="white"/>
+</svg>
diff --git a/packages/admin/admin-icons/icons/youtube.svg b/packages/admin/admin-icons/icons/youtube.svg
new file mode 100644
index 0000000000..5699fdc1ca
--- /dev/null
+++ b/packages/admin/admin-icons/icons/youtube.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd">
+<path fill-rule="evenodd" d="M0.123279 4.7738C0.199562 3.53162 1.20016 2.5573 2.44329 2.49845C4.07066 2.4214 6.30232 2.33331 8.00004 2.33331C9.6981 2.33331 11.9303 2.42143 13.5578 2.49849C14.8005 2.55734 15.801 3.53063 15.8778 4.77237C15.9413 5.79774 16 7.00601 16 7.96806C16 8.93012 15.9413 10.1384 15.8778 11.1638C15.801 12.4055 14.8005 13.3788 13.5578 13.4376C11.9303 13.5147 9.6981 13.6028 8.00004 13.6028C6.30157 13.6028 4.06866 13.5147 2.44111 13.4376C1.19891 13.3788 0.198581 12.4063 0.121035 11.1651C0.0593843 10.1784 0.00256505 9.02723 8.72503e-05 8.10719C-0.00261709 7.10304 0.0579651 5.83734 0.123279 4.7738Z M10.5739 7.96809L6.50431 10.3176L6.50431 5.61854L10.5739 7.96809Z" fill="black"/>
+</svg>
diff --git a/packages/admin/admin-icons/src/Vimeo.tsx b/packages/admin/admin-icons/src/Vimeo.tsx
deleted file mode 100644
index b04eb8cb0c..0000000000
--- a/packages/admin/admin-icons/src/Vimeo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { SvgIcon, SvgIconProps } from "@mui/material";
-import { forwardRef } from "react";
-
-const Vimeo = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
-    return (
-        <SvgIcon {...props} ref={ref} viewBox="0 0 16 16">
-            <rect width="16" height="16" fill="#1cb7ea" />
-            <path
-                d="M13.9957 5.31394C13.9417 6.43918 13.1267 7.98039 11.5478 9.93624C9.91638 11.9787 8.53541 13 7.40766 13C6.70749 13 6.11663 12.3787 5.63232 11.1335C5.30991 9.99357 4.9875 8.85233 4.6637 7.71242C4.30393 6.46851 3.91925 5.8459 3.50689 5.8459C3.41695 5.8459 3.10284 6.02855 2.56457 6.38985L2 5.68991C2.59224 5.18861 3.17618 4.68732 3.75043 4.18603C4.54055 3.52875 5.13417 3.18344 5.52854 3.14744C6.46257 3.06078 7.03682 3.6754 7.25268 4.99263C7.48653 6.41252 7.64705 7.29645 7.73838 7.64176C8.0082 8.82033 8.30433 9.40828 8.62812 9.40828C8.87858 9.40828 9.25634 9.02565 9.76002 8.26171C10.2623 7.49777 10.5308 6.91648 10.5681 6.51651C10.6401 5.85656 10.3703 5.52592 9.76002 5.52592C9.4722 5.52592 9.17608 5.58992 8.87166 5.71524C9.46113 3.85405 10.5889 2.95013 12.2508 3.00212C13.4837 3.03679 14.0648 3.80739 13.9943 5.31261L13.9957 5.31394Z"
-                fill="white"
-            />
-        </SvgIcon>
-    );
-});
-
-export default Vimeo;
diff --git a/packages/admin/admin-icons/src/YouTube.tsx b/packages/admin/admin-icons/src/YouTube.tsx
deleted file mode 100644
index ea36266d7e..0000000000
--- a/packages/admin/admin-icons/src/YouTube.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { SvgIcon, SvgIconProps } from "@mui/material";
-import { forwardRef } from "react";
-
-const YouTube = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
-    return (
-        <SvgIcon {...props} ref={ref} viewBox="0 0 16 16">
-            <path
-                d="M0.123279 4.7738C0.199562 3.53162 1.20016 2.5573 2.44329 2.49845C4.07066 2.4214 6.30232 2.33331 8.00004 2.33331C9.6981 2.33331 11.9303 2.42143 13.5578 2.49849C14.8005 2.55734 15.801 3.53063 15.8778 4.77237C15.9413 5.79774 16 7.00601 16 7.96806C16 8.93012 15.9413 10.1384 15.8778 11.1638C15.801 12.4055 14.8005 13.3788 13.5578 13.4376C11.9303 13.5147 9.6981 13.6028 8.00004 13.6028C6.30157 13.6028 4.06866 13.5147 2.44111 13.4376C1.19891 13.3788 0.198581 12.4063 0.121035 11.1651C0.0593843 10.1784 0.00256505 9.02723 8.72503e-05 8.10719C-0.00261709 7.10304 0.0579651 5.83734 0.123279 4.7738Z"
-                fill="#FF0000"
-            />
-            <path d="M10.5739 7.96809L6.50431 10.3176L6.50431 5.61854L10.5739 7.96809Z" fill="white" />
-        </SvgIcon>
-    );
-});
-
-export default YouTube;
diff --git a/packages/admin/admin-icons/src/index.ts b/packages/admin/admin-icons/src/index.ts
index 5788d1a912..a5b82d87ae 100644
--- a/packages/admin/admin-icons/src/index.ts
+++ b/packages/admin/admin-icons/src/index.ts
@@ -10,8 +10,6 @@ export { default as MovePage } from "./MovePage";
 export { default as RadioChecked } from "./RadioChecked";
 export { default as RadioUnchecked } from "./RadioUnchecked";
 export { default as ThreeDotSaving } from "./ThreeDotSaving";
-export { default as Vimeo } from "./Vimeo";
-export { default as YouTube } from "./YouTube";
 
 export type IconName =
     | GeneratedIconName
@@ -23,6 +21,4 @@ export type IconName =
     | "MovePage"
     | "RadioChecked"
     | "RadioUnchecked"
-    | "ThreeDotSaving"
-    | "Vimeo"
-    | "YouTube";
+    | "ThreeDotSaving";

From 0421f0ca0ba6ec8d706e7eb32e2d08534452c9af Mon Sep 17 00:00:00 2001
From: Markus Fichtner <markus.fichtner@vivid-planet.com>
Date: Mon, 2 Dec 2024 14:10:04 +0100
Subject: [PATCH 5/8] Remove DS_Store

---
 packages/admin/admin-icons/.DS_Store | Bin 6148 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/admin/admin-icons/.DS_Store

diff --git a/packages/admin/admin-icons/.DS_Store b/packages/admin/admin-icons/.DS_Store
deleted file mode 100644
index d8d844af3d0e5ad8739cc0c55cf1aa5c1b2c9724..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHKI|>3Z5S{S@f{mqRuHX%V=n1@lpdf;*plH37=kjR2`83O7r-kwcCNG)HOUNsB
zc0@#%xBWt7CL$BKp*(Epo9&zTY>*KJ!g0p+zPU7~b93nBz6%(4EJxYNS(*;tc4$<9
z3Qz$mKn1A4rxnNwJDGm^V4g<>sKC!FVBd!VH>`<mpnp0rcnbg=A?${^_Y%Nj0bosR
z0}+8~P=P_!Y%w(Gh?mT(iEUueMYH+PyjinDQNJDM7f%<hfgGs-73eB3jOEPg{~G?L
z|L>Bxq5@RluN2VHYO`A6Nm*NakF#1^;9I!mJmF@TI|YN6W1yE~EUX;QJt^{v&9Pq-
U+d!uy?sOo3222+k75KISFBrfS)c^nh


From 1adef93f2ed8985b3312b686975dba13fd009e33 Mon Sep 17 00:00:00 2001
From: Markus Fichtner <markus.fichtner@vivid-planet.com>
Date: Tue, 21 Jan 2025 16:27:59 +0100
Subject: [PATCH 6/8] Update Vimeo and YouTube SVG icons to a monotone version

---
 packages/admin/admin-icons/icons/vimeo.svg   | 11 ++++++++++-
 packages/admin/admin-icons/icons/youtube.svg |  4 ++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/admin/admin-icons/icons/vimeo.svg b/packages/admin/admin-icons/icons/vimeo.svg
index 5f1fdb131c..fadba22665 100644
--- a/packages/admin/admin-icons/icons/vimeo.svg
+++ b/packages/admin/admin-icons/icons/vimeo.svg
@@ -1,3 +1,12 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" d="M 16 16 l 0 16 l 16 0 l 0 -16 z M0 0h16v16h-16z M13.9957 5.31394C13.9417 6.43918 13.1267 7.98039 11.5478 9.93624C9.91638 11.9787 8.53541 13 7.40766 13C6.70749 13 6.11663 12.3787 5.63232 11.1335C5.30991 9.99357 4.9875 8.85233 4.6637 7.71242C4.30393 6.46851 3.91925 5.8459 3.50689 5.8459C3.41695 5.8459 3.10284 6.02855 2.56457 6.38985L2 5.68991C2.59224 5.18861 3.17618 4.68732 3.75043 4.18603C4.54055 3.52875 5.13417 3.18344 5.52854 3.14744C6.46257 3.06078 7.03682 3.6754 7.25268 4.99263C7.48653 6.41252 7.64705 7.29645 7.73838 7.64176C8.0082 8.82033 8.30433 9.40828 8.62812 9.40828C8.87858 9.40828 9.25634 9.02565 9.76002 8.26171C10.2623 7.49777 10.5308 6.91648 10.5681 6.51651C10.6401 5.85656 10.3703 5.52592 9.76002 5.52592C9.4722 5.52592 9.17608 5.58992 8.87166 5.71524C9.46113 3.85405 10.5889 2.95013 12.2508 3.00212C13.4837 3.03679 14.0648 3.80739 13.9943 5.31261L13.9957 5.31394Z" fill="white"/>
+<g clip-path="url(#clip0_1_2)">
+<g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0ZM11.1987 9.86933C12.72 7.91333 13.5054 6.372 13.5574 5.24667L13.556 5.24533C13.624 3.74 13.064 2.96932 11.876 2.93466C10.2747 2.88266 9.18803 3.78667 8.62003 5.648C8.91337 5.52267 9.1987 5.45867 9.47603 5.45867C10.064 5.45867 10.324 5.78933 10.2547 6.44933C10.2187 6.84933 9.96003 7.43067 9.47603 8.19467C8.9907 8.95867 8.6267 9.34133 8.38537 9.34133C8.07337 9.34133 7.78803 8.75333 7.52803 7.57467C7.44003 7.22933 7.28537 6.34533 7.06003 4.92533C6.85203 3.608 6.2987 2.99332 5.3987 3.07999C5.0187 3.11599 4.4467 3.46133 3.68537 4.11867C3.13203 4.62 2.56936 5.12133 1.9987 5.62267L2.5427 6.32267C3.06136 5.96133 3.36403 5.77867 3.4507 5.77867C3.84803 5.77867 4.2187 6.40133 4.56537 7.64533C4.8224 8.58447 5.07853 9.52453 5.3345 10.464C5.38923 10.6649 5.44397 10.8658 5.4987 11.0667C5.96537 12.312 6.5347 12.9333 7.20937 12.9333C8.29603 12.9333 9.6267 11.912 11.1987 9.86933Z" fill="#000"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/packages/admin/admin-icons/icons/youtube.svg b/packages/admin/admin-icons/icons/youtube.svg
index 5699fdc1ca..ce4b683473 100644
--- a/packages/admin/admin-icons/icons/youtube.svg
+++ b/packages/admin/admin-icons/icons/youtube.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd">
-<path fill-rule="evenodd" d="M0.123279 4.7738C0.199562 3.53162 1.20016 2.5573 2.44329 2.49845C4.07066 2.4214 6.30232 2.33331 8.00004 2.33331C9.6981 2.33331 11.9303 2.42143 13.5578 2.49849C14.8005 2.55734 15.801 3.53063 15.8778 4.77237C15.9413 5.79774 16 7.00601 16 7.96806C16 8.93012 15.9413 10.1384 15.8778 11.1638C15.801 12.4055 14.8005 13.3788 13.5578 13.4376C11.9303 13.5147 9.6981 13.6028 8.00004 13.6028C6.30157 13.6028 4.06866 13.5147 2.44111 13.4376C1.19891 13.3788 0.198581 12.4063 0.121035 11.1651C0.0593843 10.1784 0.00256505 9.02723 8.72503e-05 8.10719C-0.00261709 7.10304 0.0579651 5.83734 0.123279 4.7738Z M10.5739 7.96809L6.50431 10.3176L6.50431 5.61854L10.5739 7.96809Z" fill="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" d="M14.2636 2.90095C14.9384 3.08534 15.4687 3.62667 15.6493 4.3155H15.6481C15.9758 5.5628 15.9758 8.16667 15.9758 8.16667C15.9758 8.16667 15.9758 10.7706 15.6481 12.0178C15.4674 12.7067 14.9371 13.248 14.2624 13.4324C13.0405 13.7669 8.13903 13.7669 8.13903 13.7669C8.13903 13.7669 3.23752 13.7669 2.01569 13.4324C1.34091 13.248 0.810634 12.7067 0.630004 12.0178C0.302292 10.7706 0.302292 8.16667 0.302292 8.16667C0.302292 8.16667 0.302292 5.5628 0.630004 4.3155C0.810634 3.62667 1.34091 3.08534 2.01569 2.90095C3.23752 2.56641 8.13903 2.56641 8.13903 2.56641C8.13903 2.56641 13.0405 2.56641 14.2636 2.90095ZM10.6446 8.16667L6.57142 10.5664V5.76693L10.6446 8.16667Z" fill="#FF0000"/>
 </svg>

From b94842fabac693d8f45d0b919a63f6f84f940674 Mon Sep 17 00:00:00 2001
From: Markus Fichtner <markus.fichtner@vivid-planet.com>
Date: Wed, 22 Jan 2025 14:55:02 +0100
Subject: [PATCH 7/8] Refactor MediaBlock tooltips to use display names and
 update SVG icons for Vimeo and YouTube

---
 demo/admin/src/common/blocks/MediaBlock.tsx  | 8 ++++----
 packages/admin/admin-icons/icons/vimeo.svg   | 6 +++---
 packages/admin/admin-icons/icons/youtube.svg | 4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/demo/admin/src/common/blocks/MediaBlock.tsx b/demo/admin/src/common/blocks/MediaBlock.tsx
index e430aeaeeb..f8d9e4301c 100644
--- a/demo/admin/src/common/blocks/MediaBlock.tsx
+++ b/demo/admin/src/common/blocks/MediaBlock.tsx
@@ -12,22 +12,22 @@ export const MediaBlock: BlockInterface = createOneOfBlock({
     variant: "toggle",
     labels: {
         image: (
-            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
+            <Tooltip title={DamImageBlock.displayName}>
                 <Image />
             </Tooltip>
         ),
         damVideo: (
-            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.dam" defaultMessage="Video (DAM)" />}>
+            <Tooltip title={DamVideoBlock.displayName}>
                 <Video />
             </Tooltip>
         ),
         youTubeVideo: (
-            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.youtube" defaultMessage="Video (YouTube)" />}>
+            <Tooltip title={YouTubeVideoBlock.displayName}>
                 <Youtube />
             </Tooltip>
         ),
         vimeoVideo: (
-            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.vimeo" defaultMessage="Video (Vimeo)" />}>
+            <Tooltip title={VimeoVideoBlock.displayName}>
                 <Vimeo />
             </Tooltip>
         ),
diff --git a/packages/admin/admin-icons/icons/vimeo.svg b/packages/admin/admin-icons/icons/vimeo.svg
index fadba22665..3465cc118a 100644
--- a/packages/admin/admin-icons/icons/vimeo.svg
+++ b/packages/admin/admin-icons/icons/vimeo.svg
@@ -1,12 +1,12 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1_2)">
 <g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0ZM11.1987 9.86933C12.72 7.91333 13.5054 6.372 13.5574 5.24667L13.556 5.24533C13.624 3.74 13.064 2.96932 11.876 2.93466C10.2747 2.88266 9.18803 3.78667 8.62003 5.648C8.91337 5.52267 9.1987 5.45867 9.47603 5.45867C10.064 5.45867 10.324 5.78933 10.2547 6.44933C10.2187 6.84933 9.96003 7.43067 9.47603 8.19467C8.9907 8.95867 8.6267 9.34133 8.38537 9.34133C8.07337 9.34133 7.78803 8.75333 7.52803 7.57467C7.44003 7.22933 7.28537 6.34533 7.06003 4.92533C6.85203 3.608 6.2987 2.99332 5.3987 3.07999C5.0187 3.11599 4.4467 3.46133 3.68537 4.11867C3.13203 4.62 2.56936 5.12133 1.9987 5.62267L2.5427 6.32267C3.06136 5.96133 3.36403 5.77867 3.4507 5.77867C3.84803 5.77867 4.2187 6.40133 4.56537 7.64533C4.8224 8.58447 5.07853 9.52453 5.3345 10.464C5.38923 10.6649 5.44397 10.8658 5.4987 11.0667C5.96537 12.312 6.5347 12.9333 7.20937 12.9333C8.29603 12.9333 9.6267 11.912 11.1987 9.86933Z" fill="#000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0ZM11.1987 9.86933C12.72 7.91333 13.5054 6.372 13.5574 5.24667L13.556 5.24533C13.624 3.74 13.064 2.96932 11.876 2.93466C10.2747 2.88266 9.18803 3.78667 8.62003 5.648C8.91337 5.52267 9.1987 5.45867 9.47603 5.45867C10.064 5.45867 10.324 5.78933 10.2547 6.44933C10.2187 6.84933 9.96003 7.43067 9.47603 8.19467C8.9907 8.95867 8.6267 9.34133 8.38537 9.34133C8.07337 9.34133 7.78803 8.75333 7.52803 7.57467C7.44003 7.22933 7.28537 6.34533 7.06003 4.92533C6.85203 3.608 6.2987 2.99332 5.3987 3.07999C5.0187 3.11599 4.4467 3.46133 3.68537 4.11867C3.13203 4.62 2.56936 5.12133 1.9987 5.62267L2.5427 6.32267C3.06136 5.96133 3.36403 5.77867 3.4507 5.77867C3.84803 5.77867 4.2187 6.40133 4.56537 7.64533C4.8224 8.58447 5.07853 9.52453 5.3345 10.464C5.38923 10.6649 5.44397 10.8658 5.4987 11.0667C5.96537 12.312 6.5347 12.9333 7.20937 12.9333C8.29603 12.9333 9.6267 11.912 11.1987 9.86933Z"/>
 </g>
 </g>
 <defs>
 <clipPath id="clip0_1_2">
-<rect width="16" height="16" fill="white"/>
+<rect width="16" height="16"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/packages/admin/admin-icons/icons/youtube.svg b/packages/admin/admin-icons/icons/youtube.svg
index ce4b683473..3d2395c1c0 100644
--- a/packages/admin/admin-icons/icons/youtube.svg
+++ b/packages/admin/admin-icons/icons/youtube.svg
@@ -1,3 +1,3 @@
-<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" d="M14.2636 2.90095C14.9384 3.08534 15.4687 3.62667 15.6493 4.3155H15.6481C15.9758 5.5628 15.9758 8.16667 15.9758 8.16667C15.9758 8.16667 15.9758 10.7706 15.6481 12.0178C15.4674 12.7067 14.9371 13.248 14.2624 13.4324C13.0405 13.7669 8.13903 13.7669 8.13903 13.7669C8.13903 13.7669 3.23752 13.7669 2.01569 13.4324C1.34091 13.248 0.810634 12.7067 0.630004 12.0178C0.302292 10.7706 0.302292 8.16667 0.302292 8.16667C0.302292 8.16667 0.302292 5.5628 0.630004 4.3155C0.810634 3.62667 1.34091 3.08534 2.01569 2.90095C3.23752 2.56641 8.13903 2.56641 8.13903 2.56641C8.13903 2.56641 13.0405 2.56641 14.2636 2.90095ZM10.6446 8.16667L6.57142 10.5664V5.76693L10.6446 8.16667Z" fill="#FF0000"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2636 2.90095C14.9384 3.08534 15.4687 3.62667 15.6493 4.3155H15.6481C15.9758 5.5628 15.9758 8.16667 15.9758 8.16667C15.9758 8.16667 15.9758 10.7706 15.6481 12.0178C15.4674 12.7067 14.9371 13.248 14.2624 13.4324C13.0405 13.7669 8.13903 13.7669 8.13903 13.7669C8.13903 13.7669 3.23752 13.7669 2.01569 13.4324C1.34091 13.248 0.810634 12.7067 0.630004 12.0178C0.302292 10.7706 0.302292 8.16667 0.302292 8.16667C0.302292 8.16667 0.302292 5.5628 0.630004 4.3155C0.810634 3.62667 1.34091 3.08534 2.01569 2.90095C3.23752 2.56641 8.13903 2.56641 8.13903 2.56641C8.13903 2.56641 13.0405 2.56641 14.2636 2.90095ZM10.6446 8.16667L6.57142 10.5664V5.76693L10.6446 8.16667Z"/>
 </svg>

From 1d0d6ac771d4eba6da771d6a382996525473402e Mon Sep 17 00:00:00 2001
From: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
Date: Thu, 23 Jan 2025 14:36:41 +0100
Subject: [PATCH 8/8] Improve changeset

---
 .changeset/fluffy-points-think.md | 49 ++++++++++++++++---------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/.changeset/fluffy-points-think.md b/.changeset/fluffy-points-think.md
index 80e6cc70b9..3f65d5abdc 100644
--- a/.changeset/fluffy-points-think.md
+++ b/.changeset/fluffy-points-think.md
@@ -2,29 +2,30 @@
 "@comet/blocks-admin": minor
 ---
 
-Add support for custom labels in OneOfBlock tabs
+Add support for custom labels in `createOneOfBlock`
 
-Usage:
+**Example**
 
--   Add labels to `createOneOfBlock` props
-    -   ````ts
-        labels: {
-                image: (
-                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
-                        <Image />
-                    </Tooltip>
-                ),
-                damVideo: (
-                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.dam" defaultMessage="Video (DAM)" />}>
-                        <Video />
-                    </Tooltip>
-                ),
-                youTubeVideo: (
-                    <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.youtube" defaultMessage="Video (YouTube)" />}>
-                        <YouTube />
-                    </Tooltip>
-                ),
-            }
-            ```
-        ````
-    -   the keys in the labels need to be the same as the `supportedBlocks`
+```tsx
+const MediaBlock = createOneOfBlock({
+    /* ... */
+    labels: {
+        // Use keys from supportedBlocks here
+        image: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.image" defaultMessage="Image" />}>
+                <Image />
+            </Tooltip>
+        ),
+        damVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.dam" defaultMessage="Video (DAM)" />}>
+                <Video />
+            </Tooltip>
+        ),
+        youTubeVideo: (
+            <Tooltip trigger="hover" title={<FormattedMessage id="pages.blocks.media.video.youtube" defaultMessage="Video (YouTube)" />}>
+                <YouTube />
+            </Tooltip>
+        ),
+    },
+});
+```