fix: handle case when no icon in input-alert

Other misc tweaks to match with figma designs.
Added support for upcoming `field-sizing` property that design team wants by default

.nvmrc

@@ -1 +1 @@
-v16.17.0
+v16.18.1

auditjs.json

@@ -1196,6 +1196,22 @@
           "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2023-42282?component-type=npm&component-name=ip&utm_source=auditjs&utm_medium=integration&utm_content=4.0.39"
         }
       ]
+    },
+    {
+      "coordinates": "pkg:npm/[email protected]",
+      "description": "A small JS+SVG library for drawing railroad syntax diagrams.",
+      "reference": "https://ossindex.sonatype.org/component/pkg:npm/[email protected]?utm_source=auditjs&utm_medium=integration&utm_content=4.0.39",
+      "vulnerabilities": [
+        {
+          "id": "CVE-2024-26467",
+          "title": "[CVE-2024-26467] CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')",
+          "description": "A DOM based cross-site scripting (XSS) vulnerability in the component generator.html of tabatkins/railroad-diagrams before commit ea9a123 allows attackers to execute arbitrary Javascript via sending a crafted URL.",
+          "cvssScore": 6.1,
+          "cvssVector": "CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N",
+          "cve": "CVE-2024-26467",
+          "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2024-26467?component-type=npm&component-name=railroad-diagrams&utm_source=auditjs&utm_medium=integration&utm_content=4.0.39"
+        }
+      ]
     }
   ],
   "ignore": [
@@ -1423,6 +1439,9 @@
     },
     {
       "id": "CVE-2023-42282"
+    },
+    {
+      "id": "CVE-2024-26467"
     }
   ]
 }

system/core/src/components/InputAlert.ts

@@ -26,6 +26,9 @@ export const baseStyles = css`
   & > svg:first-child {
     margin-top: 2px;
   }
+  & > :not(svg):first-child:last-child {
+    grid-column: 1 / 3;
+  }
 
   &[data-variant='error'],
   &[data-variant='warning'],

system/core/src/components/InputStructure.ts

@@ -5,7 +5,7 @@ export const className = 'input-structure';
 export const baseStyles = css`
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-l1);
+  gap: var(--spacing-l2);
 
   .label-row {
     display: flex;

system/core/src/components/TextArea.ts

@@ -28,6 +28,11 @@ export const baseStyles = css`
   ${textareaSizingStyles}
   background: var(--surface);
 
+  @supports (field-sizing: content) {
+    field-sizing: content;
+    resize: none;
+  }
+
   &,
   &:focus-within,
   &:focus {

system/react/src/structuredComponents/InputAlert.tsx

@@ -9,6 +9,7 @@ export interface Props extends inputAlert.Props {
 
 export const InputAlertInner = styled(inputAlert.element)<Props>`
   ${inputAlert.baseStyles}
+  margin-top: 0;
 `;
 
 const inputAlertIconMap: Record<

system/stories/src/InputAlert.stories.tsx

@@ -3,13 +3,18 @@ import { inputAlert } from '@tablecheck/tablekit-core';
 import * as emotion from '@tablecheck/tablekit-react';
 import * as css from '@tablecheck/tablekit-react-css';
 
-const contentVariants: emotion.InputAlertProps[] = [
-  { id: '1', 'data-variant': 'info', children: 'Info' },
-  { id: '2', 'data-variant': 'warning', children: 'Warning' },
-  { id: '3', 'data-variant': 'error', children: 'Error' },
-  { id: '4', 'data-variant': 'bare', children: 'Bare' },
-  { id: '5', 'data-variant': 'disabled', children: 'Disabled' }
-];
+const contentVariants: emotion.InputAlertProps[] = (
+  [
+    { id: '1', 'data-variant': 'info', children: 'Info' },
+    { id: '2', 'data-variant': 'warning', children: 'Warning' },
+    { id: '3', 'data-variant': 'error', children: 'Error' },
+    { id: '4', 'data-variant': 'bare', children: 'Bare' },
+    { id: '5', 'data-variant': 'disabled', children: 'Disabled' }
+  ] as const
+).map((props) => ({
+  ...props,
+  children: `${props.children} - This very, very long text should correctly show if the columns and wrapping are working correctly`
+}));
 
 export default {
   title: 'TableKit/InputAlert',