@gravityforms/components 6.2.2 → 6.4.0

package/dist/mappings/admin.js

@@ -1,4 +1,9 @@
 module.exports = [
+  {
+    "defaultExport": "Table",
+    "importPath": "html/admin/modules/",
+    "externalPath": "components.admin.html.modules"
+  },
   {
     "defaultExport": "Flyout",
     "namedExports": [
@@ -15,11 +20,6 @@ module.exports = [
     "importPath": "html/admin/modules/",
     "externalPath": "components.admin.html.modules"
   },
-  {
-    "defaultExport": "Table",
-    "importPath": "html/admin/modules/",
-    "externalPath": "components.admin.html.modules"
-  },
   {
     "defaultExport": "Text",
     "namedExports": [
@@ -93,50 +93,50 @@ module.exports = [
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Textarea",
+    "defaultExport": "Heading",
     "namedExports": [
-      "textareaTemplate"
+      "headingTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Toggle",
+    "defaultExport": "Dropdown",
     "namedExports": [
-      "toggleTemplate"
+      "dropdownTemplate",
+      "dropdownListItems"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Heading",
+    "defaultExport": "Button",
     "namedExports": [
-      "headingTemplate"
+      "buttonTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Dropdown",
+    "defaultExport": "Alert",
     "namedExports": [
-      "dropdownTemplate",
-      "dropdownListItems"
+      "alertTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Button",
+    "defaultExport": "Textarea",
     "namedExports": [
-      "buttonTemplate"
+      "textareaTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
   },
   {
-    "defaultExport": "Alert",
+    "defaultExport": "Toggle",
     "namedExports": [
-      "alertTemplate"
+      "toggleTemplate"
     ],
     "importPath": "html/admin/elements/",
     "externalPath": "components.admin.html.elements"
@@ -170,16 +170,6 @@ module.exports = [
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
-  {
-    "defaultExport": "RouterNavBar",
-    "importPath": "react/admin/modules/",
-    "externalPath": "components.admin.react.modules"
-  },
-  {
-    "defaultExport": "Repeater",
-    "importPath": "react/admin/modules/",
-    "externalPath": "components.admin.react.modules"
-  },
   {
     "defaultExport": "Phone",
     "importPath": "react/admin/modules/",
@@ -246,7 +236,7 @@ module.exports = [
     "externalPath": "components.admin.react.modules"
   },
   {
-    "defaultExport": "Dialog",
+    "defaultExport": "Repeater",
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
@@ -270,6 +260,11 @@ module.exports = [
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
+  {
+    "defaultExport": "RouterNavBar",
+    "importPath": "react/admin/modules/",
+    "externalPath": "components.admin.react.modules"
+  },
   {
     "defaultExport": "Calendar",
     "importPath": "react/admin/modules/",
@@ -291,12 +286,12 @@ module.exports = [
     "externalPath": "components.admin.react.modules"
   },
   {
-    "defaultExport": "Address",
+    "defaultExport": "Alert",
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
   {
-    "defaultExport": "Alert",
+    "defaultExport": "Address",
     "importPath": "react/admin/modules/",
     "externalPath": "components.admin.react.modules"
   },
@@ -335,11 +330,6 @@ module.exports = [
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
-  {
-    "defaultExport": "Pill",
-    "importPath": "react/admin/elements/",
-    "externalPath": "components.admin.react.elements"
-  },
   {
     "defaultExport": "Popover",
     "importPath": "react/admin/elements/",
@@ -351,12 +341,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "Link",
+    "defaultExport": "Pill",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "Label",
+    "defaultExport": "Link",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -366,7 +356,7 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "Image",
+    "defaultExport": "Label",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -376,7 +366,7 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "HelpText",
+    "defaultExport": "Image",
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
@@ -385,6 +375,11 @@ module.exports = [
     "importPath": "react/admin/elements/",
     "externalPath": "components.admin.react.elements"
   },
+  {
+    "defaultExport": "HelpText",
+    "importPath": "react/admin/elements/",
+    "externalPath": "components.admin.react.elements"
+  },
   {
     "defaultExport": "Grid",
     "importPath": "react/admin/elements/",
@@ -420,6 +415,11 @@ module.exports = [
     "importPath": "react/admin/modules/Videos/",
     "externalPath": "components.admin.react.modules"
   },
+  {
+    "defaultExport": "Dialog",
+    "importPath": "react/admin/modules/",
+    "externalPath": "components.admin.react.modules"
+  },
   {
     "__esModule": true,
     "default": {
@@ -509,7 +509,7 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "TwilioLogo",
+    "defaultExport": "TelegramLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -519,7 +519,7 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "TelegramLogo",
+    "defaultExport": "TwilioLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -529,12 +529,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SendGridLogo",
+    "defaultExport": "SlackLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "SlackLogo",
+    "defaultExport": "SendGridLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -604,12 +604,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MandrillLogo",
+    "defaultExport": "MicrosoftAltLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MicrosoftAltLogo",
+    "defaultExport": "MandrillLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -624,12 +624,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MailgunFullLogo",
+    "defaultExport": "MailgunLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MailgunLogo",
+    "defaultExport": "MailgunFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -668,6 +668,16 @@ module.exports = [
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
+  {
+    "defaultExport": "MailFailed",
+    "importPath": "react/admin/elements/Svgs/",
+    "externalPath": "components.admin.react.elements"
+  },
+  {
+    "defaultExport": "GravityTextLogo",
+    "importPath": "react/admin/elements/Svgs/",
+    "externalPath": "components.admin.react.elements"
+  },
   {
     "defaultExport": "GravitySMTPTextLogo",
     "importPath": "react/admin/elements/Svgs/",
@@ -718,11 +728,6 @@ module.exports = [
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
-  {
-    "defaultExport": "EmailitLogo",
-    "importPath": "react/admin/elements/Svgs/",
-    "externalPath": "components.admin.react.elements"
-  },
   {
     "defaultExport": "EmailitFullLogo",
     "importPath": "react/admin/elements/Svgs/",
@@ -734,12 +739,12 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "ElasticEmailFullLogo",
+    "defaultExport": "EmailitLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "CustomSMTPFull",
+    "defaultExport": "ElasticEmailFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
@@ -764,22 +769,22 @@ module.exports = [
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "BrevoFullLogo",
+    "defaultExport": "CustomSMTPFull",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "AmazonAWSLogo",
+    "defaultExport": "BrevoFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "AmazonAWSFullLogo",
+    "defaultExport": "AmazonAWSLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },
   {
-    "defaultExport": "MailFailed",
+    "defaultExport": "AmazonAWSFullLogo",
     "importPath": "react/admin/elements/Svgs/",
     "externalPath": "components.admin.react.elements"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravityforms/components",
-  "version": "6.2.2",
+  "version": "6.4.0",
   "description": "UI components for use in Gravity Forms development. Both React and vanilla js flavors.",
   "author": "Rocketgenius",
   "license": "GPL-2.0-or-later",
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@gravityforms/components": "^6.2.2",
+    "@gravityforms/components": "^6.4.0",
     "@gravityforms/libraries": "^6.0.0",
-    "@gravityforms/react-utils": "^5.1.7",
+    "@gravityforms/react-utils": "^5.2.0",
     "@gravityforms/request": "^6.1.0",
-    "@gravityforms/utils": "^5.0.3",
+    "@gravityforms/utils": "^5.0.4",
     "input-format": "0.3.14",
     "libphonenumber-js": "1.11.20",
     "recharts": "2.12.7"

package/react/admin/elements/Input/index.js

@@ -26,6 +26,7 @@ const { useState, forwardRef } = React;
  * @param {object}                     props.helpTextAttributes        Custom attribute for the help text.
  * @param {string}                     props.helpTextPosition          The position of the help text.
  * @param {string}                     props.iconAttributes            Custom attributes for the icon.
+ * @param {string}                     props.iconPosition              The position of the icon, one of `left` or `right`.
  * @param {string}                     props.id                        Optional id. Auto generated if not passed.
  * @param {object}                     props.labelAttributes           Any custom attributes for the label.
  * @param {string}                     props.max                       The maximum value to accept for the input if type is number.
@@ -83,6 +84,7 @@ const Input = forwardRef( ( {
 	},
 	helpTextPosition = 'below',
 	iconAttributes = {},
+	iconPosition = 'right',
 	id = '',
 	inputPrefix = '',
 	labelAttributes = {
@@ -144,6 +146,7 @@ const Input = forwardRef( ( {
 			'gform-input-wrapper--required': required,
 			[ `gform-input-wrapper--border-${ borderStyle }` ]: true,
 			'gform-input-wrapper--with-icon': withIcon,
+			[ `gform-input-wrapper--icon-${ iconPosition }` ]: withIcon,
 			[ `gform-input-wrapper--text-security-${ textSecurity }` ]: type !== 'password' && textSecurity !== 'none',
 		}, wrapperClasses ),
 		ref,
@@ -297,6 +300,7 @@ Input.propTypes = {
 	helpTextAttributes: PropTypes.object,
 	helpTextPosition: PropTypes.string,
 	iconAttributes: PropTypes.object,
+	iconPosition: PropTypes.oneOf( [ 'left', 'right' ] ),
 	id: PropTypes.string,
 	labelAttributes: PropTypes.object,
 	max: PropTypes.string,

package/react/admin/elements/Label/index.js

@@ -1,8 +1,9 @@
 import { React, PropTypes, classnames } from '@gravityforms/libraries';
 import { spacerClasses } from '@gravityforms/utils';
+import RingLoader from '../../modules/Loaders/RingLoader';
 import Tooltip from '../../modules/Tooltip';
 
-const { forwardRef } = React;
+const { forwardRef, useEffect, useRef, useState } = React;
 
 /**
  * @module Label
@@ -19,6 +20,10 @@ const { forwardRef } = React;
  * @param {string}                     props.iconPrefix       The icon prefix for the label.
  * @param {boolean}                    props.isVisible        If label is visible (true) or hidden (false).
  * @param {string}                     props.label            Label text.
+ * @param {object}                     props.loaderProps      Props passed to the RingLoader when loading. All RingLoader props can be overridden.
+ * @param {boolean}                    props.loading          If true, displays a RingLoader inline with the label text.
+ * @param {number}                     props.loadingDelay     Delay in ms before the loading indicator appears. Prevents flash for fast operations. Default 0.
+ * @param {string}                     props.loadingText      Optional text to display in place of label while loading. If empty, the label text remains.
  * @param {boolean}                    props.locked           If the label is locked (disables form element and puts an icon with optional tooltip next to label).
  * @param {string}                     props.lockedMessage    The message to display when the label is locked, in a tooltip. (optional)
  * @param {string}                     props.size             The font size for the label.
@@ -44,6 +49,15 @@ const Label = forwardRef( ( {
 	iconPrefix = 'gravity-component-icon',
 	isVisible = true,
 	label = '',
+	loaderProps = {
+		customClasses: 'gform-label__loader',
+		lineWeight: 2,
+		size: 16,
+		spacing: [ 0, 2, 0, 0 ],
+	},
+	loading = false,
+	loadingDelay = 0,
+	loadingText = '',
 	locked = false,
 	lockedMessage = '',
 	size = 'text-sm',
@@ -51,13 +65,32 @@ const Label = forwardRef( ( {
 	tagName = 'label',
 	weight = 'medium',
 }, ref ) => {
-	if ( ! label && ! children ) {
+	const [ delayedLoading, setDelayedLoading ] = useState( false );
+	const timerRef = useRef( null );
+
+	useEffect( () => {
+		if ( loading && loadingDelay > 0 ) {
+			timerRef.current = setTimeout( () => {
+				setDelayedLoading( true );
+			}, loadingDelay );
+		} else {
+			clearTimeout( timerRef.current );
+			setDelayedLoading( loading );
+		}
+
+		return () => clearTimeout( timerRef.current );
+	}, [ loading, loadingDelay ] );
+
+	const isLoading = loadingDelay > 0 ? delayedLoading : loading;
+
+	if ( ! label && ! children && ! ( isLoading && loadingText ) ) {
 		return null;
 	}
 
 	const componentProps = {
 		className: classnames( {
 			'gform-label': true,
+			'gform-label--loading': isLoading,
 			'gform-legend': tagName === 'legend',
 			[ `gform-typography--size-${ size }` ]: true,
 			[ `gform-typography--weight-${ weight }` ]: true,
@@ -88,7 +121,8 @@ const Label = forwardRef( ( {
 
 	return (
 		<Tag { ...componentProps }>
-			{ label }
+			{ isLoading && <RingLoader { ...loaderProps } /> }
+			{ isLoading && loadingText ? loadingText : label }
 			{ children }
 			{ locked && <Tooltip { ...tooltipProps } /> }
 		</Tag>
@@ -110,6 +144,10 @@ Label.propTypes = {
 	iconPrefix: PropTypes.string,
 	isVisible: PropTypes.bool,
 	label: PropTypes.string,
+	loaderProps: PropTypes.object,
+	loading: PropTypes.bool,
+	loadingDelay: PropTypes.number,
+	loadingText: PropTypes.string,
 	locked: PropTypes.bool,
 	lockedMessage: PropTypes.string,
 	size: PropTypes.string,

package/react/admin/elements/Svgs/GravityTextLogo/index.js

@@ -0,0 +1,49 @@
+import { React, PropTypes } from '@gravityforms/libraries';
+
+const { forwardRef } = React;
+
+/**
+ * @module GravityTextLogo
+ * @description The Gravity text logo.
+ *
+ * @since 6.3.0
+ *
+ * @param {object} props             Component props.
+ * @param {number} props.height      The height of the logo.
+ * @param {string} props.primaryFill The primary fill color.
+ * @param {string} props.title       The title of the logo.
+ * @param {number} props.width       The width of the logo.
+ *
+ * @return {JSX.Element} The text component.
+ * @example
+ * import GravityTextLogo from '@gravityforms/components/react/admin/elements/Svgs/GravityTextLogo';
+ *
+ * return (
+ *    <GravityTextLogo height={ 19 } width={ 120 } />
+ * );
+ *
+ */
+const GravityTextLogo = forwardRef( ( {
+	height = 19,
+	primaryFill = '#1B2A45',
+	title = '',
+	width = 120,
+}, ref ) => {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 120 19" ref={ ref }>
+			{ title !== '' && <title>{ title }</title> }
+			<path fill={ primaryFill } d="M9.233 0c3.591 0 7.182 1.693 8.208 5.9h-3.795c-.924-1.745-2.36-2.412-4.413-2.412-3.385 0-5.283 2.514-5.283 5.745 0 3.386 2.052 5.695 5.283 5.695 2.463 0 4.31-.718 5.08-3.437H9.387V8.26h8.464c.102 1.693.05 3.386-.565 5.027-1.385 3.591-4.617 5.13-8.054 5.13C4.463 18.416 0 15.184 0 9.233 0 3.232 4.463 0 9.233 0Zm49.145 17.596v.512h-4.002l-1.436-2.975H45.4l-1.386 2.975h-4.001v-.512L48.323.052h1.795l8.26 17.544Zm5.54-11.645 2 4.411h.102v-.05l1.899-4.36L70.33.256h4.104V.82l-7.695 17.287h-1.59L57.403.821V.257h4.104l2.411 5.694Zm18.057 12.157h-3.847V.154h3.847v17.954ZM100.904 3.54H95.21v14.568h-3.745V3.54H85.72V.205h15.184V3.54ZM29.958.154c4.104 0 6.361 2.975 6.361 6.156 0 2.257-1.18 4.258-3.231 5.284l4.052 5.95v.514h-4.104l-3.693-5.9H26.11v5.9h-3.847V.154h7.694Zm79.718 3.847 1.693 3.437h.103l1.795-3.54 2.154-3.693h4.104V.77l-6.207 10.157v7.13h-3.847v-7.13L103.264.77V.205h4.155l2.257 3.796ZM46.63 11.952h5.027l-2.513-5.9-2.514 5.9ZM26.06 9.028h3.847c1.642 0 2.667-1.23 2.667-2.77 0-1.487-1.025-2.718-2.667-2.718H26.06v5.488Z" />
+		</svg>
+	);
+} );
+
+GravityTextLogo.propTypes = {
+	height: PropTypes.number,
+	primaryFill: PropTypes.string,
+	title: PropTypes.string,
+	width: PropTypes.number,
+};
+
+GravityTextLogo.displayName = 'Svgs/GravityTextLogo';
+
+export default GravityTextLogo;

package/react/admin/elements/Svgs/index.js

@@ -5,6 +5,7 @@ export { default as GoogleLogo } from './GoogleLogo';
 export { default as GravitySMTPFullLogo } from './GravitySMTPFullLogo';
 export { default as GravitySMTPLogo } from './GravitySMTPLogo';
 export { default as GravitySMTPTextLogo } from './GravitySMTPTextLogo';
+export { default as GravityTextLogo } from './GravityTextLogo';
 export { default as MailchimpLogo } from './MailchimpLogo';
 export { default as MailgunLogo } from './MailgunLogo';
 export { default as MandrillLogo } from './MandrillLogo';

package/react/admin/elements/Toggle/index.js

@@ -14,6 +14,7 @@ const { useState, forwardRef } = React;
  *
  * @param {object}                     props                    Component props.
  * @param {string}                     props.ariaLabel          The aria-label text for the toggle.
+ * @param {boolean}                    props.busy               If true, disables interaction without applying visual disabled styles. Useful during async operations.
  * @param {JSX.Element}                props.children           React element children.
  * @param {object}                     props.customAttributes   Custom attributes for the component.
  * @param {string|Array|object}        props.customClasses      Custom classes for the component.
@@ -54,6 +55,7 @@ const { useState, forwardRef } = React;
 
 const Toggle = forwardRef( ( {
 	ariaLabel = '',
+	busy = false,
 	children = null,
 	customAttributes = {},
 	customClasses = [],
@@ -93,6 +95,7 @@ const Toggle = forwardRef( ( {
 			[ `gform-toggle--label-${ labelPosition }` ]: true,
 			[ `gform-toggle--width-${ width }` ]: true,
 			[ `gform-toggle--help-text-width-${ helpTextWidth }` ]: helpTextAttributes.content,
+			'gform-toggle--busy': busy,
 			'gform-toggle--disabled': disabled,
 			...spacerClasses( spacing ),
 		}, wrapperClasses ),
@@ -106,7 +109,7 @@ const Toggle = forwardRef( ( {
 			'gform-toggle__toggle': true,
 			'gform-toggle__toggle--has-icons': icons,
 		}, customClasses ),
-		disabled: disabled || labelAttributes?.locked === true,
+		disabled: disabled || busy || labelAttributes?.locked === true,
 		id: inputId,
 		name,
 		onBlur,
@@ -126,6 +129,9 @@ const Toggle = forwardRef( ( {
 	if ( ariaLabel ) {
 		inputProps[ 'aria-label' ] = ariaLabel;
 	}
+	if ( busy ) {
+		inputProps[ 'aria-busy' ] = true;
+	}
 	if ( helpTextAttributes.content ) {
 		inputProps[ 'aria-describedby' ] = helpTextId;
 	}
@@ -165,6 +171,7 @@ const Toggle = forwardRef( ( {
 
 Toggle.propTypes = {
 	ariaLabel: PropTypes.string,
+	busy: PropTypes.bool,
 	children: PropTypes.oneOfType( [
 		PropTypes.arrayOf( PropTypes.node ),
 		PropTypes.node,

package/react/admin/modules/Cards/IntegrationCard/index.js

@@ -23,6 +23,7 @@ const { forwardRef } = React;
  * @param {object}              props.headerGridAttributes Custom attributes for the header grid.
  * @param {JSX.Element|null}    props.title                React element for the title.
  * @param {object}              props.titleGridAttributes  Custom attributes for the title grid.
+ * @param {string|number|Array|object} props.spacing       The spacing for the component, as a string, number, array, or object.
  * @param {object|null}         ref                        Ref to the component.
  *
  * @return {JSX.Element} The integration card component.
@@ -43,6 +44,7 @@ const IntegrationCard = forwardRef( ( {
 	customClasses = [],
 	description = null,
 	disabled = false,
+	spacing = 0,
 	footerContent = [],
 	footerGridAttributes = {},
 	headerContent = [],
@@ -55,6 +57,7 @@ const IntegrationCard = forwardRef( ( {
 			'gform-card--disabled': disabled,
 		}, customClasses ),
 		...customAttributes,
+		spacing,
 		style: 'integration',
 	};
 
@@ -167,6 +170,12 @@ IntegrationCard.propTypes = {
 	headerGridAttributes: PropTypes.object,
 	title: PropTypes.node,
 	titleGridAttributes: PropTypes.object,
+	spacing: PropTypes.oneOfType( [
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.array,
+		PropTypes.object,
+	] ),
 };
 
 IntegrationCard.displayName = 'Cards/IntegrationCard';