/**
 * @uiName Program Explainer Step
 * @exampleGroup Common Components
 * @example Program Explainer Step - <sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack"></sqm-program-explainer-step>
 * @validParents ["sqm-program-explainer"]
 * @csspart sqm-base - The base container for the program explainer step
 * @csspart sqm-media - The media element (icon or image)
 * @csspart sqm-header - The header element
 * @csspart sqm-description - The description element
 */
export declare class ProgramExplainerStep {
  /**
   * @uiName Title
   */
  header: string;
  /**
   * @uiName Description
   * @uiWidget textArea
   */
  description: string;
  /**
   * @uiName Text color
   * @uiWidget color
   * @format color
   */
  textColor?: string;
  /**
   * @uiName Background color
   * @uiWidget color
   * @format color
   */
  backgroundColor?: string;
  /**
   * Amount in pixels
   * @uiName Border radius
   * @type number
   */
  borderRadius?: number;
  /**
   * @uiName Icon Background color
   * @uiWidget color
   * @format color
   */
  iconBackgroundColor?: string;
  /**
   * @uiName Icon color
   * @uiWidget color
   * @format color
   */
  iconColor?: string;
  /**
   * Displayed in place of an icon
   *
   * @uiName Image URL
   * @uiWidget imageUpload
   * @format url
   */
  imageUrl?: string;
  /**
   * Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive.
   *
   * @uiName Icon
   */
  icon?: string;
  constructor();
  disconnectedCallback(): void;
  render(): any;
}