From d0cb34f583d74f1f2c1253a6d823c7cae0cf492a Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Mon, 27 May 2024 16:01:16 +0200
Subject: [PATCH 1/5] icons corrections

---
 .../styles/kup-image-list-main.scss           |  1 +
 .../src/f-components/f-image/f-image.scss     | 20 ++++++++++++--
 .../src/f-components/f-image/f-image.tsx      | 26 ++++++++++++++-----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
index 8d6fd0e507..35df53867a 100644
--- a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
+++ b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
@@ -137,6 +137,7 @@
       justify-content: space-between;
       box-sizing: border-box;
       position: relative;
+      height: 100%;
     }
     .f-cell__content .image-list__wrapper.images{
       height: 100%;
diff --git a/packages/ketchup/src/f-components/f-image/f-image.scss b/packages/ketchup/src/f-components/f-image/f-image.scss
index 9cdb997d2a..7b6c7f54a8 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.scss
+++ b/packages/ketchup/src/f-components/f-image/f-image.scss
@@ -31,14 +31,30 @@
     width: var(--kup_image_width, 100%);
   }
 
+  .iconWrapper{
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    box-sizing: border-box;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    .f-image__icon{
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+  }
+
+
   .f-image__placeholder {
     height: 100%;
-    position: absolute;
     width: 100%;
+    position: absolute;
   }
 
   .f-image__hidden {
-    visibility: hidden;
+    display: none;
   }
 
   .css-step.bottom-aligned {
diff --git a/packages/ketchup/src/f-components/f-image/f-image.tsx b/packages/ketchup/src/f-components/f-image/f-image.tsx
index 013c854c89..3fe8785845 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.tsx
+++ b/packages/ketchup/src/f-components/f-image/f-image.tsx
@@ -18,12 +18,13 @@ export const FImage: FunctionalComponent<FImageProps> = (
         '--kup_image_width': string;
     };
 
+    const hasExternalResource =
+        props.resource.indexOf('.') > -1 ||
+        props.resource.indexOf('/') > -1 ||
+        props.resource.indexOf('\\') > -1;
+
     if (props.resource) {
-        if (
-            props.resource.indexOf('.') > -1 ||
-            props.resource.indexOf('/') > -1 ||
-            props.resource.indexOf('\\') > -1
-        ) {
+        if (hasExternalResource) {
             style = {
                 '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
                 '--kup_image_width': props.sizeX ? props.sizeX : '100%',
@@ -53,7 +54,9 @@ export const FImage: FunctionalComponent<FImageProps> = (
 
     return (
         <div
-            class={`f-image ${props.wrapperClass ? props.wrapperClass : ''} `}
+            class={`f-image ${props.wrapperClass ? props.wrapperClass : ''} ${
+                hasExternalResource ? `images` : ''
+            } `}
             {...props.dataSet}
             id={props.id}
             style={style}
@@ -97,7 +100,16 @@ function createIcon(
         style.mask = `url('${path}') no-repeat center`;
         style.webkitMask = `url('${path}') no-repeat center`;
     }
-    return <div class={classObj} style={style}></div>;
+    return (
+        <div class="iconWrapper">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                version="1.1"
+                viewBox="0 0 24 24"
+            ></svg>
+            <div class={classObj} style={style}></div>
+        </div>
+    );
 }
 
 function createImage(props: FImageProps): HTMLImageElement {

From 4491c9b8ddfc90e2ad7b8b22297a7bd0829fb542 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Mon, 27 May 2024 17:30:50 +0200
Subject: [PATCH 2/5] remove unused code

---
 .../ketchup/src/f-components/f-image/f-image.tsx  | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/ketchup/src/f-components/f-image/f-image.tsx b/packages/ketchup/src/f-components/f-image/f-image.tsx
index 3fe8785845..ff5c2b7c96 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.tsx
+++ b/packages/ketchup/src/f-components/f-image/f-image.tsx
@@ -18,13 +18,12 @@ export const FImage: FunctionalComponent<FImageProps> = (
         '--kup_image_width': string;
     };
 
-    const hasExternalResource =
-        props.resource.indexOf('.') > -1 ||
-        props.resource.indexOf('/') > -1 ||
-        props.resource.indexOf('\\') > -1;
-
     if (props.resource) {
-        if (hasExternalResource) {
+        if (
+            props.resource.indexOf('.') > -1 ||
+            props.resource.indexOf('/') > -1 ||
+            props.resource.indexOf('\\') > -1
+        ) {
             style = {
                 '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
                 '--kup_image_width': props.sizeX ? props.sizeX : '100%',
@@ -54,9 +53,7 @@ export const FImage: FunctionalComponent<FImageProps> = (
 
     return (
         <div
-            class={`f-image ${props.wrapperClass ? props.wrapperClass : ''} ${
-                hasExternalResource ? `images` : ''
-            } `}
+            class={`f-image ${props.wrapperClass ? props.wrapperClass : ''} `}
             {...props.dataSet}
             id={props.id}
             style={style}

From 244b590f8109ec1c46d97caafe418af93dc47993 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Tue, 28 May 2024 14:00:02 +0200
Subject: [PATCH 3/5] Fix : Datatable dimension problem

---
 .../src/f-components/f-cell/f-cell.tsx        | 33 +++++--------------
 .../src/f-components/f-image/f-image.scss     |  4 +++
 .../src/f-components/f-image/f-image.tsx      | 14 ++++++++
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
index 7f66ced70d..c46f2665cc 100644
--- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx
+++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx
@@ -228,6 +228,7 @@ function setCellSize(
                 props.cell.value.indexOf('.') > -1 ||
                 props.cell.value.indexOf('/') > -1 ||
                 props.cell.value.indexOf('\\') > -1;
+
             if (
                 (props.component as KupComponent).rootElement.tagName ===
                     KupTagNames.DATA_TABLE &&
@@ -239,15 +240,19 @@ function setCellSize(
                 ) {
                     (subcomponentProps as FImageProps).sizeX = '100%';
                     (subcomponentProps as FImageProps).sizeY = '64px';
+                    (subcomponentProps as FImageProps).wrapperClass = 'noWidth';
                 } else {
                     if (!(subcomponentProps as FImageProps).sizeX) {
                         (subcomponentProps as FImageProps).sizeX = '100%';
+                        (subcomponentProps as FImageProps).wrapperClass =
+                            'noWidth';
                     }
                     if (!(subcomponentProps as FImageProps).sizeY) {
                         (subcomponentProps as FImageProps).sizeY = 'auto';
                     }
                 }
             }
+
             if (
                 (props.component as KupComponent).rootElement.tagName ===
                 KupTagNames.BOX
@@ -264,6 +269,7 @@ function setCellSize(
             if (!(subcomponentProps as FImageProps).sizeY) {
                 (subcomponentProps as FImageProps).sizeY = '64px';
             }
+
             break;
     }
 }
@@ -664,36 +670,15 @@ function setCell(
             }
             return <FImage {...subcomponentProps} />;
         case FCellTypes.IMAGE:
-            const hasExternalResource =
-                props.cell.value.indexOf('.') > -1 ||
-                props.cell.value.indexOf('/') > -1 ||
-                props.cell.value.indexOf('\\') > -1;
             if (isAutoCentered(props)) {
                 classObj[FCellClasses.C_CENTERED] = true;
             }
             if ((subcomponentProps as FImageProps).badgeData) {
                 classObj[FCellClasses.C_PADDED] = true;
             }
-            if (hasExternalResource) {
-                return <FImage {...subcomponentProps} />;
-            } else {
-                return (
-                    <div
-                        class={`imageWrapIcon`}
-                        style={{
-                            width: subcomponentProps.sizeX,
-                            height: subcomponentProps.sizeY,
-                        }}
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            version="1.1"
-                            viewBox="0 0 24 24"
-                        ></svg>
-                        <FImage {...subcomponentProps} />
-                    </div>
-                );
-            }
+
+            return <FImage {...subcomponentProps} />;
+
         case FCellTypes.LINK:
             return (
                 <a href={content as string} target="_blank">
diff --git a/packages/ketchup/src/f-components/f-image/f-image.scss b/packages/ketchup/src/f-components/f-image/f-image.scss
index 7b6c7f54a8..2ea4513c2b 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.scss
+++ b/packages/ketchup/src/f-components/f-image/f-image.scss
@@ -62,3 +62,7 @@
     position: absolute;
   }
 }
+
+.f-image.noWidth.noIcon{
+  width: auto;
+}
diff --git a/packages/ketchup/src/f-components/f-image/f-image.tsx b/packages/ketchup/src/f-components/f-image/f-image.tsx
index ff5c2b7c96..bbf98ad04e 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.tsx
+++ b/packages/ketchup/src/f-components/f-image/f-image.tsx
@@ -118,6 +118,11 @@ function createImage(props: FImageProps): HTMLImageElement {
                 const placeholder = img.parentElement.querySelector(
                     '.f-image__placeholder'
                 );
+                const iconWrapper =
+                    img.parentElement.querySelector('.iconWrapper');
+
+                const fWrapper =
+                    img.parentElement.parentElement.querySelector('.f-image');
                 if (props.onLoad) {
                     props.onLoad(e);
                 }
@@ -125,16 +130,25 @@ function createImage(props: FImageProps): HTMLImageElement {
                     placeholder.classList.add(HIDDEN_CLASS);
                     img.classList.remove(HIDDEN_CLASS);
                 }
+                if (iconWrapper) {
+                    iconWrapper.classList.add(HIDDEN_CLASS);
+                    fWrapper.classList.add('noIcon');
+                }
             }}
             onError={(e) => {
                 const img = e.currentTarget as HTMLImageElement;
                 const placeholder = img.parentElement.querySelector(
                     '.f-image__placeholder'
                 );
+                const iconWrapper =
+                    img.parentElement.querySelector('.iconWrapper');
                 if (placeholder) {
                     placeholder.classList.remove(HIDDEN_CLASS);
                     img.classList.add(HIDDEN_CLASS);
                 }
+                if (iconWrapper) {
+                    iconWrapper.classList.remove(HIDDEN_CLASS);
+                }
             }}
             src={props.resource}
         ></img>

From 7d217759b6e76c8839dc343c8c702a5fe0c11aba Mon Sep 17 00:00:00 2001
From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com>
Date: Tue, 28 May 2024 17:30:13 +0200
Subject: [PATCH 4/5] fix (image list): js error when clicking back

---
 .../ketchup/src/components/kup-image-list/kup-image-list.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
index 0774a224e3..5d88c5ad7e 100644
--- a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
+++ b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
@@ -400,7 +400,7 @@ export class KupImageList {
                                 clone as PointerEvent
                             );
                             const node = details.row as KupImageListDataNode;
-                            if (node.children && node.children.length > 0) {
+                            if (node?.children?.length > 0) {
                                 this.currentNode = node;
                             }
                             this.kupClick.emit({

From 5a342708d943b56cb21ded82bff2f3e5f4083202 Mon Sep 17 00:00:00 2001
From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com>
Date: Tue, 28 May 2024 17:30:18 +0200
Subject: [PATCH 5/5] Readmes.

---
 .../ketchup/src/components/kup-accordion/readme.md |  3 ++-
 .../src/components/kup-autocomplete/readme.md      |  3 ++-
 packages/ketchup/src/components/kup-box/readme.md  |  3 ++-
 .../src/components/kup-button-list/readme.md       |  3 ++-
 .../ketchup/src/components/kup-button/readme.md    |  3 ++-
 .../ketchup/src/components/kup-calendar/readme.md  |  3 ++-
 .../ketchup/src/components/kup-card-list/readme.md |  3 ++-
 packages/ketchup/src/components/kup-cell/readme.md |  3 ++-
 .../ketchup/src/components/kup-chart/readme.md     |  3 ++-
 .../ketchup/src/components/kup-checkbox/readme.md  |  3 ++-
 packages/ketchup/src/components/kup-chip/readme.md |  3 ++-
 .../src/components/kup-color-picker/readme.md      |  3 ++-
 .../ketchup/src/components/kup-combobox/readme.md  |  3 ++-
 .../ketchup/src/components/kup-dashboard/readme.md |  3 ++-
 .../src/components/kup-data-table/readme.md        |  3 ++-
 .../src/components/kup-date-picker/readme.md       |  3 ++-
 .../ketchup/src/components/kup-drawer/readme.md    |  3 ++-
 .../src/components/kup-dropdown-button/readme.md   |  3 ++-
 .../ketchup/src/components/kup-echart/readme.md    |  3 ++-
 .../ketchup/src/components/kup-editor/readme.md    |  3 ++-
 .../src/components/kup-family-tree/readme.md       |  3 ++-
 packages/ketchup/src/components/kup-form/readme.md |  3 ++-
 .../ketchup/src/components/kup-gauge/readme.md     |  3 ++-
 packages/ketchup/src/components/kup-grid/readme.md |  3 ++-
 .../ketchup/src/components/kup-iframe/readme.md    |  3 ++-
 .../src/components/kup-image-list/readme.md        |  3 ++-
 .../ketchup/src/components/kup-image/readme.md     | 14 +++++++-------
 .../src/components/kup-input-panel/readme.md       |  3 ++-
 packages/ketchup/src/components/kup-lazy/readme.md |  3 ++-
 packages/ketchup/src/components/kup-list/readme.md |  3 ++-
 .../ketchup/src/components/kup-magic-box/readme.md |  3 ++-
 .../ketchup/src/components/kup-nav-bar/readme.md   |  3 ++-
 .../src/components/kup-numeric-picker/readme.md    |  3 ++-
 packages/ketchup/src/components/kup-pdf/readme.md  |  3 ++-
 .../src/components/kup-photo-frame/readme.md       |  3 ++-
 .../ketchup/src/components/kup-planner/readme.md   |  3 ++-
 .../ketchup/src/components/kup-probe/readme.md     |  3 ++-
 .../src/components/kup-progress-bar/readme.md      |  3 ++-
 packages/ketchup/src/components/kup-qlik/readme.md |  3 ++-
 .../ketchup/src/components/kup-radio/readme.md     |  3 ++-
 .../ketchup/src/components/kup-rating/readme.md    |  3 ++-
 .../ketchup/src/components/kup-snackbar/readme.md  |  3 ++-
 .../ketchup/src/components/kup-switch/readme.md    |  3 ++-
 .../ketchup/src/components/kup-tab-bar/readme.md   |  3 ++-
 .../src/components/kup-text-field/readme.md        |  3 ++-
 .../src/components/kup-time-picker/readme.md       |  3 ++-
 packages/ketchup/src/components/kup-tree/readme.md |  3 ++-
 47 files changed, 99 insertions(+), 53 deletions(-)

diff --git a/packages/ketchup/src/components/kup-accordion/readme.md b/packages/ketchup/src/components/kup-accordion/readme.md
index 983dfff953..f6cd1f2d26 100644
--- a/packages/ketchup/src/components/kup-accordion/readme.md
+++ b/packages/ketchup/src/components/kup-accordion/readme.md
@@ -192,9 +192,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md
index 7e8fd0be9c..256990ddc9 100644
--- a/packages/ketchup/src/components/kup-autocomplete/readme.md
+++ b/packages/ketchup/src/components/kup-autocomplete/readme.md
@@ -170,9 +170,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-box/readme.md b/packages/ketchup/src/components/kup-box/readme.md
index f4ea58768b..d8927bf82c 100644
--- a/packages/ketchup/src/components/kup-box/readme.md
+++ b/packages/ketchup/src/components/kup-box/readme.md
@@ -236,9 +236,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-button-list/readme.md b/packages/ketchup/src/components/kup-button-list/readme.md
index f2a174d863..8c0ce60ae7 100644
--- a/packages/ketchup/src/components/kup-button-list/readme.md
+++ b/packages/ketchup/src/components/kup-button-list/readme.md
@@ -150,9 +150,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-button/readme.md b/packages/ketchup/src/components/kup-button/readme.md
index fdc7ee5aea..2809b63dde 100644
--- a/packages/ketchup/src/components/kup-button/readme.md
+++ b/packages/ketchup/src/components/kup-button/readme.md
@@ -150,9 +150,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-calendar/readme.md b/packages/ketchup/src/components/kup-calendar/readme.md
index 85221c0dce..5cce392fc3 100644
--- a/packages/ketchup/src/components/kup-calendar/readme.md
+++ b/packages/ketchup/src/components/kup-calendar/readme.md
@@ -174,9 +174,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-card-list/readme.md b/packages/ketchup/src/components/kup-card-list/readme.md
index a416a6ea30..4ea7f3de15 100644
--- a/packages/ketchup/src/components/kup-card-list/readme.md
+++ b/packages/ketchup/src/components/kup-card-list/readme.md
@@ -159,9 +159,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-cell/readme.md b/packages/ketchup/src/components/kup-cell/readme.md
index ef0ee0eee8..3ef63e5fdd 100644
--- a/packages/ketchup/src/components/kup-cell/readme.md
+++ b/packages/ketchup/src/components/kup-cell/readme.md
@@ -201,9 +201,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-chart/readme.md b/packages/ketchup/src/components/kup-chart/readme.md
index ba2198351b..3187b0b0b8 100644
--- a/packages/ketchup/src/components/kup-chart/readme.md
+++ b/packages/ketchup/src/components/kup-chart/readme.md
@@ -150,9 +150,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-checkbox/readme.md b/packages/ketchup/src/components/kup-checkbox/readme.md
index 835977965a..e660ed7a0e 100644
--- a/packages/ketchup/src/components/kup-checkbox/readme.md
+++ b/packages/ketchup/src/components/kup-checkbox/readme.md
@@ -143,9 +143,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md
index a5f516b58f..05de892ce3 100644
--- a/packages/ketchup/src/components/kup-chip/readme.md
+++ b/packages/ketchup/src/components/kup-chip/readme.md
@@ -146,9 +146,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-color-picker/readme.md b/packages/ketchup/src/components/kup-color-picker/readme.md
index 48057e6da1..2ee6d2ed8b 100644
--- a/packages/ketchup/src/components/kup-color-picker/readme.md
+++ b/packages/ketchup/src/components/kup-color-picker/readme.md
@@ -159,9 +159,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md
index 4db298c679..8a631793aa 100644
--- a/packages/ketchup/src/components/kup-combobox/readme.md
+++ b/packages/ketchup/src/components/kup-combobox/readme.md
@@ -168,9 +168,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-dashboard/readme.md b/packages/ketchup/src/components/kup-dashboard/readme.md
index 2055c88623..68ecf564c2 100644
--- a/packages/ketchup/src/components/kup-dashboard/readme.md
+++ b/packages/ketchup/src/components/kup-dashboard/readme.md
@@ -136,9 +136,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-data-table/readme.md b/packages/ketchup/src/components/kup-data-table/readme.md
index 413103c65f..06e15ef3a5 100644
--- a/packages/ketchup/src/components/kup-data-table/readme.md
+++ b/packages/ketchup/src/components/kup-data-table/readme.md
@@ -513,9 +513,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-date-picker/readme.md b/packages/ketchup/src/components/kup-date-picker/readme.md
index 123234e9f6..c27010396b 100644
--- a/packages/ketchup/src/components/kup-date-picker/readme.md
+++ b/packages/ketchup/src/components/kup-date-picker/readme.md
@@ -149,9 +149,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-drawer/readme.md b/packages/ketchup/src/components/kup-drawer/readme.md
index fd16c69759..fe761cdefb 100644
--- a/packages/ketchup/src/components/kup-drawer/readme.md
+++ b/packages/ketchup/src/components/kup-drawer/readme.md
@@ -187,9 +187,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-dropdown-button/readme.md b/packages/ketchup/src/components/kup-dropdown-button/readme.md
index 1f2bb9c64e..dc91f978aa 100644
--- a/packages/ketchup/src/components/kup-dropdown-button/readme.md
+++ b/packages/ketchup/src/components/kup-dropdown-button/readme.md
@@ -160,9 +160,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-echart/readme.md b/packages/ketchup/src/components/kup-echart/readme.md
index 5f265dd0bb..06169777c4 100644
--- a/packages/ketchup/src/components/kup-echart/readme.md
+++ b/packages/ketchup/src/components/kup-echart/readme.md
@@ -163,9 +163,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-editor/readme.md b/packages/ketchup/src/components/kup-editor/readme.md
index 64066ab76d..d6c8563b1d 100644
--- a/packages/ketchup/src/components/kup-editor/readme.md
+++ b/packages/ketchup/src/components/kup-editor/readme.md
@@ -164,9 +164,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-family-tree/readme.md b/packages/ketchup/src/components/kup-family-tree/readme.md
index 1beda2058f..82697a4e17 100644
--- a/packages/ketchup/src/components/kup-family-tree/readme.md
+++ b/packages/ketchup/src/components/kup-family-tree/readme.md
@@ -217,9 +217,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-form/readme.md b/packages/ketchup/src/components/kup-form/readme.md
index 60913a56f9..dba8d0cfc8 100644
--- a/packages/ketchup/src/components/kup-form/readme.md
+++ b/packages/ketchup/src/components/kup-form/readme.md
@@ -201,9 +201,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-gauge/readme.md b/packages/ketchup/src/components/kup-gauge/readme.md
index 083a05b40b..c60b678f34 100644
--- a/packages/ketchup/src/components/kup-gauge/readme.md
+++ b/packages/ketchup/src/components/kup-gauge/readme.md
@@ -210,9 +210,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-grid/readme.md b/packages/ketchup/src/components/kup-grid/readme.md
index 1ac0acb0b6..ba78cd7522 100644
--- a/packages/ketchup/src/components/kup-grid/readme.md
+++ b/packages/ketchup/src/components/kup-grid/readme.md
@@ -141,9 +141,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-iframe/readme.md b/packages/ketchup/src/components/kup-iframe/readme.md
index 4b0ee21a72..240498e09a 100644
--- a/packages/ketchup/src/components/kup-iframe/readme.md
+++ b/packages/ketchup/src/components/kup-iframe/readme.md
@@ -142,9 +142,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-image-list/readme.md b/packages/ketchup/src/components/kup-image-list/readme.md
index 1a9c4747f6..246954950c 100644
--- a/packages/ketchup/src/components/kup-image-list/readme.md
+++ b/packages/ketchup/src/components/kup-image-list/readme.md
@@ -190,9 +190,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-image/readme.md b/packages/ketchup/src/components/kup-image/readme.md
index 0767e4378c..fb9b3e97c1 100644
--- a/packages/ketchup/src/components/kup-image/readme.md
+++ b/packages/ketchup/src/components/kup-image/readme.md
@@ -17,6 +17,7 @@
 | `resource`            | `resource`             | The resource used to fetch the image.                                                                                                                               | `string`       | `null`                               |
 | `sizeX`               | `size-x`               | The width of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).                                                                            | `string`       | `'100%'`                             |
 | `sizeY`               | `size-y`               | The height of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).                                                                           | `string`       | `'100%'`                             |
+| `zoomEnable`          | `zoom-enable`          | When set to true, a dialog will be displayed with the same resource set to 100% when image is clicked.                                                              | `boolean`      | `false`                              |
 
 
 ## Events
@@ -81,26 +82,23 @@ Type: `Promise<void>`
  - [kup-cell](../kup-cell)
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
+ - [kup-image](.)
  - [kup-image-list](../kup-image-list)
  - [kup-input-panel](../kup-input-panel)
  - [kup-tree](../kup-tree)
 
 ### Depends on
 
-- [kup-spinner](../kup-spinner)
 - [kup-card](../kup-card)
+- [kup-image](.)
 - [kup-dialog](../kup-dialog)
+- [kup-spinner](../kup-spinner)
 - [kup-badge](../kup-badge)
 
 ### Graph
 ```mermaid
 graph TD;
-  kup-image --> kup-spinner
-  kup-image --> kup-card
-  kup-image --> kup-dialog
-  kup-image --> kup-badge
-  kup-spinner --> kup-card
-  kup-spinner --> kup-dialog
+  kup-image --> kup-image
   kup-card --> kup-image
   kup-autocomplete --> kup-list
   kup-autocomplete --> kup-card
@@ -152,6 +150,8 @@ graph TD;
   kup-button --> kup-card
   kup-button --> kup-dialog
   kup-button --> kup-badge
+  kup-spinner --> kup-card
+  kup-spinner --> kup-dialog
   kup-checkbox --> kup-card
   kup-checkbox --> kup-dialog
   kup-data-table --> kup-image
diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md
index 5f87fa6ea7..ee4f5c7f3d 100644
--- a/packages/ketchup/src/components/kup-input-panel/readme.md
+++ b/packages/ketchup/src/components/kup-input-panel/readme.md
@@ -179,9 +179,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-lazy/readme.md b/packages/ketchup/src/components/kup-lazy/readme.md
index 1c8436cc9e..cb351b1768 100644
--- a/packages/ketchup/src/components/kup-lazy/readme.md
+++ b/packages/ketchup/src/components/kup-lazy/readme.md
@@ -160,9 +160,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-list/readme.md b/packages/ketchup/src/components/kup-list/readme.md
index 4c262703e9..8c4de7987a 100644
--- a/packages/ketchup/src/components/kup-list/readme.md
+++ b/packages/ketchup/src/components/kup-list/readme.md
@@ -189,9 +189,10 @@ graph TD;
   kup-rating --> kup-card
   kup-rating --> kup-dialog
   kup-time-picker --> kup-list
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-magic-box/readme.md b/packages/ketchup/src/components/kup-magic-box/readme.md
index 7b5e9ad05c..85c891d183 100644
--- a/packages/ketchup/src/components/kup-magic-box/readme.md
+++ b/packages/ketchup/src/components/kup-magic-box/readme.md
@@ -150,9 +150,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-nav-bar/readme.md b/packages/ketchup/src/components/kup-nav-bar/readme.md
index f325f36e70..296163f6f7 100644
--- a/packages/ketchup/src/components/kup-nav-bar/readme.md
+++ b/packages/ketchup/src/components/kup-nav-bar/readme.md
@@ -158,9 +158,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-numeric-picker/readme.md b/packages/ketchup/src/components/kup-numeric-picker/readme.md
index 01e1d5ee92..47398338f0 100644
--- a/packages/ketchup/src/components/kup-numeric-picker/readme.md
+++ b/packages/ketchup/src/components/kup-numeric-picker/readme.md
@@ -170,9 +170,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-pdf/readme.md b/packages/ketchup/src/components/kup-pdf/readme.md
index 3aed099b63..5f3f592ca7 100644
--- a/packages/ketchup/src/components/kup-pdf/readme.md
+++ b/packages/ketchup/src/components/kup-pdf/readme.md
@@ -143,9 +143,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-photo-frame/readme.md b/packages/ketchup/src/components/kup-photo-frame/readme.md
index 9edcc04d83..4b5d8fcd4c 100644
--- a/packages/ketchup/src/components/kup-photo-frame/readme.md
+++ b/packages/ketchup/src/components/kup-photo-frame/readme.md
@@ -146,9 +146,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-planner/readme.md b/packages/ketchup/src/components/kup-planner/readme.md
index 21e27d06b2..e098494fb1 100644
--- a/packages/ketchup/src/components/kup-planner/readme.md
+++ b/packages/ketchup/src/components/kup-planner/readme.md
@@ -221,9 +221,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-probe/readme.md b/packages/ketchup/src/components/kup-probe/readme.md
index 7faaec9418..149d9a2a9a 100644
--- a/packages/ketchup/src/components/kup-probe/readme.md
+++ b/packages/ketchup/src/components/kup-probe/readme.md
@@ -106,9 +106,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-progress-bar/readme.md b/packages/ketchup/src/components/kup-progress-bar/readme.md
index e97069e206..f303cd18b6 100644
--- a/packages/ketchup/src/components/kup-progress-bar/readme.md
+++ b/packages/ketchup/src/components/kup-progress-bar/readme.md
@@ -134,9 +134,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-qlik/readme.md b/packages/ketchup/src/components/kup-qlik/readme.md
index 14e2ab8fc9..8a7a87b3f7 100644
--- a/packages/ketchup/src/components/kup-qlik/readme.md
+++ b/packages/ketchup/src/components/kup-qlik/readme.md
@@ -90,9 +90,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-radio/readme.md b/packages/ketchup/src/components/kup-radio/readme.md
index 43ba8774ba..13f4d51ed8 100644
--- a/packages/ketchup/src/components/kup-radio/readme.md
+++ b/packages/ketchup/src/components/kup-radio/readme.md
@@ -149,9 +149,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-rating/readme.md b/packages/ketchup/src/components/kup-rating/readme.md
index 637364e598..a8ecfa1572 100644
--- a/packages/ketchup/src/components/kup-rating/readme.md
+++ b/packages/ketchup/src/components/kup-rating/readme.md
@@ -130,9 +130,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-snackbar/readme.md b/packages/ketchup/src/components/kup-snackbar/readme.md
index adf3ea5f31..bebfac36bc 100644
--- a/packages/ketchup/src/components/kup-snackbar/readme.md
+++ b/packages/ketchup/src/components/kup-snackbar/readme.md
@@ -164,9 +164,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-switch/readme.md b/packages/ketchup/src/components/kup-switch/readme.md
index 92eb956a8e..bee9087c91 100644
--- a/packages/ketchup/src/components/kup-switch/readme.md
+++ b/packages/ketchup/src/components/kup-switch/readme.md
@@ -132,9 +132,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-tab-bar/readme.md b/packages/ketchup/src/components/kup-tab-bar/readme.md
index 1bcc9d4a72..3508ce18e8 100644
--- a/packages/ketchup/src/components/kup-tab-bar/readme.md
+++ b/packages/ketchup/src/components/kup-tab-bar/readme.md
@@ -141,9 +141,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-text-field/readme.md b/packages/ketchup/src/components/kup-text-field/readme.md
index e1798da085..91afb7ed2f 100644
--- a/packages/ketchup/src/components/kup-text-field/readme.md
+++ b/packages/ketchup/src/components/kup-text-field/readme.md
@@ -209,9 +209,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-time-picker/readme.md b/packages/ketchup/src/components/kup-time-picker/readme.md
index bb3d4cae32..9b6de2aaef 100644
--- a/packages/ketchup/src/components/kup-time-picker/readme.md
+++ b/packages/ketchup/src/components/kup-time-picker/readme.md
@@ -168,9 +168,10 @@ graph TD;
   kup-date-picker --> kup-dialog
   kup-rating --> kup-card
   kup-rating --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-tree/readme.md b/packages/ketchup/src/components/kup-tree/readme.md
index a1ff273fb2..8b6cc05264 100644
--- a/packages/ketchup/src/components/kup-tree/readme.md
+++ b/packages/ketchup/src/components/kup-tree/readme.md
@@ -361,9 +361,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog