@hubspot/cms-component-library 0.3.11 → 0.3.13

package/components/componentLibrary/Form/index.tsx

@@ -3,14 +3,16 @@ import FormIsland from './islands/FormIsland.js?island';
 // @ts-expect-error -- ?island not typed
 import LegacyFormIsland from './islands/LegacyFormIsland.js?island';
 import { FormProps } from './types.js';
-import { Island } from '@hubspot/cms-components';
+import { Island, useEditorVariableChecks } from '@hubspot/cms-components';
 import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
+import PlaceholderForm from './PlaceholderForm.js';
 
 const FormComponent = ({
   formField,
   formId,
   formVersion,
+  variant = 'form1',
   ...rest
 }: FormProps) => {
   const resolvedFormId = formField != null ? formField.form_id : formId;
@@ -18,8 +20,28 @@ const FormComponent = ({
     formField != null ? formField.embed_version : formVersion;
   const isV4 = resolvedVersion === 'v4';
   const FormModule = isV4 ? FormIsland : LegacyFormIsland;
+  const editorChecks = useEditorVariableChecks();
+  const hasFormData = !!resolvedFormId;
 
-  return <Island module={FormModule} formId={resolvedFormId} {...rest} />;
+  if (!hasFormData && !editorChecks.is_in_editor) return null;
+
+  if (!hasFormData) {
+    return (
+      <div data-form-variant={variant} data-button-variant="primaryButton">
+        <PlaceholderForm />
+      </div>
+    );
+  }
+
+  return (
+    <Island
+      module={FormModule}
+      data-form-variant={variant}
+      formId={resolvedFormId}
+      variant={variant}
+      {...rest}
+    />
+  );
 };
 
 type FormComponentType = typeof FormComponent & {

package/components/componentLibrary/Form/islands/FormIsland.tsx

@@ -9,7 +9,7 @@ const getScriptSrc = (portalId: number, env: string) => {
   return `https://${host}/forms/embed/developer/${portalId}.js`;
 };
 
-const FormIsland = ({ formId }: FormProps) => {
+const FormIsland = ({ formId, variant }: FormProps) => {
   const portalId = getHubID();
   const resolvedEnv = getHSEnv();
 
@@ -49,6 +49,8 @@ const FormIsland = ({ formId }: FormProps) => {
       data-form-id={formId}
       data-portal-id={portalId}
       data-env={resolvedEnv}
+      data-form-variant={variant}
+      data-button-variant="primaryButton"
     />
   );
 };

package/components/componentLibrary/Form/islands/LegacyFormIsland.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useId } from 'react';
 import { FormProps } from '../types.js';
 import { getHubID, getHSEnv } from '@hubspot/cms-components';
-import styles from './legacyForm.module.css';
+import styles from './legacyForm.module.scss';
 
 declare global {
   interface Window {
@@ -23,7 +23,7 @@ const getScriptSrc = (env: string) => {
   return `//${host}/forms/embed/v2.js`;
 };
 
-const LegacyFormIsland = ({ formId }: FormProps) => {
+const LegacyFormIsland = ({ formId, variant }: FormProps) => {
   const portalId = getHubID();
   const resolvedEnv = getHSEnv();
   const rawId = useId();
@@ -72,7 +72,14 @@ const LegacyFormIsland = ({ formId }: FormProps) => {
     return null;
   }
 
-  return <div id={containerId} className={styles.legacyFormStyles} />;
+  return (
+    <div
+      id={containerId}
+      className={styles.legacyFormStyles}
+      data-form-variant={variant}
+      data-button-variant="primaryButton"
+    />
+  );
 };
 
 export default LegacyFormIsland;

package/components/componentLibrary/Form/islands/legacyForm.module.scss

@@ -0,0 +1,270 @@
+.legacyFormStyles {
+  &#{&} {
+    /* Form container */
+    :global(.hs-form) {
+      padding: 32px;
+      border-color: var(--hs-form-borderColor, #e0e0e0);
+      border-radius: var(--hs-form-borderRadius, 8px);
+      border-style: var(--hs-form-borderStyle, solid);
+      border-width: var(--hs-form-borderWidth, 1px);
+      background: var(--hs-form-backgroundColor, transparent);
+
+      /* Form field spacing */
+      :global(.hs-form-field) {
+        margin-block-end: 24px;
+      }
+
+      /* Textarea */
+      :global(textarea) {
+        position: relative;
+        height: 160px;
+        border-radius: 3px;
+
+        &::-webkit-resizer {
+          display: none;
+        }
+      }
+
+      /* Textarea drag icon */
+      :global(.hs_multi_line_field .input) {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          right: 8px;
+          bottom: 8px;
+          content: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-1' x2='29.5206' y2='-1' transform='matrix(-0.666795 0.745241 -0.806754 -0.590888 19.6843 0)' stroke='%23303F59' stroke-width='2'/%3E%3Cpath d='M21.0005 9.99756L10.5005 21.9976' stroke='%23303F59' stroke-width='2'/%3E%3C/svg%3E%0A");
+          pointer-events: none;
+        }
+      }
+
+      /* Select dropdown - remove native appearance */
+      :global(select) {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+      }
+
+      /* Select dropdown icon */
+      :global(.hs-fieldtype-select .input) {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          top: 50%;
+          right: 16px;
+          content: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A");
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+      }
+
+      /* Datepicker icon */
+      :global(.hs-dateinput) {
+        position: relative;
+
+        &::before {
+          position: absolute;
+          top: 50%;
+          right: 16px;
+          content: url("data:image/svg+xml,%3Csvg width='24' height='29' viewBox='0 0 24 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3812_12272)'%3E%3Cpath d='M8.14286 2.07136C8.14286 1.35886 7.56964 0.785645 6.85714 0.785645C6.14464 0.785645 5.57143 1.35886 5.57143 2.07136V4.21422H3.42857C1.5375 4.21422 0 5.75172 0 7.64279V8.49993V11.0714V24.7856C0 26.6767 1.5375 28.2142 3.42857 28.2142H20.5714C22.4625 28.2142 24 26.6767 24 24.7856V11.0714V8.49993V7.64279C24 5.75172 22.4625 4.21422 20.5714 4.21422H18.4286V2.07136C18.4286 1.35886 17.8554 0.785645 17.1429 0.785645C16.4304 0.785645 15.8571 1.35886 15.8571 2.07136V4.21422H8.14286V2.07136ZM2.57143 11.0714H21.4286V24.7856C21.4286 25.2571 21.0429 25.6428 20.5714 25.6428H3.42857C2.95714 25.6428 2.57143 25.2571 2.57143 24.7856V11.0714Z' fill='%2309152B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3812_12272'%3E%3Crect width='24' height='27.4286' fill='white' transform='translate(0 0.785645)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+      }
+
+      /* Placeholder text color */
+      :global(::-moz-placeholder) {
+        color: var(--hs-form-placeholder-color, #717171);
+      }
+
+      :global(::placeholder) {
+        color: var(--hs-form-placeholder-color, #717171);
+      }
+
+      /* Checkbox and radio list reset */
+      :global(.inputs-list) {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+
+        :global(li) {
+          display: block;
+          margin-block-end: 16px;
+
+          &:last-of-type {
+            margin-block-end: 0;
+          }
+        }
+
+        :global(:is(input, span)) {
+          vertical-align: middle;
+        }
+      }
+
+      /* Help text / legend */
+      :global(legend) {
+        color: var(--hs-form-label-color, inherit);
+        margin-block-end: 8px;
+      }
+
+      /* Rich text within form */
+      :global(.hs-richtext) {
+        color: var(--hs-form-label-color, inherit);
+
+        :global(img) {
+          height: auto;
+          max-width: 100% !important;
+        }
+      }
+
+      /* Error state - input border */
+      :global(.hs-input.error) {
+        border-color: #ff0000;
+      }
+
+      /* Error messages */
+      :global(.hs-error-msg),
+      :global(.hs-error-msgs) {
+        color: #ff0000;
+        margin-block-start: 4px;
+      }
+
+      /* File upload and fieldset max width */
+      :global(.hs-form-field.hs-fieldtype-file .hs-input),
+      :global(fieldset) {
+        max-width: 100% !important;
+      }
+    }
+
+    :global(:is(.legal-consent-container )) {
+      font-size: 14px;
+      color: var(--hs-form-label-color, inherit);
+
+      :global(label){
+        font-size: 14px;
+        color: var(--hs-form-label-color, inherit);
+      }
+    }
+
+    /* Labels - targets both form types */
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(label) {
+      display: block;
+      color: var(--hs-form-label-color, inherit);
+      font-family: var(--hs-form-label-fontFamily, inherit);
+      font-size: var(--hs-form-label-fontSize, 0.875rem);
+      font-style: var(--hs-form-label-fontStyle, normal);
+      font-weight: var(--hs-form-label-fontWeight, 600);
+      text-decoration: var(--hs-form-label-textDecoration, none);
+      margin-block-end: 8px;
+    }
+
+    /* Text inputs, selects, textareas - targets both form types */
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='text']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='email']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='password']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='tel']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='number']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='search']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(select),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(textarea) {
+      width: 100% !important;
+      border-radius: var(--hs-form-field-borderRadius, 8px);
+      border: var(--hs-form-field-borderWidth, 1px) var(--hs-form-field-borderStyle, solid) var(--hs-form-field-borderColor, #e0e0e0);
+      background-color: var(--hs-form-field-backgroundColor, #fff);
+      color: var(--hs-form-input-color, inherit);
+      font-family: var(--hs-form-input-fontFamily, inherit);
+      font-size: var(--hs-form-input-fontSize, inherit);
+      font-style: var(--hs-form-input-fontStyle, normal);
+      font-weight: var(--hs-form-input-fontWeight, normal);
+      text-decoration: var(--hs-form-input-textDecoration, none);
+      padding-block: 12px;
+      padding-inline: 16px;
+    }
+
+    /* Checkbox and radio sizing + fill - targets both form types */
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='checkbox']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='radio']) {
+      height: 24px;
+      width: 24px !important;
+      accent-color: var(--hs-form-input-color, inherit);
+      cursor: pointer;
+      margin-inline-end: 12px;
+    }
+
+    /* Submit button - targets both form types */
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(:is(.hs-button, input[type='submit'])) {
+      display: inline-block;
+      width: 100%;
+      border-color: var(--hs-button-borderColor, transparent);
+      border-radius: var(--hs-button-borderRadius, 8px);
+      border-style: var(--hs-button-borderStyle, solid);
+      border-width: var(--hs-button-borderWidth, 0);
+      background-color: var(--hs-button-backgroundColor, var(--hs-primary-color, #0f4490));
+      color: var(--hs-button-color, #ffffff);
+      cursor: pointer;
+      font-family: var(--hs-button-fontFamily, inherit);
+      font-size: var(--hs-button-fontSize, 1rem);
+      font-style: var(--hs-button-fontStyle, normal);
+      font-weight: var(--hs-button-fontWeight, 700);
+      text-decoration: var(--hs-button-textDecoration, none);
+      padding-block: 12px;
+      padding-inline: 24px;
+      text-align: center;
+      transition: all 0.15s linear;
+      white-space: normal !important;
+
+      &:hover,
+      &:focus {
+        border-color: var(--hs-button-borderColor-hover, transparent);
+        border-style: var(--hs-button-borderStyle-hover, solid);
+        border-width: var(--hs-button-borderWidth-hover, 0);
+        background-color: var(--hs-button-backgroundColor-hover, var(--hs-primary-color, #0f4490));
+        color: var(--hs-button-color-hover, #ffffff);
+        text-decoration: none;
+      }
+    }
+
+    /* International phone field layout */
+    :global(.hs-input.hs-fieldtype-intl-phone) {
+      display: flex;
+      width: 100% !important;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 8px;
+
+      > :global(input) {
+        flex: 1 0 calc(70% - 8px) !important;
+      }
+
+      > :global(select) {
+        flex: 1 0 30% !important;
+      }
+
+      @media (width <= 600px) {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        gap: 8px;
+
+        > :global(select),
+        > :global(input) {
+          min-width: 100%;
+          flex: 1 1 100%;
+        }
+
+        > :global(select) {
+          padding-inline: 16px;
+        }
+      }
+    }
+
+
+    :global(.grecaptcha-badge) {
+      margin-block: 0 !important;
+      margin-inline: auto !important;
+    }
+  }
+}

package/components/componentLibrary/Form/islands/v4Form.module.css

@@ -1,95 +1,97 @@
 .v4FormStyles {
-  --hsf-global__font-size: 16px;
-  --hsf-global__color: #1a0033;
+  --hsf-global__font-size: var(--hs-form-input-fontSize, 16px);
+  --hsf-global__color: var(--hs-form-input-color, inherit);
   --hsf-global-error__color: #ff0000;
 
-  --hsf-background__background-color: #ffe0f0;
+  --hsf-background__background-color: var(--hs-form-backgroundColor, transparent);
   --hsf-background__padding: 32px;
-  --hsf-background__border-style: solid;
-  --hsf-background__border-color: #ff00ff;
-  --hsf-background__border-radius: 8px;
-  --hsf-background__border-width: 4px;
+  --hsf-background__border-style: var(--hs-form-borderStyle, solid);
+  --hsf-background__border-color: var(--hs-form-borderColor, #e0e0e0);
+  --hsf-background__border-radius: var(--hs-form-borderRadius, 8px);
+  --hsf-background__border-width: var(--hs-form-borderWidth, 1px);
 
   --hsf-heading__font-family: inherit;
-  --hsf-heading__color: #9900cc;
-  --hsf-heading__text-shadow: 1px 1px 2px #ff00ff;
+  --hsf-heading__color: inherit;
+  --hsf-heading__text-shadow: none;
   --hsf-richtext__font-family: inherit;
   --hsf-richtext__font-size: 14px;
-  --hsf-richtext__color: #9900cc;
+  --hsf-richtext__color: inherit;
 
-  --hsf-field-label__font-family: inherit;
-  --hsf-field-label__font-size: 0.875rem;
-  --hsf-field-label__color: #cc0066;
+  --hsf-field-label__font-family: var(--hs-form-label-fontFamily, inherit);
+  --hsf-field-label__font-size: var(--hs-form-label-fontSize, 0.875rem);
+  --hsf-field-label__color: var(--hs-form-label-color, inherit);
   --hsf-field-label-requiredindicator__color: #ff0000;
   --hsf-field-description__font-family: inherit;
-  --hsf-field-description__color: #6600cc;
+  --hsf-field-description__color: inherit;
   --hsf-field-footer__font-family: inherit;
-  --hsf-field-footer__color: #6600cc;
+  --hsf-field-footer__color: inherit;
   --hsf-erroralert__font-family: inherit;
   --hsf-erroralert__color: #ff0000;
 
-  --hsf-field-input__font-family: inherit;
-  --hsf-field-input__background-color: #e0ffff;
-  --hsf-field-input__placeholder-color: #ff6600;
-  --hsf-field-input__border-color: #00ccff;
-  --hsf-field-input__border-width: 3px;
-  --hsf-field-input__border-style: solid;
-  --hsf-field-input__border-radius: 6px;
+  --hsf-field-input__font-family: var(--hs-form-input-fontFamily, inherit);
+  --hsf-field-input__background-color: var(--hs-form-field-backgroundColor, #fff);
+  --hsf-field-input__placeholder-color: var(--hs-form-placeholder-color, #717171);
+  --hsf-field-input__border-color: var(--hs-form-field-borderColor, #e0e0e0);
+  --hsf-field-input__border-width: var(--hs-form-field-borderWidth, 1px);
+  --hsf-field-input__border-style: var(--hs-form-field-borderStyle, solid);
+  --hsf-field-input__border-radius: var(--hs-form-field-borderRadius, 8px);
   --hsf-field-input__padding: 12px 16px;
-  --hsf-field-input__color: #003300;
+  --hsf-field-input__color: var(--hs-form-input-color, inherit);
 
-  --hsf-field-textarea__font-family: inherit;
-  --hsf-field-textarea__color: #003300;
-  --hsf-field-textarea__background-color: #e0ffff;
-  --hsf-field-textarea__border-color: #00ccff;
-  --hsf-field-textarea__border-style: solid;
-  --hsf-field-textarea__border-radius: 6px;
+  --hsf-field-textarea__font-family: var(--hs-form-input-fontFamily, inherit);
+  --hsf-field-textarea__color: var(--hs-form-input-color, inherit);
+  --hsf-field-textarea__background-color: var(--hs-form-field-backgroundColor, #fff);
+  --hsf-field-textarea__border-color: var(--hs-form-field-borderColor, #e0e0e0);
+  --hsf-field-textarea__border-style: var(--hs-form-field-borderStyle, solid);
+  --hsf-field-textarea__border-radius: var(--hs-form-field-borderRadius, 8px);
   --hsf-field-textarea__padding: 12px 16px;
 
   --hsf-field-checkbox__padding: 12px;
   --hsf-field-checkbox__background-color: #ffffff;
-  --hsf-field-checkbox__color: #00cc00;
-  --hsf-field-checkbox__border-color: #00ccff;
-  --hsf-field-checkbox__border-width: 2px;
-  --hsf-field-checkbox__border-style: solid;
+  --hsf-field-checkbox__color: var(--hs-form-input-color, inherit);
+  --hsf-field-checkbox__border-color: var(--hs-form-field-borderColor, #e0e0e0);
+  --hsf-field-checkbox__border-width: var(--hs-form-field-borderWidth, 1px);
+  --hsf-field-checkbox__border-style: var(--hs-form-field-borderStyle, solid);
 
   --hsf-field-radio__padding: 12px;
   --hsf-field-radio__background-color: #ffffff;
-  --hsf-field-radio__color: #00cc00;
-  --hsf-field-radio__border-color: #00ccff;
-  --hsf-field-radio__border-width: 2px;
-  --hsf-field-radio__border-style: solid;
+  --hsf-field-radio__color: var(--hs-form-input-color, inherit);
+  --hsf-field-radio__border-color: var(--hs-form-field-borderColor, #e0e0e0);
+  --hsf-field-radio__border-width: var(--hs-form-field-borderWidth, 1px);
+  --hsf-field-radio__border-style: var(--hs-form-field-borderStyle, solid);
 
   --hsf-row__vertical-spacing: 24px;
   --hsf-row__horizontal-spacing: 16px;
   --hsf-module__vertical-spacing: 16px;
 
   --hsf-button__width: 100%;
-  --hsf-button__font-family: inherit;
-  --hsf-button__font-size: 1rem;
-  --hsf-button__font-weight: 700;
-  --hsf-button__color: #ffffff;
-  --hsf-button__background-color: #ff6600;
+  --hsf-button__font-family: var(--hs-button-fontFamily, inherit);
+  --hsf-button__font-size: var(--hs-button-fontSize, 1rem);
+  --hsf-button__font-weight: var(--hs-button-fontWeight, 700);
+  --hsf-button__font-style: var(--hs-button-fontStyle, normal);
+  --hsf-button__text-decoration: var(--hs-button-textDecoration, none);
+  --hsf-button__color: var(--hs-button-color, #ffffff);
+  --hsf-button__background-color: var(--hs-button-backgroundColor, var(--hs-primary-color, #0f4490));
   --hsf-button__background-image: none;
-  --hsf-button__border-radius: 6px;
-  --hsf-button__border-width: 3px;
-  --hsf-button__border-style: solid;
-  --hsf-button__border-color: #ff6600;
+  --hsf-button__border-radius: var(--hs-button-borderRadius, 8px);
+  --hsf-button__border-width: var(--hs-button-borderWidth, 0);
+  --hsf-button__border-style: var(--hs-button-borderStyle, solid);
+  --hsf-button__border-color: var(--hs-button-borderColor, transparent);
   --hsf-button__padding: 12px 24px;
-  --hsf-button__box-shadow: 0 4px 8px rgba(255, 102, 0, 0.4);
-  --hsf-button--hover__color: #ffffff;
-  --hsf-button--hover__background-color: #cc5200;
-  --hsf-button--hover__border-color: #cc5200;
-  --hsf-button--focus__color: #ffffff;
-  --hsf-button--focus__background-color: #cc5200;
-  --hsf-button--focus__border-color: #ff00ff;
+  --hsf-button__box-shadow: none;
+  --hsf-button--hover__color: var(--hs-button-color-hover, #ffffff);
+  --hsf-button--hover__background-color: var(--hs-button-backgroundColor-hover, var(--hs-primary-color, #0f4490));
+  --hsf-button--hover__border-color: var(--hs-button-borderColor-hover, transparent);
+  --hsf-button--focus__color: var(--hs-button-color-hover, #ffffff);
+  --hsf-button--focus__background-color: var(--hs-button-backgroundColor-hover, var(--hs-primary-color, #0f4490));
+  --hsf-button--focus__border-color: var(--hs-button-borderColor-hover, transparent);
 
   --hsf-progressbar__font-family: inherit;
   --hsf-progressbar__font-size: 14px;
   --hsf-progressbar__color: #ffffff;
-  --hsf-progressbar__background-color: #00cc00;
-  --hsf-progressbar__background: linear-gradient(90deg, #00cc00, #00ffcc);
-  --hsf-progressbar__border-color: #009900;
+  --hsf-progressbar__background-color: var(--hs-primary-color, #0f4490);
+  --hsf-progressbar__background: var(--hs-primary-color, #0f4490);
+  --hsf-progressbar__border-color: transparent;
   --hsf-progressbar__border-style: solid;
-  --hsf-progressbar__border-width: 2px;
+  --hsf-progressbar__border-width: 0;
 }

package/components/componentLibrary/Form/types.ts

@@ -1,6 +1,11 @@
 import { FormFieldDefaults } from '@hubspot/cms-components/fields';
 
-export type FormProps = FormPropsWithField | FormPropsWithoutField;
+
+export type FormBaseProps = {
+  variant?: string;
+};
+
+export type FormProps = (FormPropsWithField | FormPropsWithoutField) & FormBaseProps;
 
 export type FormPropsWithoutField = {
   formField?: never;
@@ -23,5 +28,5 @@ export type ContentFieldsProps = {
 export type StyleFieldsProps = {
   formVariantLabel?: string;
   formVariantName?: string;
-  formVariantDefault?: { variant_name: string };
+  formVariantDefault?: { variantName: string, variant_name: string};
 };

package/components/componentLibrary/Image/index.module.scss

@@ -3,7 +3,9 @@
   max-inline-size: max-content;
   max-block-size: max-content;
   border-radius: var(--hscl-image-borderRadius, 0);
-  border: var(--hscl-image-border);
+  border-style: var(--hscl-image-borderStyle);
+  border-width: var(--hscl-image-borderWidth);
+  border-color: var(--hscl-image-borderColor);
   box-shadow: var(--hscl-image-boxShadow);
 }
 

package/components/componentLibrary/Image/llm.txt

@@ -174,7 +174,9 @@ The Image component uses CSS variables for theming and customization:
 **Base Styles:**
 - `--hscl-image-display`: Display property (default: inline-block)
 - `--hscl-image-borderRadius`: Border radius (default: 0)
-- `--hscl-image-border`: Border styling (no default)
+- `--hscl-image-borderStyle`: Border style (no default)
+- `--hscl-image-borderWidth`: Border width (no default)
+- `--hscl-image-borderColor`: Border color (no default)
 - `--hscl-image-boxShadow`: Box shadow (no default)
 
 ### Responsive Behavior

package/components/componentLibrary/Image/stories/ImageDecorator.module.scss

@@ -2,6 +2,8 @@
   padding: 20px;
   --hscl-image-display: inline-block;
   --hscl-image-borderRadius: 0;
-  --hscl-image-border: none;
+  --hscl-image-borderStyle: none;
+  --hscl-image-borderWidth: 0;
+  --hscl-image-borderColor: transparent;
   --hscl-image-boxShadow: none;
 }

package/components/componentLibrary/Text/ContentFields.tsx

@@ -7,6 +7,7 @@ import type { ContentFieldsProps } from './types.js';
 // To do: These are placeholders - we can refine and add more after some UX feedback and further discussion
 
 const headingEnabledFeatures: RichTextFieldType['enabledFeatures'] = [
+  'heading',
   'alignment',
   'standard_emphasis',
   'link',

package/components/componentLibrary/Text/index.module.scss

@@ -1,3 +1,42 @@
 .text {
-  color: var(--hscl-text-color, currentColor);
+  color: var(--hs-section-color, currentColor);
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ul,
+  ol,
+  blockquote {
+    margin-block: 0 2rem;
+  }
+
+  *:last-child {
+    margin-block-end: 0
+  }
+
+  a {
+    color: var(--hs-section-link-color);
+  }
+
+  a:hover {
+    color: var(--hs-section-link-color-hover);
+  }
+
+   a:focus-visible {
+    color: var(--hs-section-link-color-hover);
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+   }
+
+  blockquote {
+    padding: 24px;
+    border-radius: 4px;
+    border-left: 3px solid var(--hs-section-blockquote-accentColor);
+    background-color: var(--hs-section-blockquote-backgroundColor);
+    color: var(--hs-section-blockquote-color);
+  }
 }

package/components/componentLibrary/Text/llm.txt

@@ -147,8 +147,10 @@ export default function ArticleModule() {
 
 ### CSS Variables
 
-**Base Styles:**
-- `--hscl-text-color`: Text color applied to the rendered rich text content (default: `currentColor`)
+By default, the Text component inherits styles from the HubSpot theme's section settings (e.g. `--hs-section-color`, `--hs-section-link-color`). The `--hscl-` variables below are overrides — use them when the component is placed in a context (like a Card) that requires different styling than the section defaults.
+
+**Overrides:**
+- `--hscl-text-color`: Text color (falls back to `--hs-section-color`, then `currentColor`)
 
 ## Accessibility
 

package/components/componentLibrary/Video/ContentFields.tsx

@@ -80,6 +80,7 @@ const ContentFields = ({
       <ImageField
         name={oembedThumbnailName}
         label={oembedThumbnailLabel}
+        id="oembedThumbnail"
         default={oembedThumbnailDefault}
         responsive={true}
         resizable={false}