@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.1

package/v2Containers/WebPush/Create/preview/NotificationContainer.js

@@ -1,290 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import chromeIcon from './assets/chrome-icon.png';
-import AndroidMobileChromeHeader from './components/AndroidMobileChromeHeader';
-import AndroidMobileExpanded from './components/AndroidMobileExpanded';
-import NotificationExpandedContent from './components/NotificationExpandedContent';
-import NotificationHeader from './components/NotificationHeader';
-import WindowsChromeExpanded from './components/WindowsChromeExpanded';
-import IOSHeader from './components/IOSHeader';
-import {
-  OS_MACOS,
-  OS_IOS,
-  OS_IPADOS,
-  OS_WINDOWS,
-  OS_ANDROID_MOBILE,
-  OS_ANDROID_TABLET,
-  BROWSER_CHROME,
-  BROWSER_FIREFOX,
-  BROWSER_EDGE,
-  BROWSER_OPERA,
-  BRAND_ICON_SUPPORTED_BROWSERS,
-  BROWSER_DISPLAY_NAMES,
-  DUMMY_CTA_BUTTONS,
-  NOTIFICATION_STATE_COLLAPSED,
-  NOTIFICATION_STATE_EXPANDED,
-} from './constants';
-
-/**
- * Converts OS name to CSS class name format
- * @param {string} os - Operating system name (e.g., 'macOS', 'Android (Mobile)')
- * @returns {string} CSS class name (e.g., 'macos', 'android-mobile')
- */
-const getOSClassName = (os) => {
-  const osMap = {
-    [OS_MACOS]: 'macos',
-    [OS_IOS]: 'ios',
-    [OS_IPADOS]: 'ipados',
-    [OS_WINDOWS]: 'windows',
-    [OS_ANDROID_MOBILE]: 'android-mobile',
-    [OS_ANDROID_TABLET]: 'android-tablet',
-  };
-  return osMap[os] || os.toLowerCase().replace(/\s+/g, '-').replace(/[()]/g, '');
-};
-
-/**
- * Converts Browser name to CSS class name format
- * @param {string} browser - Browser name (e.g., 'Chrome', 'Firefox')
- * @returns {string} CSS class name (e.g., 'chrome', 'firefox')
- */
-const getBrowserClassName = (browser) => {
-  return browser.toLowerCase();
-};
-
-/**
- * Gets the combined platform + browser class name for notification-container
- * @param {string} os - Operating system name
- * @param {string} browser - Browser name
- * @returns {string} Combined class name (e.g., 'macos-chrome', 'windows-firefox')
- */
-const getNotificationContainerClassName = (os, browser) => {
-  const osClass = getOSClassName(os);
-  const browserClass = getBrowserClassName(browser);
-  return `${osClass}-${browserClass}`;
-};
-
-// preview-only: strip protocol, drop www. only, remove child paths and trailing slashes
-const formatUrlForPreview = (rawUrl) => {
-  if (!rawUrl) return rawUrl;
-  const withoutProtocol = rawUrl.replace(/^https?:\/\//i, '');
-  const withoutWww = withoutProtocol.startsWith('www.') ? withoutProtocol.slice(4) : withoutProtocol;
-  // Remove child paths (everything after the first slash)
-  const domainOnly = withoutWww.split('/')[0];
-  return domainOnly.replace(/\/+$/, '');
-};
-
-/**
- * NotificationContainer Component
- * 
- * Standalone notification container component that renders the actual notification UI.
- * This component is decoupled from any wrapper containers and can be used
- * in different contexts (main preview, device frame preview, etc.).
- * 
- * The component renders the notification-container div with all its content:
- * - Notification header (icon, title, URL, body)
- * - Expanded content (media image, CTA buttons) when state is 'Expanded'
- * 
- * @param {string} notificationTitle - Title of the notification
- * @param {string} notificationBody - Body text of the notification
- * @param {string} url - URL for the notification
- * @param {string} selectedOS - Operating system name
- * @param {string} selectedBrowser - Browser name
- * @param {string} notificationState - 'Collapsed' or 'Expanded' (default: 'Collapsed')
- * @param {string} className - Additional CSS classes to apply to the container
- * @param {string} icon - Icon asset for the browser (defaults to Chrome)
- * @param {boolean} supportsExpanded - Whether Expanded state is supported for this variant
- * @param {boolean} enableMedia - Whether to render media section when expanded
- * @param {boolean} enableCtas - Whether to render CTA buttons when expanded
- * @param {string} imageSrc - Media/banner image source URL
- * @param {string} brandIconSrc - Brand icon image source URL
- */
-const NotificationContainer = ({
-  notificationTitle,
-  notificationBody,
-  url,
-  selectedOS,
-  selectedBrowser,
-  notificationState = NOTIFICATION_STATE_COLLAPSED,
-  className = '',
-  icon = chromeIcon,
-  supportsExpanded = true,
-  enableMedia = true,
-  enableCtas = true,
-  brandIcon = '',
-  enableBrandIconPreview = true,
-  imageSrc = '',
-  brandIconSrc = '',
-}) => {
-  const isExpanded = supportsExpanded && notificationState === NOTIFICATION_STATE_EXPANDED;
-  const notificationContainerClass = getNotificationContainerClassName(selectedOS, selectedBrowser);
-  const stateClass = isExpanded ? 'expanded' : 'collapsed';
-  const selectedBrowserLower = (selectedBrowser || '').toLowerCase();
-
-  // Platform detection object - provides clean access to all platform/browser checks
-  const platform = {
-    parts: notificationContainerClass.split('-'),
-    get os() { return this.parts[0]; },
-    get browser() { return this.parts.length === 3 ? this.parts[2] : this.parts[1]; },
-    get isMacOs() { return selectedOS === OS_MACOS; },
-    get isIOS() { return selectedOS === OS_IOS; },
-    get isIPadOS() { return selectedOS === OS_IPADOS; },
-    get isAndroidMobile() { return this.os === 'android' && this.parts[1] === 'mobile'; },
-    get isAndroidTablet() { return this.os === 'android' && this.parts[1] === 'tablet'; },
-    get isIOSBrowser() { return this.os === 'ios'; },
-    get isIPadOSBrowser() { return this.os === 'ipados'; },
-    get isWindows() { return this.os === 'windows'; },
-    get supportsBrandIcon() { return BRAND_ICON_SUPPORTED_BROWSERS.includes(selectedBrowserLower); },
-    get isMacOsBrandIconBrowser() { return this.isMacOs && this.supportsBrandIcon; },
-    get isWindowsExpanded() { return this.isWindows && isExpanded; },
-    get isMacOsExpandedBrand() { return this.isMacOs && isExpanded && this.supportsBrandIcon; },
-  };
-
-  const displayUrl = formatUrlForPreview(url) || url || '';
-  // Use real media image from form/props
-  const mediaImageUrl = imageSrc || '';
-  // Use real brand icon from form/props, fallback to prop if provided for backward compatibility
-  const actualBrandIcon = brandIconSrc || brandIcon || '';
-  const shouldShowBrandIconAndroidExpanded =
-    (platform.isAndroidMobile || platform.isAndroidTablet) && isExpanded && enableBrandIconPreview && Boolean(actualBrandIcon);
-  // TODO: Replace with actual CTA buttons from form/props
-  // For now, using dummy values to show expanded state preview
-  const ctaButtons = DUMMY_CTA_BUTTONS;
-
-  // Brand icon preview toggle (set enableBrandIconPreview to false to see no-brand state)
-  const shouldShowBrandIcon = (() => {
-    // iOS/iPadOS NEVER show brand icons - they use a simple notification style
-    if (platform.isIOSBrowser || platform.isIPadOSBrowser) return false;
-    
-    if (!enableBrandIconPreview || !actualBrandIcon) return false;
-    if (platform.isAndroidMobile && !isExpanded) return true;
-    if (platform.isAndroidTablet && !isExpanded) return true;
-    // macOS: show brand icon for all browsers in collapsed state
-    if (platform.isMacOs && !isExpanded) return true;
-    // Windows browsers: show brand icon in collapsed state (same as macOS Chrome)
-    if (platform.isWindows && !isExpanded) return true;
-    return false;
-  })();
-
-  const shouldShowBrandIconInExpandedMac = (() => {
-    if (!platform.isMacOsExpandedBrand) return false;
-    if (!enableBrandIconPreview || !actualBrandIcon) return false;
-    return true;
-  })();
-
-  const shouldRenderExpandedMedia = (() => {
-    if (!enableMedia) return false;
-    if (platform.isMacOsExpandedBrand) {
-      // For macOS brand browsers, only render if brand icon is available.
-      return shouldShowBrandIconInExpandedMac;
-    }
-    return Boolean(mediaImageUrl);
-  })();
-
-  const containerClasses = [
-    'notification-container',
-    notificationContainerClass,
-    stateClass,
-    className,
-    platform.isWindowsExpanded ? 'windows-chrome-expanded' : '',
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .trim();
-
-  // Get browser display name for Windows expanded notifications
-  const getBrowserDisplayName = (browser) => {
-    return BROWSER_DISPLAY_NAMES[browser] || browser;
-  };
-
-  return (
-    <div className={containerClasses}>
-      {platform.isWindowsExpanded ? (
-        <WindowsChromeExpanded
-          icon={icon}
-          brandIcon={actualBrandIcon}
-          enableBrandIconPreview={enableBrandIconPreview}
-          notificationTitle={notificationTitle}
-          notificationBody={notificationBody}
-          displayUrl={displayUrl}
-          browserName={getBrowserDisplayName(selectedBrowser)}
-          mediaImageUrl={mediaImageUrl}
-        />
-      ) : (platform.isAndroidMobile || platform.isAndroidTablet) && isExpanded ? (
-        <AndroidMobileExpanded
-          icon={icon}
-          selectedBrowser={selectedBrowser}
-          notificationTitle={notificationTitle}
-          notificationBody={notificationBody}
-          displayUrl={displayUrl}
-          brandIcon={actualBrandIcon}
-          shouldShowBrandIcon={shouldShowBrandIcon}
-          shouldShowBrandIconExpanded={shouldShowBrandIconAndroidExpanded}
-          mediaImageUrl={mediaImageUrl}
-        />
-      ) : (
-        <>
-          {(platform.isAndroidMobile || platform.isAndroidTablet) && !isExpanded ? (
-            <AndroidMobileChromeHeader
-              icon={icon}
-              selectedBrowser={selectedBrowser}
-              notificationTitle={notificationTitle}
-              notificationBody={notificationBody}
-              brandIcon={actualBrandIcon}
-              shouldShowBrandIcon={shouldShowBrandIcon}
-            />
-          ) : (platform.isIOSBrowser || platform.isIPadOSBrowser) ? (
-            <IOSHeader
-              icon={icon}
-              selectedBrowser={selectedBrowser}
-              notificationTitle={notificationTitle}
-              notificationBody={notificationBody}
-            />
-          ) : (
-            <NotificationHeader
-              icon={icon}
-              selectedBrowser={selectedBrowser}
-              notificationTitle={notificationTitle}
-              displayUrl={displayUrl}
-              notificationBody={notificationBody}
-              shouldShowBrandIcon={shouldShowBrandIcon}
-              brandIcon={actualBrandIcon}
-              isExpanded={isExpanded}
-            />
-          )}
-
-          {isExpanded && (
-            <NotificationExpandedContent
-              shouldRenderExpandedMedia={shouldRenderExpandedMedia}
-              shouldShowBrandIconInExpandedMac={shouldShowBrandIconInExpandedMac}
-              brandIcon={actualBrandIcon}
-              mediaImageUrl={mediaImageUrl}
-              enableCtas={enableCtas}
-              ctaButtons={ctaButtons}
-            />
-          )}
-        </>
-      )}
-    </div>
-  );
-};
-
-NotificationContainer.propTypes = {
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-  url: PropTypes.string,
-  selectedOS: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  notificationState: PropTypes.oneOf([NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED]),
-  className: PropTypes.string,
-  icon: PropTypes.string,
-  supportsExpanded: PropTypes.bool,
-  enableMedia: PropTypes.bool,
-  enableCtas: PropTypes.bool,
-  brandIcon: PropTypes.string,
-  enableBrandIconPreview: PropTypes.bool,
-  imageSrc: PropTypes.string,
-  brandIconSrc: PropTypes.string,
-};
-
-export default NotificationContainer;
-

package/v2Containers/WebPush/Create/preview/PreviewContent.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import NotificationContainer from './NotificationContainer';
-import { getResolvedVariant } from './config/notificationMappings';
-import { NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED } from './constants';
-import './preview.scss';
-
-/**
- * PreviewContent Component
- * 
- * Renders the preview area for web push notification.
- * Displays actual notification preview for macOS + Chrome combination.
- * For other OS/Browser combinations, shows the selection text.
- * 
- * This component wraps the NotificationContainer in a preview-specific
- * container (notification-preview) for the main preview area.
- * 
- * @param {string} notificationState - NOTIFICATION_STATE_COLLAPSED or NOTIFICATION_STATE_EXPANDED (default: NOTIFICATION_STATE_COLLAPSED)
- */
-
-const PreviewContent = ({
-  notificationTitle,
-  notificationBody,
-  url,
-  selectedOS,
-  selectedBrowser,
-  notificationState = NOTIFICATION_STATE_COLLAPSED,
-  imageSrc,
-  brandIconSrc,
-}) => {
-  const resolvedVariant = getResolvedVariant(selectedOS, selectedBrowser, notificationState);
-
-  return (
-    <div className="preview-content">
-      <div className="preview-content-wrapper">
-        <div className={`notification-preview ${resolvedVariant ? '' : 'preview-unavailable'}`.trim()}>
-          {resolvedVariant && (
-            <NotificationContainer
-              notificationTitle={notificationTitle}
-              notificationBody={notificationBody}
-              url={url}
-              selectedOS={selectedOS}
-              selectedBrowser={selectedBrowser}
-              notificationState={resolvedVariant.stateKey}
-              icon={resolvedVariant.variant.icon}
-              supportsExpanded={resolvedVariant.stateConfig.supportsExpanded}
-              enableMedia={resolvedVariant.stateConfig.showMedia}
-              // CTA buttons intentionally disabled per requirement change; do not enable unless confirmed.
-              enableCtas={false}
-              className={resolvedVariant.variant.notificationClassName}
-              imageSrc={imageSrc}
-              brandIconSrc={brandIconSrc}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-PreviewContent.propTypes = {
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-  url: PropTypes.string,
-  selectedOS: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  notificationState: PropTypes.oneOf([NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED]),
-  imageSrc: PropTypes.string,
-  brandIconSrc: PropTypes.string,
-};
-
-PreviewContent.defaultProps = {
-  notificationTitle: '',
-  notificationBody: '',
-  url: '',
-  imageSrc: '',
-  brandIconSrc: '',
-};
-
-export default PreviewContent;
-

package/v2Containers/WebPush/Create/preview/PreviewControls.js

@@ -1,240 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import { LAYOUT_MODE, SELECT_WIDTH, STATE_OPTIONS } from './constants';
-import { getBrowserOptionsForOS, getSupportedStates } from './config/notificationMappings';
-import messages from '../messages';
-import './preview.scss';
-
-/**
- * PreviewControls Component
- * 
- * Renders dropdown controls for selecting Operating System, Browser, and State
- * for the web push notification preview.
- * 
- * Implements cascading dropdown reset behavior:
- * - When OS changes, Browser and State reset to first available option
- * - When Browser changes, State resets to first available option
- * 
- * @param {string} layoutMode - 'inline', 'newRow', or 'compact' (default: 'newRow')
- * @param {boolean} showStateDropdown - Whether to show the State dropdown (default: true)
- */
-const PreviewControls = ({
-  selectedOS,
-  selectedBrowser,
-  selectedState,
-  osOptions,
-  browserOptions,
-  stateOptions,
-  onOSChange,
-  onBrowserChange,
-  onStateChange,
-  layoutMode = LAYOUT_MODE.NEW_ROW,
-  showStateDropdown = true,
-}) => {
-  const selectWidth = layoutMode === LAYOUT_MODE.COMPACT ? SELECT_WIDTH.COMPACT : SELECT_WIDTH.FULL;
-
-  /**
-   * Cascading dropdown reset handler for OS changes
-   * Resets Browser and State to first available option when OS changes
-   * 
-   * This implements cascading dropdown behavior: when a parent dropdown (OS) changes,
-   * dependent dropdowns (Browser, State) reset to their first available option.
-   */
-  const handleOSChangeWithCascade = useCallback((value) => {
-    onOSChange(value);
-    
-    // Get browser options for the new OS to ensure we reset to a valid option
-    const newBrowserOptions = getBrowserOptionsForOS(value);
-    
-    // Reset Browser to first available option for the new OS
-    const newBrowserValue = newBrowserOptions && newBrowserOptions.length > 0 
-      ? newBrowserOptions[0].value 
-      : null;
-    
-    if (newBrowserValue && onBrowserChange) {
-      onBrowserChange(newBrowserValue);
-    }
-    
-    // Compute fresh state options based on new OS and Browser combination
-    // Only reset state if stateOptions is provided and not empty
-    if (showStateDropdown && newBrowserValue && onStateChange && stateOptions && stateOptions.length > 0) {
-      const newSupportedStates = getSupportedStates(value, newBrowserValue);
-      const newStateOptions = newSupportedStates.length > 0
-        ? newSupportedStates.map((state) => ({ value: state, label: state }))
-        : STATE_OPTIONS;
-      
-      if (newStateOptions.length > 0) {
-        onStateChange(newStateOptions[0].value);
-      }
-    }
-  }, [onOSChange, onBrowserChange, onStateChange, stateOptions, showStateDropdown]);
-
-  /**
-   * Cascading dropdown reset handler for Browser changes
-   * Resets State to first available option when Browser changes
-   */
-  const handleBrowserChangeWithCascade = useCallback((value) => {
-    onBrowserChange(value);
-    
-    // Compute fresh state options based on current OS and new Browser combination
-    // Only reset state if stateOptions is provided and not empty
-    if (showStateDropdown && onStateChange && stateOptions && stateOptions.length > 0) {
-      const newSupportedStates = getSupportedStates(selectedOS, value);
-      const newStateOptions = newSupportedStates.length > 0
-        ? newSupportedStates.map((state) => ({ value: state, label: state }))
-        : STATE_OPTIONS;
-      
-      if (newStateOptions.length > 0) {
-        onStateChange(newStateOptions[0].value);
-      }
-    }
-  }, [onBrowserChange, onStateChange, selectedOS, stateOptions, showStateDropdown]);
-
-  const controls = [
-    {
-      key: 'os',
-      label: 'operatingSystem',
-      value: selectedOS,
-      options: osOptions,
-      onChange: handleOSChangeWithCascade,
-      className: 'preview-control-os',
-    },
-    {
-      key: 'browser',
-      label: 'browser',
-      value: selectedBrowser,
-      options: browserOptions,
-      onChange: handleBrowserChangeWithCascade,
-      className: 'preview-control-browser',
-    },
-  ];
-
-  if (showStateDropdown) {
-    controls.push({
-      key: 'state',
-      label: 'state',
-      value: selectedState,
-      options: stateOptions,
-      onChange: onStateChange,
-      className: 'preview-control-state',
-    });
-  }
-
-  const renderControl = ({ key, label, value, options, onChange, className }) => (
-    <div key={key} className={`preview-control ${className}`}>
-      <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-        <FormattedMessage {...messages[label]} />
-      </CapLabel>
-      <CapSelect.CapCustomSelect
-        width={selectWidth}
-        options={options}
-        value={value}
-        onChange={onChange}
-      />
-    </div>
-  );
-
-  if (layoutMode === LAYOUT_MODE.COMPACT) {
-    return (
-      <div className="preview-controls preview-controls-compact">
-        {controls.map(renderControl)}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <CapRow className="preview-controls">
-        <CapColumn span={12} className="preview-control-os">
-          <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-            <FormattedMessage {...messages.operatingSystem} />
-          </CapLabel>
-          <CapSelect.CapCustomSelect
-            width={selectWidth}
-            options={osOptions}
-            value={selectedOS}
-            onChange={handleOSChangeWithCascade}
-          />
-        </CapColumn>
-        <CapColumn span={12} className="preview-control-browser">
-          <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-            <FormattedMessage {...messages.browser} />
-          </CapLabel>
-          <CapSelect.CapCustomSelect
-            width={selectWidth}
-            options={browserOptions}
-            value={selectedBrowser}
-            onChange={handleBrowserChangeWithCascade}
-          />
-        </CapColumn>
-      </CapRow>
-      {showStateDropdown && layoutMode === LAYOUT_MODE.NEW_ROW && (
-        <CapRow className="preview-controls-state">
-          <CapColumn span={12} className="preview-control-state">
-            <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-              <FormattedMessage {...messages.state} />
-            </CapLabel>
-            <CapSelect.CapCustomSelect
-              width={selectWidth}
-              options={stateOptions}
-              value={selectedState}
-              onChange={onStateChange}
-            />
-          </CapColumn>
-        </CapRow>
-      )}
-      {showStateDropdown && layoutMode === LAYOUT_MODE.INLINE && (
-        <CapRow className="preview-controls">
-          <CapColumn span={12} className="preview-control-state">
-            <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
-              <FormattedMessage {...messages.state} />
-            </CapLabel>
-            <CapSelect.CapCustomSelect
-              width={selectWidth}
-              options={stateOptions}
-              value={selectedState}
-              onChange={onStateChange}
-            />
-          </CapColumn>
-        </CapRow>
-      )}
-    </>
-  );
-};
-
-PreviewControls.propTypes = {
-  selectedOS: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  selectedState: PropTypes.string,
-  osOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  browserOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  stateOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    }),
-  ),
-  onOSChange: PropTypes.func.isRequired,
-  onBrowserChange: PropTypes.func.isRequired,
-  onStateChange: PropTypes.func,
-  layoutMode: PropTypes.oneOf([LAYOUT_MODE.INLINE, LAYOUT_MODE.NEW_ROW, LAYOUT_MODE.COMPACT]),
-  showStateDropdown: PropTypes.bool,
-};
-
-export default PreviewControls;
-

package/v2Containers/WebPush/Create/preview/PreviewDisclaimer.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import './preview.scss';
-
-/**
- * PreviewDisclaimer Component
- * 
- * Renders disclaimer text below the preview area.
- */
-const PreviewDisclaimer = () => (
-  <CapRow className="preview-disclaimer">
-    <CapColumn span={24}>
-      <CapLabel type="label2" className="disclaimer-text">
-        For the most accurate desktop preview, switch to full screen under &apos;Preview in all devices&apos;.
-      </CapLabel>
-    </CapColumn>
-  </CapRow>
-);
-
-export default PreviewDisclaimer;
-