From 5feead14af3256132630720a15a938a309092871 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 3 Feb 2025 19:27:33 +0530
Subject: [PATCH 1/4] update: alignment.

---
 v2/pink-sb/src/lib/input/Helper.svelte             | 3 ++-
 v2/pink-sb/src/stories/input/Select.stories.svelte | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/input/Helper.svelte b/v2/pink-sb/src/lib/input/Helper.svelte
index 755d34f935..bbe69dfbf7 100644
--- a/v2/pink-sb/src/lib/input/Helper.svelte
+++ b/v2/pink-sb/src/lib/input/Helper.svelte
@@ -36,7 +36,8 @@
 <style lang="scss">
     div {
         display: flex;
-        align-items: center;
+        line-height: 120%;
+        align-items: start;
         gap: var(--space-3);
         color: var(--color-fgcolor-neutral-secondary);
 
diff --git a/v2/pink-sb/src/stories/input/Select.stories.svelte b/v2/pink-sb/src/stories/input/Select.stories.svelte
index a3695071cd..837936ac40 100644
--- a/v2/pink-sb/src/stories/input/Select.stories.svelte
+++ b/v2/pink-sb/src/stories/input/Select.stories.svelte
@@ -64,6 +64,12 @@
 <Story name="Readonly" args={{ readonly: true, value: 'option2' }} />
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Helper" args={{ helper: 'This is a helper text.' }} />
+<Story
+    name="Longer helper"
+    args={{
+        helper: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nisi eveniet neque unde minima id'
+    }}
+/>
 <Story name="Helper - success" args={{ state: 'success', helper: 'This is a helper text.' }} />
 <Story name="Helper - warning" args={{ state: 'warning', helper: 'This is a helper text.' }} />
 <Story name="Helper - error" args={{ state: 'error', helper: 'This is a helper text.' }} />

From f4a38f3808891d99f06ed65e739d16e1eabf9ba8 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 3 Feb 2025 19:45:42 +0530
Subject: [PATCH 2/4] address comment.

---
 v2/pink-sb/src/lib/input/Helper.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/v2/pink-sb/src/lib/input/Helper.svelte b/v2/pink-sb/src/lib/input/Helper.svelte
index bbe69dfbf7..8d74b5a8a9 100644
--- a/v2/pink-sb/src/lib/input/Helper.svelte
+++ b/v2/pink-sb/src/lib/input/Helper.svelte
@@ -29,14 +29,15 @@
     class:warning={state === 'warning'}
     class:error={state === 'error'}
 >
-    <Icon icon={resolveIcon(state)} size="s" />
+    <span class="icon-holder">
+        <Icon icon={resolveIcon(state)} size="s" />
+    </span>
     <slot />
 </div>
 
 <style lang="scss">
     div {
         display: flex;
-        line-height: 120%;
         align-items: start;
         gap: var(--space-3);
         color: var(--color-fgcolor-neutral-secondary);
@@ -50,5 +51,10 @@
         &.error {
             color: var(--color-fgcolor-error);
         }
+
+        & .icon-holder :global(i) {
+            // text's line-height: 140%; /* 19.6px */
+            --p-icon-size: 19.6px !important;
+        }
     }
 </style>

From f6ef8f943de102f7a492a91c3a0eaeaadc7cac2f Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 7 Feb 2025 09:24:49 +0530
Subject: [PATCH 3/4] update: better icon targeting.

---
 v2/pink-sb/src/lib/input/Helper.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/v2/pink-sb/src/lib/input/Helper.svelte b/v2/pink-sb/src/lib/input/Helper.svelte
index 8d74b5a8a9..066396b601 100644
--- a/v2/pink-sb/src/lib/input/Helper.svelte
+++ b/v2/pink-sb/src/lib/input/Helper.svelte
@@ -29,7 +29,7 @@
     class:warning={state === 'warning'}
     class:error={state === 'error'}
 >
-    <span class="icon-holder">
+    <span>
         <Icon icon={resolveIcon(state)} size="s" />
     </span>
     <slot />
@@ -52,7 +52,7 @@
             color: var(--color-fgcolor-error);
         }
 
-        & .icon-holder :global(i) {
+        & span :global(i) {
             // text's line-height: 140%; /* 19.6px */
             --p-icon-size: 19.6px !important;
         }

From 8df26187537756226815a959d90d19884e211e44 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 18 Feb 2025 10:08:56 +0530
Subject: [PATCH 4/4] address comment.

---
 v2/pink-sb/src/lib/Icon.svelte         |  1 +
 v2/pink-sb/src/lib/input/Helper.svelte | 10 ++--------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/v2/pink-sb/src/lib/Icon.svelte b/v2/pink-sb/src/lib/Icon.svelte
index e950ebe619..10dbb16289 100644
--- a/v2/pink-sb/src/lib/Icon.svelte
+++ b/v2/pink-sb/src/lib/Icon.svelte
@@ -11,6 +11,7 @@
     class:s={size === 's'}
     class:l={size === 'l'}
     style:--icon-fill={`var(${color})`}
+    {...$$restProps}
 >
     <svelte:component this={icon} />
 </i>
diff --git a/v2/pink-sb/src/lib/input/Helper.svelte b/v2/pink-sb/src/lib/input/Helper.svelte
index 066396b601..0528b6da02 100644
--- a/v2/pink-sb/src/lib/input/Helper.svelte
+++ b/v2/pink-sb/src/lib/input/Helper.svelte
@@ -29,9 +29,8 @@
     class:warning={state === 'warning'}
     class:error={state === 'error'}
 >
-    <span>
-        <Icon icon={resolveIcon(state)} size="s" />
-    </span>
+    <Icon icon={resolveIcon(state)} size="s" style="--p-icon-size: 19.6px" />
+
     <slot />
 </div>
 
@@ -51,10 +50,5 @@
         &.error {
             color: var(--color-fgcolor-error);
         }
-
-        & span :global(i) {
-            // text's line-height: 140%; /* 19.6px */
-            --p-icon-size: 19.6px !important;
-        }
     }
 </style>