From 1ff607f9b57ab41d16528c1933e8d6b12f81541f Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 19 Sep 2024 14:58:28 +0100
Subject: [PATCH 1/2] chore: add more customisation props to EncapsulatedIcon

---
 src/core/Icon/EncapsulatedIcon.tsx            | 11 +++++++--
 .../Icon/__snapshots__/Icon.stories.tsx.snap  | 24 +++++++++----------
 .../ProductTile.stories.tsx.snap              | 22 ++++++++---------
 3 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/core/Icon/EncapsulatedIcon.tsx b/src/core/Icon/EncapsulatedIcon.tsx
index 709ab2177..c2ae698fc 100644
--- a/src/core/Icon/EncapsulatedIcon.tsx
+++ b/src/core/Icon/EncapsulatedIcon.tsx
@@ -6,16 +6,23 @@ import { ColorClass, Theme } from "../styles/colors/types";
 type EncapsulatedIconProps = {
   theme?: Theme;
   className?: string;
+  innerClassName?: string;
+  iconSize?: string;
 } & IconProps;
 
 const EncapsulatedIcon = ({
   theme = "dark",
   size = "40px",
+  iconSize,
   className,
+  innerClassName,
   ...iconProps
 }: EncapsulatedIconProps) => {
   const t = (color: ColorClass) => determineThemeColor("dark", theme, color);
   const numericalSize = parseInt(size, 10);
+  const numericalIconSize = iconSize
+    ? parseInt(iconSize, 10)
+    : numericalSize - 12;
 
   return (
     <div
@@ -23,10 +30,10 @@ const EncapsulatedIcon = ({
       style={{ width: numericalSize, height: numericalSize }}
     >
       <div
-        className={`flex items-center justify-center rounded-lg ${t("bg-neutral-1100")}`}
+        className={`flex items-center justify-center rounded-lg ${t("bg-neutral-1100")} ${innerClassName ?? ""}`}
         style={{ height: numericalSize - 2 }}
       >
-        <Icon size={`${numericalSize - 12}`} {...iconProps} />
+        <Icon size={`${numericalIconSize}`} {...iconProps} />
       </div>
     </div>
   );
diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
index 797b5639e..0f120ecce 100644
--- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
+++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -11,7 +11,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -34,7 +34,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -57,7 +57,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -80,7 +80,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -103,7 +103,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -126,7 +126,7 @@ exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -1966,7 +1966,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -1989,7 +1989,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -2012,7 +2012,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -2035,7 +2035,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -2058,7 +2058,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
                style="height: 38px;"
           >
             <svg class=" "
@@ -2081,7 +2081,7 @@ exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
         <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
              style="width: 40px; height: 40px;"
         >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
                style="height: 38px;"
           >
             <svg class=" "
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index 73136d83a..46d3e1e2f 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -6,7 +6,7 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
     <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
          style="width: 40px; height: 40px;"
     >
-      <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+      <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
            style="height: 38px;"
       >
         <svg class=" "
@@ -39,7 +39,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -68,7 +68,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -97,7 +97,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -126,7 +126,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -155,7 +155,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -209,7 +209,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -250,7 +250,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -279,7 +279,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -320,7 +320,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
              style="height: 38px;"
         >
           <svg class=" "
@@ -349,7 +349,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
              style="height: 38px;"
         >
           <svg class=" "

From ce1cac8fd86543adbcbae4313b428b1b87cdc5e5 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 19 Sep 2024 14:59:40 +0100
Subject: [PATCH 2/2] chore: bump to 14.6.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 466542078..601bbc688 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.6.0-dev.fd4036a",
+  "version": "14.6.1",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",