@automattic/jetpack-components 3.3.0 → 4.0.0

package/CHANGELOG.md

@@ -2,17 +2,26 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [4.0.0] - 2026-10-05
+### Changed
+- Update package dependencies. [#52999]
+
+### Removed
+- Remove the Notice component; use Notice from @wordpress/ui instead. [#52932]
+- Remove the unused ZendeskChat component. [#52074]
+
 ## [3.3.0] - 2026-09-28
 ### Added
-- Add a JitmSlot component so every dashboard renders the Jetpack in-dashboard message slot the same way, and keeps the message across route changes. [#52641]
+- Add a `JitmSlot` component that renders the Jetpack in-dashboard message slot and keeps the message across route changes. [#52641]
 - IconTooltip: Add a `label` prop to give the icon trigger an accessible name. [#52800]
 
 ### Changed
-- IconTooltip: Keep focus on the trigger when a tooltip opens, announce its content to screen readers, and show the trigger's focus ring the way other WordPress buttons do. [#52736]
+- IconTooltip: Keep focus on the trigger when a tooltip opens, and announce its content to screen readers. [#52736]
+- IconTooltip: Show the trigger's focus ring the way other WordPress buttons do. [#52736]
 - Use logical CSS properties so layouts mirror in right-to-left languages. [#52749]
 
 ### Deprecated
-- Deprecate GlobalNotices and useGlobalNotices. Use SnackbarNotices from @wordpress/notices instead. [#52193]
+- Deprecate `GlobalNotices` and `useGlobalNotices`. Use `SnackbarNotices` from `@wordpress/notices` instead. [#52193]
 
 ### Fixed
 - IconTooltip: Close a tooltip opened on hover when Escape is pressed, without moving focus. [#52799]
@@ -1978,6 +1987,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[4.0.0]: https://github.com/Automattic/jetpack-components/compare/3.3.0...4.0.0
 [3.3.0]: https://github.com/Automattic/jetpack-components/compare/3.2.0...3.3.0
 [3.2.0]: https://github.com/Automattic/jetpack-components/compare/3.1.2...3.2.0
 [3.1.2]: https://github.com/Automattic/jetpack-components/compare/3.1.1...3.1.2

package/build/components/admin-page/style.module.scss

@@ -105,9 +105,9 @@
 	// We override only the bits that need to differ from those defaults.
 	float: none;
 	text-align: end;
-	background: var(--wpds-color-background-surface-neutral-strong, #fff);
+	background: var(--wpds-color-background-surface-neutral-strong);
 	font-style: italic;
-	color: var(--wpds-color-foreground-content-neutral-weak, #87a6bc);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 	border-bottom: none;
 
 	@media (max-width: 659px) {

package/build/components/copy-to-clipboard/index.js

@@ -6,7 +6,7 @@ import Button from '../button/index.js';
 import { ClipboardIcon, CheckmarkIcon } from '../icons/index.js';
 export const CopyToClipboard = ({ buttonStyle = 'icon', textToCopy, onCopy, ...buttonProps }) => {
     const [hasCopied, setHasCopied] = useState(false);
-    const copyTimer = useRef();
+    const copyTimer = useRef(undefined);
     const copyRef = useCopyToClipboard(textToCopy, () => {
         if (copyTimer.current) {
             clearTimeout(copyTimer.current);

package/build/components/diff-viewer/index.d.ts

@@ -1,4 +1,5 @@
+import type { JSX } from 'react';
 export declare const DiffViewer: ({ diff }: {
     diff: any;
-}) => import("react").JSX.Element;
+}) => JSX.Element;
 export default DiffViewer;

package/build/components/gravatar/index.d.ts

@@ -1,5 +1,6 @@
 import '@gravatar-com/hovercards/dist/style.css';
 import './style.scss';
+import type { JSX } from 'react';
 /**
  * Gravatar `defaultImage` styles, mirroring https://docs.gravatar.com/sdk/images/#default-image
  */

package/build/components/jetpack-footer/style.scss

@@ -1,10 +1,7 @@
-@use "sass:meta";
-@include meta.load-css("pkg:@wordpress/theme/design-tokens.css");
-
 .jetpack-footer {
-	border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
+	border-top: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	box-sizing: border-box;
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
 	width: 100%;
 	display: flex;

package/build/components/theme-provider/index.js

@@ -105,7 +105,7 @@ const setup = (root, id, withGlobalStyles) => {
  * @return {ReactNode}        ThemeProvider component.
  */
 const ThemeProvider = ({ children = null, targetDom, id, withGlobalStyles = true, }) => {
-    const themeWrapperRef = useRef();
+    const themeWrapperRef = useRef(undefined);
     // Check whether the theme provider instance is already registered.
     const isAlreadyProvided = globalThemeInstances?.[id]?.provided;
     useLayoutEffect(() => {

package/build/index.d.ts

@@ -37,11 +37,9 @@ export { default as ProductPrice } from './components/product-price/index.tsx';
 export { default as DotPager } from './components/dot-pager/index.tsx';
 export { default as DonutMeter } from './components/donut-meter/index.tsx';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.tsx';
-export { default as Notice } from './components/notice/index.tsx';
 export { default as Popover } from './components/popover/index.tsx';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.tsx';
 export { default as ActionPopover } from './components/action-popover/index.tsx';
-export { default as ZendeskChat } from './components/zendesk-chat/index.tsx';
 export { default as ProgressBar } from './components/progress-bar/index.tsx';
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';

package/build/index.js

@@ -49,11 +49,9 @@ export { default as ProductPrice } from './components/product-price/index.js';
 export { default as DotPager } from './components/dot-pager/index.js';
 export { default as DonutMeter } from './components/donut-meter/index.js';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
-export { default as Notice } from './components/notice/index.js';
 export { default as Popover } from './components/popover/index.js';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.js';
 export { default as ActionPopover } from './components/action-popover/index.js';
-export { default as ZendeskChat } from './components/zendesk-chat/index.js';
 export { default as ProgressBar } from './components/progress-bar/index.js';
 export { default as UpsellBanner } from './components/upsell-banner/index.js';
 export { getUserLocale, cleanLocale } from './lib/locale/index.js';

package/components/admin-page/style.module.scss

@@ -105,9 +105,9 @@
 	// We override only the bits that need to differ from those defaults.
 	float: none;
 	text-align: end;
-	background: var(--wpds-color-background-surface-neutral-strong, #fff);
+	background: var(--wpds-color-background-surface-neutral-strong);
 	font-style: italic;
-	color: var(--wpds-color-foreground-content-neutral-weak, #87a6bc);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 	border-bottom: none;
 
 	@media (max-width: 659px) {

package/components/copy-to-clipboard/index.tsx

@@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n';
 import Button from '../button/index.tsx';
 import { ClipboardIcon, CheckmarkIcon } from '../icons/index.tsx';
 import { CopyToClipboardProps } from './types.ts';
-import type { FC } from 'react';
+import type { JSX, FC } from 'react';
 
 export const CopyToClipboard: FC< CopyToClipboardProps > = ( {
 	buttonStyle = 'icon',
@@ -14,7 +14,7 @@ export const CopyToClipboard: FC< CopyToClipboardProps > = ( {
 } ) => {
 	const [ hasCopied, setHasCopied ] = useState( false );
 
-	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
+	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >( undefined );
 
 	const copyRef = useCopyToClipboard( textToCopy, () => {
 		if ( copyTimer.current ) {

package/components/diff-viewer/index.tsx

@@ -2,6 +2,7 @@ import { Fragment } from 'react';
 import parseFilename from './parse-filename.ts';
 import parsePatch from './parse-patch.ts';
 import styles from './styles.module.scss';
+import type { JSX } from 'react';
 
 const filename = ( {
 	oldFileName,

package/components/gravatar/index.tsx

@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { sha256 } from 'js-sha256';
 import './style.scss';
+import type { JSX } from 'react';
 
 /**
  * Gravatar `defaultImage` styles, mirroring https://docs.gravatar.com/sdk/images/#default-image

package/components/jetpack-footer/style.scss

@@ -1,10 +1,7 @@
-@use "sass:meta";
-@include meta.load-css("pkg:@wordpress/theme/design-tokens.css");
-
 .jetpack-footer {
-	border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
+	border-top: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	box-sizing: border-box;
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
 	width: 100%;
 	display: flex;

package/components/jitm-slot/index.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useLayoutEffect, useRef } from 'react';
 import './style.scss';
 import type { JitmSlotProps } from './types.ts';
-import type { FC } from 'react';
+import type { JSX, FC } from 'react';
 
 const NOTICES_ID = 'jp-admin-notices';
 

package/components/theme-provider/index.tsx

@@ -121,7 +121,7 @@ const ThemeProvider: FC< ThemeProviderProps > = ( {
 	id,
 	withGlobalStyles = true,
 } ) => {
-	const themeWrapperRef = useRef< HTMLDivElement >();
+	const themeWrapperRef = useRef< HTMLDivElement >( undefined );
 
 	// Check whether the theme provider instance is already registered.
 	const isAlreadyProvided = globalThemeInstances?.[ id ]?.provided;

package/index.ts

@@ -57,11 +57,9 @@ export { default as ProductPrice } from './components/product-price/index.tsx';
 export { default as DotPager } from './components/dot-pager/index.tsx';
 export { default as DonutMeter } from './components/donut-meter/index.tsx';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.tsx';
-export { default as Notice } from './components/notice/index.tsx';
 export { default as Popover } from './components/popover/index.tsx';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.tsx';
 export { default as ActionPopover } from './components/action-popover/index.tsx';
-export { default as ZendeskChat } from './components/zendesk-chat/index.tsx';
 export { default as ProgressBar } from './components/progress-bar/index.tsx';
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "3.3.0",
+	"version": "4.0.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -76,8 +76,8 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@automattic/jetpack-api": "^2.0.0",
-		"@automattic/jetpack-boost-score-api": "^1.1.0",
+		"@automattic/jetpack-api": "^2.1.0",
+		"@automattic/jetpack-boost-score-api": "^1.2.0",
 		"@automattic/jetpack-script-data": "^0.6.8",
 		"@automattic/number-formatters": "^1.2.10",
 		"@babel/runtime": "^7",
@@ -105,7 +105,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.15",
+		"@automattic/jetpack-base-styles": "^1.2.16",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.5.1",
 		"@storybook/addon-docs": "10.4.6",
@@ -124,7 +124,7 @@
 		"storybook": "10.4.6",
 		"ts-dedent": "2.2.0",
 		"typescript": "6.0.3",
-		"webpack": "5.107.2",
+		"webpack": "5.111.1",
 		"webpack-cli": "7.2.1"
 	},
 	"peerDependencies": {

package/build/components/notice/index.d.ts

@@ -1,29 +0,0 @@
-import type { FC, ReactNode } from 'react';
-type NoticeProps = {
-    /** The severity of the alert. */
-    level?: 'error' | 'warning' | 'info' | 'success';
-    /** The title of the notice */
-    title?: string;
-    /** A list of action elements to show across the bottom */
-    actions?: ReactNode[];
-    /** Hide close button */
-    hideCloseButton?: boolean;
-    /** Method to call when the close button is clicked */
-    onClose?: () => void;
-    /** Children to be rendered inside the alert. */
-    children: ReactNode;
-};
-/**
- * Notice component
- *
- * @param {object}      props                 - The component properties.
- * @param {string}      props.level           - The notice level: error, warning, info, success.
- * @param {boolean}     props.hideCloseButton - Whether to hide the close button.
- * @param {Function}    props.onClose         - The function to call when the close button is clicked.
- * @param {string}      props.title           - The title of the notice.
- * @param {ReactNode[]} props.actions         - Actions to show across the bottom of the bar.
- * @param {Component}   props.children        - The notice content.
- * @return {ReactElement}              The `Notice` component.
- */
-declare const Notice: FC<NoticeProps>;
-export default Notice;

package/build/components/notice/index.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, cautionFilled as warning, info, check, close } from '@wordpress/icons';
-import clsx from 'clsx';
-import styles from './style.module.scss';
-const getIconByLevel = (level) => {
-    switch (level) {
-        case 'error':
-            return warning;
-        case 'warning':
-            return warning;
-        case 'info':
-            return info;
-        case 'success':
-            return check;
-        default:
-            return warning;
-    }
-};
-/**
- * Notice component
- *
- * @param {object}      props                 - The component properties.
- * @param {string}      props.level           - The notice level: error, warning, info, success.
- * @param {boolean}     props.hideCloseButton - Whether to hide the close button.
- * @param {Function}    props.onClose         - The function to call when the close button is clicked.
- * @param {string}      props.title           - The title of the notice.
- * @param {ReactNode[]} props.actions         - Actions to show across the bottom of the bar.
- * @param {Component}   props.children        - The notice content.
- * @return {ReactElement}              The `Notice` component.
- */
-const Notice = ({ level = 'info', title, children, actions, hideCloseButton = false, onClose, }) => {
-    const classes = clsx(styles.container, styles[`is-${level}`]);
-    return (_jsxs("div", { className: classes, children: [_jsx("div", { className: styles['icon-wrapper'], children: _jsx(Icon, { icon: getIconByLevel(level), className: styles.icon }) }), _jsxs("div", { className: styles['main-content'], children: [title && _jsx("div", { className: styles.title, children: title }), children, actions && actions.length > 0 && (_jsx("div", { className: styles['action-bar'], children: actions.map((action, index) => (_jsx("div", { className: styles.action, children: action }, index))) }))] }), !hideCloseButton && (_jsx("button", { "aria-label": "close", className: styles['close-button'], onClick: onClose, children: _jsx(Icon, { icon: close }) }))] }));
-};
-export default Notice;

package/build/components/notice/style.module.scss

@@ -1,120 +0,0 @@
-.container {
-	display: flex;
-	align-items: flex-start;
-
-	font-size: var(--font-body);
-
-	border: 1px solid var(--jp-black);
-	border-radius: 4px;
-	border-color: var(--jp-gray-5);
-	border-left-width: 6px;
-
-	padding: 24px 31px 27px 18px;
-}
-
-.icon-wrapper {
-	margin-right: 20px;
-	width: calc(var(--spacing-base) * 3);
-	height: calc(var(--spacing-base) * 3);
-}
-
-.close-button {
-	padding: 0;
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	outline: none;
-
-	svg {
-		display: block;
-	}
-}
-
-// Mobile layout differences.
-@media screen and ( max-width: 600px ) {
-
-	.container {
-		position: relative;
-		padding-top: 68px;
-		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
-	}
-
-	.icon-wrapper {
-		position: absolute;
-		top: 24px;
-		left: 24px;
-	}
-
-	.close-button {
-		position: absolute;
-		top: 24px;
-		right: 24px;
-	}
-}
-
-.main-content {
-	flex-grow: 1;
-}
-
-.title {
-	font-weight: 600;
-	margin-bottom: 8px;
-}
-
-.action-bar {
-	display: flex;
-	align-items: center;
-	margin-top: 20px;
-	row-gap: 20px;
-	flex-wrap: wrap;
-
-	@media screen and ( max-width: 600px ) {
-		justify-content: center;
-	}
-
-	a {
-
-		&,
-		&:hover,
-		&:active,
-		&:focus {
-			color: var(--jp-black);
-		}
-	}
-
-	> * {
-		margin-right: 24px;
-	}
-}
-
-.is-error {
-	border-left-color: var(--jp-red);
-
-	.icon {
-		color: var(--jp-red);
-	}
-}
-
-.is-warning {
-	border-left-color: var(--jp-yellow-20);
-
-	.icon {
-		color: var(--jp-yellow-20);
-	}
-}
-
-.is-info {
-	border-left-color: var(--black);
-
-	.icon {
-		color: var(--black);
-	}
-}
-
-.is-success {
-	border-left-color: var(--jp-green);
-
-	.icon {
-		color: var(--jp-green);
-	}
-}

package/build/components/zendesk-chat/constants.d.ts

@@ -1 +0,0 @@
-export declare const chatKey = "d729d42c-b547-4750-a6f6-8b30534a5f12";

package/build/components/zendesk-chat/constants.js

@@ -1,2 +0,0 @@
-// This is not a secret, it can easily be found in the DOM
-export const chatKey = 'd729d42c-b547-4750-a6f6-8b30534a5f12';

package/build/components/zendesk-chat/index.d.ts

@@ -1,3 +0,0 @@
-import type { ZendeskChatType } from './types.ts';
-export declare const ZendeskChat: ZendeskChatType;
-export default ZendeskChat;

package/build/components/zendesk-chat/index.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useCallback } from 'react';
-import { chatKey } from './constants.js';
-export const ZendeskChat = ({ jwt_token }) => {
-    const authenticateUser = useCallback(() => {
-        if (typeof window !== 'undefined' && typeof window.zE === 'function') {
-            window.zE('messenger', 'loginUser', function (callback) {
-                callback(jwt_token);
-            });
-        }
-    }, [jwt_token]);
-    useEffect(() => {
-        const script = document.createElement('script');
-        const container = document.getElementById('zendesk-chat-container');
-        script.src = 'https://static.zdassets.com/ekr/snippet.js?key=' + encodeURIComponent(chatKey);
-        script.type = 'text/javascript';
-        script.id = 'ze-snippet';
-        script.onload = () => {
-            authenticateUser();
-        };
-        if (container) {
-            container.appendChild(script);
-        }
-    }, [authenticateUser]);
-    return _jsx("div", { "data-testid": "zendesk-chat-container", id: "zendesk-chat-container" });
-};
-export default ZendeskChat;

package/build/components/zendesk-chat/types.d.ts

@@ -1,11 +0,0 @@
-import type { FC } from 'react';
-declare global {
-    interface Window {
-        zE: Function;
-    }
-}
-interface ZendeskChatProps {
-    jwt_token: string;
-}
-export type ZendeskChatType = FC<ZendeskChatProps>;
-export {};

package/build/components/zendesk-chat/types.js

@@ -1 +0,0 @@
-export {};

package/components/notice/index.tsx

@@ -1,93 +0,0 @@
-import { Icon, cautionFilled as warning, info, check, close } from '@wordpress/icons';
-import clsx from 'clsx';
-import styles from './style.module.scss';
-import type { Component, FC, ReactElement, ReactNode } from 'react';
-
-type NoticeProps = {
-	/** The severity of the alert. */
-	level?: 'error' | 'warning' | 'info' | 'success';
-
-	/** The title of the notice */
-	title?: string;
-
-	/** A list of action elements to show across the bottom */
-	actions?: ReactNode[];
-
-	/** Hide close button */
-	hideCloseButton?: boolean;
-
-	/** Method to call when the close button is clicked */
-	onClose?: () => void;
-
-	/** Children to be rendered inside the alert. */
-	children: ReactNode;
-};
-
-const getIconByLevel = ( level: NoticeProps[ 'level' ] ) => {
-	switch ( level ) {
-		case 'error':
-			return warning;
-		case 'warning':
-			return warning;
-		case 'info':
-			return info;
-		case 'success':
-			return check;
-		default:
-			return warning;
-	}
-};
-
-/**
- * Notice component
- *
- * @param {object}      props                 - The component properties.
- * @param {string}      props.level           - The notice level: error, warning, info, success.
- * @param {boolean}     props.hideCloseButton - Whether to hide the close button.
- * @param {Function}    props.onClose         - The function to call when the close button is clicked.
- * @param {string}      props.title           - The title of the notice.
- * @param {ReactNode[]} props.actions         - Actions to show across the bottom of the bar.
- * @param {Component}   props.children        - The notice content.
- * @return {ReactElement}              The `Notice` component.
- */
-const Notice: FC< NoticeProps > = ( {
-	level = 'info',
-	title,
-	children,
-	actions,
-	hideCloseButton = false,
-	onClose,
-} ) => {
-	const classes = clsx( styles.container, styles[ `is-${ level }` ] );
-
-	return (
-		<div className={ classes }>
-			<div className={ styles[ 'icon-wrapper' ] }>
-				<Icon icon={ getIconByLevel( level ) } className={ styles.icon } />
-			</div>
-
-			<div className={ styles[ 'main-content' ] }>
-				{ title && <div className={ styles.title }>{ title }</div> }
-				{ children }
-
-				{ actions && actions.length > 0 && (
-					<div className={ styles[ 'action-bar' ] }>
-						{ actions.map( ( action, index ) => (
-							<div key={ index } className={ styles.action }>
-								{ action }
-							</div>
-						) ) }
-					</div>
-				) }
-			</div>
-
-			{ ! hideCloseButton && (
-				<button aria-label="close" className={ styles[ 'close-button' ] } onClick={ onClose }>
-					<Icon icon={ close } />
-				</button>
-			) }
-		</div>
-	);
-};
-
-export default Notice;

package/components/notice/style.module.scss

@@ -1,120 +0,0 @@
-.container {
-	display: flex;
-	align-items: flex-start;
-
-	font-size: var(--font-body);
-
-	border: 1px solid var(--jp-black);
-	border-radius: 4px;
-	border-color: var(--jp-gray-5);
-	border-left-width: 6px;
-
-	padding: 24px 31px 27px 18px;
-}
-
-.icon-wrapper {
-	margin-right: 20px;
-	width: calc(var(--spacing-base) * 3);
-	height: calc(var(--spacing-base) * 3);
-}
-
-.close-button {
-	padding: 0;
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	outline: none;
-
-	svg {
-		display: block;
-	}
-}
-
-// Mobile layout differences.
-@media screen and ( max-width: 600px ) {
-
-	.container {
-		position: relative;
-		padding-top: 68px;
-		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
-	}
-
-	.icon-wrapper {
-		position: absolute;
-		top: 24px;
-		left: 24px;
-	}
-
-	.close-button {
-		position: absolute;
-		top: 24px;
-		right: 24px;
-	}
-}
-
-.main-content {
-	flex-grow: 1;
-}
-
-.title {
-	font-weight: 600;
-	margin-bottom: 8px;
-}
-
-.action-bar {
-	display: flex;
-	align-items: center;
-	margin-top: 20px;
-	row-gap: 20px;
-	flex-wrap: wrap;
-
-	@media screen and ( max-width: 600px ) {
-		justify-content: center;
-	}
-
-	a {
-
-		&,
-		&:hover,
-		&:active,
-		&:focus {
-			color: var(--jp-black);
-		}
-	}
-
-	> * {
-		margin-right: 24px;
-	}
-}
-
-.is-error {
-	border-left-color: var(--jp-red);
-
-	.icon {
-		color: var(--jp-red);
-	}
-}
-
-.is-warning {
-	border-left-color: var(--jp-yellow-20);
-
-	.icon {
-		color: var(--jp-yellow-20);
-	}
-}
-
-.is-info {
-	border-left-color: var(--black);
-
-	.icon {
-		color: var(--black);
-	}
-}
-
-.is-success {
-	border-left-color: var(--jp-green);
-
-	.icon {
-		color: var(--jp-green);
-	}
-}

package/components/zendesk-chat/README.md

@@ -1,25 +0,0 @@
-# Summary
-
-This component adds a Zendesk chat widget via <script> tag to any page the componet is added to 
-
-WARNING: If you add this to a specific site, it will stay on the page until the browser reloads onto a page that does not load this widget. For example, if a section of the plugin is using `react-router`, and the widget is loaded onto one specific route, it will not go away when a new route is taken since the page is not reloaded
-
-## Usage
-
-```tsx
-import { ZendeskChat } from '@automattic/jetpack-components';
-
-const ExampleComponent = () => (
-	<ZendeskChat />
-);
-```
-
-## Props
-
-None
-
-Because the chat is conditionally rendered based on Date and Time, no props are needed in order to render correctly.
-  
-## Note
-
-There is a wpcom/v2 API endpoint `/presales/chat?group=jp_presales` that returns whether or not chat is available at this time. This should be used when determining whether or not to render this component.

package/components/zendesk-chat/constants.ts

@@ -1,2 +0,0 @@
-// This is not a secret, it can easily be found in the DOM
-export const chatKey = 'd729d42c-b547-4750-a6f6-8b30534a5f12';

package/components/zendesk-chat/index.tsx

@@ -1,34 +0,0 @@
-import { useEffect, useCallback } from 'react';
-import { chatKey } from './constants.ts';
-import type { ZendeskChatType } from './types.ts';
-
-export const ZendeskChat: ZendeskChatType = ( { jwt_token } ) => {
-	const authenticateUser = useCallback( () => {
-		if ( typeof window !== 'undefined' && typeof window.zE === 'function' ) {
-			window.zE( 'messenger', 'loginUser', function ( callback ) {
-				callback( jwt_token );
-			} );
-		}
-	}, [ jwt_token ] );
-
-	useEffect( () => {
-		const script = document.createElement( 'script' );
-		const container = document.getElementById( 'zendesk-chat-container' );
-
-		script.src = 'https://static.zdassets.com/ekr/snippet.js?key=' + encodeURIComponent( chatKey );
-		script.type = 'text/javascript';
-		script.id = 'ze-snippet';
-
-		script.onload = () => {
-			authenticateUser();
-		};
-
-		if ( container ) {
-			container.appendChild( script );
-		}
-	}, [ authenticateUser ] );
-
-	return <div data-testid="zendesk-chat-container" id="zendesk-chat-container" />;
-};
-
-export default ZendeskChat;

package/components/zendesk-chat/types.ts

@@ -1,14 +0,0 @@
-import type { FC } from 'react';
-
-declare global {
-	interface Window {
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-		zE: Function;
-	}
-}
-
-interface ZendeskChatProps {
-	jwt_token: string;
-}
-
-export type ZendeskChatType = FC< ZendeskChatProps >;