feat: form fields block page (#2787)

* feat: form fields block

* fix: lint fixes

* fix: lint fixes

* fix: cr fixes

* fix: cr fixes

* fix: cr fixes

* fix: cr fixes

* fix: cr fixes

* fix: cr fixes

* fix: cr fixes

* fix: cr fixes

.changeset/funny-seahorses-work.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': patch
+'@storefront-ui/vue': patch
+---
+
+SfSelect wrapper as span tag

.changeset/violet-paws-press.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': minor
+'@storefront-ui/vue': minor
+---
+
+add Email icon

apps/docs/components/blocks/FormFields.md

@@ -0,0 +1,23 @@
+---
+layout: DefaultLayout
+hideToc: true
+hideBreadcrumbs: true
+description: The Form Fields block is designed to showcase the usage of various input types, such as Input, Checkbox, Radio, Select, SelectDropdown, Combobox, Button, etc., using a single form as an example. It demonstrates the application of required fields, indicated by an asterisk (*) next to the label, and handles error validation.
+---
+# Form fields
+
+{{ $frontmatter.description }}
+
+Forms can be presented as dedicated pages or integrated within modals, cards, or side panels, with the form's context influencing its layout and vertical spacing. Typically, dedicated-page forms can accommodate greater complexity. This block use a responsive grid to drive layout decisions, ensuring optimal display across different screen sizes and devices. 
+
+For further customization of layouts, we recommend referring to our documentation on Modal and Drawer pages. 
+
+<Showcase showcase-name="FormFields/FormFieldsRequired" style="min-height:600px">
+
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx#source
+<!-- end react -->
+</Showcase>