npm - @viasat/beam-web-components - Versions diffs - 2.55.0 → 2.55.2 - Mend

@viasat/beam-web-components 2.55.0 → 2.55.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/custom-elements.json +1378 -1378
package/package.json +6 -6
package/vscode.html-custom-data.json +244 -244

package/custom-elements.json CHANGED Viewed

@@ -294,147 +294,273 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Badge/Badge.ts",
+      "path": "libs/web-components/src/lib/Alert/Alert.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`bm-badge`\n\n### Attributes:\n- **appearance**  - Specify the appearance of the Badge\n- **theme**  - Theme of the Badge\n- **size**  - Specify the size of the Badge\n- **emphasis**  - Specify the emphasis of the Badge\n- **hideIcon**  - Hides Badge icon",
-          "name": "BmBadge",
+          "description": "`bm-alert`\n\n### Attributes:\n- **heading**  - Specify the heading text for Alert\n- **body**  - Specify the body text for Alert\n- **size**  - Specify the size of the Alert\n- **fullWidth**  - Specify if the Alert has no border radius\n- **theme**  - Specify the theme of the Alert. By default it inherits the theme from the parent\n- **appearance**  - Specify the appearance of the Alert\n- **hidden**  - Specify if the Alert is hidden\n- **hideIcon**  - Specify if the icon displays on the Alert\n- **dismissible**  - Specify if the Alert can be dismissed\n- **disableAutoFocus**  - Prevent autofocus on show\n- **disableCloseOnEscape**  - Prevent Escape from closing",
+          "name": "BmAlert",
           "slots": [
             {
-              "description": "Provide text for the Badge",
-              "name": "default"
+              "description": "Specify a different icon for the Alert",
+              "name": "icon"
             },
             {
-              "description": "Specify a different icon for the Badge",
-              "name": "icon"
+              "description": "Specify the heading text for Alert or pass the `heading` attribute to set the heading",
+              "name": "heading"
+            },
+            {
+              "description": "Specify the body text for Alert or pass the `body` attribute to set the body",
+              "name": "body"
+            },
+            {
+              "description": "Specify if actions display on the Alert",
+              "name": "actions"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "appearance",
+              "name": "heading",
               "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+                "text": "string | undefined"
               },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the Badge",
-              "attribute": "appearance"
+              "description": "Specify the heading text for Alert",
+              "attribute": "heading"
             },
             {
               "kind": "field",
-              "name": "theme",
+              "name": "body",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Theme of the Badge",
-              "attribute": "theme"
+              "description": "Specify the body text for Alert",
+              "attribute": "body"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'sm'",
-              "description": "Specify the size of the Badge",
+              "description": "Specify the size of the Alert",
               "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "emphasis",
+              "name": "fullWidth",
               "type": {
-                "text": "'strong' | 'medium' | 'subtle'"
+                "text": "boolean"
               },
-              "default": "'strong'",
-              "description": "Specify the emphasis of the Badge",
-              "attribute": "emphasis"
+              "default": "false",
+              "description": "Specify if the Alert has no border radius",
+              "attribute": "fullWidth"
+            },
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the Alert. By default it inherits the theme from the parent",
+              "attribute": "theme"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+              },
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the Alert",
+              "attribute": "appearance"
+            },
+            {
+              "kind": "field",
+              "name": "hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the Alert is hidden",
+              "attribute": "hidden"
             },
             {
               "kind": "field",
               "name": "hideIcon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Hides Badge icon",
+              "default": "false",
+              "description": "Specify if the icon displays on the Alert",
               "attribute": "hideIcon"
+            },
+            {
+              "kind": "field",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the Alert can be dismissed",
+              "attribute": "dismissible"
+            },
+            {
+              "kind": "field",
+              "name": "disableAutoFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent autofocus on show",
+              "attribute": "disableAutoFocus"
+            },
+            {
+              "kind": "field",
+              "name": "disableCloseOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent Escape from closing",
+              "attribute": "disableCloseOnEscape"
+            }
+          ],
+          "events": [
+            {
+              "description": "Dispatched when the Alert has been dismissed",
+              "name": "bm-dismiss"
             }
           ],
           "attributes": [
             {
-              "name": "appearance",
+              "name": "heading",
               "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+                "text": "string | undefined"
               },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the Badge",
-              "fieldName": "appearance"
+              "description": "Specify the heading text for Alert",
+              "fieldName": "heading"
             },
             {
-              "name": "theme",
+              "name": "body",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Theme of the Badge",
-              "fieldName": "theme"
+              "description": "Specify the body text for Alert",
+              "fieldName": "body"
             },
             {
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'sm'",
-              "description": "Specify the size of the Badge",
+              "description": "Specify the size of the Alert",
               "fieldName": "size"
             },
             {
-              "name": "emphasis",
+              "name": "fullWidth",
               "type": {
-                "text": "'strong' | 'medium' | 'subtle'"
+                "text": "boolean"
               },
-              "default": "'strong'",
-              "description": "Specify the emphasis of the Badge",
-              "fieldName": "emphasis"
+              "default": "false",
+              "description": "Specify if the Alert has no border radius",
+              "fieldName": "fullWidth"
+            },
+            {
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the Alert. By default it inherits the theme from the parent",
+              "fieldName": "theme"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+              },
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the Alert",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the Alert is hidden",
+              "fieldName": "hidden"
             },
             {
               "name": "hideIcon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Hides Badge icon",
+              "default": "false",
+              "description": "Specify if the icon displays on the Alert",
               "fieldName": "hideIcon"
+            },
+            {
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the Alert can be dismissed",
+              "fieldName": "dismissible"
+            },
+            {
+              "name": "disableAutoFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent autofocus on show",
+              "fieldName": "disableAutoFocus"
+            },
+            {
+              "name": "disableCloseOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent Escape from closing",
+              "fieldName": "disableCloseOnEscape"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-badge",
+          "tagName": "bm-alert",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmBadge",
+          "name": "BmAlert",
           "declaration": {
-            "name": "BmBadge",
-            "module": "libs/web-components/src/lib/Badge/Badge.ts"
+            "name": "BmAlert",
+            "module": "libs/web-components/src/lib/Alert/Alert.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-badge",
+          "name": "bm-alert",
           "declaration": {
-            "name": "BmBadge",
-            "module": "libs/web-components/src/lib/Badge/Badge.ts"
+            "name": "BmAlert",
+            "module": "libs/web-components/src/lib/Alert/Alert.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Badge/index.ts",
+      "path": "libs/web-components/src/lib/Alert/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -442,35 +568,30 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Badge"
+            "package": "./Alert"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts",
+      "path": "libs/web-components/src/lib/Badge/Badge.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`bm-badge-dot`\n\n### Attributes:\n- **theme**  - Specify the theme of the BadgeDot. By default it inherits the theme from the parent\n- **appearance**  - Specify the appearance of the BadgeDot\n- **emphasis**  - Specify the emphasis of the BadgeDot\n- **overrideDotColor**  - Overrides default dot color",
-          "name": "BmBadgeDot",
+          "description": "`bm-badge`\n\n### Attributes:\n- **appearance**  - Specify the appearance of the Badge\n- **theme**  - Theme of the Badge\n- **size**  - Specify the size of the Badge\n- **emphasis**  - Specify the emphasis of the Badge\n- **hideIcon**  - Hides Badge icon",
+          "name": "BmBadge",
           "slots": [
             {
-              "description": "Provide text for the BadgeDot",
+              "description": "Provide text for the Badge",
               "name": "default"
+            },
+            {
+              "description": "Specify a different icon for the Badge",
+              "name": "icon"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
-              "attribute": "theme"
-            },
             {
               "kind": "field",
               "name": "appearance",
@@ -478,14 +599,174 @@
                 "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
               },
               "default": "'infoPrimary'",
-              "description": "Specify the appearance of the BadgeDot",
+              "description": "Specify the appearance of the Badge",
               "attribute": "appearance"
             },
             {
               "kind": "field",
-              "name": "emphasis",
+              "name": "theme",
               "type": {
-                "text": "'strong' | 'subtle'"
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Theme of the Badge",
+              "attribute": "theme"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | undefined"
+              },
+              "default": "'sm'",
+              "description": "Specify the size of the Badge",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "emphasis",
+              "type": {
+                "text": "'strong' | 'medium' | 'subtle'"
+              },
+              "default": "'strong'",
+              "description": "Specify the emphasis of the Badge",
+              "attribute": "emphasis"
+            },
+            {
+              "kind": "field",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Hides Badge icon",
+              "attribute": "hideIcon"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "appearance",
+              "type": {
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+              },
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the Badge",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Theme of the Badge",
+              "fieldName": "theme"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | undefined"
+              },
+              "default": "'sm'",
+              "description": "Specify the size of the Badge",
+              "fieldName": "size"
+            },
+            {
+              "name": "emphasis",
+              "type": {
+                "text": "'strong' | 'medium' | 'subtle'"
+              },
+              "default": "'strong'",
+              "description": "Specify the emphasis of the Badge",
+              "fieldName": "emphasis"
+            },
+            {
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Hides Badge icon",
+              "fieldName": "hideIcon"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bm-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BmBadge",
+          "declaration": {
+            "name": "BmBadge",
+            "module": "libs/web-components/src/lib/Badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bm-badge",
+          "declaration": {
+            "name": "BmBadge",
+            "module": "libs/web-components/src/lib/Badge/Badge.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/Badge/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./Badge"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/BadgeDot/BadgeDot.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`bm-badge-dot`\n\n### Attributes:\n- **theme**  - Specify the theme of the BadgeDot. By default it inherits the theme from the parent\n- **appearance**  - Specify the appearance of the BadgeDot\n- **emphasis**  - Specify the emphasis of the BadgeDot\n- **overrideDotColor**  - Overrides default dot color",
+          "name": "BmBadgeDot",
+          "slots": [
+            {
+              "description": "Provide text for the BadgeDot",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent",
+              "attribute": "theme"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+              },
+              "default": "'infoPrimary'",
+              "description": "Specify the appearance of the BadgeDot",
+              "attribute": "appearance"
+            },
+            {
+              "kind": "field",
+              "name": "emphasis",
+              "type": {
+                "text": "'strong' | 'subtle'"
               },
               "default": "'strong'",
               "description": "Specify the emphasis of the BadgeDot",
@@ -581,511 +862,111 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Box/Box.ts",
+      "path": "libs/web-components/src/lib/Avatar/Avatar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`bm-box`\n\n### Attributes:\n- **backgroundColor**  - Specify the background color of a Box\n- **borderColor**  - Specify the border color of a Box\n- **borderWidth**  - Specify the border width of a Box\n- **borderRadius**  - Specify the border radius of a Box\n- **px**  - Specify before and after padding of a Box\n- **py**  - Specify top and bottom padding of a Box\n- **pTop**  - Specify top padding of a Box\n- **pBottom**  - Specify bottom padding of a Box\n- **pBefore**  - Specify before padding of a Box\n- **pAfter**  - Specify after padding of a Box\n- **mx**  - Specify before and after margin of a Box\n- **my**  - Specify top and bottom margin of a Box\n- **mTop**  - Specify top margin of a Box\n- **mBottom**  - Specify bottom margin of a Box\n- **mBefore**  - Specify before margin of a Box\n- **mAfter**  - Specify after margin of a Box\n- **m**  - Specify all margin\n- **p**  - Specify all padding\n- **gap**  - Specify gap between child elements\n- **shadow**  - Specify if a Box has a shadow",
-          "name": "BmBox",
+          "description": "`bm-avatar`\n\n### Attributes:\n- **appearance**  - Specify the appearance of the Avatar\n- **name**  - Specify a name to display initials in the Avatar\n- **src**  - Pass an image to the Avatar\n- **alt**  - Specify alt for image\n- **size**  - Specify the size of the Avatar\n- **disabled**  - Specify if the Avatar is disabled\n- **shape**  - Specify the shape of the Avatar\n- **isInteractive**  - If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer\n- **isFocusable**  - If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable\n- **withBorder** ",
+          "name": "BmAvatar",
           "slots": [
             {
-              "description": "Provide content for the Box",
-              "name": "default"
+              "description": "Customize the default icon",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "backgroundColor",
+              "name": "appearance",
               "type": {
-                "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse' | undefined"
+                "text": "'accent' | 'neutral' | undefined"
               },
-              "description": "Specify the background color of a Box",
-              "attribute": "backgroundColor"
+              "default": "'neutral'",
+              "description": "Specify the appearance of the Avatar",
+              "attribute": "appearance"
             },
             {
               "kind": "field",
-              "name": "borderColor",
+              "name": "name",
               "type": {
-                "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'strong' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'focus' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Specify the border color of a Box",
-              "attribute": "borderColor"
+              "description": "Specify a name to display initials in the Avatar",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "borderWidth",
+              "name": "src",
               "type": {
-                "text": "'md' | 'lg' | 'xl' | 'none' | 'divider' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Specify the border width of a Box",
-              "attribute": "borderWidth"
+              "description": "Pass an image to the Avatar",
+              "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "borderRadius",
+              "name": "alt",
               "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Specify the border radius of a Box",
-              "attribute": "borderRadius"
+              "description": "Specify alt for image",
+              "attribute": "alt"
             },
             {
               "kind": "field",
-              "name": "px",
+              "name": "size",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined"
               },
-              "description": "Specify before and after padding of a Box",
-              "attribute": "px"
+              "default": "'md'",
+              "description": "Specify the size of the Avatar",
+              "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "py",
+              "name": "disabled",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Specify top and bottom padding of a Box",
-              "attribute": "py"
+              "default": "false",
+              "description": "Specify if the Avatar is disabled",
+              "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "pTop",
+              "name": "shape",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "'circle' | 'square' | undefined"
               },
-              "description": "Specify top padding of a Box",
-              "attribute": "pTop"
+              "default": "'circle'",
+              "description": "Specify the shape of the Avatar",
+              "attribute": "shape"
             },
             {
               "kind": "field",
-              "name": "pBottom",
+              "name": "isInteractive",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "boolean"
               },
-              "description": "Specify bottom padding of a Box",
-              "attribute": "pBottom"
+              "default": "false",
+              "description": "If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer",
+              "attribute": "isInteractive"
             },
             {
               "kind": "field",
-              "name": "pBefore",
+              "name": "isFocusable",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "boolean"
               },
-              "description": "Specify before padding of a Box",
-              "attribute": "pBefore"
+              "default": "false",
+              "description": "If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable",
+              "attribute": "isFocusable"
             },
             {
               "kind": "field",
-              "name": "pAfter",
+              "name": "withBorder",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify after padding of a Box",
-              "attribute": "pAfter"
-            },
-            {
-              "kind": "field",
-              "name": "mx",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify before and after margin of a Box",
-              "attribute": "mx"
-            },
-            {
-              "kind": "field",
-              "name": "my",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify top and bottom margin of a Box",
-              "attribute": "my"
-            },
-            {
-              "kind": "field",
-              "name": "mTop",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify top margin of a Box",
-              "attribute": "mTop"
-            },
-            {
-              "kind": "field",
-              "name": "mBottom",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify bottom margin of a Box",
-              "attribute": "mBottom"
-            },
-            {
-              "kind": "field",
-              "name": "mBefore",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify before margin of a Box",
-              "attribute": "mBefore"
-            },
-            {
-              "kind": "field",
-              "name": "mAfter",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify after margin of a Box",
-              "attribute": "mAfter"
-            },
-            {
-              "kind": "field",
-              "name": "m",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify all margin",
-              "attribute": "m"
-            },
-            {
-              "kind": "field",
-              "name": "p",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify all padding",
-              "attribute": "p"
-            },
-            {
-              "kind": "field",
-              "name": "gap",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify gap between child elements",
-              "attribute": "gap"
-            },
-            {
-              "kind": "field",
-              "name": "shadow",
-              "type": {
-                "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
-              },
-              "description": "Specify if a Box has a shadow",
-              "attribute": "shadow"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "backgroundColor",
-              "type": {
-                "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse' | undefined"
-              },
-              "description": "Specify the background color of a Box",
-              "fieldName": "backgroundColor"
-            },
-            {
-              "name": "borderColor",
-              "type": {
-                "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'strong' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'focus' | undefined"
-              },
-              "description": "Specify the border color of a Box",
-              "fieldName": "borderColor"
-            },
-            {
-              "name": "borderWidth",
-              "type": {
-                "text": "'md' | 'lg' | 'xl' | 'none' | 'divider' | undefined"
-              },
-              "description": "Specify the border width of a Box",
-              "fieldName": "borderWidth"
-            },
-            {
-              "name": "borderRadius",
-              "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round' | undefined"
-              },
-              "description": "Specify the border radius of a Box",
-              "fieldName": "borderRadius"
-            },
-            {
-              "name": "px",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify before and after padding of a Box",
-              "fieldName": "px"
-            },
-            {
-              "name": "py",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify top and bottom padding of a Box",
-              "fieldName": "py"
-            },
-            {
-              "name": "pTop",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify top padding of a Box",
-              "fieldName": "pTop"
-            },
-            {
-              "name": "pBottom",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify bottom padding of a Box",
-              "fieldName": "pBottom"
-            },
-            {
-              "name": "pBefore",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify before padding of a Box",
-              "fieldName": "pBefore"
-            },
-            {
-              "name": "pAfter",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify after padding of a Box",
-              "fieldName": "pAfter"
-            },
-            {
-              "name": "mx",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify before and after margin of a Box",
-              "fieldName": "mx"
-            },
-            {
-              "name": "my",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify top and bottom margin of a Box",
-              "fieldName": "my"
-            },
-            {
-              "name": "mTop",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify top margin of a Box",
-              "fieldName": "mTop"
-            },
-            {
-              "name": "mBottom",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify bottom margin of a Box",
-              "fieldName": "mBottom"
-            },
-            {
-              "name": "mBefore",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify before margin of a Box",
-              "fieldName": "mBefore"
-            },
-            {
-              "name": "mAfter",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify after margin of a Box",
-              "fieldName": "mAfter"
-            },
-            {
-              "name": "m",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify all margin",
-              "fieldName": "m"
-            },
-            {
-              "name": "p",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify all padding",
-              "fieldName": "p"
-            },
-            {
-              "name": "gap",
-              "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
-              },
-              "description": "Specify gap between child elements",
-              "fieldName": "gap"
-            },
-            {
-              "name": "shadow",
-              "type": {
-                "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
-              },
-              "description": "Specify if a Box has a shadow",
-              "fieldName": "shadow"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "bm-box",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BmBox",
-          "declaration": {
-            "name": "BmBox",
-            "module": "libs/web-components/src/lib/Box/Box.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bm-box",
-          "declaration": {
-            "name": "BmBox",
-            "module": "libs/web-components/src/lib/Box/Box.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Box/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./Box"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Avatar/Avatar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`bm-avatar`\n\n### Attributes:\n- **appearance**  - Specify the appearance of the Avatar\n- **name**  - Specify a name to display initials in the Avatar\n- **src**  - Pass an image to the Avatar\n- **alt**  - Specify alt for image\n- **size**  - Specify the size of the Avatar\n- **disabled**  - Specify if the Avatar is disabled\n- **shape**  - Specify the shape of the Avatar\n- **isInteractive**  - If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer\n- **isFocusable**  - If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable\n- **withBorder** ",
-          "name": "BmAvatar",
-          "slots": [
-            {
-              "description": "Customize the default icon",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "'accent' | 'neutral' | undefined"
-              },
-              "default": "'neutral'",
-              "description": "Specify the appearance of the Avatar",
-              "attribute": "appearance"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify a name to display initials in the Avatar",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Pass an image to the Avatar",
-              "attribute": "src"
-            },
-            {
-              "kind": "field",
-              "name": "alt",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify alt for image",
-              "attribute": "alt"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined"
-              },
-              "default": "'md'",
-              "description": "Specify the size of the Avatar",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "Specify if the Avatar is disabled",
-              "attribute": "disabled"
-            },
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'square' | undefined"
-              },
-              "default": "'circle'",
-              "description": "Specify the shape of the Avatar",
-              "attribute": "shape"
-            },
-            {
-              "kind": "field",
-              "name": "isInteractive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If Avatar is interactive, use `isInteractive` to make the Avatar focusable and show state layer",
-              "attribute": "isInteractive"
-            },
-            {
-              "kind": "field",
-              "name": "isFocusable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If Avatar is not interactive and Tooltip is provided, use `isFocusable` to make the Avatar focusable",
-              "attribute": "isFocusable"
-            },
-            {
-              "kind": "field",
-              "name": "withBorder",
-              "type": {
-                "text": "boolean"
+                "text": "boolean"
               },
               "default": "false",
               "attribute": "withBorder"
@@ -1373,273 +1254,392 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Alert/Alert.ts",
+      "path": "libs/web-components/src/lib/Box/Box.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`bm-alert`\n\n### Attributes:\n- **heading**  - Specify the heading text for Alert\n- **body**  - Specify the body text for Alert\n- **size**  - Specify the size of the Alert\n- **fullWidth**  - Specify if the Alert has no border radius\n- **theme**  - Specify the theme of the Alert. By default it inherits the theme from the parent\n- **appearance**  - Specify the appearance of the Alert\n- **hidden**  - Specify if the Alert is hidden\n- **hideIcon**  - Specify if the icon displays on the Alert\n- **dismissible**  - Specify if the Alert can be dismissed\n- **disableAutoFocus**  - Prevent autofocus on show\n- **disableCloseOnEscape**  - Prevent Escape from closing",
-          "name": "BmAlert",
+          "description": "`bm-box`\n\n### Attributes:\n- **backgroundColor**  - Specify the background color of a Box\n- **borderColor**  - Specify the border color of a Box\n- **borderWidth**  - Specify the border width of a Box\n- **borderRadius**  - Specify the border radius of a Box\n- **px**  - Specify before and after padding of a Box\n- **py**  - Specify top and bottom padding of a Box\n- **pTop**  - Specify top padding of a Box\n- **pBottom**  - Specify bottom padding of a Box\n- **pBefore**  - Specify before padding of a Box\n- **pAfter**  - Specify after padding of a Box\n- **mx**  - Specify before and after margin of a Box\n- **my**  - Specify top and bottom margin of a Box\n- **mTop**  - Specify top margin of a Box\n- **mBottom**  - Specify bottom margin of a Box\n- **mBefore**  - Specify before margin of a Box\n- **mAfter**  - Specify after margin of a Box\n- **m**  - Specify all margin\n- **p**  - Specify all padding\n- **gap**  - Specify gap between child elements\n- **shadow**  - Specify if a Box has a shadow",
+          "name": "BmBox",
           "slots": [
             {
-              "description": "Specify a different icon for the Alert",
-              "name": "icon"
+              "description": "Provide content for the Box",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "backgroundColor",
+              "type": {
+                "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse' | undefined"
+              },
+              "description": "Specify the background color of a Box",
+              "attribute": "backgroundColor"
+            },
+            {
+              "kind": "field",
+              "name": "borderColor",
+              "type": {
+                "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'strong' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'focus' | undefined"
+              },
+              "description": "Specify the border color of a Box",
+              "attribute": "borderColor"
+            },
+            {
+              "kind": "field",
+              "name": "borderWidth",
+              "type": {
+                "text": "'md' | 'lg' | 'xl' | 'none' | 'divider' | undefined"
+              },
+              "description": "Specify the border width of a Box",
+              "attribute": "borderWidth"
+            },
+            {
+              "kind": "field",
+              "name": "borderRadius",
+              "type": {
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round' | undefined"
+              },
+              "description": "Specify the border radius of a Box",
+              "attribute": "borderRadius"
+            },
+            {
+              "kind": "field",
+              "name": "px",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify before and after padding of a Box",
+              "attribute": "px"
             },
             {
-              "description": "Specify the heading text for Alert or pass the `heading` attribute to set the heading",
-              "name": "heading"
+              "kind": "field",
+              "name": "py",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify top and bottom padding of a Box",
+              "attribute": "py"
             },
             {
-              "description": "Specify the body text for Alert or pass the `body` attribute to set the body",
-              "name": "body"
+              "kind": "field",
+              "name": "pTop",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify top padding of a Box",
+              "attribute": "pTop"
             },
             {
-              "description": "Specify if actions display on the Alert",
-              "name": "actions"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "pBottom",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify bottom padding of a Box",
+              "attribute": "pBottom"
+            },
             {
               "kind": "field",
-              "name": "heading",
+              "name": "pBefore",
               "type": {
-                "text": "string | undefined"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "description": "Specify the heading text for Alert",
-              "attribute": "heading"
+              "description": "Specify before padding of a Box",
+              "attribute": "pBefore"
             },
             {
               "kind": "field",
-              "name": "body",
+              "name": "pAfter",
               "type": {
-                "text": "string | undefined"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "description": "Specify the body text for Alert",
-              "attribute": "body"
+              "description": "Specify after padding of a Box",
+              "attribute": "pAfter"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "mx",
               "type": {
-                "text": "'sm' | 'md'"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "'sm'",
-              "description": "Specify the size of the Alert",
-              "attribute": "size"
+              "description": "Specify before and after margin of a Box",
+              "attribute": "mx"
             },
             {
               "kind": "field",
-              "name": "fullWidth",
+              "name": "my",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Specify if the Alert has no border radius",
-              "attribute": "fullWidth"
+              "description": "Specify top and bottom margin of a Box",
+              "attribute": "my"
             },
             {
               "kind": "field",
-              "name": "theme",
+              "name": "mTop",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "description": "Specify the theme of the Alert. By default it inherits the theme from the parent",
-              "attribute": "theme"
+              "description": "Specify top margin of a Box",
+              "attribute": "mTop"
             },
             {
               "kind": "field",
-              "name": "appearance",
+              "name": "mBottom",
               "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the Alert",
-              "attribute": "appearance"
+              "description": "Specify bottom margin of a Box",
+              "attribute": "mBottom"
             },
             {
               "kind": "field",
-              "name": "hidden",
+              "name": "mBefore",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Specify if the Alert is hidden",
-              "attribute": "hidden"
+              "description": "Specify before margin of a Box",
+              "attribute": "mBefore"
             },
             {
               "kind": "field",
-              "name": "hideIcon",
+              "name": "mAfter",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Specify if the icon displays on the Alert",
-              "attribute": "hideIcon"
+              "description": "Specify after margin of a Box",
+              "attribute": "mAfter"
             },
             {
               "kind": "field",
-              "name": "dismissible",
+              "name": "m",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Specify if the Alert can be dismissed",
-              "attribute": "dismissible"
+              "description": "Specify all margin",
+              "attribute": "m"
             },
             {
               "kind": "field",
-              "name": "disableAutoFocus",
+              "name": "p",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Prevent autofocus on show",
-              "attribute": "disableAutoFocus"
+              "description": "Specify all padding",
+              "attribute": "p"
             },
             {
               "kind": "field",
-              "name": "disableCloseOnEscape",
+              "name": "gap",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Prevent Escape from closing",
-              "attribute": "disableCloseOnEscape"
-            }
-          ],
-          "events": [
+              "description": "Specify gap between child elements",
+              "attribute": "gap"
+            },
             {
-              "description": "Dispatched when the Alert has been dismissed",
-              "name": "bm-dismiss"
+              "kind": "field",
+              "name": "shadow",
+              "type": {
+                "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
+              },
+              "description": "Specify if a Box has a shadow",
+              "attribute": "shadow"
             }
           ],
           "attributes": [
             {
-              "name": "heading",
+              "name": "backgroundColor",
               "type": {
-                "text": "string | undefined"
+                "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse' | undefined"
               },
-              "description": "Specify the heading text for Alert",
-              "fieldName": "heading"
+              "description": "Specify the background color of a Box",
+              "fieldName": "backgroundColor"
             },
             {
-              "name": "body",
+              "name": "borderColor",
               "type": {
-                "text": "string | undefined"
+                "text": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'strong' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'focus' | undefined"
               },
-              "description": "Specify the body text for Alert",
-              "fieldName": "body"
+              "description": "Specify the border color of a Box",
+              "fieldName": "borderColor"
             },
             {
-              "name": "size",
+              "name": "borderWidth",
               "type": {
-                "text": "'sm' | 'md'"
+                "text": "'md' | 'lg' | 'xl' | 'none' | 'divider' | undefined"
               },
-              "default": "'sm'",
-              "description": "Specify the size of the Alert",
-              "fieldName": "size"
+              "description": "Specify the border width of a Box",
+              "fieldName": "borderWidth"
             },
             {
-              "name": "fullWidth",
+              "name": "borderRadius",
               "type": {
-                "text": "boolean"
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round' | undefined"
               },
-              "default": "false",
-              "description": "Specify if the Alert has no border radius",
-              "fieldName": "fullWidth"
+              "description": "Specify the border radius of a Box",
+              "fieldName": "borderRadius"
             },
             {
-              "name": "theme",
+              "name": "px",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify before and after padding of a Box",
+              "fieldName": "px"
+            },
+            {
+              "name": "py",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify top and bottom padding of a Box",
+              "fieldName": "py"
+            },
+            {
+              "name": "pTop",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify top padding of a Box",
+              "fieldName": "pTop"
+            },
+            {
+              "name": "pBottom",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify bottom padding of a Box",
+              "fieldName": "pBottom"
+            },
+            {
+              "name": "pBefore",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify before padding of a Box",
+              "fieldName": "pBefore"
+            },
+            {
+              "name": "pAfter",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify after padding of a Box",
+              "fieldName": "pAfter"
+            },
+            {
+              "name": "mx",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify before and after margin of a Box",
+              "fieldName": "mx"
+            },
+            {
+              "name": "my",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify top and bottom margin of a Box",
+              "fieldName": "my"
+            },
+            {
+              "name": "mTop",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "description": "Specify top margin of a Box",
+              "fieldName": "mTop"
+            },
+            {
+              "name": "mBottom",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "description": "Specify the theme of the Alert. By default it inherits the theme from the parent",
-              "fieldName": "theme"
+              "description": "Specify bottom margin of a Box",
+              "fieldName": "mBottom"
             },
             {
-              "name": "appearance",
+              "name": "mBefore",
               "type": {
-                "text": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "'infoPrimary'",
-              "description": "Specify the appearance of the Alert",
-              "fieldName": "appearance"
+              "description": "Specify before margin of a Box",
+              "fieldName": "mBefore"
             },
             {
-              "name": "hidden",
+              "name": "mAfter",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Specify if the Alert is hidden",
-              "fieldName": "hidden"
+              "description": "Specify after margin of a Box",
+              "fieldName": "mAfter"
             },
             {
-              "name": "hideIcon",
+              "name": "m",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Specify if the icon displays on the Alert",
-              "fieldName": "hideIcon"
+              "description": "Specify all margin",
+              "fieldName": "m"
             },
             {
-              "name": "dismissible",
+              "name": "p",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Specify if the Alert can be dismissed",
-              "fieldName": "dismissible"
+              "description": "Specify all padding",
+              "fieldName": "p"
             },
             {
-              "name": "disableAutoFocus",
+              "name": "gap",
               "type": {
-                "text": "boolean"
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
               },
-              "default": "false",
-              "description": "Prevent autofocus on show",
-              "fieldName": "disableAutoFocus"
+              "description": "Specify gap between child elements",
+              "fieldName": "gap"
             },
             {
-              "name": "disableCloseOnEscape",
+              "name": "shadow",
               "type": {
-                "text": "boolean"
+                "text": "'sm' | 'md' | 'lg' | 'none' | 'overlay' | undefined"
               },
-              "default": "false",
-              "description": "Prevent Escape from closing",
-              "fieldName": "disableCloseOnEscape"
+              "description": "Specify if a Box has a shadow",
+              "fieldName": "shadow"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-alert",
+          "tagName": "bm-box",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmAlert",
+          "name": "BmBox",
           "declaration": {
-            "name": "BmAlert",
-            "module": "libs/web-components/src/lib/Alert/Alert.ts"
+            "name": "BmBox",
+            "module": "libs/web-components/src/lib/Box/Box.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-alert",
+          "name": "bm-box",
           "declaration": {
-            "name": "BmAlert",
-            "module": "libs/web-components/src/lib/Alert/Alert.ts"
+            "name": "BmBox",
+            "module": "libs/web-components/src/lib/Box/Box.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Alert/index.ts",
+      "path": "libs/web-components/src/lib/Box/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1647,7 +1647,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Alert"
+            "package": "./Box"
           }
         }
       ]
@@ -2218,98 +2218,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/CloseButton/CloseButton.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`bm-close-button`\n\n### Attributes:\n- **size**  - Specify the size of the CloseButton\n- **disabled**  - Specify if the CloseButton is disabled",
-          "name": "BmCloseButton",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
-              },
-              "default": "'md'",
-              "description": "Specify the size of the CloseButton",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the CloseButton is disabled",
-              "attribute": "disabled"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
-              },
-              "default": "'md'",
-              "description": "Specify the size of the CloseButton",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the CloseButton is disabled",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "bm-close-button",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BmCloseButton",
-          "declaration": {
-            "name": "BmCloseButton",
-            "module": "libs/web-components/src/lib/CloseButton/CloseButton.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bm-close-button",
-          "declaration": {
-            "name": "BmCloseButton",
-            "module": "libs/web-components/src/lib/CloseButton/CloseButton.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/CloseButton/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./CloseButton"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "libs/web-components/src/lib/Divider/Divider.ts",
@@ -2436,61 +2344,153 @@
               "fieldName": "borderStyle"
             },
             {
-              "name": "alignContent",
+              "name": "alignContent",
+              "type": {
+                "text": "'start' | 'end' | 'center'"
+              },
+              "default": "'center'",
+              "description": "Align content to the divider line",
+              "fieldName": "alignContent"
+            },
+            {
+              "name": "length",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "length"
+            },
+            {
+              "name": "inset",
+              "type": {
+                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+              },
+              "default": "'0'",
+              "description": "Add equal padding to each side of the Divider",
+              "fieldName": "inset"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bm-divider",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BmDivider",
+          "declaration": {
+            "name": "BmDivider",
+            "module": "libs/web-components/src/lib/Divider/Divider.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bm-divider",
+          "declaration": {
+            "name": "BmDivider",
+            "module": "libs/web-components/src/lib/Divider/Divider.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/Divider/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./Divider"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/CloseButton/CloseButton.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`bm-close-button`\n\n### Attributes:\n- **size**  - Specify the size of the CloseButton\n- **disabled**  - Specify if the CloseButton is disabled",
+          "name": "BmCloseButton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+              },
+              "default": "'md'",
+              "description": "Specify the size of the CloseButton",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "'start' | 'end' | 'center'"
+                "text": "boolean"
               },
-              "default": "'center'",
-              "description": "Align content to the divider line",
-              "fieldName": "alignContent"
-            },
+              "default": "false",
+              "description": "Specify if the CloseButton is disabled",
+              "attribute": "disabled"
+            }
+          ],
+          "attributes": [
             {
-              "name": "length",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
-              "fieldName": "length"
+              "default": "'md'",
+              "description": "Specify the size of the CloseButton",
+              "fieldName": "size"
             },
             {
-              "name": "inset",
+              "name": "disabled",
               "type": {
-                "text": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800' | undefined"
+                "text": "boolean"
               },
-              "default": "'0'",
-              "description": "Add equal padding to each side of the Divider",
-              "fieldName": "inset"
+              "default": "false",
+              "description": "Specify if the CloseButton is disabled",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-divider",
+          "tagName": "bm-close-button",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmDivider",
+          "name": "BmCloseButton",
           "declaration": {
-            "name": "BmDivider",
-            "module": "libs/web-components/src/lib/Divider/Divider.ts"
+            "name": "BmCloseButton",
+            "module": "libs/web-components/src/lib/CloseButton/CloseButton.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-divider",
+          "name": "bm-close-button",
           "declaration": {
-            "name": "BmDivider",
-            "module": "libs/web-components/src/lib/Divider/Divider.ts"
+            "name": "BmCloseButton",
+            "module": "libs/web-components/src/lib/CloseButton/CloseButton.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/Divider/index.ts",
+      "path": "libs/web-components/src/lib/CloseButton/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -2498,7 +2498,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Divider"
+            "package": "./CloseButton"
           }
         }
       ]
@@ -7898,145 +7898,49 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts",
+      "path": "libs/web-components/src/lib/wip/Form/Form.context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "bmFormInitials",
+          "type": {
+            "text": "BmFormContext"
+          },
+          "default": "{ required: false, disabled: false, readOnly: false, initialValues: {}, registerField: () => undefined, formBlurHandler: () => undefined, formChangeHandler: () => undefined, }"
+        },
+        {
+          "kind": "variable",
+          "name": "bmFormContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "bmFormInitials",
+          "declaration": {
+            "name": "bmFormInitials",
+            "module": "libs/web-components/src/lib/wip/Form/Form.context.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "bmFormContext",
+          "declaration": {
+            "name": "bmFormContext",
+            "module": "libs/web-components/src/lib/wip/Form/Form.context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/wip/Form/Form.decorator.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "### Attributes:\n- **required**  - Specify if NativeSelect is a required input\n- **readOnly**  - Specify if NativeSelect displays in a read-only state\n- **disabled**  - Specify if NativeSelect displays in a disabled state\n- **error**  - Specify error text and display error state of a NativeSelect\n- **fluid**  - Specify if NativeSelect is fluid\n- **size**  - Specify the size of NativeSelect\n- **width**  - Specify the width of NativeSelect\n- **ellipse**  - Specify if overflow displays ellipsis\n- **hideRequiredMarker**  - Specify if the NativeSelect displays with an asterisk\n- **theme**  - Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
-          "name": "BmNativeSelect",
-          "slots": [
-            {
-              "description": "Specify Options for NativeSelect",
-              "name": "slot"
-            },
-            {
-              "description": "Specify Label for NativeSelect",
-              "name": "label"
-            },
-            {
-              "description": "Specify HelperText for NativeSelect",
-              "name": "helper-text"
-            }
-          ],
+          "description": "### Attributes:\n- **id** \n- **name** \n- **value** \n- **validationRules** \n- **input-aria-label** ",
+          "name": "FormField",
           "members": [
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if NativeSelect is a required input",
-              "attribute": "required"
-            },
-            {
-              "kind": "field",
-              "name": "readOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if NativeSelect displays in a read-only state",
-              "attribute": "readOnly"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if NativeSelect displays in a disabled state",
-              "attribute": "disabled"
-            },
-            {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify error text and display error state of a NativeSelect",
-              "attribute": "error"
-            },
-            {
-              "kind": "field",
-              "name": "fluid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if NativeSelect is fluid",
-              "attribute": "fluid"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "defaultInputSize",
-              "description": "Specify the size of NativeSelect",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "width",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify the width of NativeSelect",
-              "attribute": "width"
-            },
-            {
-              "kind": "field",
-              "name": "ellipse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Specify if overflow displays ellipsis",
-              "attribute": "ellipse"
-            },
-            {
-              "kind": "field",
-              "name": "hideRequiredMarker",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the NativeSelect displays with an asterisk",
-              "attribute": "hideRequiredMarker"
-            },
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
-              },
-              "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
-              "attribute": "theme"
-            },
-            {
-              "kind": "method",
-              "name": "finalizeAssociatedCallback",
-              "return": {
-                "type": {
-                  "text": "FinalizeAssociatedResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -8044,11 +7948,7 @@
                 "text": "boolean"
               },
               "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "default": "true"
             },
             {
               "kind": "field",
@@ -8057,11 +7957,7 @@
                 "text": "string"
               },
               "default": "''",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "attribute": "id"
             },
             {
               "kind": "field",
@@ -8070,11 +7966,7 @@
                 "text": "string"
               },
               "default": "''",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "attribute": "name"
             },
             {
               "kind": "field",
@@ -8083,11 +7975,7 @@
                 "text": "string"
               },
               "default": "''",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "attribute": "value"
             },
             {
               "kind": "field",
@@ -8096,11 +7984,7 @@
                 "text": "Array<FormValidator>"
               },
               "default": "[]",
-              "attribute": "validationRules",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "attribute": "validationRules"
             },
             {
               "kind": "field",
@@ -8108,21 +7992,13 @@
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "input-aria-label",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "attribute": "input-aria-label"
             },
             {
               "kind": "field",
               "name": "formContext",
               "type": {
                 "text": "BmFormContext"
-              },
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
               }
             },
             {
@@ -8132,10 +8008,6 @@
                 "type": {
                   "text": "void"
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
               }
             },
             {
@@ -8145,112 +8017,34 @@
                 "type": {
                   "text": "void"
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
               }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if NativeSelect is a required input",
-              "fieldName": "required"
-            },
-            {
-              "name": "readOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if NativeSelect displays in a read-only state",
-              "fieldName": "readOnly"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if NativeSelect displays in a disabled state",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify error text and display error state of a NativeSelect",
-              "fieldName": "error"
-            },
-            {
-              "name": "fluid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if NativeSelect is fluid",
-              "fieldName": "fluid"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "defaultInputSize",
-              "description": "Specify the size of NativeSelect",
-              "fieldName": "size"
-            },
-            {
-              "name": "width",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specify the width of NativeSelect",
-              "fieldName": "width"
-            },
-            {
-              "name": "ellipse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Specify if overflow displays ellipsis",
-              "fieldName": "ellipse"
-            },
-            {
-              "name": "hideRequiredMarker",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if the NativeSelect displays with an asterisk",
-              "fieldName": "hideRequiredMarker"
-            },
-            {
-              "name": "theme",
-              "type": {
-                "text": "'light' | 'dark' | undefined"
+              "kind": "method",
+              "name": "finalizeAssociatedCallback",
+              "return": {
+                "type": {
+                  "text": "FinalizeAssociatedResult"
+                }
               },
-              "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
-              "fieldName": "theme"
-            },
+              "parameters": [
+                {
+                  "name": "ctxValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
             {
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "id",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "id"
             },
             {
               "name": "name",
@@ -8258,11 +8052,7 @@
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "name"
             },
             {
               "name": "value",
@@ -8270,11 +8060,7 @@
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "value"
             },
             {
               "name": "validationRules",
@@ -8282,327 +8068,459 @@
                 "text": "Array<FormValidator>"
               },
               "default": "[]",
-              "fieldName": "validationRules",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "validationRules"
             },
             {
               "name": "input-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "inputAriaLabel",
-              "inheritedFrom": {
-                "name": "FormField",
-                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
-              }
+              "fieldName": "inputAriaLabel"
             }
           ],
           "superclass": {
-            "name": "FormField",
-            "module": "/libs/web-components/src/lib/wip/Form/Form.decorator"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "summary": "`bm-native-select`",
-          "tagName": "bm-native-select",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmNativeSelect",
-          "declaration": {
-            "name": "BmNativeSelect",
-            "module": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bm-native-select",
-          "declaration": {
-            "name": "BmNativeSelect",
-            "module": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/NativeSelect/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
+          "name": "FormField",
           "declaration": {
-            "name": "*",
-            "package": "./NativeSelect"
+            "name": "FormField",
+            "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/RadioButton/RadioButton.ts",
+      "path": "libs/web-components/src/lib/wip/Form/Form.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "`bm-radio-button`\n\n### Attributes:\n- **label**  - Specify the text for the label\n- **error**  - Specify error text and display error state of a RadioButton\n- **readOnly**  - Specify if RadioButton displays in a read-only state\n- **disabled**  - Specify if RadioButton displays in a disabled state\n- **theme**  - Specify the theme of the RadioButton. By default it inherits the theme from the parent\n- **value**  - The value attribute for the input element\n- **checked**  - The checked attribute for the input element\n- **onKeyDown**  - A user-defined function to handle keydown events",
-          "name": "BmRadioButton",
+          "description": "### Attributes:\n- **validationMode**  - Specify if validation runs on change or when loosing focus\n- **initialValues**  - Specify initial values on Form controls based on their names\n- **required**  - Specify if input is a required\n- **disabled**  - Specify if input is a disabled\n- **readOnly**  - Specify if input is a read only\n- **action** \n- **method** \n- **target** \n- **enctype** ",
+          "name": "BmForm",
+          "slots": [
+            {
+              "description": "Add controls to the Form",
+              "name": "slot"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "label",
+              "name": "validationMode",
               "type": {
-                "text": "string | undefined"
+                "text": "'onChange' | 'onBlur' | 'onSubmit'"
               },
-              "description": "Specify the text for the label",
-              "attribute": "label"
+              "default": "'onBlur'",
+              "description": "Specify if validation runs on change or when loosing focus",
+              "attribute": "validationMode"
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "initialValues",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Record<string, FormValue>"
               },
-              "description": "Specify error text and display error state of a RadioButton",
-              "attribute": "error"
+              "default": "{}",
+              "description": "Specify initial values on Form controls based on their names",
+              "attribute": "initialValues"
             },
             {
               "kind": "field",
-              "name": "readOnly",
+              "name": "required",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Specify if RadioButton displays in a read-only state",
-              "attribute": "readOnly"
+              "default": "false",
+              "description": "Specify if input is a required",
+              "attribute": "required"
             },
             {
               "kind": "field",
               "name": "disabled",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Specify if RadioButton displays in a disabled state",
+              "default": "false",
+              "description": "Specify if input is a disabled",
               "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "theme",
+              "name": "readOnly",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "boolean"
               },
-              "description": "Specify the theme of the RadioButton. By default it inherits the theme from the parent",
-              "attribute": "theme"
+              "default": "false",
+              "description": "Specify if input is a read only",
+              "attribute": "readOnly"
+            },
+            {
+              "kind": "field",
+              "name": "action",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "action"
+            },
+            {
+              "kind": "field",
+              "name": "method",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "method"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "target",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The value attribute for the input element",
-              "attribute": "value"
+              "attribute": "target"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "enctype",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "The checked attribute for the input element",
-              "attribute": "checked"
+              "attribute": "enctype"
             },
             {
               "kind": "field",
-              "name": "onKeyDown",
+              "name": "formMeta",
               "type": {
-                "text": "(event: KeyboardEvent) => void | undefined"
+                "text": "Record<string, FieldMeta>"
               },
-              "description": "A user-defined function to handle keydown events",
-              "attribute": "onKeyDown"
+              "default": "{}"
             },
             {
               "kind": "field",
-              "name": "inputChoiceGroupContext",
-              "type": {
-                "text": "InputChoiceGroupContextProps"
-              }
+              "name": "formRef"
             },
             {
               "kind": "field",
-              "name": "radioButtonRef"
-            },
+              "name": "formContext",
+              "type": {
+                "text": "BmFormContext"
+              },
+              "privacy": "public",
+              "default": "bmFormInitials"
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "focus"
+              "description": "Validates the inputs and submits the form",
+              "name": "submit"
             }
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "validationMode",
               "type": {
-                "text": "string | undefined"
+                "text": "'onChange' | 'onBlur' | 'onSubmit'"
               },
-              "description": "Specify the text for the label",
-              "fieldName": "label"
+              "default": "'onBlur'",
+              "description": "Specify if validation runs on change or when loosing focus",
+              "fieldName": "validationMode"
             },
             {
-              "name": "error",
+              "name": "initialValues",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Record<string, FormValue>"
               },
-              "description": "Specify error text and display error state of a RadioButton",
-              "fieldName": "error"
+              "default": "{}",
+              "description": "Specify initial values on Form controls based on their names",
+              "fieldName": "initialValues"
             },
             {
-              "name": "readOnly",
+              "name": "required",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Specify if RadioButton displays in a read-only state",
-              "fieldName": "readOnly"
+              "default": "false",
+              "description": "Specify if input is a required",
+              "fieldName": "required"
             },
             {
               "name": "disabled",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Specify if RadioButton displays in a disabled state",
+              "default": "false",
+              "description": "Specify if input is a disabled",
               "fieldName": "disabled"
             },
             {
-              "name": "theme",
+              "name": "readOnly",
               "type": {
-                "text": "'light' | 'dark' | undefined"
+                "text": "boolean"
               },
-              "description": "Specify the theme of the RadioButton. By default it inherits the theme from the parent",
-              "fieldName": "theme"
+              "default": "false",
+              "description": "Specify if input is a read only",
+              "fieldName": "readOnly"
             },
             {
-              "name": "value",
+              "name": "action",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The value attribute for the input element",
-              "fieldName": "value"
+              "fieldName": "action"
             },
             {
-              "name": "checked",
+              "name": "method",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "The checked attribute for the input element",
-              "fieldName": "checked"
+              "fieldName": "method"
             },
             {
-              "name": "onKeyDown",
+              "name": "target",
               "type": {
-                "text": "(event: KeyboardEvent) => void | undefined"
+                "text": "string | undefined"
               },
-              "description": "A user-defined function to handle keydown events",
-              "fieldName": "onKeyDown"
+              "fieldName": "target"
+            },
+            {
+              "name": "enctype",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "enctype"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bm-radio-button",
+          "summary": "`bm-form`",
+          "tagName": "bm-form",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BmRadioButton",
+          "name": "validators",
           "declaration": {
-            "name": "BmRadioButton",
-            "module": "libs/web-components/src/lib/wip/RadioButton/RadioButton.ts"
+            "name": "validators",
+            "package": "@viasat/beam-shared/components/form"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BmForm",
+          "declaration": {
+            "name": "BmForm",
+            "module": "libs/web-components/src/lib/wip/Form/Form.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-radio-button",
+          "name": "bm-form",
           "declaration": {
-            "name": "BmRadioButton",
-            "module": "libs/web-components/src/lib/wip/RadioButton/RadioButton.ts"
+            "name": "BmForm",
+            "module": "libs/web-components/src/lib/wip/Form/Form.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/RadioButton/index.ts",
-      "declarations": [],
-      "exports": [
+      "path": "libs/web-components/src/lib/wip/Form/Form.utils.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./RadioButton"
+          "kind": "function",
+          "name": "createId",
+          "return": {
+            "type": {
+              "text": "string"
+            }
           }
-        },
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "createId",
           "declaration": {
-            "name": "*",
-            "package": "./RadioButtonGroup/RadioButtonGroup"
+            "name": "createId",
+            "module": "libs/web-components/src/lib/wip/Form/Form.utils.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/Form.context.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "bmFormInitials",
-          "type": {
-            "text": "BmFormContext"
-          },
-          "default": "{ required: false, disabled: false, readOnly: false, initialValues: {}, registerField: () => undefined, formBlurHandler: () => undefined, formChangeHandler: () => undefined, }"
-        },
-        {
-          "kind": "variable",
-          "name": "bmFormContext"
-        }
-      ],
+      "path": "libs/web-components/src/lib/wip/Form/index.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "bmFormInitials",
+          "name": "*",
           "declaration": {
-            "name": "bmFormInitials",
-            "module": "libs/web-components/src/lib/wip/Form/Form.context.ts"
+            "name": "*",
+            "package": "./Form"
           }
         },
         {
           "kind": "js",
-          "name": "bmFormContext",
+          "name": "*",
           "declaration": {
-            "name": "bmFormContext",
-            "module": "libs/web-components/src/lib/wip/Form/Form.context.ts"
+            "name": "*",
+            "package": "./Form.decorator"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/Form.decorator.ts",
+      "path": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "### Attributes:\n- **id** \n- **name** \n- **value** \n- **validationRules** \n- **input-aria-label** ",
-          "name": "FormField",
+          "description": "### Attributes:\n- **required**  - Specify if NativeSelect is a required input\n- **readOnly**  - Specify if NativeSelect displays in a read-only state\n- **disabled**  - Specify if NativeSelect displays in a disabled state\n- **error**  - Specify error text and display error state of a NativeSelect\n- **fluid**  - Specify if NativeSelect is fluid\n- **size**  - Specify the size of NativeSelect\n- **width**  - Specify the width of NativeSelect\n- **ellipse**  - Specify if overflow displays ellipsis\n- **hideRequiredMarker**  - Specify if the NativeSelect displays with an asterisk\n- **theme**  - Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
+          "name": "BmNativeSelect",
+          "slots": [
+            {
+              "description": "Specify Options for NativeSelect",
+              "name": "slot"
+            },
+            {
+              "description": "Specify Label for NativeSelect",
+              "name": "label"
+            },
+            {
+              "description": "Specify HelperText for NativeSelect",
+              "name": "helper-text"
+            }
+          ],
           "members": [
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if NativeSelect is a required input",
+              "attribute": "required"
+            },
+            {
+              "kind": "field",
+              "name": "readOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if NativeSelect displays in a read-only state",
+              "attribute": "readOnly"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if NativeSelect displays in a disabled state",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specify error text and display error state of a NativeSelect",
+              "attribute": "error"
+            },
+            {
+              "kind": "field",
+              "name": "fluid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if NativeSelect is fluid",
+              "attribute": "fluid"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "defaultInputSize",
+              "description": "Specify the size of NativeSelect",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specify the width of NativeSelect",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "ellipse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Specify if overflow displays ellipsis",
+              "attribute": "ellipse"
+            },
+            {
+              "kind": "field",
+              "name": "hideRequiredMarker",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the NativeSelect displays with an asterisk",
+              "attribute": "hideRequiredMarker"
+            },
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
+              "attribute": "theme"
+            },
+            {
+              "kind": "method",
+              "name": "finalizeAssociatedCallback",
+              "return": {
+                "type": {
+                  "text": "FinalizeAssociatedResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -8610,7 +8528,11 @@
                 "text": "boolean"
               },
               "static": true,
-              "default": "true"
+              "default": "true",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "kind": "field",
@@ -8619,7 +8541,11 @@
                 "text": "string"
               },
               "default": "''",
-              "attribute": "id"
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "kind": "field",
@@ -8628,7 +8554,11 @@
                 "text": "string"
               },
               "default": "''",
-              "attribute": "name"
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "kind": "field",
@@ -8637,7 +8567,11 @@
                 "text": "string"
               },
               "default": "''",
-              "attribute": "value"
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "kind": "field",
@@ -8646,7 +8580,11 @@
                 "text": "Array<FormValidator>"
               },
               "default": "[]",
-              "attribute": "validationRules"
+              "attribute": "validationRules",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "kind": "field",
@@ -8654,13 +8592,21 @@
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "input-aria-label"
+              "attribute": "input-aria-label",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "kind": "field",
               "name": "formContext",
               "type": {
                 "text": "BmFormContext"
+              },
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
               }
             },
             {
@@ -8670,6 +8616,10 @@
                 "type": {
                   "text": "void"
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
               }
             },
             {
@@ -8679,34 +8629,112 @@
                 "type": {
                   "text": "void"
                 }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "finalizeAssociatedCallback",
-              "return": {
-                "type": {
-                  "text": "FinalizeAssociatedResult"
-                }
               },
-              "parameters": [
-                {
-                  "name": "ctxValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             }
           ],
           "attributes": [
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if NativeSelect is a required input",
+              "fieldName": "required"
+            },
+            {
+              "name": "readOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if NativeSelect displays in a read-only state",
+              "fieldName": "readOnly"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if NativeSelect displays in a disabled state",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specify error text and display error state of a NativeSelect",
+              "fieldName": "error"
+            },
+            {
+              "name": "fluid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if NativeSelect is fluid",
+              "fieldName": "fluid"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "defaultInputSize",
+              "description": "Specify the size of NativeSelect",
+              "fieldName": "size"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specify the width of NativeSelect",
+              "fieldName": "width"
+            },
+            {
+              "name": "ellipse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Specify if overflow displays ellipsis",
+              "fieldName": "ellipse"
+            },
+            {
+              "name": "hideRequiredMarker",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify if the NativeSelect displays with an asterisk",
+              "fieldName": "hideRequiredMarker"
+            },
+            {
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | undefined"
+              },
+              "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent",
+              "fieldName": "theme"
+            },
             {
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "id"
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "name": "name",
@@ -8714,7 +8742,11 @@
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "name"
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "name": "value",
@@ -8722,7 +8754,11 @@
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "value"
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "name": "validationRules",
@@ -8730,298 +8766,262 @@
                 "text": "Array<FormValidator>"
               },
               "default": "[]",
-              "fieldName": "validationRules"
+              "fieldName": "validationRules",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             },
             {
               "name": "input-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "inputAriaLabel"
+              "fieldName": "inputAriaLabel",
+              "inheritedFrom": {
+                "name": "FormField",
+                "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "FormField",
+            "module": "/libs/web-components/src/lib/wip/Form/Form.decorator"
           },
+          "summary": "`bm-native-select`",
+          "tagName": "bm-native-select",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FormField",
+          "name": "BmNativeSelect",
           "declaration": {
-            "name": "FormField",
-            "module": "libs/web-components/src/lib/wip/Form/Form.decorator.ts"
+            "name": "BmNativeSelect",
+            "module": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bm-native-select",
+          "declaration": {
+            "name": "BmNativeSelect",
+            "module": "libs/web-components/src/lib/wip/NativeSelect/NativeSelect.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/Form.ts",
+      "path": "libs/web-components/src/lib/wip/NativeSelect/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./NativeSelect"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/web-components/src/lib/wip/RadioButton/RadioButton.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "### Attributes:\n- **validationMode**  - Specify if validation runs on change or when loosing focus\n- **initialValues**  - Specify initial values on Form controls based on their names\n- **required**  - Specify if input is a required\n- **disabled**  - Specify if input is a disabled\n- **readOnly**  - Specify if input is a read only\n- **action** \n- **method** \n- **target** \n- **enctype** ",
-          "name": "BmForm",
-          "slots": [
-            {
-              "description": "Add controls to the Form",
-              "name": "slot"
-            }
-          ],
+          "description": "`bm-radio-button`\n\n### Attributes:\n- **label**  - Specify the text for the label\n- **error**  - Specify error text and display error state of a RadioButton\n- **readOnly**  - Specify if RadioButton displays in a read-only state\n- **disabled**  - Specify if RadioButton displays in a disabled state\n- **theme**  - Specify the theme of the RadioButton. By default it inherits the theme from the parent\n- **value**  - The value attribute for the input element\n- **checked**  - The checked attribute for the input element\n- **onKeyDown**  - A user-defined function to handle keydown events",
+          "name": "BmRadioButton",
           "members": [
             {
               "kind": "field",
-              "name": "validationMode",
+              "name": "label",
               "type": {
-                "text": "'onChange' | 'onBlur' | 'onSubmit'"
+                "text": "string | undefined"
               },
-              "default": "'onBlur'",
-              "description": "Specify if validation runs on change or when loosing focus",
-              "attribute": "validationMode"
+              "description": "Specify the text for the label",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "initialValues",
+              "name": "error",
               "type": {
-                "text": "Record<string, FormValue>"
+                "text": "boolean | undefined"
               },
-              "default": "{}",
-              "description": "Specify initial values on Form controls based on their names",
-              "attribute": "initialValues"
+              "description": "Specify error text and display error state of a RadioButton",
+              "attribute": "error"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "readOnly",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "Specify if input is a required",
-              "attribute": "required"
+              "description": "Specify if RadioButton displays in a read-only state",
+              "attribute": "readOnly"
             },
             {
               "kind": "field",
               "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "Specify if input is a disabled",
+              "description": "Specify if RadioButton displays in a disabled state",
               "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "readOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if input is a read only",
-              "attribute": "readOnly"
-            },
-            {
-              "kind": "field",
-              "name": "action",
+              "name": "theme",
               "type": {
-                "text": "string | undefined"
+                "text": "'light' | 'dark' | undefined"
               },
-              "attribute": "action"
+              "description": "Specify the theme of the RadioButton. By default it inherits the theme from the parent",
+              "attribute": "theme"
             },
             {
               "kind": "field",
-              "name": "method",
+              "name": "value",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "method"
+              "description": "The value attribute for the input element",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "attribute": "target"
+              "default": "false",
+              "description": "The checked attribute for the input element",
+              "attribute": "checked"
             },
             {
               "kind": "field",
-              "name": "enctype",
+              "name": "onKeyDown",
               "type": {
-                "text": "string | undefined"
+                "text": "(event: KeyboardEvent) => void | undefined"
               },
-              "attribute": "enctype"
+              "description": "A user-defined function to handle keydown events",
+              "attribute": "onKeyDown"
             },
             {
               "kind": "field",
-              "name": "formMeta",
+              "name": "inputChoiceGroupContext",
               "type": {
-                "text": "Record<string, FieldMeta>"
-              },
-              "default": "{}"
+                "text": "InputChoiceGroupContextProps"
+              }
             },
             {
               "kind": "field",
-              "name": "formRef"
+              "name": "radioButtonRef"
             },
             {
-              "kind": "field",
-              "name": "formContext",
-              "type": {
-                "text": "BmFormContext"
-              },
-              "privacy": "public",
-              "default": "bmFormInitials"
-            }
-          ],
-          "events": [
-            {
-              "description": "Validates the inputs and submits the form",
-              "name": "submit"
+              "kind": "method",
+              "name": "focus"
             }
           ],
           "attributes": [
             {
-              "name": "validationMode",
+              "name": "label",
               "type": {
-                "text": "'onChange' | 'onBlur' | 'onSubmit'"
+                "text": "string | undefined"
               },
-              "default": "'onBlur'",
-              "description": "Specify if validation runs on change or when loosing focus",
-              "fieldName": "validationMode"
+              "description": "Specify the text for the label",
+              "fieldName": "label"
             },
             {
-              "name": "initialValues",
+              "name": "error",
               "type": {
-                "text": "Record<string, FormValue>"
+                "text": "boolean | undefined"
               },
-              "default": "{}",
-              "description": "Specify initial values on Form controls based on their names",
-              "fieldName": "initialValues"
+              "description": "Specify error text and display error state of a RadioButton",
+              "fieldName": "error"
             },
             {
-              "name": "required",
+              "name": "readOnly",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "Specify if input is a required",
-              "fieldName": "required"
+              "description": "Specify if RadioButton displays in a read-only state",
+              "fieldName": "readOnly"
             },
             {
               "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "Specify if input is a disabled",
+              "description": "Specify if RadioButton displays in a disabled state",
               "fieldName": "disabled"
             },
             {
-              "name": "readOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Specify if input is a read only",
-              "fieldName": "readOnly"
-            },
-            {
-              "name": "action",
+              "name": "theme",
               "type": {
-                "text": "string | undefined"
+                "text": "'light' | 'dark' | undefined"
               },
-              "fieldName": "action"
+              "description": "Specify the theme of the RadioButton. By default it inherits the theme from the parent",
+              "fieldName": "theme"
             },
             {
-              "name": "method",
+              "name": "value",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "method"
+              "description": "The value attribute for the input element",
+              "fieldName": "value"
             },
             {
-              "name": "target",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "fieldName": "target"
+              "default": "false",
+              "description": "The checked attribute for the input element",
+              "fieldName": "checked"
             },
             {
-              "name": "enctype",
+              "name": "onKeyDown",
               "type": {
-                "text": "string | undefined"
+                "text": "(event: KeyboardEvent) => void | undefined"
               },
-              "fieldName": "enctype"
+              "description": "A user-defined function to handle keydown events",
+              "fieldName": "onKeyDown"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "summary": "`bm-form`",
-          "tagName": "bm-form",
+          "tagName": "bm-radio-button",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "validators",
-          "declaration": {
-            "name": "validators",
-            "package": "@viasat/beam-shared/components/form"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BmForm",
+          "name": "BmRadioButton",
           "declaration": {
-            "name": "BmForm",
-            "module": "libs/web-components/src/lib/wip/Form/Form.ts"
+            "name": "BmRadioButton",
+            "module": "libs/web-components/src/lib/wip/RadioButton/RadioButton.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bm-form",
-          "declaration": {
-            "name": "BmForm",
-            "module": "libs/web-components/src/lib/wip/Form/Form.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/Form.utils.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "createId",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "createId",
+          "name": "bm-radio-button",
           "declaration": {
-            "name": "createId",
-            "module": "libs/web-components/src/lib/wip/Form/Form.utils.ts"
+            "name": "BmRadioButton",
+            "module": "libs/web-components/src/lib/wip/RadioButton/RadioButton.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/web-components/src/lib/wip/Form/index.ts",
+      "path": "libs/web-components/src/lib/wip/RadioButton/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -9029,7 +9029,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Form"
+            "package": "./RadioButton"
           }
         },
         {
@@ -9037,7 +9037,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./Form.decorator"
+            "package": "./RadioButtonGroup/RadioButtonGroup"
           }
         }
       ]