Fix/16207/text component storybook (#16214)

ui/components/component-library/text/README.mdx

@@ -269,6 +269,7 @@ import { Text } from '../../ui/component-library/text';
 <Text as="p">p</Text>
 <Text as="span">span</Text>
 <Text as="strong">strong</Text>
+<Text as="input" placeholder="input"></Text>
 ```
 
 Renders the html:
@@ -288,6 +289,7 @@ Renders the html:
 <p>p</p>
 <span>span</span>
 <strong>strong</strong>
+<input placeholder="input" />
 ```
 
 ### Box Props

ui/components/component-library/text/text.stories.js

@@ -259,12 +259,17 @@ export const Ellipsis = (args) => (
 
 export const As = (args) => (
   <>
-    {Object.values(ValidTags).map((tag) => (
-      <div key={tag}>
-        <Text {...args} as={tag}>
-          {tag}
-        </Text>
-      </div>
-    ))}
+    {ValidTags.map((tag) => {
+      if (tag === 'input') {
+        return <Text key={tag} {...args} as={tag} placeholder={tag} />;
+      }
+      return (
+        <div key={tag}>
+          <Text {...args} as={tag}>
+            {tag}
+          </Text>
+        </div>
+      );
+    })}
   </>
 );