fix: 🐛 input updates

addons/rose/addon/components/rose/form/input/index.hbs

@@ -34,7 +34,7 @@
       </Rose::Form::HelperText>
     {{/if}}
 
-    <div class="rose-input-wrapper">
+    <div class="rose-input-wrapper {{if @icon 'icon'}}">
       {{#if @icon}}
         <Rose::Icon
           @name={{@icon}}

addons/rose/addon/components/rose/form/input/index.stories.mdx

@@ -53,6 +53,7 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
         @error={{false}}
         @disabled={{disabled}}
         readonly={{read-only}}
+        @icon={{icon}}
         />
     `,
     context: {
@@ -71,15 +72,60 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
       helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
       'read-only': boolean('readonly', false),
-      icon: select('icon', {
-        'flight-icons/svg/search-16': 'flight-icons/svg/search-16',
-      },
-        'flight-icons/svg/search-16
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/search-16': 'flight-icons/svg/search-16',
+        },
+        'flight-icons/svg/search-16',
       ),
     }
   }}</Story>
 </Preview>
 
+<Preview>
+  <Story name="Basic Input with Icon">{{
+    template: hbs`
+      <Rose::Form::Input
+        @type={{type}}
+        @name={{type}}
+        @label={{label}}
+        @helperText={{helperText}}
+        @error={{false}}
+        @disabled={{disabled}}
+        readonly={{read-only}}
+        @icon={{icon}}
+        />
+    `,
+    context: {
+      type: select(
+        'type',
+        {
+          text: 'text',
+          email: 'email',
+          number: 'number',
+          password: 'password',
+        },
+        'text'
+      ),
+      label: text('label', 'Label'),
+      helperText: text('helperText', 'Helper text'),
+      disabled: boolean('disabled', false),
+      'read-only': boolean('readonly', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+           'flight-icons/svg/search-16': 'flight-icons/svg/search-16',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>
+
+
 <Preview>
   <Story name="Field with Errors">{{
     template: hbs`

addons/rose/addon/styles/rose/components/form/_input.scss

@@ -5,7 +5,7 @@
   margin-bottom: sizing.rems(m);
 }
 
-.rose-input-wrapper {
+.rose-input-wrapper.icon {
   position: relative;
   .rose-icon {
     position: absolute;