Icon Label block Icon Gap issue

[andeng1106]

Describe the bug When I set the Icon Gap to 36 or below, it stops immediately and no gap anymore instead of having no gap at 0.

To Reproduce Steps to reproduce the behavior:

1. Add a new page
2. Add an Icon Label block
3. Move slide to set Icon Gap to 36 or below
4. Set Icon Gap to 0
5. Compare the difference between step 3 and 4

Expected behavior Icon Gap no gap should appear when it's set to 0

Screenshots

https://github.com/gambitph/Stackable/assets/103395655/314dbd82-62ae-440e-bf45-3f3510f42593

[bfintal]

I was checking why this was the case. Our initial idea for the "Icon Gap" option is that it works independently from the icon size, so that you can have the icon any size you want, then the Icon Gap measurement would correspond to the width from the left side of the icon, to the left side of the text.

This looks confusing now that the icon label block has been out for a while.

Implementation

1. Let's transition this to be a proper "gap" styling rule instead of a "flexbasis" styling rule.

Keep in mind that the value would need to be deprecated and adjusted for the new rule. The new value would now be the gap between the icon and the text. The value should be upgraded to be:

// On deprecation, update value to:
const newValue = oldValue - icon block size

2. The new default gap should make the block look the same as it is now - this is so that if you have existing icon label blocks and you updated to the new style, inserting a new icon label block would have them both aligned the same way.
3. Check whether the Icon box block might also need to be updated because of the adjustments