> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# prepareContentPublisher

API reference for the prepareContentPublisher method.

NOTE: **This API is a preview**. Preview APIs are unstable and may change without warning. You can't release public apps using this API until it's stable.

Prepares a Content Publisher Intent.

## Usage

```tsx
import { prepareContentPublisher } from "@canva/intents/content";

prepareContentPublisher({
 getPublishConfiguration: async (params) => {
   // Implement the logic to get the publish configuration
 },
 renderSettingsUi: (params) => {
   // Implement the UI for settings view
 },
 renderPreviewUi: (params) => {
   // Implement the UI for preview view
 },
 publishContent: async (params) => {
   // Implement the logic to publish the content
 },
});
```

## Parameters

<Prop.List>
  <Prop name="implementation" required type="ContentPublisherIntent" sourceLineNumbers={[1347]}>
    Main interface for implementing the ContentPublisher intent.

    Implementing the ContentPublisher intent enables apps to publish contents to external platforms.
    This allows users to configure publish settings, preview their designs, and share with others.

    The publishing flow follows this process:

    1. User initiates publish action
    2. Your app provides publish configuration via `getPublishConfiguration`
    3. User selects an output type
    4. Your app renders settings UI via `renderSettingsUi`
    5. Your app renders preview UI via `renderPreviewUi`
    6. User reviews settings and preview
    7. Your app publishes the content via `publishContent`

    <PillAccordion defaultExpanded={true} title={<>Properties of <strong>implementation</strong></>}>
      <Prop.List>
        <Prop name="getPublishConfiguration" required type="function" sourceLineNumbers={[292]}>
          Provides the configuration for the publishing platform.

          This action is called when the user initiates the publish flow and needs to
          select an output type for the target platform.

          Use this to define different publishing configurations for your platform,
          such as social media posts, videos, or other output types.

          <Prop.Extras>
            **Example: Defining publish configuration for a social media platform**

            ```ts
            import type { GetPublishConfigurationResponse } from '@canva/intents/content';

            async function getPublishConfiguration(): Promise<GetPublishConfigurationResponse> {
              return {
                status: 'completed',
                outputTypes: [
                  {
                    id: 'instagram_post',
                    displayName: 'Instagram Post',
                    mediaSlots: [
                      {
                        id: 'main_image',
                        displayName: 'Post Image',
                        fileCount: { min: 1, max: 10 },
                        accepts: {
                          image: { format: 'jpg', aspectRatio: { min: 0.8, max: 1.91 } }
                        }
                      }
                    ]
                  }
                ]
              };
            }
            ```
          </Prop.Extras>

          **Returns**

          A promise resolving to the publish configuration or an error. This is a `Promise` that resolves with the following object:

          <Tabs>
            <Tab name="GetPublishConfigurationCompleted">
              Successful response from getting publish configuration.

              <Prop.List>
                <Prop name="status" required type="string" sourceLineNumbers={[797]}>
                  The only valid value is `"completed"`.
                </Prop>

                <Prop name="outputTypes" required type="OutputTypeConfiguration[]" sourceLineNumbers={[804]}>
                  Array of available output types for your platform.

                  Define different output types for various content formats that
                  your platform supports (e.g., posts, stories, videos).

                  <PillAccordion defaultExpanded={false} title={<>Properties of <strong>outputTypes</strong></>}>
                    <Prop.List>
                      <Prop name="id" required type="string" sourceLineNumbers={[1259]}>
                        Unique identifier for this output type.

                        Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
                      </Prop>

                      <Prop name="displayName" required type="string" sourceLineNumbers={[1266]}>
                        User-facing name for this output type.

                        This is displayed to users when selecting where to publish.
                        Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
                      </Prop>

                      <Prop name="mediaSlots" required type="object[]" sourceLineNumbers={[1273]}>
                        Array of media slots defining what content is needed.

                        Each slot represents a piece of media required for publishing,
                        such as a main image, thumbnail, or video.

                        <Tabs>
                          <Tab name="MediaSlot">
                            Configuration for a media slot within an output type.

                            Defines what type of media is accepted, requirements, and constraints.

                            <Prop.Extras>
                              **Example: Image slot with aspect ratio requirements**

                              ```ts
                              const thumbnailSlot: MediaSlot = {
                                id: 'thumbnail',
                                displayName: 'Video Thumbnail',
                                fileCount: { exact: 1 },
                                accepts: {
                                  image: {
                                    format: 'jpg',
                                    aspectRatio: { exact: 16/9 },
                                  }
                                }
                              };
                              ```
                            </Prop.Extras>

                            <Prop.List>
                              <Prop name="id" required type="string" sourceLineNumbers={[985]}>
                                Unique identifier for this media slot within the output type.
                              </Prop>

                              <Prop name="displayName" required type="string" sourceLineNumbers={[991]}>
                                User-facing name for this media slot.

                                Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                              </Prop>

                              <Prop name="accepts" required type="object" sourceLineNumbers={[1014]}>
                                File type requirements for this slot.

                                Note the following behavior:

                                * Provide at least one of the valid types
                                * If multiple types are provided, files for this slot may be any of the accepted types; each file
                                  must satisfy the corresponding requirement for its media type
                                * To restrict the slot to a single media type, provide only that requirement
                                * `fileCount` applies across all files accepted by the slot regardless of media type
                                * Document output types will show image previews (PNG thumbnail) in preview UI

                                <PillAccordion defaultExpanded={false} title={<>Properties of <strong>accepts</strong></>}>
                                  <Prop.List>
                                    <Prop name="image" type="ImageRequirement" sourceLineNumbers={[1015]}>
                                      Image file requirements for a media slot.

                                      Specifies format, aspect ratio, and size constraints for images.

                                      <Prop.Extras>
                                        **Example: Image requirements for social media post**

                                        ```ts
                                        const imageReq: ImageRequirement = {
                                          format: 'jpg',
                                          aspectRatio: { min: 0.8, max: 1.91 },
                                        };
                                        ```
                                      </Prop.Extras>

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>image</strong></>}>
                                        <Prop.List>
                                          <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                            File format for this requirement.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                              * `"mp4"`
                                              * `"pdf_standard"`
                                              * `"html_bundle"`
                                              * `"html_standalone"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                            Aspect ratio constraint (width / height).

                                            Examples:

                                            * `{ exact: 16/9 }`: Widescreen (16:9)
                                            * `{ min: 0.8, max: 1.91 }`: Instagram range

                                            <Tabs>
                                              <Tab name="ExactValueRange">
                                                Exact value range constraint.

                                                <Prop.Extras>
                                                  **Example: Exact value range**

                                                  ```ts
                                                  const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinValueRange">
                                                Minimum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Minimum value range**

                                                  ```ts
                                                  const minValue: ValueRange = { min: 3 }; // At least 3
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MaxValueRange">
                                                Maximum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Maximum value range**

                                                  ```ts
                                                  const maxValue: ValueRange = { max: 10 }; // At most 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinMaxValueRange">
                                                Minimum and maximum value range constraint.
                                                Ranges are inclusive `(min ≤ value ≤ max)`.

                                                <Prop.Extras>
                                                  **Example: Minimum and maximum value range**

                                                  ```ts
                                                  const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>
                                            </Tabs>
                                          </Prop>

                                          <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                            <Prop.Extras>
                                              **Available values**:

                                              * `"jpg"`
                                              * `"png"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                            Controls transparent-background support for PNG exports.

                                            * Only applies when `format` is `'png'`
                                            * If omitted or `false`, Canva exports a standard opaque PNG
                                            * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                            * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                            <Prop.Extras>
                                              **Default value**: `false`
                                            </Prop.Extras>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>

                                    <Prop name="video" type="VideoRequirement" sourceLineNumbers={[1016]}>
                                      Video file requirements for a media slot.

                                      Specifies format, aspect ratio, duration, and size constraints for videos.

                                      <Prop.Extras>
                                        **Example: Video requirements for YouTube**

                                        ```ts
                                        const videoReq: VideoRequirement = {
                                          format: 'mp4',
                                          aspectRatio: { exact: 16/9 },
                                          durationMs: { min: 1000, max: 600000 },
                                        };
                                        ```
                                      </Prop.Extras>

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>video</strong></>}>
                                        <Prop.List>
                                          <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                            Supported video format.

                                            The only valid value is `"mp4"`.
                                          </Prop>

                                          <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                            Aspect ratio constraint (width / height).

                                            Examples:

                                            * `{ exact: 16/9 }`: Widescreen
                                            * `{ exact: 9/16 }`: Vertical/Story format

                                            <Tabs>
                                              <Tab name="ExactValueRange">
                                                Exact value range constraint.

                                                <Prop.Extras>
                                                  **Example: Exact value range**

                                                  ```ts
                                                  const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinValueRange">
                                                Minimum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Minimum value range**

                                                  ```ts
                                                  const minValue: ValueRange = { min: 3 }; // At least 3
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MaxValueRange">
                                                Maximum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Maximum value range**

                                                  ```ts
                                                  const maxValue: ValueRange = { max: 10 }; // At most 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinMaxValueRange">
                                                Minimum and maximum value range constraint.
                                                Ranges are inclusive `(min ≤ value ≤ max)`.

                                                <Prop.Extras>
                                                  **Example: Minimum and maximum value range**

                                                  ```ts
                                                  const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>
                                            </Tabs>
                                          </Prop>

                                          <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                            Duration constraint in milliseconds.

                                            Examples:

                                            * `{ max: 60000 }`: Maximum 60 seconds
                                            * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                            <Tabs>
                                              <Tab name="ExactValueRange">
                                                Exact value range constraint.

                                                <Prop.Extras>
                                                  **Example: Exact value range**

                                                  ```ts
                                                  const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinValueRange">
                                                Minimum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Minimum value range**

                                                  ```ts
                                                  const minValue: ValueRange = { min: 3 }; // At least 3
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MaxValueRange">
                                                Maximum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Maximum value range**

                                                  ```ts
                                                  const maxValue: ValueRange = { max: 10 }; // At most 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinMaxValueRange">
                                                Minimum and maximum value range constraint.
                                                Ranges are inclusive `(min ≤ value ≤ max)`.

                                                <Prop.Extras>
                                                  **Example: Minimum and maximum value range**

                                                  ```ts
                                                  const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>
                                            </Tabs>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>

                                    <Prop name="document" type="DocumentRequirement" sourceLineNumbers={[1017]}>
                                      Document file requirements for a media slot.

                                      Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                      The actual document file is only generated for the final output in OutputMedia.

                                      <Prop.Extras>
                                        **Example: Document requirements**

                                        ```ts
                                        const documentReq: DocumentRequirement = {
                                          format: 'pdf_standard',
                                          size: 'a4',
                                        };
                                        ```
                                      </Prop.Extras>

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>document</strong></>}>
                                        <Prop.List>
                                          <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                            Supported document export format.
                                            Currently supports PDF standard format.

                                            The only valid value is `"pdf_standard"`.
                                          </Prop>

                                          <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                            The document size of the export file.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"a4"`
                                              * `"a3"`
                                              * `"letter"`
                                              * `"legal"`
                                            </Prop.Extras>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>

                                    <Prop name="email" type="EmailRequirement" sourceLineNumbers={[1021]}>
                                      Email output types will show a single html file (canva hosted assets) preview in preview UI

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>email</strong></>}>
                                        <Prop.List>
                                          <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                            File format for this requirement.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"html_bundle"`
                                              * `"html_standalone"`
                                            </Prop.Extras>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>
                                  </Prop.List>
                                </PillAccordion>
                              </Prop>

                              <Prop name="fileCount" type="ValueRange" sourceLineNumbers={[1001]}>
                                Number of files accepted in this slot.

                                Use this to specify single or multiple file requirements.
                                Examples:

                                * `{ exact: 1 }`: Exactly one file
                                * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                * undefined: Any number of files

                                <Tabs>
                                  <Tab name="ExactValueRange">
                                    Exact value range constraint.

                                    <Prop.Extras>
                                      **Example: Exact value range**

                                      ```ts
                                      const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MinValueRange">
                                    Minimum value range constraint.

                                    <Prop.Extras>
                                      **Example: Minimum value range**

                                      ```ts
                                      const minValue: ValueRange = { min: 3 }; // At least 3
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MaxValueRange">
                                    Maximum value range constraint.

                                    <Prop.Extras>
                                      **Example: Maximum value range**

                                      ```ts
                                      const maxValue: ValueRange = { max: 10 }; // At most 10
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MinMaxValueRange">
                                    Minimum and maximum value range constraint.
                                    Ranges are inclusive `(min ≤ value ≤ max)`.

                                    <Prop.Extras>
                                      **Example: Minimum and maximum value range**

                                      ```ts
                                      const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>
                                </Tabs>
                              </Prop>

                              <Prop name="autoSelect" state="preview" type="string" sourceLineNumbers={[1034]}>
                                Leaves Canva's own default selection in place, which it already does for a slot that omits
                                this field. To pre-select multiple inputs in a slot, use MediaSlotWithAutoSelect.

                                The default autoSelect behavior is informed by the `accepts` and `fileCount` fields.

                                * If a single media type is accepted, Canva will pre-select the first valid input as a file for that type.
                                * If multiple media types are accepted, Canva may infer a preferred media type from the current editor state.
                                * If `fileCount` is not provided, no auto-selection will occur.

                                The only valid value is `"default"`.
                              </Prop>
                            </Prop.List>
                          </Tab>

                          <Tab name="MediaSlotWithAutoSelect">
                            Configuration for a media slot within an output type.

                            Defines what type of media is accepted, requirements, and constraints.

                            <Prop.List>
                              <Prop name="id" required state="preview" type="string" sourceLineNumbers={[1048]}>
                                Unique identifier for this media slot within the output type.
                              </Prop>

                              <Prop name="displayName" required state="preview" type="string" sourceLineNumbers={[1055]}>
                                User-facing name for this media slot.

                                Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                              </Prop>

                              <Prop name="fileCount" required state="preview" type="ValueRange" sourceLineNumbers={[1066]}>
                                Number of files accepted in this slot.

                                Use this to specify single or multiple file requirements.
                                Examples:

                                * `{ exact: 1 }`: Exactly one file
                                * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                * `{ min: 0 }`: Any number of files

                                <Tabs>
                                  <Tab name="ExactValueRange">
                                    Exact value range constraint.

                                    <Prop.Extras>
                                      **Example: Exact value range**

                                      ```ts
                                      const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MinValueRange">
                                    Minimum value range constraint.

                                    <Prop.Extras>
                                      **Example: Minimum value range**

                                      ```ts
                                      const minValue: ValueRange = { min: 3 }; // At least 3
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MaxValueRange">
                                    Maximum value range constraint.

                                    <Prop.Extras>
                                      **Example: Maximum value range**

                                      ```ts
                                      const maxValue: ValueRange = { max: 10 }; // At most 10
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MinMaxValueRange">
                                    Minimum and maximum value range constraint.
                                    Ranges are inclusive `(min ≤ value ≤ max)`.

                                    <Prop.Extras>
                                      **Example: Minimum and maximum value range**

                                      ```ts
                                      const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>
                                </Tabs>
                              </Prop>

                              <Prop name="accepts" required state="preview" type="object" sourceLineNumbers={[1071]}>
                                File type requirements for this slot.

                                <Tabs>
                                  <Tab name="ImageRequirement">
                                    Image file requirements for a media slot.

                                    Specifies format, aspect ratio, and size constraints for images.

                                    <Prop.Extras>
                                      **Example: Image requirements for social media post**

                                      ```ts
                                      const imageReq: ImageRequirement = {
                                        format: 'jpg',
                                        aspectRatio: { min: 0.8, max: 1.91 },
                                      };
                                      ```
                                    </Prop.Extras>

                                    <Prop.List>
                                      <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                        File format for this requirement.

                                        <Prop.Extras>
                                          **Available values**:

                                          * `"png"`
                                          * `"jpg"`
                                          * `"mp4"`
                                          * `"pdf_standard"`
                                          * `"html_bundle"`
                                          * `"html_standalone"`
                                        </Prop.Extras>
                                      </Prop>

                                      <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                        Aspect ratio constraint (width / height).

                                        Examples:

                                        * `{ exact: 16/9 }`: Widescreen (16:9)
                                        * `{ min: 0.8, max: 1.91 }`: Instagram range

                                        <Tabs>
                                          <Tab name="ExactValueRange">
                                            Exact value range constraint.

                                            <Prop.Extras>
                                              **Example: Exact value range**

                                              ```ts
                                              const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MinValueRange">
                                            Minimum value range constraint.

                                            <Prop.Extras>
                                              **Example: Minimum value range**

                                              ```ts
                                              const minValue: ValueRange = { min: 3 }; // At least 3
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MaxValueRange">
                                            Maximum value range constraint.

                                            <Prop.Extras>
                                              **Example: Maximum value range**

                                              ```ts
                                              const maxValue: ValueRange = { max: 10 }; // At most 10
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MinMaxValueRange">
                                            Minimum and maximum value range constraint.
                                            Ranges are inclusive `(min ≤ value ≤ max)`.

                                            <Prop.Extras>
                                              **Example: Minimum and maximum value range**

                                              ```ts
                                              const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>
                                        </Tabs>
                                      </Prop>

                                      <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                        <Prop.Extras>
                                          **Available values**:

                                          * `"jpg"`
                                          * `"png"`
                                        </Prop.Extras>
                                      </Prop>

                                      <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                        Controls transparent-background support for PNG exports.

                                        * Only applies when `format` is `'png'`
                                        * If omitted or `false`, Canva exports a standard opaque PNG
                                        * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                        * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                        <Prop.Extras>
                                          **Default value**: `false`
                                        </Prop.Extras>
                                      </Prop>
                                    </Prop.List>
                                  </Tab>

                                  <Tab name="VideoRequirement">
                                    Video file requirements for a media slot.

                                    Specifies format, aspect ratio, duration, and size constraints for videos.

                                    <Prop.Extras>
                                      **Example: Video requirements for YouTube**

                                      ```ts
                                      const videoReq: VideoRequirement = {
                                        format: 'mp4',
                                        aspectRatio: { exact: 16/9 },
                                        durationMs: { min: 1000, max: 600000 },
                                      };
                                      ```
                                    </Prop.Extras>

                                    <Prop.List>
                                      <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                        Supported video format.

                                        The only valid value is `"mp4"`.
                                      </Prop>

                                      <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                        Aspect ratio constraint (width / height).

                                        Examples:

                                        * `{ exact: 16/9 }`: Widescreen
                                        * `{ exact: 9/16 }`: Vertical/Story format

                                        <Tabs>
                                          <Tab name="ExactValueRange">
                                            Exact value range constraint.

                                            <Prop.Extras>
                                              **Example: Exact value range**

                                              ```ts
                                              const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MinValueRange">
                                            Minimum value range constraint.

                                            <Prop.Extras>
                                              **Example: Minimum value range**

                                              ```ts
                                              const minValue: ValueRange = { min: 3 }; // At least 3
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MaxValueRange">
                                            Maximum value range constraint.

                                            <Prop.Extras>
                                              **Example: Maximum value range**

                                              ```ts
                                              const maxValue: ValueRange = { max: 10 }; // At most 10
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MinMaxValueRange">
                                            Minimum and maximum value range constraint.
                                            Ranges are inclusive `(min ≤ value ≤ max)`.

                                            <Prop.Extras>
                                              **Example: Minimum and maximum value range**

                                              ```ts
                                              const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>
                                        </Tabs>
                                      </Prop>

                                      <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                        Duration constraint in milliseconds.

                                        Examples:

                                        * `{ max: 60000 }`: Maximum 60 seconds
                                        * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                        <Tabs>
                                          <Tab name="ExactValueRange">
                                            Exact value range constraint.

                                            <Prop.Extras>
                                              **Example: Exact value range**

                                              ```ts
                                              const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MinValueRange">
                                            Minimum value range constraint.

                                            <Prop.Extras>
                                              **Example: Minimum value range**

                                              ```ts
                                              const minValue: ValueRange = { min: 3 }; // At least 3
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MaxValueRange">
                                            Maximum value range constraint.

                                            <Prop.Extras>
                                              **Example: Maximum value range**

                                              ```ts
                                              const maxValue: ValueRange = { max: 10 }; // At most 10
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>

                                          <Tab name="MinMaxValueRange">
                                            Minimum and maximum value range constraint.
                                            Ranges are inclusive `(min ≤ value ≤ max)`.

                                            <Prop.Extras>
                                              **Example: Minimum and maximum value range**

                                              ```ts
                                              const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                              ```
                                            </Prop.Extras>

                                            <Prop.List />
                                          </Tab>
                                        </Tabs>
                                      </Prop>
                                    </Prop.List>
                                  </Tab>

                                  <Tab name="DocumentRequirement">
                                    Document file requirements for a media slot.

                                    Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                    The actual document file is only generated for the final output in OutputMedia.

                                    <Prop.Extras>
                                      **Example: Document requirements**

                                      ```ts
                                      const documentReq: DocumentRequirement = {
                                        format: 'pdf_standard',
                                        size: 'a4',
                                      };
                                      ```
                                    </Prop.Extras>

                                    <Prop.List>
                                      <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                        Supported document export format.
                                        Currently supports PDF standard format.

                                        The only valid value is `"pdf_standard"`.
                                      </Prop>

                                      <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                        The document size of the export file.

                                        <Prop.Extras>
                                          **Available values**:

                                          * `"a4"`
                                          * `"a3"`
                                          * `"letter"`
                                          * `"legal"`
                                        </Prop.Extras>
                                      </Prop>
                                    </Prop.List>
                                  </Tab>

                                  <Tab name="EmailRequirement">
                                    Email file requirements for a media slot, currently only supports HTML bundle format.

                                    Note: Email output types use html\_standalone previews in the preview UI.
                                    The actual email file is only generated for the final output in OutputMedia.

                                    <Prop.Extras>
                                      **Example: Email bundle requirements**

                                      ```ts
                                      const emailReq: EmailRequirement = {
                                        format: 'html_bundle',
                                      };
                                      ```
                                    </Prop.Extras>

                                    <Prop.List>
                                      <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                        File format for this requirement.

                                        <Prop.Extras>
                                          **Available values**:

                                          * `"html_bundle"`
                                          * `"html_standalone"`
                                        </Prop.Extras>
                                      </Prop>
                                    </Prop.List>
                                  </Tab>
                                </Tabs>
                              </Prop>

                              <Prop name="autoSelect" required state="preview" type="string" sourceLineNumbers={[1090]}>
                                Canva will pre-select all valid inputs as files for this slot when the publish panel first opens.

                                <Prop.Extras>
                                  **Example: Image slot with all valid inputs as files auto-selected**

                                  ```ts
                                  const thumbnailSlot: MediaSlotWithAutoSelect = {
                                    id: 'thumbnail',
                                    displayName: 'Video Thumbnail',
                                    fileCount: { exact: 1 },
                                    accepts: {
                                      format: 'jpg',
                                      aspectRatio: { exact: 16 / 9 },
                                    },
                                    autoSelect: 'all_valid_inputs_as_files',
                                  };
                                  ```
                                </Prop.Extras>

                                The only valid value is `"all_valid_inputs_as_files"`.
                              </Prop>
                            </Prop.List>
                          </Tab>
                        </Tabs>
                      </Prop>

                      <Prop name="contentNoun" type="ContentNoun" sourceLineNumbers={[1279]}>
                        The type of content being published. When set, Canva uses this to tailor and improve the
                        publish experience. When omitted, defaults to `'content'` (generic behavior).

                        <Prop.Extras>
                          **Available values**:

                          * `"email"`
                          * `"post"`
                          * `"schedule"`
                          * `"asset"`
                          * `"draft"`
                          * `"publication"`
                          * `"content"`
                          * `"content_export"`
                        </Prop.Extras>
                      </Prop>
                    </Prop.List>
                  </PillAccordion>
                </Prop>
              </Prop.List>
            </Tab>

            <Tab name="GetPublishConfigurationError">
              GetPublishConfigurationError error indicating a custom error occurred.

              <Prop.List>
                <Prop name="status" required type="string" sourceLineNumbers={[69]}>
                  The only valid value is `"app_error"`.
                </Prop>

                <Prop name="message" required type="string" sourceLineNumbers={[80]}>
                  (required) The raw error message, for logging purposes. It will not display in the UI.
                  To display custom error messages in the UI use `localizedMessageId`.

                  This should typically be the javascript error.message or a REST JSON error message
                  body passed without modification.

                  WARNING: Do not include personally identifiable information (PII) in this
                  message, such as names, emails, usernames, etc.
                </Prop>

                <Prop name="localizedMessageId" type="string" sourceLineNumbers={[87]}>
                  (optional) Message ID of the translated error message that will be
                  displayed to the user. The message ID should be present and uploaded in
                  your translation file. If omitted, Canva will display a generic error
                  message.
                </Prop>

                <Prop name="httpCode" type="number" sourceLineNumbers={[89]}>
                  HTTP status code, if applicable
                </Prop>

                <Prop name="appDefinedPayload" type="string" sourceLineNumbers={[94]}>
                  Used only by app developer. Canva does not use this value. Use this to pass
                  additional information like JSON to your settings frame.
                </Prop>

                <Prop name="errorCause" type="ErrorCause" sourceLineNumbers={[100]}>
                  (optional) Source of the error if it relates to a component on the Canva
                  UI. When present, the error may render near a relevant Canva component.
                  When omitted, the cause is considered unspecified or "generic".

                  <Prop.Extras>
                    **Available values**:

                    * `"invalid_selection"`
                    * `"invalid_format"`
                  </Prop.Extras>
                </Prop>
              </Prop.List>
            </Tab>
          </Tabs>
        </Prop>

        <Prop name="renderSettingsUi" required type="function" sourceLineNumbers={[321]}>
          Renders a user interface for configuring publish settings.

          This action is called after the user selects an output type. Your UI should
          allow users to configure platform-specific settings such as captions, tags,
          privacy settings, or publishing destinations.

          Use the `updatePublishSettings` callback to save user settings and validate them.
          Settings are stored in the `publishRef` string (maximum 32KB).

          <Prop.Extras>
            **Example: Rendering a settings UI with publish configuration**

            ```ts
            import { createRoot } from 'react-dom/client';
            import type { RenderSettingsUiRequest } from '@canva/intents/content';

            function renderSettingsUi(request: RenderSettingsUiRequest): void {
              const SettingsUiApp = () => (
                 <AppUiProvider>
                  <SettingsUi request={request} />
                </AppUiProvider>
              );

              createRoot().render(<SettingsUiApp />)
            }
            ```
          </Prop.Extras>

          **Parameters**

          <Prop.List>
            <Prop name="request" required type="RenderSettingsUiRequest" sourceLineNumbers={[321]}>
              Configuration and callbacks for the publish settings UI.

              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>request</strong></>}>
                <Prop.List>
                  <Prop name="invocationContext" required type="RenderSettingsUiInvocationContext" sourceLineNumbers={[1756]}>
                    The initial settings and context provided when the settings UI is rendered.

                    Contains any previously saved publish settings and information about the current output type being configured.
                    Use this to restore the UI to its previous state or initialise it with appropriate defaults.

                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>invocationContext</strong></>}>
                      <Prop.List>
                        <Prop name="reason" required type="string" sourceLineNumbers={[1619]}>
                          Initial settings and context provided when the settings UI is rendered.

                          The only valid value is `"publish"`.
                        </Prop>

                        <Prop name="publishRef" type="string" sourceLineNumbers={[1621]}>
                          Current publish reference to populate the UI, if any exist
                        </Prop>

                        <Prop name="outputType" type="OutputType" sourceLineNumbers={[1623]}>
                          Information about the current output type being configured

                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>outputType</strong></>}>
                            <Prop.List>
                              <Prop name="id" required type="string" sourceLineNumbers={[1198]}>
                                Unique identifier for this output type.

                                Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
                              </Prop>

                              <Prop name="displayName" required type="string" sourceLineNumbers={[1205]}>
                                User-facing name for this output type.

                                This is displayed to users when selecting where to publish.
                                Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
                              </Prop>

                              <Prop name="mediaSlots" required type="object[]" sourceLineNumbers={[1212]}>
                                Array of media slots defining what content is needed.

                                Each slot represents a piece of media required for publishing,
                                such as a main image, thumbnail, or video.

                                <PillAccordion defaultExpanded={false} title={<>Properties of <strong>mediaSlots</strong></>}>
                                  <Prop.List>
                                    <Prop name="id" required type="string" sourceLineNumbers={[985]}>
                                      Unique identifier for this media slot within the output type.
                                    </Prop>

                                    <Prop name="displayName" required type="string" sourceLineNumbers={[991]}>
                                      User-facing name for this media slot.

                                      Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                                    </Prop>

                                    <Prop name="accepts" required type="object" sourceLineNumbers={[1014]}>
                                      File type requirements for this slot.

                                      Note the following behavior:

                                      * Provide at least one of the valid types
                                      * If multiple types are provided, files for this slot may be any of the accepted types; each file
                                        must satisfy the corresponding requirement for its media type
                                      * To restrict the slot to a single media type, provide only that requirement
                                      * `fileCount` applies across all files accepted by the slot regardless of media type
                                      * Document output types will show image previews (PNG thumbnail) in preview UI

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>accepts</strong></>}>
                                        <Prop.List>
                                          <Prop name="image" type="ImageRequirement" sourceLineNumbers={[1015]}>
                                            Image file requirements for a media slot.

                                            Specifies format, aspect ratio, and size constraints for images.

                                            <Prop.Extras>
                                              **Example: Image requirements for social media post**

                                              ```ts
                                              const imageReq: ImageRequirement = {
                                                format: 'jpg',
                                                aspectRatio: { min: 0.8, max: 1.91 },
                                              };
                                              ```
                                            </Prop.Extras>

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>image</strong></>}>
                                              <Prop.List>
                                                <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                                  File format for this requirement.

                                                  <Prop.Extras>
                                                    **Available values**:

                                                    * `"png"`
                                                    * `"jpg"`
                                                    * `"mp4"`
                                                    * `"pdf_standard"`
                                                    * `"html_bundle"`
                                                    * `"html_standalone"`
                                                  </Prop.Extras>
                                                </Prop>

                                                <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                                  Aspect ratio constraint (width / height).

                                                  Examples:

                                                  * `{ exact: 16/9 }`: Widescreen (16:9)
                                                  * `{ min: 0.8, max: 1.91 }`: Instagram range

                                                  <Tabs>
                                                    <Tab name="ExactValueRange">
                                                      Exact value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Exact value range**

                                                        ```ts
                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinValueRange">
                                                      Minimum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Minimum value range**

                                                        ```ts
                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MaxValueRange">
                                                      Maximum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Maximum value range**

                                                        ```ts
                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinMaxValueRange">
                                                      Minimum and maximum value range constraint.
                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                      <Prop.Extras>
                                                        **Example: Minimum and maximum value range**

                                                        ```ts
                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>
                                                  </Tabs>
                                                </Prop>

                                                <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                                  <Prop.Extras>
                                                    **Available values**:

                                                    * `"jpg"`
                                                    * `"png"`
                                                  </Prop.Extras>
                                                </Prop>

                                                <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                                  Controls transparent-background support for PNG exports.

                                                  * Only applies when `format` is `'png'`
                                                  * If omitted or `false`, Canva exports a standard opaque PNG
                                                  * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                                  * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                                  <Prop.Extras>
                                                    **Default value**: `false`
                                                  </Prop.Extras>
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>

                                          <Prop name="video" type="VideoRequirement" sourceLineNumbers={[1016]}>
                                            Video file requirements for a media slot.

                                            Specifies format, aspect ratio, duration, and size constraints for videos.

                                            <Prop.Extras>
                                              **Example: Video requirements for YouTube**

                                              ```ts
                                              const videoReq: VideoRequirement = {
                                                format: 'mp4',
                                                aspectRatio: { exact: 16/9 },
                                                durationMs: { min: 1000, max: 600000 },
                                              };
                                              ```
                                            </Prop.Extras>

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>video</strong></>}>
                                              <Prop.List>
                                                <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                                  Supported video format.

                                                  The only valid value is `"mp4"`.
                                                </Prop>

                                                <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                                  Aspect ratio constraint (width / height).

                                                  Examples:

                                                  * `{ exact: 16/9 }`: Widescreen
                                                  * `{ exact: 9/16 }`: Vertical/Story format

                                                  <Tabs>
                                                    <Tab name="ExactValueRange">
                                                      Exact value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Exact value range**

                                                        ```ts
                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinValueRange">
                                                      Minimum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Minimum value range**

                                                        ```ts
                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MaxValueRange">
                                                      Maximum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Maximum value range**

                                                        ```ts
                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinMaxValueRange">
                                                      Minimum and maximum value range constraint.
                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                      <Prop.Extras>
                                                        **Example: Minimum and maximum value range**

                                                        ```ts
                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>
                                                  </Tabs>
                                                </Prop>

                                                <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                                  Duration constraint in milliseconds.

                                                  Examples:

                                                  * `{ max: 60000 }`: Maximum 60 seconds
                                                  * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                                  <Tabs>
                                                    <Tab name="ExactValueRange">
                                                      Exact value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Exact value range**

                                                        ```ts
                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinValueRange">
                                                      Minimum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Minimum value range**

                                                        ```ts
                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MaxValueRange">
                                                      Maximum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Maximum value range**

                                                        ```ts
                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinMaxValueRange">
                                                      Minimum and maximum value range constraint.
                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                      <Prop.Extras>
                                                        **Example: Minimum and maximum value range**

                                                        ```ts
                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>
                                                  </Tabs>
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>

                                          <Prop name="document" type="DocumentRequirement" sourceLineNumbers={[1017]}>
                                            Document file requirements for a media slot.

                                            Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                            The actual document file is only generated for the final output in OutputMedia.

                                            <Prop.Extras>
                                              **Example: Document requirements**

                                              ```ts
                                              const documentReq: DocumentRequirement = {
                                                format: 'pdf_standard',
                                                size: 'a4',
                                              };
                                              ```
                                            </Prop.Extras>

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>document</strong></>}>
                                              <Prop.List>
                                                <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                                  Supported document export format.
                                                  Currently supports PDF standard format.

                                                  The only valid value is `"pdf_standard"`.
                                                </Prop>

                                                <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                                  The document size of the export file.

                                                  <Prop.Extras>
                                                    **Available values**:

                                                    * `"a4"`
                                                    * `"a3"`
                                                    * `"letter"`
                                                    * `"legal"`
                                                  </Prop.Extras>
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>

                                          <Prop name="email" type="EmailRequirement" sourceLineNumbers={[1021]}>
                                            Email output types will show a single html file (canva hosted assets) preview in preview UI

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>email</strong></>}>
                                              <Prop.List>
                                                <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                                  File format for this requirement.

                                                  <Prop.Extras>
                                                    **Available values**:

                                                    * `"html_bundle"`
                                                    * `"html_standalone"`
                                                  </Prop.Extras>
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>

                                    <Prop name="fileCount" type="ValueRange" sourceLineNumbers={[1001]}>
                                      Number of files accepted in this slot.

                                      Use this to specify single or multiple file requirements.
                                      Examples:

                                      * `{ exact: 1 }`: Exactly one file
                                      * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                      * undefined: Any number of files

                                      <Tabs>
                                        <Tab name="ExactValueRange">
                                          Exact value range constraint.

                                          <Prop.Extras>
                                            **Example: Exact value range**

                                            ```ts
                                            const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                            ```
                                          </Prop.Extras>

                                          <Prop.List />
                                        </Tab>

                                        <Tab name="MinValueRange">
                                          Minimum value range constraint.

                                          <Prop.Extras>
                                            **Example: Minimum value range**

                                            ```ts
                                            const minValue: ValueRange = { min: 3 }; // At least 3
                                            ```
                                          </Prop.Extras>

                                          <Prop.List />
                                        </Tab>

                                        <Tab name="MaxValueRange">
                                          Maximum value range constraint.

                                          <Prop.Extras>
                                            **Example: Maximum value range**

                                            ```ts
                                            const maxValue: ValueRange = { max: 10 }; // At most 10
                                            ```
                                          </Prop.Extras>

                                          <Prop.List />
                                        </Tab>

                                        <Tab name="MinMaxValueRange">
                                          Minimum and maximum value range constraint.
                                          Ranges are inclusive `(min ≤ value ≤ max)`.

                                          <Prop.Extras>
                                            **Example: Minimum and maximum value range**

                                            ```ts
                                            const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                            ```
                                          </Prop.Extras>

                                          <Prop.List />
                                        </Tab>
                                      </Tabs>
                                    </Prop>

                                    <Prop name="autoSelect" state="preview" type="string" sourceLineNumbers={[1034]}>
                                      Leaves Canva's own default selection in place, which it already does for a slot that omits
                                      this field. To pre-select multiple inputs in a slot, use MediaSlotWithAutoSelect.

                                      The default autoSelect behavior is informed by the `accepts` and `fileCount` fields.

                                      * If a single media type is accepted, Canva will pre-select the first valid input as a file for that type.
                                      * If multiple media types are accepted, Canva may infer a preferred media type from the current editor state.
                                      * If `fileCount` is not provided, no auto-selection will occur.

                                      The only valid value is `"default"`.
                                    </Prop>

                                    <Prop name="selection" readonly type="MediaSelection[]" sourceLineNumbers={[1216]}>
                                      Current selection for this slot.

                                      <Tabs>
                                        <Tab name="ImageSelection">
                                          Selection metadata for an image media item.

                                          <Prop.List>
                                            <Prop name="kind" required type="string" sourceLineNumbers={[939]}>
                                              The only valid value is `"image"`.
                                            </Prop>

                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                              Metadata about the source content represented by this selection.

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                <Prop.List>
                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                    The only valid value is `"design"`.
                                                  </Prop>

                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                    A signed JWT token containing the design id
                                                  </Prop>

                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                    The user given title of the design
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>
                                          </Prop.List>
                                        </Tab>

                                        <Tab name="VideoSelection">
                                          Selection metadata for a video media item.

                                          <Prop.List>
                                            <Prop name="kind" required type="string" sourceLineNumbers={[2124]}>
                                              The only valid value is `"video"`.
                                            </Prop>

                                            <Prop name="durationMs" required type="number" sourceLineNumbers={[2128]}>
                                              Duration of the selected video in milliseconds.
                                            </Prop>

                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                              Metadata about the source content represented by this selection.

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                <Prop.List>
                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                    The only valid value is `"design"`.
                                                  </Prop>

                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                    A signed JWT token containing the design id
                                                  </Prop>

                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                    The user given title of the design
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>
                                          </Prop.List>
                                        </Tab>

                                        <Tab name="DocumentSelection">
                                          Selection metadata for a document media item.

                                          <Prop.List>
                                            <Prop name="kind" required type="string" sourceLineNumbers={[624]}>
                                              The only valid value is `"document"`.
                                            </Prop>

                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                              Metadata about the source content represented by this selection.

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                <Prop.List>
                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                    The only valid value is `"design"`.
                                                  </Prop>

                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                    A signed JWT token containing the design id
                                                  </Prop>

                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                    The user given title of the design
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>
                                          </Prop.List>
                                        </Tab>

                                        <Tab name="EmailSelection">
                                          Selection metadata for an email media item.

                                          <Prop.List>
                                            <Prop name="kind" required type="string" sourceLineNumbers={[722]}>
                                              The only valid value is `"email"`.
                                            </Prop>

                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                              Metadata about the source content represented by this selection.

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                <Prop.List>
                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                    The only valid value is `"design"`.
                                                  </Prop>

                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                    A signed JWT token containing the design id
                                                  </Prop>

                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                    The user given title of the design
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>
                                          </Prop.List>
                                        </Tab>
                                      </Tabs>
                                    </Prop>
                                  </Prop.List>
                                </PillAccordion>
                              </Prop>

                              <Prop name="contentNoun" type="ContentNoun" sourceLineNumbers={[1223]}>
                                The type of content being published. When set, Canva uses this to tailor and improve the
                                publish experience. When omitted, defaults to `'content'` (generic behavior).

                                <Prop.Extras>
                                  **Available values**:

                                  * `"email"`
                                  * `"post"`
                                  * `"schedule"`
                                  * `"asset"`
                                  * `"draft"`
                                  * `"publication"`
                                  * `"content"`
                                  * `"content_export"`
                                </Prop.Extras>
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>
                      </Prop.List>
                    </PillAccordion>
                  </Prop>

                  <Prop name="updatePublishSettings" required type="function" sourceLineNumbers={[1787]}>
                    Callback to save and validate the user's publish settings.

                    Call this function whenever the user modifies their settings to:

                    * Save the settings for later use in `publishContent`
                    * Validate that required fields are filled
                    * Enable or disable the publish button based on validity

                    Store all necessary publishing information in the `publishRef` string.
                    This will be provided to your `publishContent` method when the user publishes.

                    <Prop.Extras>
                      **Throws**

                      Will throw `CanvaError('bad_request')` if PublishSettings.publishRef exceeds 32KB.

                      **Example: Updating settings as user types**

                      ```ts
                      // As user fills in form fields, update settings
                      function handleCaptionChange(caption: string) {
                        const settings = { caption, tags: currentTags };
                        const publishRef = JSON.stringify(settings);

                        updatePublishSettings({
                          publishRef,
                          validityState: caption ? 'valid' : 'invalid_missing_required_fields'
                        });
                      }
                      ```
                    </Prop.Extras>

                    **Parameters**

                    <Prop.List>
                      <Prop name="publishSettings" required type="PublishSettings" sourceLineNumbers={[1787]}>
                        Configuration for publish settings.

                        Contains the user's settings and their validation state. Use this to
                        control whether the publish button is enabled.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>publishSettings</strong></>}>
                          <Prop.List>
                            <Prop name="validityState" required type="PublishRefValidityState" sourceLineNumbers={[1592]}>
                              Validation state of the publish settings.

                              Controls whether the publish button is enabled:

                              * `"valid"`: Settings are complete and valid, publish button is enabled
                              * `"invalid_missing_required_fields"`: Required settings are missing, publish button is disabled
                              * `"invalid_authentication_required"`: User must authenticate before publishing can proceed

                              <Prop.Extras>
                                **Available values**:

                                * `"valid"`
                                * `"invalid_missing_required_fields"`
                                * `"invalid_authentication_required"`
                              </Prop.Extras>
                            </Prop>

                            <Prop name="publishRef" type="string" sourceLineNumbers={[1582]}>
                              Serialized platform-specific settings for publishing.

                              Store all information your app needs to publish the content in this string.
                              This might include:

                              * Captions or descriptions
                              * Tags or hashtags
                              * Privacy settings
                              * Publishing destination (account, page, etc.)
                              * Scheduling information

                              This reference will be provided to your `publishContent` method when publishing.

                              Maximum size: 32KB

                              <Prop.Extras>
                                **Example: Serializing settings**

                                ```ts
                                const settings = {
                                  caption: 'Check out my design!',
                                  tags: ['design', 'creative'],
                                  privacy: 'public'
                                };
                                const publishRef = JSON.stringify(settings);
                                ```
                              </Prop.Extras>
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    **Returns**

                    A promise that resolves when the settings are successfully saved. This is a `Promise` that resolves with the following object:

                    <Prop.List>
                      <Prop name="status" required type="string" sourceLineNumbers={[1925]}>
                        The only valid value is `"completed"`.
                      </Prop>
                    </Prop.List>
                  </Prop>

                  <Prop name="registerOnContextChange" required type="function" sourceLineNumbers={[1816]}>
                    Registers a callback to be invoked when the settings UI context changes.

                    This callback is triggered when:

                    * the user changes the output type in the publish flow.
                    * an error occurs in the publish flow.

                    Use this to respond to Canva changes and update your settings UI accordingly.

                    <Prop.Extras>
                      **Example: Adapting UI for different output types**

                      ```ts
                      registerOnContextChange({
                        onContextChange: (ctx) => {
                          if (ctx.reason === 'publish_settings') {
                            if (ctx.outputType.id === 'instagram_post') {
                              showHashtagField();
                            }
                          }
                          if (ctx.reason === 'publish_error') {
                            setError(ctx.error);
                          }
                        }
                      });
                      ```
                    </Prop.Extras>

                    **Parameters**

                    <Prop.List>
                      <Prop name="opts" required type="object" sourceLineNumbers={[1816]}>
                        The options for registering a callback.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>opts</strong></>}>
                          <Prop.List>
                            <Prop name="onContextChange" required type="OnContextChange" sourceLineNumbers={[1817]}>
                              **Parameters**

                              <Prop.List>
                                <Prop name="context" required type="SettingsUiContext" sourceLineNumbers={[1120]}>
                                  Context information for the publish settings UI.

                                  <Tabs>
                                    <Tab name="PublishSettingsSettingsUiContext">
                                      Provides information about the current state of the settings UI to help
                                      you adapt the interface based on the selected output type.

                                      <Prop.List>
                                        <Prop name="reason" required type="string" sourceLineNumbers={[1601]}>
                                          The only valid value is `"publish_settings"`.
                                        </Prop>

                                        <Prop name="outputType" required type="OutputType" sourceLineNumbers={[1608]}>
                                          The currently selected output type.

                                          Use this to customize your settings UI based on the requirements
                                          of different output types.

                                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>outputType</strong></>}>
                                            <Prop.List>
                                              <Prop name="id" required type="string" sourceLineNumbers={[1198]}>
                                                Unique identifier for this output type.

                                                Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
                                              </Prop>

                                              <Prop name="displayName" required type="string" sourceLineNumbers={[1205]}>
                                                User-facing name for this output type.

                                                This is displayed to users when selecting where to publish.
                                                Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
                                              </Prop>

                                              <Prop name="mediaSlots" required type="object[]" sourceLineNumbers={[1212]}>
                                                Array of media slots defining what content is needed.

                                                Each slot represents a piece of media required for publishing,
                                                such as a main image, thumbnail, or video.

                                                <PillAccordion defaultExpanded={false} title={<>Properties of <strong>mediaSlots</strong></>}>
                                                  <Prop.List>
                                                    <Prop name="id" required type="string" sourceLineNumbers={[985]}>
                                                      Unique identifier for this media slot within the output type.
                                                    </Prop>

                                                    <Prop name="displayName" required type="string" sourceLineNumbers={[991]}>
                                                      User-facing name for this media slot.

                                                      Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                                                    </Prop>

                                                    <Prop name="accepts" required type="object" sourceLineNumbers={[1014]}>
                                                      File type requirements for this slot.

                                                      Note the following behavior:

                                                      * Provide at least one of the valid types
                                                      * If multiple types are provided, files for this slot may be any of the accepted types; each file
                                                        must satisfy the corresponding requirement for its media type
                                                      * To restrict the slot to a single media type, provide only that requirement
                                                      * `fileCount` applies across all files accepted by the slot regardless of media type
                                                      * Document output types will show image previews (PNG thumbnail) in preview UI

                                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>accepts</strong></>}>
                                                        <Prop.List>
                                                          <Prop name="image" type="ImageRequirement" sourceLineNumbers={[1015]}>
                                                            Image file requirements for a media slot.

                                                            Specifies format, aspect ratio, and size constraints for images.

                                                            <Prop.Extras>
                                                              **Example: Image requirements for social media post**

                                                              ```ts
                                                              const imageReq: ImageRequirement = {
                                                                format: 'jpg',
                                                                aspectRatio: { min: 0.8, max: 1.91 },
                                                              };
                                                              ```
                                                            </Prop.Extras>

                                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>image</strong></>}>
                                                              <Prop.List>
                                                                <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                                                  File format for this requirement.

                                                                  <Prop.Extras>
                                                                    **Available values**:

                                                                    * `"png"`
                                                                    * `"jpg"`
                                                                    * `"mp4"`
                                                                    * `"pdf_standard"`
                                                                    * `"html_bundle"`
                                                                    * `"html_standalone"`
                                                                  </Prop.Extras>
                                                                </Prop>

                                                                <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                                                  Aspect ratio constraint (width / height).

                                                                  Examples:

                                                                  * `{ exact: 16/9 }`: Widescreen (16:9)
                                                                  * `{ min: 0.8, max: 1.91 }`: Instagram range

                                                                  <Tabs>
                                                                    <Tab name="ExactValueRange">
                                                                      Exact value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Exact value range**

                                                                        ```ts
                                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MinValueRange">
                                                                      Minimum value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Minimum value range**

                                                                        ```ts
                                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MaxValueRange">
                                                                      Maximum value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Maximum value range**

                                                                        ```ts
                                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MinMaxValueRange">
                                                                      Minimum and maximum value range constraint.
                                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                                      <Prop.Extras>
                                                                        **Example: Minimum and maximum value range**

                                                                        ```ts
                                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>
                                                                  </Tabs>
                                                                </Prop>

                                                                <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                                                  <Prop.Extras>
                                                                    **Available values**:

                                                                    * `"jpg"`
                                                                    * `"png"`
                                                                  </Prop.Extras>
                                                                </Prop>

                                                                <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                                                  Controls transparent-background support for PNG exports.

                                                                  * Only applies when `format` is `'png'`
                                                                  * If omitted or `false`, Canva exports a standard opaque PNG
                                                                  * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                                                  * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                                                  <Prop.Extras>
                                                                    **Default value**: `false`
                                                                  </Prop.Extras>
                                                                </Prop>
                                                              </Prop.List>
                                                            </PillAccordion>
                                                          </Prop>

                                                          <Prop name="video" type="VideoRequirement" sourceLineNumbers={[1016]}>
                                                            Video file requirements for a media slot.

                                                            Specifies format, aspect ratio, duration, and size constraints for videos.

                                                            <Prop.Extras>
                                                              **Example: Video requirements for YouTube**

                                                              ```ts
                                                              const videoReq: VideoRequirement = {
                                                                format: 'mp4',
                                                                aspectRatio: { exact: 16/9 },
                                                                durationMs: { min: 1000, max: 600000 },
                                                              };
                                                              ```
                                                            </Prop.Extras>

                                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>video</strong></>}>
                                                              <Prop.List>
                                                                <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                                                  Supported video format.

                                                                  The only valid value is `"mp4"`.
                                                                </Prop>

                                                                <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                                                  Aspect ratio constraint (width / height).

                                                                  Examples:

                                                                  * `{ exact: 16/9 }`: Widescreen
                                                                  * `{ exact: 9/16 }`: Vertical/Story format

                                                                  <Tabs>
                                                                    <Tab name="ExactValueRange">
                                                                      Exact value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Exact value range**

                                                                        ```ts
                                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MinValueRange">
                                                                      Minimum value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Minimum value range**

                                                                        ```ts
                                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MaxValueRange">
                                                                      Maximum value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Maximum value range**

                                                                        ```ts
                                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MinMaxValueRange">
                                                                      Minimum and maximum value range constraint.
                                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                                      <Prop.Extras>
                                                                        **Example: Minimum and maximum value range**

                                                                        ```ts
                                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>
                                                                  </Tabs>
                                                                </Prop>

                                                                <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                                                  Duration constraint in milliseconds.

                                                                  Examples:

                                                                  * `{ max: 60000 }`: Maximum 60 seconds
                                                                  * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                                                  <Tabs>
                                                                    <Tab name="ExactValueRange">
                                                                      Exact value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Exact value range**

                                                                        ```ts
                                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MinValueRange">
                                                                      Minimum value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Minimum value range**

                                                                        ```ts
                                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MaxValueRange">
                                                                      Maximum value range constraint.

                                                                      <Prop.Extras>
                                                                        **Example: Maximum value range**

                                                                        ```ts
                                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>

                                                                    <Tab name="MinMaxValueRange">
                                                                      Minimum and maximum value range constraint.
                                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                                      <Prop.Extras>
                                                                        **Example: Minimum and maximum value range**

                                                                        ```ts
                                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                                        ```
                                                                      </Prop.Extras>

                                                                      <Prop.List />
                                                                    </Tab>
                                                                  </Tabs>
                                                                </Prop>
                                                              </Prop.List>
                                                            </PillAccordion>
                                                          </Prop>

                                                          <Prop name="document" type="DocumentRequirement" sourceLineNumbers={[1017]}>
                                                            Document file requirements for a media slot.

                                                            Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                                            The actual document file is only generated for the final output in OutputMedia.

                                                            <Prop.Extras>
                                                              **Example: Document requirements**

                                                              ```ts
                                                              const documentReq: DocumentRequirement = {
                                                                format: 'pdf_standard',
                                                                size: 'a4',
                                                              };
                                                              ```
                                                            </Prop.Extras>

                                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>document</strong></>}>
                                                              <Prop.List>
                                                                <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                                                  Supported document export format.
                                                                  Currently supports PDF standard format.

                                                                  The only valid value is `"pdf_standard"`.
                                                                </Prop>

                                                                <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                                                  The document size of the export file.

                                                                  <Prop.Extras>
                                                                    **Available values**:

                                                                    * `"a4"`
                                                                    * `"a3"`
                                                                    * `"letter"`
                                                                    * `"legal"`
                                                                  </Prop.Extras>
                                                                </Prop>
                                                              </Prop.List>
                                                            </PillAccordion>
                                                          </Prop>

                                                          <Prop name="email" type="EmailRequirement" sourceLineNumbers={[1021]}>
                                                            Email output types will show a single html file (canva hosted assets) preview in preview UI

                                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>email</strong></>}>
                                                              <Prop.List>
                                                                <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                                                  File format for this requirement.

                                                                  <Prop.Extras>
                                                                    **Available values**:

                                                                    * `"html_bundle"`
                                                                    * `"html_standalone"`
                                                                  </Prop.Extras>
                                                                </Prop>
                                                              </Prop.List>
                                                            </PillAccordion>
                                                          </Prop>
                                                        </Prop.List>
                                                      </PillAccordion>
                                                    </Prop>

                                                    <Prop name="fileCount" type="ValueRange" sourceLineNumbers={[1001]}>
                                                      Number of files accepted in this slot.

                                                      Use this to specify single or multiple file requirements.
                                                      Examples:

                                                      * `{ exact: 1 }`: Exactly one file
                                                      * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                                      * undefined: Any number of files

                                                      <Tabs>
                                                        <Tab name="ExactValueRange">
                                                          Exact value range constraint.

                                                          <Prop.Extras>
                                                            **Example: Exact value range**

                                                            ```ts
                                                            const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                            ```
                                                          </Prop.Extras>

                                                          <Prop.List />
                                                        </Tab>

                                                        <Tab name="MinValueRange">
                                                          Minimum value range constraint.

                                                          <Prop.Extras>
                                                            **Example: Minimum value range**

                                                            ```ts
                                                            const minValue: ValueRange = { min: 3 }; // At least 3
                                                            ```
                                                          </Prop.Extras>

                                                          <Prop.List />
                                                        </Tab>

                                                        <Tab name="MaxValueRange">
                                                          Maximum value range constraint.

                                                          <Prop.Extras>
                                                            **Example: Maximum value range**

                                                            ```ts
                                                            const maxValue: ValueRange = { max: 10 }; // At most 10
                                                            ```
                                                          </Prop.Extras>

                                                          <Prop.List />
                                                        </Tab>

                                                        <Tab name="MinMaxValueRange">
                                                          Minimum and maximum value range constraint.
                                                          Ranges are inclusive `(min ≤ value ≤ max)`.

                                                          <Prop.Extras>
                                                            **Example: Minimum and maximum value range**

                                                            ```ts
                                                            const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                            ```
                                                          </Prop.Extras>

                                                          <Prop.List />
                                                        </Tab>
                                                      </Tabs>
                                                    </Prop>

                                                    <Prop name="autoSelect" state="preview" type="string" sourceLineNumbers={[1034]}>
                                                      Leaves Canva's own default selection in place, which it already does for a slot that omits
                                                      this field. To pre-select multiple inputs in a slot, use MediaSlotWithAutoSelect.

                                                      The default autoSelect behavior is informed by the `accepts` and `fileCount` fields.

                                                      * If a single media type is accepted, Canva will pre-select the first valid input as a file for that type.
                                                      * If multiple media types are accepted, Canva may infer a preferred media type from the current editor state.
                                                      * If `fileCount` is not provided, no auto-selection will occur.

                                                      The only valid value is `"default"`.
                                                    </Prop>

                                                    <Prop name="selection" readonly type="MediaSelection[]" sourceLineNumbers={[1216]}>
                                                      Current selection for this slot.

                                                      <Tabs>
                                                        <Tab name="ImageSelection">
                                                          Selection metadata for an image media item.

                                                          <Prop.List>
                                                            <Prop name="kind" required type="string" sourceLineNumbers={[939]}>
                                                              The only valid value is `"image"`.
                                                            </Prop>

                                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                                              Metadata about the source content represented by this selection.

                                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                                <Prop.List>
                                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                                    The only valid value is `"design"`.
                                                                  </Prop>

                                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                                    A signed JWT token containing the design id
                                                                  </Prop>

                                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                                    The user given title of the design
                                                                  </Prop>
                                                                </Prop.List>
                                                              </PillAccordion>
                                                            </Prop>
                                                          </Prop.List>
                                                        </Tab>

                                                        <Tab name="VideoSelection">
                                                          Selection metadata for a video media item.

                                                          <Prop.List>
                                                            <Prop name="kind" required type="string" sourceLineNumbers={[2124]}>
                                                              The only valid value is `"video"`.
                                                            </Prop>

                                                            <Prop name="durationMs" required type="number" sourceLineNumbers={[2128]}>
                                                              Duration of the selected video in milliseconds.
                                                            </Prop>

                                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                                              Metadata about the source content represented by this selection.

                                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                                <Prop.List>
                                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                                    The only valid value is `"design"`.
                                                                  </Prop>

                                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                                    A signed JWT token containing the design id
                                                                  </Prop>

                                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                                    The user given title of the design
                                                                  </Prop>
                                                                </Prop.List>
                                                              </PillAccordion>
                                                            </Prop>
                                                          </Prop.List>
                                                        </Tab>

                                                        <Tab name="DocumentSelection">
                                                          Selection metadata for a document media item.

                                                          <Prop.List>
                                                            <Prop name="kind" required type="string" sourceLineNumbers={[624]}>
                                                              The only valid value is `"document"`.
                                                            </Prop>

                                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                                              Metadata about the source content represented by this selection.

                                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                                <Prop.List>
                                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                                    The only valid value is `"design"`.
                                                                  </Prop>

                                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                                    A signed JWT token containing the design id
                                                                  </Prop>

                                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                                    The user given title of the design
                                                                  </Prop>
                                                                </Prop.List>
                                                              </PillAccordion>
                                                            </Prop>
                                                          </Prop.List>
                                                        </Tab>

                                                        <Tab name="EmailSelection">
                                                          Selection metadata for an email media item.

                                                          <Prop.List>
                                                            <Prop name="kind" required type="string" sourceLineNumbers={[722]}>
                                                              The only valid value is `"email"`.
                                                            </Prop>

                                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                                              Metadata about the source content represented by this selection.

                                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                                <Prop.List>
                                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                                    The only valid value is `"design"`.
                                                                  </Prop>

                                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                                    A signed JWT token containing the design id
                                                                  </Prop>

                                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                                    The user given title of the design
                                                                  </Prop>
                                                                </Prop.List>
                                                              </PillAccordion>
                                                            </Prop>
                                                          </Prop.List>
                                                        </Tab>
                                                      </Tabs>
                                                    </Prop>
                                                  </Prop.List>
                                                </PillAccordion>
                                              </Prop>

                                              <Prop name="contentNoun" type="ContentNoun" sourceLineNumbers={[1223]}>
                                                The type of content being published. When set, Canva uses this to tailor and improve the
                                                publish experience. When omitted, defaults to `'content'` (generic behavior).

                                                <Prop.Extras>
                                                  **Available values**:

                                                  * `"email"`
                                                  * `"post"`
                                                  * `"schedule"`
                                                  * `"asset"`
                                                  * `"draft"`
                                                  * `"publication"`
                                                  * `"content"`
                                                  * `"content_export"`
                                                </Prop.Extras>
                                              </Prop>
                                            </Prop.List>
                                          </PillAccordion>
                                        </Prop>
                                      </Prop.List>
                                    </Tab>

                                    <Tab name="PublishErrorSettingsUiContext">
                                      Provides information about an error that occurred in publishContent.

                                      <Prop.List>
                                        <Prop name="reason" required type="string" sourceLineNumbers={[1508]}>
                                          The only valid value is `"publish_error"`.
                                        </Prop>

                                        <Prop name="error" required type="PublishError" sourceLineNumbers={[1513]}>
                                          The error that occurred. Undefined means no error occurred or the previous
                                          error was cleared by Canva.

                                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>error</strong></>}>
                                            <Prop.List />
                                          </PillAccordion>
                                        </Prop>
                                      </Prop.List>
                                    </Tab>

                                    <Tab name="PublishErrorClearedSettingsUiContext">
                                      Signals that the publish error was cleared.

                                      <Prop.List>
                                        <Prop name="reason" required type="string" sourceLineNumbers={[1500]}>
                                          The only valid value is `"publish_error_cleared"`.
                                        </Prop>
                                      </Prop.List>
                                    </Tab>
                                  </Tabs>
                                </Prop>
                              </Prop.List>

                              **Returns**

                              `void`
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    **Returns**

                    A disposer function that cleans up the registered callback.

                    () => `void`
                  </Prop>

                  <Prop name="requestAiContent" required state="preview" type="RequestAiContent" sourceLineNumbers={[1851]}>
                    Function to trigger a request for AI content.

                    Use this function to trigger a request for AI content.

                    <Prop.Extras>
                      **Param: request**

                      The request for AI content.

                      **Example: Requesting AI content**

                      ```ts
                      async function onGenerateCaption() {
                        const result = await requestAiContent({
                          type: 'social_caption',
                          currentValue: settings.caption,
                          fieldLabel: 'Caption',
                          hints: {
                            maxLength: 2200,
                          },
                        });

                        if (result.status !== 'completed') {
                          return;
                        }
                        const nextSettings = { ...settings, caption: result.value };
                        // ... set local state
                        await updatePublishSettings({
                          publishRef: JSON.stringify(nextSettings),
                          validityState: 'valid',
                        });
                      }
                      ```
                    </Prop.Extras>

                    **Parameters**

                    <Prop.List>
                      <Prop name="request" required state="preview" type="AiContentRequest" sourceLineNumbers={[1858]}>
                        All possible AI content request types.

                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>request</strong></>}>
                          <Prop.List>
                            <Prop name="fieldLabel" required type="string" sourceLineNumbers={[137]}>
                              The label chosen by the app developer for the field.
                              It will be used in the UI to customize the copy.
                              Required since it is essential context for the AI to generate the content.
                            </Prop>

                            <Prop name="type" required type="string" sourceLineNumbers={[1908]}>
                              The only valid value is `"social_caption"`.
                            </Prop>

                            <Prop name="currentValue" type="string" sourceLineNumbers={[131]}>
                              If a current value exists in the field, the AI content generation
                              will be an edit-first experience.
                              i.e. When the user has already entered a value in the field, the AI will
                              generate a new value using the existing value as a starting point.
                            </Prop>

                            <Prop name="hints" type="object" sourceLineNumbers={[1912]}>
                              Hints for how the AI should generate the caption.

                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>hints</strong></>}>
                                <Prop.List>
                                  <Prop name="maxLength" type="number" sourceLineNumbers={[1916]}>
                                    The maximum length of the caption.
                                  </Prop>
                                </Prop.List>
                              </PillAccordion>
                            </Prop>
                          </Prop.List>
                        </PillAccordion>
                      </Prop>
                    </Prop.List>

                    **Returns**

                    All possible AI content response types. This is a `Promise` that resolves with the following object:

                    <Tabs>
                      <Tab name="AiContentCompletedResponse" icon={<StateIndicator state="preview" />}>
                        Completed response for AI content generation.
                        The value is the AI content generated for the app.

                        <Prop.List>
                          <Prop name="status" required type="string" sourceLineNumbers={[17]}>
                            The only valid value is `"completed"`.
                          </Prop>
                        </Prop.List>
                      </Tab>

                      <Tab name="AiContentCancelledResponse" icon={<StateIndicator state="preview" />}>
                        Cancelled response where the generation was not completed.
                        We use only 'cancelled' since we don't expect app developers to handle any statuses further (e.g. blocked, failed).
                        These will be handled on Canva's AI generation surface.

                        <Prop.List>
                          <Prop name="status" required type="string" sourceLineNumbers={[8]}>
                            The only valid value is `"cancelled"`.
                          </Prop>
                        </Prop.List>
                      </Tab>
                    </Tabs>
                  </Prop>
                </Prop.List>
              </PillAccordion>
            </Prop>
          </Prop.List>

          **Returns**

          `void`
        </Prop>

        <Prop name="renderPreviewUi" required type="function" sourceLineNumbers={[350]}>
          Renders a user interface for previewing the content.

          This action is called after the settings UI is rendered. Your UI should display
          a preview of how the content will appear on the target platform.

          Previews update dynamically as users modify their content or settings. For videos,
          start with lightweight thumbnails and use `requestPreviewUpgrade` to load full
          video previews on demand to optimize performance.

          <Prop.Extras>
            **Example: Rendering a preview UI with video optimization**

            ```ts
            import { createRoot } from 'react-dom/client';
            import type { RenderPreviewUiRequest } from '@canva/intents/content';

            function renderPreviewUi(request: RenderPreviewUiRequest): void {
              const PreviewUiApp = () => (
                 <AppUiProvider>
                  <PreviewUi request={request} />
                </AppUiProvider>
              );

              createRoot().render(<PreviewUiApp />)
            }
            ```
          </Prop.Extras>

          **Parameters**

          <Prop.List>
            <Prop name="request" required type="RenderPreviewUiRequest" sourceLineNumbers={[350]}>
              Configuration and callbacks for the preview UI.

              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>request</strong></>}>
                <Prop.List>
                  <Prop name="invocationContext" required type="RenderPreviewUiInvocationContext" sourceLineNumbers={[1671]}>
                    The initial preview data and context provided when the preview UI is rendered.

                    Contains the initial preview media, output type information, and any existing
                    publish settings needed to properly display the preview interface.

                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>invocationContext</strong></>}>
                      <Prop.List>
                        <Prop name="reason" required type="string" sourceLineNumbers={[1530]}>
                          Initial preview data and context provided when the preview UI is rendered.

                          The only valid value is `"publish"`.
                        </Prop>

                        <Prop name="previewMedia" type="PreviewMedia[]" sourceLineNumbers={[1535]}>
                          Initial preview media to display
                          This will only be used for scheduling and not caching

                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>previewMedia</strong></>}>
                            <Prop.List>
                              <Prop name="mediaSlotId" required type="string" sourceLineNumbers={[1375]}>
                                ID of the media slot this preview belongs to.

                                Matches a media slot ID from your output type definition.
                              </Prop>

                              <Prop name="previews" required type="Preview[]" sourceLineNumbers={[1381]}>
                                Array of preview items for this media slot.

                                May contain multiple previews if the media slot accepts multiple files.

                                <Tabs>
                                  <Tab name="ImagePreview">
                                    Image preview in various states.

                                    <Tabs>
                                      <Tab name="ImagePreviewLoading">
                                        Image preview that is currently being generated.

                                        Display a loading state until the preview transitions to `"ready"` or `"error"`.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[862]}>
                                            Type of media in this preview.

                                            The only valid value is `"image"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[863]}>
                                            Current state of the preview.

                                            The only valid value is `"loading"`.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="ImagePreviewReady">
                                        Image preview that is ready to display.

                                        Contains the URL to the preview image.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[873]}>
                                            Type of media in this preview.

                                            The only valid value is `"image"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[874]}>
                                            Current state of the preview.

                                            The only valid value is `"ready"`.
                                          </Prop>

                                          <Prop name="format" required type="string" sourceLineNumbers={[878]}>
                                            Image format of the preview.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="url" required type="string" sourceLineNumbers={[884]}>
                                            URL to the preview image.

                                            Use this URL to display the preview to users.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="ImagePreviewError">
                                        Image preview that failed to generate.

                                        Display an error state to the user.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[847]}>
                                            Type of media in this preview.

                                            The only valid value is `"image"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[848]}>
                                            Current state of the preview.

                                            The only valid value is `"error"`.
                                          </Prop>

                                          <Prop name="message" required type="string" sourceLineNumbers={[852]}>
                                            The error message to display to the user.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>
                                    </Tabs>
                                  </Tab>

                                  <Tab name="VideoPreview">
                                    Video preview in various states.

                                    Videos transition through states: `"loading"` → `"thumbnail"` → `"upgrading"` → `"ready"`.
                                    Start with thumbnails for better performance, then upgrade to full video using `requestPreviewUpgrade`.

                                    <Tabs>
                                      <Tab name="VideoPreviewLoading">
                                        Video preview that is currently being generated.

                                        Display a loading state until the preview transitions to `"thumbnail"` or `"error"`.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[1987]}>
                                            Type of media in this preview.

                                            The only valid value is `"video"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[1988]}>
                                            Current state of the preview.

                                            The only valid value is `"loading"`.
                                          </Prop>

                                          <Prop name="durationMs" type="number" sourceLineNumbers={[1992]}>
                                            Video duration in milliseconds.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="VideoPreviewThumbnail">
                                        Video preview with lightweight thumbnail available.

                                        This is the initial state for video previews. Show the thumbnail image
                                        and call `requestPreviewUpgrade` when the user needs the full video.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[2038]}>
                                            Type of media in this preview.

                                            The only valid value is `"video"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[2039]}>
                                            Current state of the preview.

                                            The only valid value is `"thumbnail"`.
                                          </Prop>

                                          <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[2043]}>
                                            Format of the thumbnail image.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[2049]}>
                                            URL to the thumbnail image.

                                            Display this lightweight image until full video is needed.
                                          </Prop>

                                          <Prop name="durationMs" type="number" sourceLineNumbers={[2053]}>
                                            Video duration in milliseconds.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="VideoPreviewUpgrading">
                                        Video preview that is being upgraded from thumbnail to full video.

                                        Display the thumbnail with a loading indicator until the video is ready.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[2063]}>
                                            Type of media in this preview.

                                            The only valid value is `"video"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[2064]}>
                                            Current state of the preview.

                                            The only valid value is `"upgrading"`.
                                          </Prop>

                                          <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[2068]}>
                                            Format of the thumbnail image.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[2074]}>
                                            URL to the thumbnail image.

                                            Continue showing the thumbnail while the full video loads.
                                          </Prop>

                                          <Prop name="durationMs" type="number" sourceLineNumbers={[2078]}>
                                            Video duration in milliseconds.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="VideoPreviewReady">
                                        Video preview with full video ready to play.

                                        Contains URLs for both the video and thumbnail.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[2002]}>
                                            Type of media in this preview.

                                            The only valid value is `"video"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[2003]}>
                                            Current state of the preview.

                                            The only valid value is `"ready"`.
                                          </Prop>

                                          <Prop name="format" required type="string" sourceLineNumbers={[2007]}>
                                            Video format.

                                            The only valid value is `"mp4"`.
                                          </Prop>

                                          <Prop name="url" required type="string" sourceLineNumbers={[2013]}>
                                            URL to the full video.

                                            Use this URL in a video player.
                                          </Prop>

                                          <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[2017]}>
                                            Format of the thumbnail image.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[2023]}>
                                            URL to the thumbnail image.

                                            Can be used as a poster image for the video player.
                                          </Prop>

                                          <Prop name="durationMs" type="number" sourceLineNumbers={[2027]}>
                                            Video duration in milliseconds.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="VideoPreviewError">
                                        Video preview that failed to generate.

                                        Display an error state to the user.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[1972]}>
                                            Type of media in this preview.

                                            The only valid value is `"video"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[1973]}>
                                            Current state of the preview.

                                            The only valid value is `"error"`.
                                          </Prop>

                                          <Prop name="message" required type="string" sourceLineNumbers={[1977]}>
                                            The error message to display to the user.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>
                                    </Tabs>
                                  </Tab>

                                  <Tab name="DocumentPreview">
                                    Document preview in various states.

                                    Documents transition through states: `"loading"` → `"thumbnail"` → `"upgrading"` → `"ready"`.
                                    Start with a lightweight thumbnail of the first page, then upgrade to full multi-page
                                    preview using `requestPreviewUpgrade`.

                                    <Tabs>
                                      <Tab name="DocumentPreviewLoading">
                                        Document preview that is currently being generated.

                                        Display a loading state until the preview transitions to `"thumbnail"` or `"error"`.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[507]}>
                                            Type of media in this preview.

                                            The only valid value is `"document"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[508]}>
                                            Current state of the preview.

                                            The only valid value is `"loading"`.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="DocumentPreviewThumbnail">
                                        Document preview with first page thumbnail available.

                                        This is the initial state for document previews. Show the thumbnail image
                                        of the first page to give users a quick preview of the document.
                                        Call `requestPreviewUpgrade` to load all page thumbnails.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[557]}>
                                            Type of media in this preview.

                                            The only valid value is `"document"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[558]}>
                                            Current state of the preview.

                                            The only valid value is `"thumbnail"`.
                                          </Prop>

                                          <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[562]}>
                                            Format of the thumbnail image.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[568]}>
                                            URL to the first page thumbnail.

                                            Display this lightweight image to preview the document content.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="DocumentPreviewUpgrading">
                                        Intermediate state while multi-page document thumbnails are being fetched
                                        via requestPreviewUpgrade. The single-page thumbnail remains
                                        available for display during the upgrade.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[578]}>
                                            Type of media in this preview.

                                            The only valid value is `"document"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[579]}>
                                            Current state of the preview.

                                            The only valid value is `"upgrading"`.
                                          </Prop>

                                          <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[583]}>
                                            Format of the thumbnail image.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[589]}>
                                            URL to the first page thumbnail.

                                            Continue showing this while the upgrade loads.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="DocumentPreviewReady">
                                        Final state after a document preview has been upgraded. Contains thumbnail
                                        URLs for every selected page in the document.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[536]}>
                                            Type of media in this preview.

                                            The only valid value is `"document"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[537]}>
                                            Current state of the preview.

                                            The only valid value is `"ready"`.
                                          </Prop>

                                          <Prop name="format" required type="string" sourceLineNumbers={[541]}>
                                            Format of the per-page thumbnails.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="pages" required type="DocumentPreviewPage[]" sourceLineNumbers={[545]}>
                                            Thumbnail pages for each page. Index corresponds to the page number.

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>pages</strong></>}>
                                              <Prop.List>
                                                <Prop name="url" required type="string" sourceLineNumbers={[519]}>
                                                  URL to the page thumbnail image.
                                                </Prop>

                                                <Prop name="widthPx" required type="number" sourceLineNumbers={[523]}>
                                                  Width of the page thumbnail in pixels.
                                                </Prop>

                                                <Prop name="heightPx" required type="number" sourceLineNumbers={[527]}>
                                                  Height of the page thumbnail in pixels.
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="DocumentPreviewError">
                                        Document preview that failed to generate.

                                        Display an error state to the user.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[492]}>
                                            Type of media in this preview.

                                            The only valid value is `"document"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[493]}>
                                            Current state of the preview.

                                            The only valid value is `"error"`.
                                          </Prop>

                                          <Prop name="message" required type="string" sourceLineNumbers={[497]}>
                                            The error message to display to the user.
                                          </Prop>

                                          <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                            Width of the preview in pixels.
                                          </Prop>

                                          <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                            Height of the preview in pixels.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>
                                    </Tabs>
                                  </Tab>

                                  <Tab name="EmailPreview">
                                    Email preview in various states.

                                    Display a loading state until the preview transitions to `"ready"` or `"error"`.

                                    <Tabs>
                                      <Tab name="EmailPreviewLoading">
                                        Email preview in a loading state.

                                        Display a loading spinner until the preview transitions to `"ready"` or `"error"`.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[680]}>
                                            Type of media in this preview.

                                            The only valid value is `"email"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[681]}>
                                            Current state of the preview.

                                            The only valid value is `"loading"`.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="EmailPreviewReady">
                                        Email preview in a ready state.

                                        Display the email preview.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[691]}>
                                            Type of media in this preview.

                                            The only valid value is `"email"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[692]}>
                                            Current state of the preview.

                                            The only valid value is `"ready"`.
                                          </Prop>

                                          <Prop name="url" required type="string" sourceLineNumbers={[696]}>
                                            URL to the single html file that represents the email.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>

                                      <Tab name="EmailPreviewError">
                                        Email preview in an error state.

                                        Display an error state to the user.

                                        <Prop.List>
                                          <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                            Unique identifier for this preview.

                                            Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                          </Prop>

                                          <Prop name="kind" required type="string" sourceLineNumbers={[668]}>
                                            Type of media in this preview.

                                            The only valid value is `"email"`.
                                          </Prop>

                                          <Prop name="status" required type="string" sourceLineNumbers={[669]}>
                                            Current state of the preview.

                                            The only valid value is `"error"`.
                                          </Prop>
                                        </Prop.List>
                                      </Tab>
                                    </Tabs>
                                  </Tab>
                                </Tabs>
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>

                        <Prop name="outputType" type="OutputType" sourceLineNumbers={[1537]}>
                          Information about the current output type being previewed

                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>outputType</strong></>}>
                            <Prop.List>
                              <Prop name="id" required type="string" sourceLineNumbers={[1198]}>
                                Unique identifier for this output type.

                                Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
                              </Prop>

                              <Prop name="displayName" required type="string" sourceLineNumbers={[1205]}>
                                User-facing name for this output type.

                                This is displayed to users when selecting where to publish.
                                Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
                              </Prop>

                              <Prop name="mediaSlots" required type="object[]" sourceLineNumbers={[1212]}>
                                Array of media slots defining what content is needed.

                                Each slot represents a piece of media required for publishing,
                                such as a main image, thumbnail, or video.

                                <PillAccordion defaultExpanded={false} title={<>Properties of <strong>mediaSlots</strong></>}>
                                  <Prop.List>
                                    <Prop name="id" required type="string" sourceLineNumbers={[985]}>
                                      Unique identifier for this media slot within the output type.
                                    </Prop>

                                    <Prop name="displayName" required type="string" sourceLineNumbers={[991]}>
                                      User-facing name for this media slot.

                                      Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                                    </Prop>

                                    <Prop name="accepts" required type="object" sourceLineNumbers={[1014]}>
                                      File type requirements for this slot.

                                      Note the following behavior:

                                      * Provide at least one of the valid types
                                      * If multiple types are provided, files for this slot may be any of the accepted types; each file
                                        must satisfy the corresponding requirement for its media type
                                      * To restrict the slot to a single media type, provide only that requirement
                                      * `fileCount` applies across all files accepted by the slot regardless of media type
                                      * Document output types will show image previews (PNG thumbnail) in preview UI

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>accepts</strong></>}>
                                        <Prop.List>
                                          <Prop name="image" type="ImageRequirement" sourceLineNumbers={[1015]}>
                                            Image file requirements for a media slot.

                                            Specifies format, aspect ratio, and size constraints for images.

                                            <Prop.Extras>
                                              **Example: Image requirements for social media post**

                                              ```ts
                                              const imageReq: ImageRequirement = {
                                                format: 'jpg',
                                                aspectRatio: { min: 0.8, max: 1.91 },
                                              };
                                              ```
                                            </Prop.Extras>

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>image</strong></>}>
                                              <Prop.List>
                                                <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                                  File format for this requirement.

                                                  <Prop.Extras>
                                                    **Available values**:

                                                    * `"png"`
                                                    * `"jpg"`
                                                    * `"mp4"`
                                                    * `"pdf_standard"`
                                                    * `"html_bundle"`
                                                    * `"html_standalone"`
                                                  </Prop.Extras>
                                                </Prop>

                                                <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                                  Aspect ratio constraint (width / height).

                                                  Examples:

                                                  * `{ exact: 16/9 }`: Widescreen (16:9)
                                                  * `{ min: 0.8, max: 1.91 }`: Instagram range

                                                  <Tabs>
                                                    <Tab name="ExactValueRange">
                                                      Exact value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Exact value range**

                                                        ```ts
                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinValueRange">
                                                      Minimum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Minimum value range**

                                                        ```ts
                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MaxValueRange">
                                                      Maximum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Maximum value range**

                                                        ```ts
                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinMaxValueRange">
                                                      Minimum and maximum value range constraint.
                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                      <Prop.Extras>
                                                        **Example: Minimum and maximum value range**

                                                        ```ts
                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>
                                                  </Tabs>
                                                </Prop>

                                                <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                                  <Prop.Extras>
                                                    **Available values**:

                                                    * `"jpg"`
                                                    * `"png"`
                                                  </Prop.Extras>
                                                </Prop>

                                                <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                                  Controls transparent-background support for PNG exports.

                                                  * Only applies when `format` is `'png'`
                                                  * If omitted or `false`, Canva exports a standard opaque PNG
                                                  * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                                  * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                                  <Prop.Extras>
                                                    **Default value**: `false`
                                                  </Prop.Extras>
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>

                                          <Prop name="video" type="VideoRequirement" sourceLineNumbers={[1016]}>
                                            Video file requirements for a media slot.

                                            Specifies format, aspect ratio, duration, and size constraints for videos.

                                            <Prop.Extras>
                                              **Example: Video requirements for YouTube**

                                              ```ts
                                              const videoReq: VideoRequirement = {
                                                format: 'mp4',
                                                aspectRatio: { exact: 16/9 },
                                                durationMs: { min: 1000, max: 600000 },
                                              };
                                              ```
                                            </Prop.Extras>

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>video</strong></>}>
                                              <Prop.List>
                                                <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                                  Supported video format.

                                                  The only valid value is `"mp4"`.
                                                </Prop>

                                                <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                                  Aspect ratio constraint (width / height).

                                                  Examples:

                                                  * `{ exact: 16/9 }`: Widescreen
                                                  * `{ exact: 9/16 }`: Vertical/Story format

                                                  <Tabs>
                                                    <Tab name="ExactValueRange">
                                                      Exact value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Exact value range**

                                                        ```ts
                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinValueRange">
                                                      Minimum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Minimum value range**

                                                        ```ts
                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MaxValueRange">
                                                      Maximum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Maximum value range**

                                                        ```ts
                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinMaxValueRange">
                                                      Minimum and maximum value range constraint.
                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                      <Prop.Extras>
                                                        **Example: Minimum and maximum value range**

                                                        ```ts
                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>
                                                  </Tabs>
                                                </Prop>

                                                <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                                  Duration constraint in milliseconds.

                                                  Examples:

                                                  * `{ max: 60000 }`: Maximum 60 seconds
                                                  * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                                  <Tabs>
                                                    <Tab name="ExactValueRange">
                                                      Exact value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Exact value range**

                                                        ```ts
                                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinValueRange">
                                                      Minimum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Minimum value range**

                                                        ```ts
                                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MaxValueRange">
                                                      Maximum value range constraint.

                                                      <Prop.Extras>
                                                        **Example: Maximum value range**

                                                        ```ts
                                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>

                                                    <Tab name="MinMaxValueRange">
                                                      Minimum and maximum value range constraint.
                                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                                      <Prop.Extras>
                                                        **Example: Minimum and maximum value range**

                                                        ```ts
                                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                        ```
                                                      </Prop.Extras>

                                                      <Prop.List />
                                                    </Tab>
                                                  </Tabs>
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>

                                          <Prop name="document" type="DocumentRequirement" sourceLineNumbers={[1017]}>
                                            Document file requirements for a media slot.

                                            Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                            The actual document file is only generated for the final output in OutputMedia.

                                            <Prop.Extras>
                                              **Example: Document requirements**

                                              ```ts
                                              const documentReq: DocumentRequirement = {
                                                format: 'pdf_standard',
                                                size: 'a4',
                                              };
                                              ```
                                            </Prop.Extras>

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>document</strong></>}>
                                              <Prop.List>
                                                <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                                  Supported document export format.
                                                  Currently supports PDF standard format.

                                                  The only valid value is `"pdf_standard"`.
                                                </Prop>

                                                <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                                  The document size of the export file.

                                                  <Prop.Extras>
                                                    **Available values**:

                                                    * `"a4"`
                                                    * `"a3"`
                                                    * `"letter"`
                                                    * `"legal"`
                                                  </Prop.Extras>
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>

                                          <Prop name="email" type="EmailRequirement" sourceLineNumbers={[1021]}>
                                            Email output types will show a single html file (canva hosted assets) preview in preview UI

                                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>email</strong></>}>
                                              <Prop.List>
                                                <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                                  File format for this requirement.

                                                  <Prop.Extras>
                                                    **Available values**:

                                                    * `"html_bundle"`
                                                    * `"html_standalone"`
                                                  </Prop.Extras>
                                                </Prop>
                                              </Prop.List>
                                            </PillAccordion>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>

                                    <Prop name="fileCount" type="ValueRange" sourceLineNumbers={[1001]}>
                                      Number of files accepted in this slot.

                                      Use this to specify single or multiple file requirements.
                                      Examples:

                                      * `{ exact: 1 }`: Exactly one file
                                      * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                      * undefined: Any number of files

                                      <Tabs>
                                        <Tab name="ExactValueRange">
                                          Exact value range constraint.

                                          <Prop.Extras>
                                            **Example: Exact value range**

                                            ```ts
                                            const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                            ```
                                          </Prop.Extras>

                                          <Prop.List />
                                        </Tab>

                                        <Tab name="MinValueRange">
                                          Minimum value range constraint.

                                          <Prop.Extras>
                                            **Example: Minimum value range**

                                            ```ts
                                            const minValue: ValueRange = { min: 3 }; // At least 3
                                            ```
                                          </Prop.Extras>

                                          <Prop.List />
                                        </Tab>

                                        <Tab name="MaxValueRange">
                                          Maximum value range constraint.

                                          <Prop.Extras>
                                            **Example: Maximum value range**

                                            ```ts
                                            const maxValue: ValueRange = { max: 10 }; // At most 10
                                            ```
                                          </Prop.Extras>

                                          <Prop.List />
                                        </Tab>

                                        <Tab name="MinMaxValueRange">
                                          Minimum and maximum value range constraint.
                                          Ranges are inclusive `(min ≤ value ≤ max)`.

                                          <Prop.Extras>
                                            **Example: Minimum and maximum value range**

                                            ```ts
                                            const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                            ```
                                          </Prop.Extras>

                                          <Prop.List />
                                        </Tab>
                                      </Tabs>
                                    </Prop>

                                    <Prop name="autoSelect" state="preview" type="string" sourceLineNumbers={[1034]}>
                                      Leaves Canva's own default selection in place, which it already does for a slot that omits
                                      this field. To pre-select multiple inputs in a slot, use MediaSlotWithAutoSelect.

                                      The default autoSelect behavior is informed by the `accepts` and `fileCount` fields.

                                      * If a single media type is accepted, Canva will pre-select the first valid input as a file for that type.
                                      * If multiple media types are accepted, Canva may infer a preferred media type from the current editor state.
                                      * If `fileCount` is not provided, no auto-selection will occur.

                                      The only valid value is `"default"`.
                                    </Prop>

                                    <Prop name="selection" readonly type="MediaSelection[]" sourceLineNumbers={[1216]}>
                                      Current selection for this slot.

                                      <Tabs>
                                        <Tab name="ImageSelection">
                                          Selection metadata for an image media item.

                                          <Prop.List>
                                            <Prop name="kind" required type="string" sourceLineNumbers={[939]}>
                                              The only valid value is `"image"`.
                                            </Prop>

                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                              Metadata about the source content represented by this selection.

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                <Prop.List>
                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                    The only valid value is `"design"`.
                                                  </Prop>

                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                    A signed JWT token containing the design id
                                                  </Prop>

                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                    The user given title of the design
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>
                                          </Prop.List>
                                        </Tab>

                                        <Tab name="VideoSelection">
                                          Selection metadata for a video media item.

                                          <Prop.List>
                                            <Prop name="kind" required type="string" sourceLineNumbers={[2124]}>
                                              The only valid value is `"video"`.
                                            </Prop>

                                            <Prop name="durationMs" required type="number" sourceLineNumbers={[2128]}>
                                              Duration of the selected video in milliseconds.
                                            </Prop>

                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                              Metadata about the source content represented by this selection.

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                <Prop.List>
                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                    The only valid value is `"design"`.
                                                  </Prop>

                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                    A signed JWT token containing the design id
                                                  </Prop>

                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                    The user given title of the design
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>
                                          </Prop.List>
                                        </Tab>

                                        <Tab name="DocumentSelection">
                                          Selection metadata for a document media item.

                                          <Prop.List>
                                            <Prop name="kind" required type="string" sourceLineNumbers={[624]}>
                                              The only valid value is `"document"`.
                                            </Prop>

                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                              Metadata about the source content represented by this selection.

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                <Prop.List>
                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                    The only valid value is `"design"`.
                                                  </Prop>

                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                    A signed JWT token containing the design id
                                                  </Prop>

                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                    The user given title of the design
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>
                                          </Prop.List>
                                        </Tab>

                                        <Tab name="EmailSelection">
                                          Selection metadata for an email media item.

                                          <Prop.List>
                                            <Prop name="kind" required type="string" sourceLineNumbers={[722]}>
                                              The only valid value is `"email"`.
                                            </Prop>

                                            <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                              Metadata about the source content represented by this selection.

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                <Prop.List>
                                                  <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                    The only valid value is `"design"`.
                                                  </Prop>

                                                  <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                    A signed JWT token containing the design id
                                                  </Prop>

                                                  <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                    The user given title of the design
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>
                                          </Prop.List>
                                        </Tab>
                                      </Tabs>
                                    </Prop>
                                  </Prop.List>
                                </PillAccordion>
                              </Prop>

                              <Prop name="contentNoun" type="ContentNoun" sourceLineNumbers={[1223]}>
                                The type of content being published. When set, Canva uses this to tailor and improve the
                                publish experience. When omitted, defaults to `'content'` (generic behavior).

                                <Prop.Extras>
                                  **Available values**:

                                  * `"email"`
                                  * `"post"`
                                  * `"schedule"`
                                  * `"asset"`
                                  * `"draft"`
                                  * `"publication"`
                                  * `"content"`
                                  * `"content_export"`
                                </Prop.Extras>
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>

                        <Prop name="publishRef" type="string" sourceLineNumbers={[1539]}>
                          Current publish reference, if available
                        </Prop>
                      </Prop.List>
                    </PillAccordion>
                  </Prop>

                  <Prop name="requestPreviewUpgrade" required type="function" sourceLineNumbers={[1692]}>
                    Callback to upgrade thumbnail previews to full media.

                    Call this function when you need full video or multi-page document previews
                    instead of lightweight thumbnails. This helps optimize performance by deferring
                    full media loading until needed.

                    Upgrades may complete asynchronously; listen to `registerOnPreviewChange` for updates
                    to receive the upgraded previews.

                    <Prop.Extras>
                      **Example: Upgrading previews on user interaction**

                      ```ts
                      // When user clicks on a thumbnail, upgrade to full preview
                      if (preview.status === 'thumbnail') {
                        requestPreviewUpgrade([preview.id]);
                      }
                      ```
                    </Prop.Extras>

                    **Parameters**

                    <Prop.List>
                      <Prop name="previewIds" required type="string[]" sourceLineNumbers={[1692]}>
                        Array of preview IDs to upgrade from thumbnail to full media
                      </Prop>
                    </Prop.List>

                    **Returns**

                    `void`
                  </Prop>

                  <Prop name="registerOnPreviewChange" required type="function" sourceLineNumbers={[1725]}>
                    Registers a callback to be invoked when preview data changes.

                    This callback is triggered when:

                    * The design content changes
                    * The output type changes
                    * Preview media is upgraded from thumbnail to full video
                    * Export settings are modified

                    Use this to update your preview UI in real-time as users modify their design.

                    <Prop.Extras>
                      **Example: Handling preview updates**

                      ```ts
                      const disposer = registerOnPreviewChange(({ previewMedia, outputType, publishRef }) => {
                        // Update your preview UI with the new preview media
                        previewMedia.forEach((media) => {
                          media.previews.forEach((preview) => {
                            if (preview.status === 'ready') {
                              displayPreview(preview);
                            }
                          });
                        });
                      });

                      // Clean up when preview UI is unmounted
                      onUnmount(() => disposer());
                      ```
                    </Prop.Extras>

                    **Parameters**

                    <Prop.List>
                      <Prop name="callback" required type="function" sourceLineNumbers={[1725]}>
                        The callback invoked when preview data is updated

                        **Parameters**

                        <Prop.List>
                          <Prop name="opts" required type="object" sourceLineNumbers={[1725]}>
                            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>opts</strong></>}>
                              <Prop.List>
                                <Prop name="previewMedia" required type="PreviewMedia[]" sourceLineNumbers={[1726]}>
                                  Preview media for a specific media slot.

                                  Contains preview URLs and metadata for images or videos in the design.

                                  <PillAccordion defaultExpanded={false} title={<>Properties of <strong>previewMedia</strong></>}>
                                    <Prop.List>
                                      <Prop name="mediaSlotId" required type="string" sourceLineNumbers={[1375]}>
                                        ID of the media slot this preview belongs to.

                                        Matches a media slot ID from your output type definition.
                                      </Prop>

                                      <Prop name="previews" required type="Preview[]" sourceLineNumbers={[1381]}>
                                        Array of preview items for this media slot.

                                        May contain multiple previews if the media slot accepts multiple files.

                                        <Tabs>
                                          <Tab name="ImagePreview">
                                            Image preview in various states.

                                            <Tabs>
                                              <Tab name="ImagePreviewLoading">
                                                Image preview that is currently being generated.

                                                Display a loading state until the preview transitions to `"ready"` or `"error"`.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[862]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"image"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[863]}>
                                                    Current state of the preview.

                                                    The only valid value is `"loading"`.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="ImagePreviewReady">
                                                Image preview that is ready to display.

                                                Contains the URL to the preview image.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[873]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"image"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[874]}>
                                                    Current state of the preview.

                                                    The only valid value is `"ready"`.
                                                  </Prop>

                                                  <Prop name="format" required type="string" sourceLineNumbers={[878]}>
                                                    Image format of the preview.

                                                    <Prop.Extras>
                                                      **Available values**:

                                                      * `"png"`
                                                      * `"jpg"`
                                                    </Prop.Extras>
                                                  </Prop>

                                                  <Prop name="url" required type="string" sourceLineNumbers={[884]}>
                                                    URL to the preview image.

                                                    Use this URL to display the preview to users.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="ImagePreviewError">
                                                Image preview that failed to generate.

                                                Display an error state to the user.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[847]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"image"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[848]}>
                                                    Current state of the preview.

                                                    The only valid value is `"error"`.
                                                  </Prop>

                                                  <Prop name="message" required type="string" sourceLineNumbers={[852]}>
                                                    The error message to display to the user.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>
                                            </Tabs>
                                          </Tab>

                                          <Tab name="VideoPreview">
                                            Video preview in various states.

                                            Videos transition through states: `"loading"` → `"thumbnail"` → `"upgrading"` → `"ready"`.
                                            Start with thumbnails for better performance, then upgrade to full video using `requestPreviewUpgrade`.

                                            <Tabs>
                                              <Tab name="VideoPreviewLoading">
                                                Video preview that is currently being generated.

                                                Display a loading state until the preview transitions to `"thumbnail"` or `"error"`.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[1987]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"video"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[1988]}>
                                                    Current state of the preview.

                                                    The only valid value is `"loading"`.
                                                  </Prop>

                                                  <Prop name="durationMs" type="number" sourceLineNumbers={[1992]}>
                                                    Video duration in milliseconds.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="VideoPreviewThumbnail">
                                                Video preview with lightweight thumbnail available.

                                                This is the initial state for video previews. Show the thumbnail image
                                                and call `requestPreviewUpgrade` when the user needs the full video.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[2038]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"video"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[2039]}>
                                                    Current state of the preview.

                                                    The only valid value is `"thumbnail"`.
                                                  </Prop>

                                                  <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[2043]}>
                                                    Format of the thumbnail image.

                                                    <Prop.Extras>
                                                      **Available values**:

                                                      * `"png"`
                                                      * `"jpg"`
                                                    </Prop.Extras>
                                                  </Prop>

                                                  <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[2049]}>
                                                    URL to the thumbnail image.

                                                    Display this lightweight image until full video is needed.
                                                  </Prop>

                                                  <Prop name="durationMs" type="number" sourceLineNumbers={[2053]}>
                                                    Video duration in milliseconds.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="VideoPreviewUpgrading">
                                                Video preview that is being upgraded from thumbnail to full video.

                                                Display the thumbnail with a loading indicator until the video is ready.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[2063]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"video"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[2064]}>
                                                    Current state of the preview.

                                                    The only valid value is `"upgrading"`.
                                                  </Prop>

                                                  <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[2068]}>
                                                    Format of the thumbnail image.

                                                    <Prop.Extras>
                                                      **Available values**:

                                                      * `"png"`
                                                      * `"jpg"`
                                                    </Prop.Extras>
                                                  </Prop>

                                                  <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[2074]}>
                                                    URL to the thumbnail image.

                                                    Continue showing the thumbnail while the full video loads.
                                                  </Prop>

                                                  <Prop name="durationMs" type="number" sourceLineNumbers={[2078]}>
                                                    Video duration in milliseconds.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="VideoPreviewReady">
                                                Video preview with full video ready to play.

                                                Contains URLs for both the video and thumbnail.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[2002]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"video"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[2003]}>
                                                    Current state of the preview.

                                                    The only valid value is `"ready"`.
                                                  </Prop>

                                                  <Prop name="format" required type="string" sourceLineNumbers={[2007]}>
                                                    Video format.

                                                    The only valid value is `"mp4"`.
                                                  </Prop>

                                                  <Prop name="url" required type="string" sourceLineNumbers={[2013]}>
                                                    URL to the full video.

                                                    Use this URL in a video player.
                                                  </Prop>

                                                  <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[2017]}>
                                                    Format of the thumbnail image.

                                                    <Prop.Extras>
                                                      **Available values**:

                                                      * `"png"`
                                                      * `"jpg"`
                                                    </Prop.Extras>
                                                  </Prop>

                                                  <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[2023]}>
                                                    URL to the thumbnail image.

                                                    Can be used as a poster image for the video player.
                                                  </Prop>

                                                  <Prop name="durationMs" type="number" sourceLineNumbers={[2027]}>
                                                    Video duration in milliseconds.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="VideoPreviewError">
                                                Video preview that failed to generate.

                                                Display an error state to the user.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[1972]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"video"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[1973]}>
                                                    Current state of the preview.

                                                    The only valid value is `"error"`.
                                                  </Prop>

                                                  <Prop name="message" required type="string" sourceLineNumbers={[1977]}>
                                                    The error message to display to the user.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>
                                            </Tabs>
                                          </Tab>

                                          <Tab name="DocumentPreview">
                                            Document preview in various states.

                                            Documents transition through states: `"loading"` → `"thumbnail"` → `"upgrading"` → `"ready"`.
                                            Start with a lightweight thumbnail of the first page, then upgrade to full multi-page
                                            preview using `requestPreviewUpgrade`.

                                            <Tabs>
                                              <Tab name="DocumentPreviewLoading">
                                                Document preview that is currently being generated.

                                                Display a loading state until the preview transitions to `"thumbnail"` or `"error"`.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[507]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"document"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[508]}>
                                                    Current state of the preview.

                                                    The only valid value is `"loading"`.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="DocumentPreviewThumbnail">
                                                Document preview with first page thumbnail available.

                                                This is the initial state for document previews. Show the thumbnail image
                                                of the first page to give users a quick preview of the document.
                                                Call `requestPreviewUpgrade` to load all page thumbnails.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[557]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"document"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[558]}>
                                                    Current state of the preview.

                                                    The only valid value is `"thumbnail"`.
                                                  </Prop>

                                                  <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[562]}>
                                                    Format of the thumbnail image.

                                                    <Prop.Extras>
                                                      **Available values**:

                                                      * `"png"`
                                                      * `"jpg"`
                                                    </Prop.Extras>
                                                  </Prop>

                                                  <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[568]}>
                                                    URL to the first page thumbnail.

                                                    Display this lightweight image to preview the document content.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="DocumentPreviewUpgrading">
                                                Intermediate state while multi-page document thumbnails are being fetched
                                                via requestPreviewUpgrade. The single-page thumbnail remains
                                                available for display during the upgrade.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[578]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"document"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[579]}>
                                                    Current state of the preview.

                                                    The only valid value is `"upgrading"`.
                                                  </Prop>

                                                  <Prop name="thumbnailFormat" required type="string" sourceLineNumbers={[583]}>
                                                    Format of the thumbnail image.

                                                    <Prop.Extras>
                                                      **Available values**:

                                                      * `"png"`
                                                      * `"jpg"`
                                                    </Prop.Extras>
                                                  </Prop>

                                                  <Prop name="thumbnailUrl" required type="string" sourceLineNumbers={[589]}>
                                                    URL to the first page thumbnail.

                                                    Continue showing this while the upgrade loads.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="DocumentPreviewReady">
                                                Final state after a document preview has been upgraded. Contains thumbnail
                                                URLs for every selected page in the document.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[536]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"document"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[537]}>
                                                    Current state of the preview.

                                                    The only valid value is `"ready"`.
                                                  </Prop>

                                                  <Prop name="format" required type="string" sourceLineNumbers={[541]}>
                                                    Format of the per-page thumbnails.

                                                    <Prop.Extras>
                                                      **Available values**:

                                                      * `"png"`
                                                      * `"jpg"`
                                                    </Prop.Extras>
                                                  </Prop>

                                                  <Prop name="pages" required type="DocumentPreviewPage[]" sourceLineNumbers={[545]}>
                                                    Thumbnail pages for each page. Index corresponds to the page number.

                                                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>pages</strong></>}>
                                                      <Prop.List>
                                                        <Prop name="url" required type="string" sourceLineNumbers={[519]}>
                                                          URL to the page thumbnail image.
                                                        </Prop>

                                                        <Prop name="widthPx" required type="number" sourceLineNumbers={[523]}>
                                                          Width of the page thumbnail in pixels.
                                                        </Prop>

                                                        <Prop name="heightPx" required type="number" sourceLineNumbers={[527]}>
                                                          Height of the page thumbnail in pixels.
                                                        </Prop>
                                                      </Prop.List>
                                                    </PillAccordion>
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="DocumentPreviewError">
                                                Document preview that failed to generate.

                                                Display an error state to the user.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[492]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"document"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[493]}>
                                                    Current state of the preview.

                                                    The only valid value is `"error"`.
                                                  </Prop>

                                                  <Prop name="message" required type="string" sourceLineNumbers={[497]}>
                                                    The error message to display to the user.
                                                  </Prop>

                                                  <Prop name="widthPx" required type="number" sourceLineNumbers={[1896]}>
                                                    Width of the preview in pixels.
                                                  </Prop>

                                                  <Prop name="heightPx" required type="number" sourceLineNumbers={[1900]}>
                                                    Height of the preview in pixels.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>
                                            </Tabs>
                                          </Tab>

                                          <Tab name="EmailPreview">
                                            Email preview in various states.

                                            Display a loading state until the preview transitions to `"ready"` or `"error"`.

                                            <Tabs>
                                              <Tab name="EmailPreviewLoading">
                                                Email preview in a loading state.

                                                Display a loading spinner until the preview transitions to `"ready"` or `"error"`.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[680]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"email"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[681]}>
                                                    Current state of the preview.

                                                    The only valid value is `"loading"`.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="EmailPreviewReady">
                                                Email preview in a ready state.

                                                Display the email preview.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[691]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"email"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[692]}>
                                                    Current state of the preview.

                                                    The only valid value is `"ready"`.
                                                  </Prop>

                                                  <Prop name="url" required type="string" sourceLineNumbers={[696]}>
                                                    URL to the single html file that represents the email.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>

                                              <Tab name="EmailPreviewError">
                                                Email preview in an error state.

                                                Display an error state to the user.

                                                <Prop.List>
                                                  <Prop name="id" required type="string" sourceLineNumbers={[198]}>
                                                    Unique identifier for this preview.

                                                    Use this ID with `requestPreviewUpgrade` to upgrade thumbnails to full previews.
                                                  </Prop>

                                                  <Prop name="kind" required type="string" sourceLineNumbers={[668]}>
                                                    Type of media in this preview.

                                                    The only valid value is `"email"`.
                                                  </Prop>

                                                  <Prop name="status" required type="string" sourceLineNumbers={[669]}>
                                                    Current state of the preview.

                                                    The only valid value is `"error"`.
                                                  </Prop>
                                                </Prop.List>
                                              </Tab>
                                            </Tabs>
                                          </Tab>
                                        </Tabs>
                                      </Prop>
                                    </Prop.List>
                                  </PillAccordion>
                                </Prop>

                                <Prop name="outputType" required type="OutputType" sourceLineNumbers={[1728]}>
                                  The output type that the preview data is for

                                  <PillAccordion defaultExpanded={false} title={<>Properties of <strong>outputType</strong></>}>
                                    <Prop.List>
                                      <Prop name="id" required type="string" sourceLineNumbers={[1198]}>
                                        Unique identifier for this output type.

                                        Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
                                      </Prop>

                                      <Prop name="displayName" required type="string" sourceLineNumbers={[1205]}>
                                        User-facing name for this output type.

                                        This is displayed to users when selecting where to publish.
                                        Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
                                      </Prop>

                                      <Prop name="mediaSlots" required type="object[]" sourceLineNumbers={[1212]}>
                                        Array of media slots defining what content is needed.

                                        Each slot represents a piece of media required for publishing,
                                        such as a main image, thumbnail, or video.

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>mediaSlots</strong></>}>
                                          <Prop.List>
                                            <Prop name="id" required type="string" sourceLineNumbers={[985]}>
                                              Unique identifier for this media slot within the output type.
                                            </Prop>

                                            <Prop name="displayName" required type="string" sourceLineNumbers={[991]}>
                                              User-facing name for this media slot.

                                              Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                                            </Prop>

                                            <Prop name="accepts" required type="object" sourceLineNumbers={[1014]}>
                                              File type requirements for this slot.

                                              Note the following behavior:

                                              * Provide at least one of the valid types
                                              * If multiple types are provided, files for this slot may be any of the accepted types; each file
                                                must satisfy the corresponding requirement for its media type
                                              * To restrict the slot to a single media type, provide only that requirement
                                              * `fileCount` applies across all files accepted by the slot regardless of media type
                                              * Document output types will show image previews (PNG thumbnail) in preview UI

                                              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>accepts</strong></>}>
                                                <Prop.List>
                                                  <Prop name="image" type="ImageRequirement" sourceLineNumbers={[1015]}>
                                                    Image file requirements for a media slot.

                                                    Specifies format, aspect ratio, and size constraints for images.

                                                    <Prop.Extras>
                                                      **Example: Image requirements for social media post**

                                                      ```ts
                                                      const imageReq: ImageRequirement = {
                                                        format: 'jpg',
                                                        aspectRatio: { min: 0.8, max: 1.91 },
                                                      };
                                                      ```
                                                    </Prop.Extras>

                                                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>image</strong></>}>
                                                      <Prop.List>
                                                        <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                                          File format for this requirement.

                                                          <Prop.Extras>
                                                            **Available values**:

                                                            * `"png"`
                                                            * `"jpg"`
                                                            * `"mp4"`
                                                            * `"pdf_standard"`
                                                            * `"html_bundle"`
                                                            * `"html_standalone"`
                                                          </Prop.Extras>
                                                        </Prop>

                                                        <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                                          Aspect ratio constraint (width / height).

                                                          Examples:

                                                          * `{ exact: 16/9 }`: Widescreen (16:9)
                                                          * `{ min: 0.8, max: 1.91 }`: Instagram range

                                                          <Tabs>
                                                            <Tab name="ExactValueRange">
                                                              Exact value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Exact value range**

                                                                ```ts
                                                                const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MinValueRange">
                                                              Minimum value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Minimum value range**

                                                                ```ts
                                                                const minValue: ValueRange = { min: 3 }; // At least 3
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MaxValueRange">
                                                              Maximum value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Maximum value range**

                                                                ```ts
                                                                const maxValue: ValueRange = { max: 10 }; // At most 10
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MinMaxValueRange">
                                                              Minimum and maximum value range constraint.
                                                              Ranges are inclusive `(min ≤ value ≤ max)`.

                                                              <Prop.Extras>
                                                                **Example: Minimum and maximum value range**

                                                                ```ts
                                                                const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>
                                                          </Tabs>
                                                        </Prop>

                                                        <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                                          <Prop.Extras>
                                                            **Available values**:

                                                            * `"jpg"`
                                                            * `"png"`
                                                          </Prop.Extras>
                                                        </Prop>

                                                        <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                                          Controls transparent-background support for PNG exports.

                                                          * Only applies when `format` is `'png'`
                                                          * If omitted or `false`, Canva exports a standard opaque PNG
                                                          * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                                          * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                                          <Prop.Extras>
                                                            **Default value**: `false`
                                                          </Prop.Extras>
                                                        </Prop>
                                                      </Prop.List>
                                                    </PillAccordion>
                                                  </Prop>

                                                  <Prop name="video" type="VideoRequirement" sourceLineNumbers={[1016]}>
                                                    Video file requirements for a media slot.

                                                    Specifies format, aspect ratio, duration, and size constraints for videos.

                                                    <Prop.Extras>
                                                      **Example: Video requirements for YouTube**

                                                      ```ts
                                                      const videoReq: VideoRequirement = {
                                                        format: 'mp4',
                                                        aspectRatio: { exact: 16/9 },
                                                        durationMs: { min: 1000, max: 600000 },
                                                      };
                                                      ```
                                                    </Prop.Extras>

                                                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>video</strong></>}>
                                                      <Prop.List>
                                                        <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                                          Supported video format.

                                                          The only valid value is `"mp4"`.
                                                        </Prop>

                                                        <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                                          Aspect ratio constraint (width / height).

                                                          Examples:

                                                          * `{ exact: 16/9 }`: Widescreen
                                                          * `{ exact: 9/16 }`: Vertical/Story format

                                                          <Tabs>
                                                            <Tab name="ExactValueRange">
                                                              Exact value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Exact value range**

                                                                ```ts
                                                                const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MinValueRange">
                                                              Minimum value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Minimum value range**

                                                                ```ts
                                                                const minValue: ValueRange = { min: 3 }; // At least 3
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MaxValueRange">
                                                              Maximum value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Maximum value range**

                                                                ```ts
                                                                const maxValue: ValueRange = { max: 10 }; // At most 10
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MinMaxValueRange">
                                                              Minimum and maximum value range constraint.
                                                              Ranges are inclusive `(min ≤ value ≤ max)`.

                                                              <Prop.Extras>
                                                                **Example: Minimum and maximum value range**

                                                                ```ts
                                                                const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>
                                                          </Tabs>
                                                        </Prop>

                                                        <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                                          Duration constraint in milliseconds.

                                                          Examples:

                                                          * `{ max: 60000 }`: Maximum 60 seconds
                                                          * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                                          <Tabs>
                                                            <Tab name="ExactValueRange">
                                                              Exact value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Exact value range**

                                                                ```ts
                                                                const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MinValueRange">
                                                              Minimum value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Minimum value range**

                                                                ```ts
                                                                const minValue: ValueRange = { min: 3 }; // At least 3
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MaxValueRange">
                                                              Maximum value range constraint.

                                                              <Prop.Extras>
                                                                **Example: Maximum value range**

                                                                ```ts
                                                                const maxValue: ValueRange = { max: 10 }; // At most 10
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>

                                                            <Tab name="MinMaxValueRange">
                                                              Minimum and maximum value range constraint.
                                                              Ranges are inclusive `(min ≤ value ≤ max)`.

                                                              <Prop.Extras>
                                                                **Example: Minimum and maximum value range**

                                                                ```ts
                                                                const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                                ```
                                                              </Prop.Extras>

                                                              <Prop.List />
                                                            </Tab>
                                                          </Tabs>
                                                        </Prop>
                                                      </Prop.List>
                                                    </PillAccordion>
                                                  </Prop>

                                                  <Prop name="document" type="DocumentRequirement" sourceLineNumbers={[1017]}>
                                                    Document file requirements for a media slot.

                                                    Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                                    The actual document file is only generated for the final output in OutputMedia.

                                                    <Prop.Extras>
                                                      **Example: Document requirements**

                                                      ```ts
                                                      const documentReq: DocumentRequirement = {
                                                        format: 'pdf_standard',
                                                        size: 'a4',
                                                      };
                                                      ```
                                                    </Prop.Extras>

                                                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>document</strong></>}>
                                                      <Prop.List>
                                                        <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                                          Supported document export format.
                                                          Currently supports PDF standard format.

                                                          The only valid value is `"pdf_standard"`.
                                                        </Prop>

                                                        <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                                          The document size of the export file.

                                                          <Prop.Extras>
                                                            **Available values**:

                                                            * `"a4"`
                                                            * `"a3"`
                                                            * `"letter"`
                                                            * `"legal"`
                                                          </Prop.Extras>
                                                        </Prop>
                                                      </Prop.List>
                                                    </PillAccordion>
                                                  </Prop>

                                                  <Prop name="email" type="EmailRequirement" sourceLineNumbers={[1021]}>
                                                    Email output types will show a single html file (canva hosted assets) preview in preview UI

                                                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>email</strong></>}>
                                                      <Prop.List>
                                                        <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                                          File format for this requirement.

                                                          <Prop.Extras>
                                                            **Available values**:

                                                            * `"html_bundle"`
                                                            * `"html_standalone"`
                                                          </Prop.Extras>
                                                        </Prop>
                                                      </Prop.List>
                                                    </PillAccordion>
                                                  </Prop>
                                                </Prop.List>
                                              </PillAccordion>
                                            </Prop>

                                            <Prop name="fileCount" type="ValueRange" sourceLineNumbers={[1001]}>
                                              Number of files accepted in this slot.

                                              Use this to specify single or multiple file requirements.
                                              Examples:

                                              * `{ exact: 1 }`: Exactly one file
                                              * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                              * undefined: Any number of files

                                              <Tabs>
                                                <Tab name="ExactValueRange">
                                                  Exact value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Exact value range**

                                                    ```ts
                                                    const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MinValueRange">
                                                  Minimum value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Minimum value range**

                                                    ```ts
                                                    const minValue: ValueRange = { min: 3 }; // At least 3
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MaxValueRange">
                                                  Maximum value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Maximum value range**

                                                    ```ts
                                                    const maxValue: ValueRange = { max: 10 }; // At most 10
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MinMaxValueRange">
                                                  Minimum and maximum value range constraint.
                                                  Ranges are inclusive `(min ≤ value ≤ max)`.

                                                  <Prop.Extras>
                                                    **Example: Minimum and maximum value range**

                                                    ```ts
                                                    const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>
                                              </Tabs>
                                            </Prop>

                                            <Prop name="autoSelect" state="preview" type="string" sourceLineNumbers={[1034]}>
                                              Leaves Canva's own default selection in place, which it already does for a slot that omits
                                              this field. To pre-select multiple inputs in a slot, use MediaSlotWithAutoSelect.

                                              The default autoSelect behavior is informed by the `accepts` and `fileCount` fields.

                                              * If a single media type is accepted, Canva will pre-select the first valid input as a file for that type.
                                              * If multiple media types are accepted, Canva may infer a preferred media type from the current editor state.
                                              * If `fileCount` is not provided, no auto-selection will occur.

                                              The only valid value is `"default"`.
                                            </Prop>

                                            <Prop name="selection" readonly type="MediaSelection[]" sourceLineNumbers={[1216]}>
                                              Current selection for this slot.

                                              <Tabs>
                                                <Tab name="ImageSelection">
                                                  Selection metadata for an image media item.

                                                  <Prop.List>
                                                    <Prop name="kind" required type="string" sourceLineNumbers={[939]}>
                                                      The only valid value is `"image"`.
                                                    </Prop>

                                                    <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                                      Metadata about the source content represented by this selection.

                                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                        <Prop.List>
                                                          <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                            The only valid value is `"design"`.
                                                          </Prop>

                                                          <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                            A signed JWT token containing the design id
                                                          </Prop>

                                                          <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                            The user given title of the design
                                                          </Prop>
                                                        </Prop.List>
                                                      </PillAccordion>
                                                    </Prop>
                                                  </Prop.List>
                                                </Tab>

                                                <Tab name="VideoSelection">
                                                  Selection metadata for a video media item.

                                                  <Prop.List>
                                                    <Prop name="kind" required type="string" sourceLineNumbers={[2124]}>
                                                      The only valid value is `"video"`.
                                                    </Prop>

                                                    <Prop name="durationMs" required type="number" sourceLineNumbers={[2128]}>
                                                      Duration of the selected video in milliseconds.
                                                    </Prop>

                                                    <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                                      Metadata about the source content represented by this selection.

                                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                        <Prop.List>
                                                          <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                            The only valid value is `"design"`.
                                                          </Prop>

                                                          <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                            A signed JWT token containing the design id
                                                          </Prop>

                                                          <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                            The user given title of the design
                                                          </Prop>
                                                        </Prop.List>
                                                      </PillAccordion>
                                                    </Prop>
                                                  </Prop.List>
                                                </Tab>

                                                <Tab name="DocumentSelection">
                                                  Selection metadata for a document media item.

                                                  <Prop.List>
                                                    <Prop name="kind" required type="string" sourceLineNumbers={[624]}>
                                                      The only valid value is `"document"`.
                                                    </Prop>

                                                    <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                                      Metadata about the source content represented by this selection.

                                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                        <Prop.List>
                                                          <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                            The only valid value is `"design"`.
                                                          </Prop>

                                                          <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                            A signed JWT token containing the design id
                                                          </Prop>

                                                          <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                            The user given title of the design
                                                          </Prop>
                                                        </Prop.List>
                                                      </PillAccordion>
                                                    </Prop>
                                                  </Prop.List>
                                                </Tab>

                                                <Tab name="EmailSelection">
                                                  Selection metadata for an email media item.

                                                  <Prop.List>
                                                    <Prop name="kind" required type="string" sourceLineNumbers={[722]}>
                                                      The only valid value is `"email"`.
                                                    </Prop>

                                                    <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                                      Metadata about the source content represented by this selection.

                                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                                        <Prop.List>
                                                          <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                                            The only valid value is `"design"`.
                                                          </Prop>

                                                          <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                                            A signed JWT token containing the design id
                                                          </Prop>

                                                          <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                                            The user given title of the design
                                                          </Prop>
                                                        </Prop.List>
                                                      </PillAccordion>
                                                    </Prop>
                                                  </Prop.List>
                                                </Tab>
                                              </Tabs>
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>

                                      <Prop name="contentNoun" type="ContentNoun" sourceLineNumbers={[1223]}>
                                        The type of content being published. When set, Canva uses this to tailor and improve the
                                        publish experience. When omitted, defaults to `'content'` (generic behavior).

                                        <Prop.Extras>
                                          **Available values**:

                                          * `"email"`
                                          * `"post"`
                                          * `"schedule"`
                                          * `"asset"`
                                          * `"draft"`
                                          * `"publication"`
                                          * `"content"`
                                          * `"content_export"`
                                        </Prop.Extras>
                                      </Prop>
                                    </Prop.List>
                                  </PillAccordion>
                                </Prop>

                                <Prop name="publishRef" type="string" sourceLineNumbers={[1730]}>
                                  The current publish settings reference, if available
                                </Prop>
                              </Prop.List>
                            </PillAccordion>
                          </Prop>
                        </Prop.List>

                        **Returns**

                        `void`
                      </Prop>
                    </Prop.List>

                    **Returns**

                    A disposer function that cleans up the registered callback.

                    () => `void`
                  </Prop>
                </Prop.List>
              </PillAccordion>
            </Prop>
          </Prop.List>

          **Returns**

          `void`
        </Prop>

        <Prop name="publishContent" required type="function" sourceLineNumbers={[402]}>
          Publishes the content to the external platform.

          This action is called when the user confirms the publish action after reviewing
          settings and preview. Your implementation should send the exported files
          to your platform's API.

          The `outputMedia` contains production-ready files that match the requirements
          specified in your output types. The `publishRef` contains the user's settings
          from the settings UI.

          <Prop.Extras>
            **Example: Publishing content to an external platform**

            ```ts
            import type { PublishContentRequest, PublishContentResponse } from '@canva/intents/content';

            async function publishContent(request: PublishContentRequest): Promise<PublishContentResponse> {
              const { publishRef, outputType, outputMedia } = request;

              try {
                // Parse settings from publishRef
                const settings = publishRef ? JSON.parse(publishRef) : {};

                // Upload files to your platform
                const uploadedFiles = await Promise.all(
                  outputMedia.flatMap(media =>
                    media.files.map(file => uploadFile(file.url))
                  )
                );

                // Create post on your platform
                const result = await createPost({
                  files: uploadedFiles,
                  caption: settings.caption
                });

                return {
                  status: 'completed',
                  externalId: result.id,
                  externalUrl: result.url
                };
              } catch (error) {
                return {
                  status: 'remote_request_failed'
                };
              }
            }
            ```
          </Prop.Extras>

          **Parameters**

          <Prop.List>
            <Prop name="request" required type="PublishContentRequest" sourceLineNumbers={[402]}>
              Parameters for the publish operation.

              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>request</strong></>}>
                <Prop.List>
                  <Prop name="outputType" required type="OutputTypeConfiguration" sourceLineNumbers={[1472]}>
                    The output type selected by the user for this publish operation.

                    This matches one of the output types you provided in `getPublishConfiguration`.

                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>outputType</strong></>}>
                      <Prop.List>
                        <Prop name="id" required type="string" sourceLineNumbers={[1259]}>
                          Unique identifier for this output type.

                          Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
                        </Prop>

                        <Prop name="displayName" required type="string" sourceLineNumbers={[1266]}>
                          User-facing name for this output type.

                          This is displayed to users when selecting where to publish.
                          Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
                        </Prop>

                        <Prop name="mediaSlots" required type="object[]" sourceLineNumbers={[1273]}>
                          Array of media slots defining what content is needed.

                          Each slot represents a piece of media required for publishing,
                          such as a main image, thumbnail, or video.

                          <Tabs>
                            <Tab name="MediaSlot">
                              Configuration for a media slot within an output type.

                              Defines what type of media is accepted, requirements, and constraints.

                              <Prop.Extras>
                                **Example: Image slot with aspect ratio requirements**

                                ```ts
                                const thumbnailSlot: MediaSlot = {
                                  id: 'thumbnail',
                                  displayName: 'Video Thumbnail',
                                  fileCount: { exact: 1 },
                                  accepts: {
                                    image: {
                                      format: 'jpg',
                                      aspectRatio: { exact: 16/9 },
                                    }
                                  }
                                };
                                ```
                              </Prop.Extras>

                              <Prop.List>
                                <Prop name="id" required type="string" sourceLineNumbers={[985]}>
                                  Unique identifier for this media slot within the output type.
                                </Prop>

                                <Prop name="displayName" required type="string" sourceLineNumbers={[991]}>
                                  User-facing name for this media slot.

                                  Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                                </Prop>

                                <Prop name="accepts" required type="object" sourceLineNumbers={[1014]}>
                                  File type requirements for this slot.

                                  Note the following behavior:

                                  * Provide at least one of the valid types
                                  * If multiple types are provided, files for this slot may be any of the accepted types; each file
                                    must satisfy the corresponding requirement for its media type
                                  * To restrict the slot to a single media type, provide only that requirement
                                  * `fileCount` applies across all files accepted by the slot regardless of media type
                                  * Document output types will show image previews (PNG thumbnail) in preview UI

                                  <PillAccordion defaultExpanded={false} title={<>Properties of <strong>accepts</strong></>}>
                                    <Prop.List>
                                      <Prop name="image" type="ImageRequirement" sourceLineNumbers={[1015]}>
                                        Image file requirements for a media slot.

                                        Specifies format, aspect ratio, and size constraints for images.

                                        <Prop.Extras>
                                          **Example: Image requirements for social media post**

                                          ```ts
                                          const imageReq: ImageRequirement = {
                                            format: 'jpg',
                                            aspectRatio: { min: 0.8, max: 1.91 },
                                          };
                                          ```
                                        </Prop.Extras>

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>image</strong></>}>
                                          <Prop.List>
                                            <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                              File format for this requirement.

                                              <Prop.Extras>
                                                **Available values**:

                                                * `"png"`
                                                * `"jpg"`
                                                * `"mp4"`
                                                * `"pdf_standard"`
                                                * `"html_bundle"`
                                                * `"html_standalone"`
                                              </Prop.Extras>
                                            </Prop>

                                            <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                              Aspect ratio constraint (width / height).

                                              Examples:

                                              * `{ exact: 16/9 }`: Widescreen (16:9)
                                              * `{ min: 0.8, max: 1.91 }`: Instagram range

                                              <Tabs>
                                                <Tab name="ExactValueRange">
                                                  Exact value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Exact value range**

                                                    ```ts
                                                    const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MinValueRange">
                                                  Minimum value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Minimum value range**

                                                    ```ts
                                                    const minValue: ValueRange = { min: 3 }; // At least 3
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MaxValueRange">
                                                  Maximum value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Maximum value range**

                                                    ```ts
                                                    const maxValue: ValueRange = { max: 10 }; // At most 10
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MinMaxValueRange">
                                                  Minimum and maximum value range constraint.
                                                  Ranges are inclusive `(min ≤ value ≤ max)`.

                                                  <Prop.Extras>
                                                    **Example: Minimum and maximum value range**

                                                    ```ts
                                                    const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>
                                              </Tabs>
                                            </Prop>

                                            <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                              <Prop.Extras>
                                                **Available values**:

                                                * `"jpg"`
                                                * `"png"`
                                              </Prop.Extras>
                                            </Prop>

                                            <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                              Controls transparent-background support for PNG exports.

                                              * Only applies when `format` is `'png'`
                                              * If omitted or `false`, Canva exports a standard opaque PNG
                                              * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                              * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                              <Prop.Extras>
                                                **Default value**: `false`
                                              </Prop.Extras>
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>

                                      <Prop name="video" type="VideoRequirement" sourceLineNumbers={[1016]}>
                                        Video file requirements for a media slot.

                                        Specifies format, aspect ratio, duration, and size constraints for videos.

                                        <Prop.Extras>
                                          **Example: Video requirements for YouTube**

                                          ```ts
                                          const videoReq: VideoRequirement = {
                                            format: 'mp4',
                                            aspectRatio: { exact: 16/9 },
                                            durationMs: { min: 1000, max: 600000 },
                                          };
                                          ```
                                        </Prop.Extras>

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>video</strong></>}>
                                          <Prop.List>
                                            <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                              Supported video format.

                                              The only valid value is `"mp4"`.
                                            </Prop>

                                            <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                              Aspect ratio constraint (width / height).

                                              Examples:

                                              * `{ exact: 16/9 }`: Widescreen
                                              * `{ exact: 9/16 }`: Vertical/Story format

                                              <Tabs>
                                                <Tab name="ExactValueRange">
                                                  Exact value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Exact value range**

                                                    ```ts
                                                    const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MinValueRange">
                                                  Minimum value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Minimum value range**

                                                    ```ts
                                                    const minValue: ValueRange = { min: 3 }; // At least 3
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MaxValueRange">
                                                  Maximum value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Maximum value range**

                                                    ```ts
                                                    const maxValue: ValueRange = { max: 10 }; // At most 10
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MinMaxValueRange">
                                                  Minimum and maximum value range constraint.
                                                  Ranges are inclusive `(min ≤ value ≤ max)`.

                                                  <Prop.Extras>
                                                    **Example: Minimum and maximum value range**

                                                    ```ts
                                                    const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>
                                              </Tabs>
                                            </Prop>

                                            <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                              Duration constraint in milliseconds.

                                              Examples:

                                              * `{ max: 60000 }`: Maximum 60 seconds
                                              * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                              <Tabs>
                                                <Tab name="ExactValueRange">
                                                  Exact value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Exact value range**

                                                    ```ts
                                                    const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MinValueRange">
                                                  Minimum value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Minimum value range**

                                                    ```ts
                                                    const minValue: ValueRange = { min: 3 }; // At least 3
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MaxValueRange">
                                                  Maximum value range constraint.

                                                  <Prop.Extras>
                                                    **Example: Maximum value range**

                                                    ```ts
                                                    const maxValue: ValueRange = { max: 10 }; // At most 10
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>

                                                <Tab name="MinMaxValueRange">
                                                  Minimum and maximum value range constraint.
                                                  Ranges are inclusive `(min ≤ value ≤ max)`.

                                                  <Prop.Extras>
                                                    **Example: Minimum and maximum value range**

                                                    ```ts
                                                    const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                    ```
                                                  </Prop.Extras>

                                                  <Prop.List />
                                                </Tab>
                                              </Tabs>
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>

                                      <Prop name="document" type="DocumentRequirement" sourceLineNumbers={[1017]}>
                                        Document file requirements for a media slot.

                                        Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                        The actual document file is only generated for the final output in OutputMedia.

                                        <Prop.Extras>
                                          **Example: Document requirements**

                                          ```ts
                                          const documentReq: DocumentRequirement = {
                                            format: 'pdf_standard',
                                            size: 'a4',
                                          };
                                          ```
                                        </Prop.Extras>

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>document</strong></>}>
                                          <Prop.List>
                                            <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                              Supported document export format.
                                              Currently supports PDF standard format.

                                              The only valid value is `"pdf_standard"`.
                                            </Prop>

                                            <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                              The document size of the export file.

                                              <Prop.Extras>
                                                **Available values**:

                                                * `"a4"`
                                                * `"a3"`
                                                * `"letter"`
                                                * `"legal"`
                                              </Prop.Extras>
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>

                                      <Prop name="email" type="EmailRequirement" sourceLineNumbers={[1021]}>
                                        Email output types will show a single html file (canva hosted assets) preview in preview UI

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>email</strong></>}>
                                          <Prop.List>
                                            <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                              File format for this requirement.

                                              <Prop.Extras>
                                                **Available values**:

                                                * `"html_bundle"`
                                                * `"html_standalone"`
                                              </Prop.Extras>
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>
                                    </Prop.List>
                                  </PillAccordion>
                                </Prop>

                                <Prop name="fileCount" type="ValueRange" sourceLineNumbers={[1001]}>
                                  Number of files accepted in this slot.

                                  Use this to specify single or multiple file requirements.
                                  Examples:

                                  * `{ exact: 1 }`: Exactly one file
                                  * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                  * undefined: Any number of files

                                  <Tabs>
                                    <Tab name="ExactValueRange">
                                      Exact value range constraint.

                                      <Prop.Extras>
                                        **Example: Exact value range**

                                        ```ts
                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                        ```
                                      </Prop.Extras>

                                      <Prop.List />
                                    </Tab>

                                    <Tab name="MinValueRange">
                                      Minimum value range constraint.

                                      <Prop.Extras>
                                        **Example: Minimum value range**

                                        ```ts
                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                        ```
                                      </Prop.Extras>

                                      <Prop.List />
                                    </Tab>

                                    <Tab name="MaxValueRange">
                                      Maximum value range constraint.

                                      <Prop.Extras>
                                        **Example: Maximum value range**

                                        ```ts
                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                        ```
                                      </Prop.Extras>

                                      <Prop.List />
                                    </Tab>

                                    <Tab name="MinMaxValueRange">
                                      Minimum and maximum value range constraint.
                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                      <Prop.Extras>
                                        **Example: Minimum and maximum value range**

                                        ```ts
                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                        ```
                                      </Prop.Extras>

                                      <Prop.List />
                                    </Tab>
                                  </Tabs>
                                </Prop>

                                <Prop name="autoSelect" state="preview" type="string" sourceLineNumbers={[1034]}>
                                  Leaves Canva's own default selection in place, which it already does for a slot that omits
                                  this field. To pre-select multiple inputs in a slot, use MediaSlotWithAutoSelect.

                                  The default autoSelect behavior is informed by the `accepts` and `fileCount` fields.

                                  * If a single media type is accepted, Canva will pre-select the first valid input as a file for that type.
                                  * If multiple media types are accepted, Canva may infer a preferred media type from the current editor state.
                                  * If `fileCount` is not provided, no auto-selection will occur.

                                  The only valid value is `"default"`.
                                </Prop>
                              </Prop.List>
                            </Tab>

                            <Tab name="MediaSlotWithAutoSelect">
                              Configuration for a media slot within an output type.

                              Defines what type of media is accepted, requirements, and constraints.

                              <Prop.List>
                                <Prop name="id" required state="preview" type="string" sourceLineNumbers={[1048]}>
                                  Unique identifier for this media slot within the output type.
                                </Prop>

                                <Prop name="displayName" required state="preview" type="string" sourceLineNumbers={[1055]}>
                                  User-facing name for this media slot.

                                  Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                                </Prop>

                                <Prop name="fileCount" required state="preview" type="ValueRange" sourceLineNumbers={[1066]}>
                                  Number of files accepted in this slot.

                                  Use this to specify single or multiple file requirements.
                                  Examples:

                                  * `{ exact: 1 }`: Exactly one file
                                  * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                  * `{ min: 0 }`: Any number of files

                                  <Tabs>
                                    <Tab name="ExactValueRange">
                                      Exact value range constraint.

                                      <Prop.Extras>
                                        **Example: Exact value range**

                                        ```ts
                                        const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                        ```
                                      </Prop.Extras>

                                      <Prop.List />
                                    </Tab>

                                    <Tab name="MinValueRange">
                                      Minimum value range constraint.

                                      <Prop.Extras>
                                        **Example: Minimum value range**

                                        ```ts
                                        const minValue: ValueRange = { min: 3 }; // At least 3
                                        ```
                                      </Prop.Extras>

                                      <Prop.List />
                                    </Tab>

                                    <Tab name="MaxValueRange">
                                      Maximum value range constraint.

                                      <Prop.Extras>
                                        **Example: Maximum value range**

                                        ```ts
                                        const maxValue: ValueRange = { max: 10 }; // At most 10
                                        ```
                                      </Prop.Extras>

                                      <Prop.List />
                                    </Tab>

                                    <Tab name="MinMaxValueRange">
                                      Minimum and maximum value range constraint.
                                      Ranges are inclusive `(min ≤ value ≤ max)`.

                                      <Prop.Extras>
                                        **Example: Minimum and maximum value range**

                                        ```ts
                                        const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                        ```
                                      </Prop.Extras>

                                      <Prop.List />
                                    </Tab>
                                  </Tabs>
                                </Prop>

                                <Prop name="accepts" required state="preview" type="object" sourceLineNumbers={[1071]}>
                                  File type requirements for this slot.

                                  <Tabs>
                                    <Tab name="ImageRequirement">
                                      Image file requirements for a media slot.

                                      Specifies format, aspect ratio, and size constraints for images.

                                      <Prop.Extras>
                                        **Example: Image requirements for social media post**

                                        ```ts
                                        const imageReq: ImageRequirement = {
                                          format: 'jpg',
                                          aspectRatio: { min: 0.8, max: 1.91 },
                                        };
                                        ```
                                      </Prop.Extras>

                                      <Prop.List>
                                        <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                          File format for this requirement.

                                          <Prop.Extras>
                                            **Available values**:

                                            * `"png"`
                                            * `"jpg"`
                                            * `"mp4"`
                                            * `"pdf_standard"`
                                            * `"html_bundle"`
                                            * `"html_standalone"`
                                          </Prop.Extras>
                                        </Prop>

                                        <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                          Aspect ratio constraint (width / height).

                                          Examples:

                                          * `{ exact: 16/9 }`: Widescreen (16:9)
                                          * `{ min: 0.8, max: 1.91 }`: Instagram range

                                          <Tabs>
                                            <Tab name="ExactValueRange">
                                              Exact value range constraint.

                                              <Prop.Extras>
                                                **Example: Exact value range**

                                                ```ts
                                                const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MinValueRange">
                                              Minimum value range constraint.

                                              <Prop.Extras>
                                                **Example: Minimum value range**

                                                ```ts
                                                const minValue: ValueRange = { min: 3 }; // At least 3
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MaxValueRange">
                                              Maximum value range constraint.

                                              <Prop.Extras>
                                                **Example: Maximum value range**

                                                ```ts
                                                const maxValue: ValueRange = { max: 10 }; // At most 10
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MinMaxValueRange">
                                              Minimum and maximum value range constraint.
                                              Ranges are inclusive `(min ≤ value ≤ max)`.

                                              <Prop.Extras>
                                                **Example: Minimum and maximum value range**

                                                ```ts
                                                const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>
                                          </Tabs>
                                        </Prop>

                                        <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                          <Prop.Extras>
                                            **Available values**:

                                            * `"jpg"`
                                            * `"png"`
                                          </Prop.Extras>
                                        </Prop>

                                        <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                          Controls transparent-background support for PNG exports.

                                          * Only applies when `format` is `'png'`
                                          * If omitted or `false`, Canva exports a standard opaque PNG
                                          * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                          * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                          <Prop.Extras>
                                            **Default value**: `false`
                                          </Prop.Extras>
                                        </Prop>
                                      </Prop.List>
                                    </Tab>

                                    <Tab name="VideoRequirement">
                                      Video file requirements for a media slot.

                                      Specifies format, aspect ratio, duration, and size constraints for videos.

                                      <Prop.Extras>
                                        **Example: Video requirements for YouTube**

                                        ```ts
                                        const videoReq: VideoRequirement = {
                                          format: 'mp4',
                                          aspectRatio: { exact: 16/9 },
                                          durationMs: { min: 1000, max: 600000 },
                                        };
                                        ```
                                      </Prop.Extras>

                                      <Prop.List>
                                        <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                          Supported video format.

                                          The only valid value is `"mp4"`.
                                        </Prop>

                                        <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                          Aspect ratio constraint (width / height).

                                          Examples:

                                          * `{ exact: 16/9 }`: Widescreen
                                          * `{ exact: 9/16 }`: Vertical/Story format

                                          <Tabs>
                                            <Tab name="ExactValueRange">
                                              Exact value range constraint.

                                              <Prop.Extras>
                                                **Example: Exact value range**

                                                ```ts
                                                const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MinValueRange">
                                              Minimum value range constraint.

                                              <Prop.Extras>
                                                **Example: Minimum value range**

                                                ```ts
                                                const minValue: ValueRange = { min: 3 }; // At least 3
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MaxValueRange">
                                              Maximum value range constraint.

                                              <Prop.Extras>
                                                **Example: Maximum value range**

                                                ```ts
                                                const maxValue: ValueRange = { max: 10 }; // At most 10
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MinMaxValueRange">
                                              Minimum and maximum value range constraint.
                                              Ranges are inclusive `(min ≤ value ≤ max)`.

                                              <Prop.Extras>
                                                **Example: Minimum and maximum value range**

                                                ```ts
                                                const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>
                                          </Tabs>
                                        </Prop>

                                        <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                          Duration constraint in milliseconds.

                                          Examples:

                                          * `{ max: 60000 }`: Maximum 60 seconds
                                          * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                          <Tabs>
                                            <Tab name="ExactValueRange">
                                              Exact value range constraint.

                                              <Prop.Extras>
                                                **Example: Exact value range**

                                                ```ts
                                                const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MinValueRange">
                                              Minimum value range constraint.

                                              <Prop.Extras>
                                                **Example: Minimum value range**

                                                ```ts
                                                const minValue: ValueRange = { min: 3 }; // At least 3
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MaxValueRange">
                                              Maximum value range constraint.

                                              <Prop.Extras>
                                                **Example: Maximum value range**

                                                ```ts
                                                const maxValue: ValueRange = { max: 10 }; // At most 10
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>

                                            <Tab name="MinMaxValueRange">
                                              Minimum and maximum value range constraint.
                                              Ranges are inclusive `(min ≤ value ≤ max)`.

                                              <Prop.Extras>
                                                **Example: Minimum and maximum value range**

                                                ```ts
                                                const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                ```
                                              </Prop.Extras>

                                              <Prop.List />
                                            </Tab>
                                          </Tabs>
                                        </Prop>
                                      </Prop.List>
                                    </Tab>

                                    <Tab name="DocumentRequirement">
                                      Document file requirements for a media slot.

                                      Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                      The actual document file is only generated for the final output in OutputMedia.

                                      <Prop.Extras>
                                        **Example: Document requirements**

                                        ```ts
                                        const documentReq: DocumentRequirement = {
                                          format: 'pdf_standard',
                                          size: 'a4',
                                        };
                                        ```
                                      </Prop.Extras>

                                      <Prop.List>
                                        <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                          Supported document export format.
                                          Currently supports PDF standard format.

                                          The only valid value is `"pdf_standard"`.
                                        </Prop>

                                        <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                          The document size of the export file.

                                          <Prop.Extras>
                                            **Available values**:

                                            * `"a4"`
                                            * `"a3"`
                                            * `"letter"`
                                            * `"legal"`
                                          </Prop.Extras>
                                        </Prop>
                                      </Prop.List>
                                    </Tab>

                                    <Tab name="EmailRequirement">
                                      Email file requirements for a media slot, currently only supports HTML bundle format.

                                      Note: Email output types use html\_standalone previews in the preview UI.
                                      The actual email file is only generated for the final output in OutputMedia.

                                      <Prop.Extras>
                                        **Example: Email bundle requirements**

                                        ```ts
                                        const emailReq: EmailRequirement = {
                                          format: 'html_bundle',
                                        };
                                        ```
                                      </Prop.Extras>

                                      <Prop.List>
                                        <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                          File format for this requirement.

                                          <Prop.Extras>
                                            **Available values**:

                                            * `"html_bundle"`
                                            * `"html_standalone"`
                                          </Prop.Extras>
                                        </Prop>
                                      </Prop.List>
                                    </Tab>
                                  </Tabs>
                                </Prop>

                                <Prop name="autoSelect" required state="preview" type="string" sourceLineNumbers={[1090]}>
                                  Canva will pre-select all valid inputs as files for this slot when the publish panel first opens.

                                  <Prop.Extras>
                                    **Example: Image slot with all valid inputs as files auto-selected**

                                    ```ts
                                    const thumbnailSlot: MediaSlotWithAutoSelect = {
                                      id: 'thumbnail',
                                      displayName: 'Video Thumbnail',
                                      fileCount: { exact: 1 },
                                      accepts: {
                                        format: 'jpg',
                                        aspectRatio: { exact: 16 / 9 },
                                      },
                                      autoSelect: 'all_valid_inputs_as_files',
                                    };
                                    ```
                                  </Prop.Extras>

                                  The only valid value is `"all_valid_inputs_as_files"`.
                                </Prop>
                              </Prop.List>
                            </Tab>
                          </Tabs>
                        </Prop>

                        <Prop name="contentNoun" type="ContentNoun" sourceLineNumbers={[1279]}>
                          The type of content being published. When set, Canva uses this to tailor and improve the
                          publish experience. When omitted, defaults to `'content'` (generic behavior).

                          <Prop.Extras>
                            **Available values**:

                            * `"email"`
                            * `"post"`
                            * `"schedule"`
                            * `"asset"`
                            * `"draft"`
                            * `"publication"`
                            * `"content"`
                            * `"content_export"`
                          </Prop.Extras>
                        </Prop>
                      </Prop.List>
                    </PillAccordion>
                  </Prop>

                  <Prop name="outputMedia" required type="OutputMedia[]" sourceLineNumbers={[1479]}>
                    Production-ready exported files matching the requirements from your output type.

                    These files are ready to upload to your platform and match the format, size,
                    and aspect ratio requirements specified in your media slots.

                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>outputMedia</strong></>}>
                      <Prop.List>
                        <Prop name="mediaSlotId" required type="string" sourceLineNumbers={[1140]}>
                          ID of the media slot these files belong to.

                          Matches a media slot ID from your output type definition.
                        </Prop>

                        <Prop name="files" required type="OutputFile[]" sourceLineNumbers={[1146]}>
                          Array of exported files for this media slot.

                          Files match the requirements specified in your media slot configuration.

                          <Tabs>
                            <Tab name="ImageOutputFile">
                              Exported image file ready for publishing.

                              <Prop.List>
                                <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[173]}>
                                  File format.

                                  <Prop.Extras>
                                    **Available values**:

                                    * `"png"`
                                    * `"jpg"`
                                    * `"mp4"`
                                    * `"pdf_standard"`
                                    * `"html_bundle"`
                                    * `"html_standalone"`
                                  </Prop.Extras>
                                </Prop>

                                <Prop name="url" required type="string" sourceLineNumbers={[179]}>
                                  URL to download the exported file.

                                  Your app should download from this URL and upload to your platform.
                                </Prop>

                                <Prop name="contentMetadata" required type="DesignContentMetadata" sourceLineNumbers={[183]}>
                                  Metadata about the source content used to create this exported file.

                                  <PillAccordion defaultExpanded={false} title={<>Properties of <strong>contentMetadata</strong></>}>
                                    <Prop.List>
                                      <Prop name="type" required type="string" sourceLineNumbers={[433]}>
                                        The only valid value is `"design"`.
                                      </Prop>

                                      <Prop name="designToken" required type="string" sourceLineNumbers={[437]}>
                                        A signed JWT token containing the design id
                                      </Prop>

                                      <Prop name="title" required type="string | undefined" sourceLineNumbers={[441]}>
                                        The user given title of the design
                                      </Prop>

                                      <Prop name="pages" required type="OutputPageMetadata[]" sourceLineNumbers={[445]}>
                                        The pages that make up the exported metadata

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>pages</strong></>}>
                                          <Prop.List>
                                            <Prop name="pageId" required type="string | undefined" sourceLineNumbers={[1157]}>
                                              The unique identifier for the page.
                                            </Prop>

                                            <Prop name="pageNumber" required type="number" sourceLineNumbers={[1161]}>
                                              The position of the page within the design, starting from 1 for the first page.
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>
                                    </Prop.List>
                                  </PillAccordion>
                                </Prop>

                                <Prop name="widthPx" required type="number" sourceLineNumbers={[827]}>
                                  Width of the image in pixels.
                                </Prop>

                                <Prop name="heightPx" required type="number" sourceLineNumbers={[831]}>
                                  Height of the image in pixels.
                                </Prop>
                              </Prop.List>
                            </Tab>

                            <Tab name="VideoOutputFile">
                              Exported video file ready for publishing.

                              <Prop.List>
                                <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[173]}>
                                  File format.

                                  <Prop.Extras>
                                    **Available values**:

                                    * `"png"`
                                    * `"jpg"`
                                    * `"mp4"`
                                    * `"pdf_standard"`
                                    * `"html_bundle"`
                                    * `"html_standalone"`
                                  </Prop.Extras>
                                </Prop>

                                <Prop name="url" required type="string" sourceLineNumbers={[179]}>
                                  URL to download the exported file.

                                  Your app should download from this URL and upload to your platform.
                                </Prop>

                                <Prop name="contentMetadata" required type="DesignContentMetadata" sourceLineNumbers={[183]}>
                                  Metadata about the source content used to create this exported file.

                                  <PillAccordion defaultExpanded={false} title={<>Properties of <strong>contentMetadata</strong></>}>
                                    <Prop.List>
                                      <Prop name="type" required type="string" sourceLineNumbers={[433]}>
                                        The only valid value is `"design"`.
                                      </Prop>

                                      <Prop name="designToken" required type="string" sourceLineNumbers={[437]}>
                                        A signed JWT token containing the design id
                                      </Prop>

                                      <Prop name="title" required type="string | undefined" sourceLineNumbers={[441]}>
                                        The user given title of the design
                                      </Prop>

                                      <Prop name="pages" required type="OutputPageMetadata[]" sourceLineNumbers={[445]}>
                                        The pages that make up the exported metadata

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>pages</strong></>}>
                                          <Prop.List>
                                            <Prop name="pageId" required type="string | undefined" sourceLineNumbers={[1157]}>
                                              The unique identifier for the page.
                                            </Prop>

                                            <Prop name="pageNumber" required type="number" sourceLineNumbers={[1161]}>
                                              The position of the page within the design, starting from 1 for the first page.
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>
                                    </Prop.List>
                                  </PillAccordion>
                                </Prop>

                                <Prop name="widthPx" required type="number" sourceLineNumbers={[1949]}>
                                  Width of the video in pixels.
                                </Prop>

                                <Prop name="heightPx" required type="number" sourceLineNumbers={[1953]}>
                                  Height of the video in pixels.
                                </Prop>
                              </Prop.List>
                            </Tab>

                            <Tab name="DocumentOutputFile">
                              Exported PDF file ready for publishing.

                              Contains the final PDF document that should be uploaded to your platform.
                              The document format is `pdf_standard` and the file is ready to use.

                              <Prop.List>
                                <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[173]}>
                                  File format.

                                  <Prop.Extras>
                                    **Available values**:

                                    * `"png"`
                                    * `"jpg"`
                                    * `"mp4"`
                                    * `"pdf_standard"`
                                    * `"html_bundle"`
                                    * `"html_standalone"`
                                  </Prop.Extras>
                                </Prop>

                                <Prop name="url" required type="string" sourceLineNumbers={[179]}>
                                  URL to download the exported file.

                                  Your app should download from this URL and upload to your platform.
                                </Prop>

                                <Prop name="contentMetadata" required type="DesignContentMetadata" sourceLineNumbers={[183]}>
                                  Metadata about the source content used to create this exported file.

                                  <PillAccordion defaultExpanded={false} title={<>Properties of <strong>contentMetadata</strong></>}>
                                    <Prop.List>
                                      <Prop name="type" required type="string" sourceLineNumbers={[433]}>
                                        The only valid value is `"design"`.
                                      </Prop>

                                      <Prop name="designToken" required type="string" sourceLineNumbers={[437]}>
                                        A signed JWT token containing the design id
                                      </Prop>

                                      <Prop name="title" required type="string | undefined" sourceLineNumbers={[441]}>
                                        The user given title of the design
                                      </Prop>

                                      <Prop name="pages" required type="OutputPageMetadata[]" sourceLineNumbers={[445]}>
                                        The pages that make up the exported metadata

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>pages</strong></>}>
                                          <Prop.List>
                                            <Prop name="pageId" required type="string | undefined" sourceLineNumbers={[1157]}>
                                              The unique identifier for the page.
                                            </Prop>

                                            <Prop name="pageNumber" required type="number" sourceLineNumbers={[1161]}>
                                              The position of the page within the design, starting from 1 for the first page.
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>
                                    </Prop.List>
                                  </PillAccordion>
                                </Prop>
                              </Prop.List>
                            </Tab>
                          </Tabs>
                        </Prop>
                      </Prop.List>
                    </PillAccordion>
                  </Prop>

                  <Prop name="publishRef" type="string" sourceLineNumbers={[1466]}>
                    Platform-specific settings reference containing user configurations.

                    This is the same reference you saved via `updatePublishSettings` in the settings UI.
                    Parse this string to retrieve the user's publish settings (e.g., captions, tags, privacy).

                    Maximum size: 32KB
                  </Prop>
                </Prop.List>
              </PillAccordion>
            </Prop>
          </Prop.List>

          **Returns**

          A promise resolving to either a successful result with the published content details or an error. This is a `Promise` that resolves with the following object:

          <Tabs>
            <Tab name="PublishContentCompleted">
              Successful response from publishing a content.

              <Prop.Extras>
                **Examples**

                **Basic successful publish**

                ```ts
                return {
                  status: 'completed',
                  externalId: 'post_12345',
                  externalUrl: 'https://example.com/posts/12345'
                };
                ```

                **Successful publish with redirect**

                ```ts
                return {
                  status: 'completed',
                  externalId: 'video_67890',
                  externalUrl: 'https://example.com/videos/67890',
                  postPublishAction: {
                    type: 'redirect',
                    url: 'https://example.com/videos/67890/edit'
                  }
                };
                ```
              </Prop.Extras>

              <Prop.List>
                <Prop name="status" required type="string" sourceLineNumbers={[1417]}>
                  The only valid value is `"completed"`.
                </Prop>

                <Prop name="externalId" type="string" sourceLineNumbers={[1425]}>
                  Unique identifier returned from your external platform. You can use this for:

                  * Tracking published content
                  * Fetching insights data for the published content
                  * Linking back to the content in future operations
                </Prop>

                <Prop name="externalUrl" type="string" sourceLineNumbers={[1432]}>
                  Direct URL to the published content on your platform.

                  Users can visit this URL to view their published content.
                  This may be displayed to users or used for sharing.
                </Prop>

                <Prop name="postPublishAction" type="PostPublishAction" sourceLineNumbers={[1438]}>
                  Optional action to perform after publishing completes.

                  Currently supports redirecting users to a specific URL after publishing.

                  <PillAccordion defaultExpanded={false} title={<>Properties of <strong>postPublishAction</strong></>}>
                    <Prop.List>
                      <Prop name="type" required type="string" sourceLineNumbers={[1315]}>
                        The only valid value is `"redirect"`.
                      </Prop>

                      <Prop name="url" required type="string" sourceLineNumbers={[1319]}>
                        The URL to redirect the user to after publishing.
                      </Prop>
                    </Prop.List>
                  </PillAccordion>
                </Prop>
              </Prop.List>
            </Tab>

            <Tab name="PublishContentError">
              Error response from publishing a content.

              Return the appropriate error type based on the failure:

              * `"remote_request_failed"`: Network or API errors with your platform
              * `"app_error"`: Custom application errors with optional message

              <Tabs>
                <Tab name="RemoteRequestFailedError">
                  PublishContentError indicating failure of the remote request to the external platform.

                  Return this error for:

                  * Network connectivity issues
                  * API endpoint failures
                  * HTTP errors from your platform
                  * Timeout errors

                  <Prop.Extras>
                    **Example: Handling network errors**

                    ```ts
                    try {
                      await uploadToExternalPlatform(file);
                    } catch (error) {
                      return { status: 'remote_request_failed' };
                    }
                    ```
                  </Prop.Extras>

                  <Prop.List>
                    <Prop name="status" required type="string" sourceLineNumbers={[1647]}>
                      The only valid value is `"remote_request_failed"`.
                    </Prop>
                  </Prop.List>
                </Tab>

                <Tab name="AppError">
                  PublishContentError indicating a custom error occurred in your app's implementation.

                  Return this for application-specific errors such as:

                  * Validation failures
                  * Authentication errors
                  * Rate limiting
                  * Platform-specific restrictions

                  <Prop.Extras>
                    **Example: Returning custom error with message**

                    ```ts
                    if (userQuotaExceeded) {
                      return {
                        status: 'app_error',
                        message: 'You have reached your monthly publish limit. Please upgrade your plan.'
                      };
                    }
                    ```
                  </Prop.Extras>

                  <Prop.List>
                    <Prop name="status" required type="string" sourceLineNumbers={[69]}>
                      The only valid value is `"app_error"`.
                    </Prop>

                    <Prop name="message" required type="string" sourceLineNumbers={[80]}>
                      (required) The raw error message, for logging purposes. It will not display in the UI.
                      To display custom error messages in the UI use `localizedMessageId`.

                      This should typically be the javascript error.message or a REST JSON error message
                      body passed without modification.

                      WARNING: Do not include personally identifiable information (PII) in this
                      message, such as names, emails, usernames, etc.
                    </Prop>

                    <Prop name="localizedMessageId" type="string" sourceLineNumbers={[87]}>
                      (optional) Message ID of the translated error message that will be
                      displayed to the user. The message ID should be present and uploaded in
                      your translation file. If omitted, Canva will display a generic error
                      message.
                    </Prop>

                    <Prop name="httpCode" type="number" sourceLineNumbers={[89]}>
                      HTTP status code, if applicable
                    </Prop>

                    <Prop name="appDefinedPayload" type="string" sourceLineNumbers={[94]}>
                      Used only by app developer. Canva does not use this value. Use this to pass
                      additional information like JSON to your settings frame.
                    </Prop>

                    <Prop name="errorCause" type="ErrorCause" sourceLineNumbers={[100]}>
                      (optional) Source of the error if it relates to a component on the Canva
                      UI. When present, the error may render near a relevant Canva component.
                      When omitted, the cause is considered unspecified or "generic".

                      <Prop.Extras>
                        **Available values**:

                        * `"invalid_selection"`
                        * `"invalid_format"`
                      </Prop.Extras>
                    </Prop>
                  </Prop.List>
                </Tab>
              </Tabs>
            </Tab>
          </Tabs>
        </Prop>

        <Prop name="getContentSummary" state="preview" type="function" sourceLineNumbers={[418]}>
          Extracts a structured summary of the post's content for historical display.

          Called at `createPost` / `updatePost` time while the app is loaded. The returned
          snapshot is stored with the post and used to render historical post views in the
          content planner (calendar, list views, insights) without re-invoking the app.

          The snapshot is frozen at write time — it reflects what was published, not the
          app's current rendering logic. If the app's payload shape or output types change
          later, historical views remain accurate.

          **Parameters**

          <Prop.List>
            <Prop name="request" required state="preview" type="GetContentSummaryRequest" sourceLineNumbers={[418]}>
              The `publishRef` and `outputType` for the post being published.

              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>request</strong></>}>
                <Prop.List>
                  <Prop name="outputType" required type="OutputType" sourceLineNumbers={[783]}>
                    The output type selected for this publish operation.

                    Use `id` to distinguish between output types.

                    <PillAccordion defaultExpanded={false} title={<>Properties of <strong>outputType</strong></>}>
                      <Prop.List>
                        <Prop name="id" required type="string" sourceLineNumbers={[1198]}>
                          Unique identifier for this output type.

                          Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
                        </Prop>

                        <Prop name="displayName" required type="string" sourceLineNumbers={[1205]}>
                          User-facing name for this output type.

                          This is displayed to users when selecting where to publish.
                          Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
                        </Prop>

                        <Prop name="mediaSlots" required type="object[]" sourceLineNumbers={[1212]}>
                          Array of media slots defining what content is needed.

                          Each slot represents a piece of media required for publishing,
                          such as a main image, thumbnail, or video.

                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>mediaSlots</strong></>}>
                            <Prop.List>
                              <Prop name="id" required type="string" sourceLineNumbers={[985]}>
                                Unique identifier for this media slot within the output type.
                              </Prop>

                              <Prop name="displayName" required type="string" sourceLineNumbers={[991]}>
                                User-facing name for this media slot.

                                Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
                              </Prop>

                              <Prop name="accepts" required type="object" sourceLineNumbers={[1014]}>
                                File type requirements for this slot.

                                Note the following behavior:

                                * Provide at least one of the valid types
                                * If multiple types are provided, files for this slot may be any of the accepted types; each file
                                  must satisfy the corresponding requirement for its media type
                                * To restrict the slot to a single media type, provide only that requirement
                                * `fileCount` applies across all files accepted by the slot regardless of media type
                                * Document output types will show image previews (PNG thumbnail) in preview UI

                                <PillAccordion defaultExpanded={false} title={<>Properties of <strong>accepts</strong></>}>
                                  <Prop.List>
                                    <Prop name="image" type="ImageRequirement" sourceLineNumbers={[1015]}>
                                      Image file requirements for a media slot.

                                      Specifies format, aspect ratio, and size constraints for images.

                                      <Prop.Extras>
                                        **Example: Image requirements for social media post**

                                        ```ts
                                        const imageReq: ImageRequirement = {
                                          format: 'jpg',
                                          aspectRatio: { min: 0.8, max: 1.91 },
                                        };
                                        ```
                                      </Prop.Extras>

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>image</strong></>}>
                                        <Prop.List>
                                          <Prop name="format" required type="PublishFileFormat" sourceLineNumbers={[162]}>
                                            File format for this requirement.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"png"`
                                              * `"jpg"`
                                              * `"mp4"`
                                              * `"pdf_standard"`
                                              * `"html_bundle"`
                                              * `"html_standalone"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[909]}>
                                            Aspect ratio constraint (width / height).

                                            Examples:

                                            * `{ exact: 16/9 }`: Widescreen (16:9)
                                            * `{ min: 0.8, max: 1.91 }`: Instagram range

                                            <Tabs>
                                              <Tab name="ExactValueRange">
                                                Exact value range constraint.

                                                <Prop.Extras>
                                                  **Example: Exact value range**

                                                  ```ts
                                                  const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinValueRange">
                                                Minimum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Minimum value range**

                                                  ```ts
                                                  const minValue: ValueRange = { min: 3 }; // At least 3
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MaxValueRange">
                                                Maximum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Maximum value range**

                                                  ```ts
                                                  const maxValue: ValueRange = { max: 10 }; // At most 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinMaxValueRange">
                                                Minimum and maximum value range constraint.
                                                Ranges are inclusive `(min ≤ value ≤ max)`.

                                                <Prop.Extras>
                                                  **Example: Minimum and maximum value range**

                                                  ```ts
                                                  const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>
                                            </Tabs>
                                          </Prop>

                                          <Prop name="format" required type="string" sourceLineNumbers={[914]}>
                                            <Prop.Extras>
                                              **Available values**:

                                              * `"jpg"`
                                              * `"png"`
                                            </Prop.Extras>
                                          </Prop>

                                          <Prop name="allowTransparentBackground" type="boolean" sourceLineNumbers={[931]}>
                                            Controls transparent-background support for PNG exports.

                                            * Only applies when `format` is `'png'`
                                            * If omitted or `false`, Canva exports a standard opaque PNG
                                            * If `true`, Canva shows a `Transparent background` toggle in the publish flow
                                            * Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced

                                            <Prop.Extras>
                                              **Default value**: `false`
                                            </Prop.Extras>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>

                                    <Prop name="video" type="VideoRequirement" sourceLineNumbers={[1016]}>
                                      Video file requirements for a media slot.

                                      Specifies format, aspect ratio, duration, and size constraints for videos.

                                      <Prop.Extras>
                                        **Example: Video requirements for YouTube**

                                        ```ts
                                        const videoReq: VideoRequirement = {
                                          format: 'mp4',
                                          aspectRatio: { exact: 16/9 },
                                          durationMs: { min: 1000, max: 600000 },
                                        };
                                        ```
                                      </Prop.Extras>

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>video</strong></>}>
                                        <Prop.List>
                                          <Prop name="format" required type="string" sourceLineNumbers={[2100]}>
                                            Supported video format.

                                            The only valid value is `"mp4"`.
                                          </Prop>

                                          <Prop name="aspectRatio" type="ValueRange" sourceLineNumbers={[2108]}>
                                            Aspect ratio constraint (width / height).

                                            Examples:

                                            * `{ exact: 16/9 }`: Widescreen
                                            * `{ exact: 9/16 }`: Vertical/Story format

                                            <Tabs>
                                              <Tab name="ExactValueRange">
                                                Exact value range constraint.

                                                <Prop.Extras>
                                                  **Example: Exact value range**

                                                  ```ts
                                                  const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinValueRange">
                                                Minimum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Minimum value range**

                                                  ```ts
                                                  const minValue: ValueRange = { min: 3 }; // At least 3
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MaxValueRange">
                                                Maximum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Maximum value range**

                                                  ```ts
                                                  const maxValue: ValueRange = { max: 10 }; // At most 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinMaxValueRange">
                                                Minimum and maximum value range constraint.
                                                Ranges are inclusive `(min ≤ value ≤ max)`.

                                                <Prop.Extras>
                                                  **Example: Minimum and maximum value range**

                                                  ```ts
                                                  const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>
                                            </Tabs>
                                          </Prop>

                                          <Prop name="durationMs" type="ValueRange" sourceLineNumbers={[2116]}>
                                            Duration constraint in milliseconds.

                                            Examples:

                                            * `{ max: 60000 }`: Maximum 60 seconds
                                            * `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes

                                            <Tabs>
                                              <Tab name="ExactValueRange">
                                                Exact value range constraint.

                                                <Prop.Extras>
                                                  **Example: Exact value range**

                                                  ```ts
                                                  const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinValueRange">
                                                Minimum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Minimum value range**

                                                  ```ts
                                                  const minValue: ValueRange = { min: 3 }; // At least 3
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MaxValueRange">
                                                Maximum value range constraint.

                                                <Prop.Extras>
                                                  **Example: Maximum value range**

                                                  ```ts
                                                  const maxValue: ValueRange = { max: 10 }; // At most 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>

                                              <Tab name="MinMaxValueRange">
                                                Minimum and maximum value range constraint.
                                                Ranges are inclusive `(min ≤ value ≤ max)`.

                                                <Prop.Extras>
                                                  **Example: Minimum and maximum value range**

                                                  ```ts
                                                  const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                                  ```
                                                </Prop.Extras>

                                                <Prop.List />
                                              </Tab>
                                            </Tabs>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>

                                    <Prop name="document" type="DocumentRequirement" sourceLineNumbers={[1017]}>
                                      Document file requirements for a media slot.

                                      Note: Document output types use image previews (PNG thumbnails) in the preview UI.
                                      The actual document file is only generated for the final output in OutputMedia.

                                      <Prop.Extras>
                                        **Example: Document requirements**

                                        ```ts
                                        const documentReq: DocumentRequirement = {
                                          format: 'pdf_standard',
                                          size: 'a4',
                                        };
                                        ```
                                      </Prop.Extras>

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>document</strong></>}>
                                        <Prop.List>
                                          <Prop name="format" required type="string" sourceLineNumbers={[612]}>
                                            Supported document export format.
                                            Currently supports PDF standard format.

                                            The only valid value is `"pdf_standard"`.
                                          </Prop>

                                          <Prop name="size" required type="DocumentSize" sourceLineNumbers={[616]}>
                                            The document size of the export file.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"a4"`
                                              * `"a3"`
                                              * `"letter"`
                                              * `"legal"`
                                            </Prop.Extras>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>

                                    <Prop name="email" type="EmailRequirement" sourceLineNumbers={[1021]}>
                                      Email output types will show a single html file (canva hosted assets) preview in preview UI

                                      <PillAccordion defaultExpanded={false} title={<>Properties of <strong>email</strong></>}>
                                        <Prop.List>
                                          <Prop name="format" required type="string" sourceLineNumbers={[714]}>
                                            File format for this requirement.

                                            <Prop.Extras>
                                              **Available values**:

                                              * `"html_bundle"`
                                              * `"html_standalone"`
                                            </Prop.Extras>
                                          </Prop>
                                        </Prop.List>
                                      </PillAccordion>
                                    </Prop>
                                  </Prop.List>
                                </PillAccordion>
                              </Prop>

                              <Prop name="fileCount" type="ValueRange" sourceLineNumbers={[1001]}>
                                Number of files accepted in this slot.

                                Use this to specify single or multiple file requirements.
                                Examples:

                                * `{ exact: 1 }`: Exactly one file
                                * `{ min: 1, max: 10 }`: Between 1 and 10 files
                                * undefined: Any number of files

                                <Tabs>
                                  <Tab name="ExactValueRange">
                                    Exact value range constraint.

                                    <Prop.Extras>
                                      **Example: Exact value range**

                                      ```ts
                                      const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MinValueRange">
                                    Minimum value range constraint.

                                    <Prop.Extras>
                                      **Example: Minimum value range**

                                      ```ts
                                      const minValue: ValueRange = { min: 3 }; // At least 3
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MaxValueRange">
                                    Maximum value range constraint.

                                    <Prop.Extras>
                                      **Example: Maximum value range**

                                      ```ts
                                      const maxValue: ValueRange = { max: 10 }; // At most 10
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>

                                  <Tab name="MinMaxValueRange">
                                    Minimum and maximum value range constraint.
                                    Ranges are inclusive `(min ≤ value ≤ max)`.

                                    <Prop.Extras>
                                      **Example: Minimum and maximum value range**

                                      ```ts
                                      const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
                                      ```
                                    </Prop.Extras>

                                    <Prop.List />
                                  </Tab>
                                </Tabs>
                              </Prop>

                              <Prop name="autoSelect" state="preview" type="string" sourceLineNumbers={[1034]}>
                                Leaves Canva's own default selection in place, which it already does for a slot that omits
                                this field. To pre-select multiple inputs in a slot, use MediaSlotWithAutoSelect.

                                The default autoSelect behavior is informed by the `accepts` and `fileCount` fields.

                                * If a single media type is accepted, Canva will pre-select the first valid input as a file for that type.
                                * If multiple media types are accepted, Canva may infer a preferred media type from the current editor state.
                                * If `fileCount` is not provided, no auto-selection will occur.

                                The only valid value is `"default"`.
                              </Prop>

                              <Prop name="selection" readonly type="MediaSelection[]" sourceLineNumbers={[1216]}>
                                Current selection for this slot.

                                <Tabs>
                                  <Tab name="ImageSelection">
                                    Selection metadata for an image media item.

                                    <Prop.List>
                                      <Prop name="kind" required type="string" sourceLineNumbers={[939]}>
                                        The only valid value is `"image"`.
                                      </Prop>

                                      <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                        Metadata about the source content represented by this selection.

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                          <Prop.List>
                                            <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                              The only valid value is `"design"`.
                                            </Prop>

                                            <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                              A signed JWT token containing the design id
                                            </Prop>

                                            <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                              The user given title of the design
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>
                                    </Prop.List>
                                  </Tab>

                                  <Tab name="VideoSelection">
                                    Selection metadata for a video media item.

                                    <Prop.List>
                                      <Prop name="kind" required type="string" sourceLineNumbers={[2124]}>
                                        The only valid value is `"video"`.
                                      </Prop>

                                      <Prop name="durationMs" required type="number" sourceLineNumbers={[2128]}>
                                        Duration of the selected video in milliseconds.
                                      </Prop>

                                      <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                        Metadata about the source content represented by this selection.

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                          <Prop.List>
                                            <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                              The only valid value is `"design"`.
                                            </Prop>

                                            <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                              A signed JWT token containing the design id
                                            </Prop>

                                            <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                              The user given title of the design
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>
                                    </Prop.List>
                                  </Tab>

                                  <Tab name="DocumentSelection">
                                    Selection metadata for a document media item.

                                    <Prop.List>
                                      <Prop name="kind" required type="string" sourceLineNumbers={[624]}>
                                        The only valid value is `"document"`.
                                      </Prop>

                                      <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                        Metadata about the source content represented by this selection.

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                          <Prop.List>
                                            <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                              The only valid value is `"design"`.
                                            </Prop>

                                            <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                              A signed JWT token containing the design id
                                            </Prop>

                                            <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                              The user given title of the design
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>
                                    </Prop.List>
                                  </Tab>

                                  <Tab name="EmailSelection">
                                    Selection metadata for an email media item.

                                    <Prop.List>
                                      <Prop name="kind" required type="string" sourceLineNumbers={[722]}>
                                        The only valid value is `"email"`.
                                      </Prop>

                                      <Prop name="selectionMetadata" type="SelectionDesignMetadata[]" sourceLineNumbers={[220]}>
                                        Metadata about the source content represented by this selection.

                                        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>selectionMetadata</strong></>}>
                                          <Prop.List>
                                            <Prop name="type" required type="string" sourceLineNumbers={[1865]}>
                                              The only valid value is `"design"`.
                                            </Prop>

                                            <Prop name="designToken" required type="string" sourceLineNumbers={[1869]}>
                                              A signed JWT token containing the design id
                                            </Prop>

                                            <Prop name="title" required type="string | undefined" sourceLineNumbers={[1873]}>
                                              The user given title of the design
                                            </Prop>
                                          </Prop.List>
                                        </PillAccordion>
                                      </Prop>
                                    </Prop.List>
                                  </Tab>
                                </Tabs>
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>

                        <Prop name="contentNoun" type="ContentNoun" sourceLineNumbers={[1223]}>
                          The type of content being published. When set, Canva uses this to tailor and improve the
                          publish experience. When omitted, defaults to `'content'` (generic behavior).

                          <Prop.Extras>
                            **Available values**:

                            * `"email"`
                            * `"post"`
                            * `"schedule"`
                            * `"asset"`
                            * `"draft"`
                            * `"publication"`
                            * `"content"`
                            * `"content_export"`
                          </Prop.Extras>
                        </Prop>
                      </Prop.List>
                    </PillAccordion>
                  </Prop>

                  <Prop name="publishRef" type="string" sourceLineNumbers={[777]}>
                    The user's saved publish settings. Parse to retrieve app-specific state.
                  </Prop>
                </Prop.List>
              </PillAccordion>
            </Prop>
          </Prop.List>

          **Returns**

          A promise resolving to the `ContentSummary`, or an error. This is a `Promise` that resolves with the following object:

          <Tabs>
            <Tab name="GetContentSummaryCompleted" icon={<StateIndicator state="preview" />}>
              Successful response from getContentSummary.

              <Prop.List>
                <Prop name="status" required type="string" sourceLineNumbers={[761]}>
                  The only valid value is `"completed"`.
                </Prop>

                <Prop name="contentSummary" required state="preview" type="ContentSummary" sourceLineNumbers={[762]}>
                  A structured snapshot of a post's content for historical display.
                  Discriminated by `type`.

                  <Tabs>
                    <Tab name="PostContentSummary" icon={<StateIndicator state="preview" />}>
                      Content summary for social media posts (e.g. Instagram, Facebook, LinkedIn, YouTube).

                      <Prop.List>
                        <Prop name="destination" required state="preview" type="Destination" sourceLineNumbers={[151]}>
                          The account, page, or list this post was published to.

                          For example, a Facebook Page, a mailing list, or a personal profile.
                          Use the connected account's display name and icon when there is no distinct destination.

                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>destination</strong></>}>
                            <Prop.List>
                              <Prop name="displayName" required type="string" sourceLineNumbers={[455]}>
                                User-facing name (e.g. "Bob's Cool Page", "Product Newsletter").
                              </Prop>

                              <Prop name="iconUrl" type="string" sourceLineNumbers={[457]}>
                                Avatar or icon URL for the destination.
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>

                        <Prop name="type" required type="string" sourceLineNumbers={[1287]}>
                          The only valid value is `"post"`.
                        </Prop>

                        <Prop name="title" type="string" sourceLineNumbers={[1289]}>
                          Post heading (e.g. YouTube title, LinkedIn article headline).
                        </Prop>

                        <Prop name="body" type="string" sourceLineNumbers={[1291]}>
                          Post caption or body text.
                        </Prop>

                        <Prop name="hashtags" type="string[]" sourceLineNumbers={[1293]}>
                          Hashtags without the leading `#` (e.g. `["fashion", "design"]`).
                        </Prop>
                      </Prop.List>
                    </Tab>

                    <Tab name="EmailContentSummary" icon={<StateIndicator state="preview" />}>
                      Content summary for email sends.

                      <Prop.List>
                        <Prop name="destination" required state="preview" type="Destination" sourceLineNumbers={[151]}>
                          The account, page, or list this post was published to.

                          For example, a Facebook Page, a mailing list, or a personal profile.
                          Use the connected account's display name and icon when there is no distinct destination.

                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>destination</strong></>}>
                            <Prop.List>
                              <Prop name="displayName" required type="string" sourceLineNumbers={[455]}>
                                User-facing name (e.g. "Bob's Cool Page", "Product Newsletter").
                              </Prop>

                              <Prop name="iconUrl" type="string" sourceLineNumbers={[457]}>
                                Avatar or icon URL for the destination.
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>

                        <Prop name="type" required type="string" sourceLineNumbers={[638]}>
                          The only valid value is `"email"`.
                        </Prop>

                        <Prop name="subject" type="string" sourceLineNumbers={[640]}>
                          Subject line.
                        </Prop>

                        <Prop name="body" type="string" sourceLineNumbers={[642]}>
                          Email body preview or preheader.
                        </Prop>
                      </Prop.List>
                    </Tab>

                    <Tab name="AssetContentSummary" icon={<StateIndicator state="preview" />}>
                      Content summary for file-destination apps (e.g. Google Drive, Dropbox).

                      <Prop.List>
                        <Prop name="destination" required state="preview" type="Destination" sourceLineNumbers={[151]}>
                          The account, page, or list this post was published to.

                          For example, a Facebook Page, a mailing list, or a personal profile.
                          Use the connected account's display name and icon when there is no distinct destination.

                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>destination</strong></>}>
                            <Prop.List>
                              <Prop name="displayName" required type="string" sourceLineNumbers={[455]}>
                                User-facing name (e.g. "Bob's Cool Page", "Product Newsletter").
                              </Prop>

                              <Prop name="iconUrl" type="string" sourceLineNumbers={[457]}>
                                Avatar or icon URL for the destination.
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>

                        <Prop name="type" required type="string" sourceLineNumbers={[108]}>
                          The only valid value is `"asset"`.
                        </Prop>

                        <Prop name="title" required type="string" sourceLineNumbers={[110]}>
                          Asset title or filename.
                        </Prop>

                        <Prop name="path" type="string" sourceLineNumbers={[112]}>
                          Folder path (e.g. "/My Projects/Designs").
                        </Prop>
                      </Prop.List>
                    </Tab>

                    <Tab name="GenericContentSummary" icon={<StateIndicator state="preview" />}>
                      Generic content summary for apps that don't fit a more specific type.

                      <Prop.List>
                        <Prop name="destination" required state="preview" type="Destination" sourceLineNumbers={[151]}>
                          The account, page, or list this post was published to.

                          For example, a Facebook Page, a mailing list, or a personal profile.
                          Use the connected account's display name and icon when there is no distinct destination.

                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>destination</strong></>}>
                            <Prop.List>
                              <Prop name="displayName" required type="string" sourceLineNumbers={[455]}>
                                User-facing name (e.g. "Bob's Cool Page", "Product Newsletter").
                              </Prop>

                              <Prop name="iconUrl" type="string" sourceLineNumbers={[457]}>
                                Avatar or icon URL for the destination.
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>

                        <Prop name="type" required type="string" sourceLineNumbers={[749]}>
                          The only valid value is `"content"`.
                        </Prop>

                        <Prop name="title" type="string" sourceLineNumbers={[751]}>
                          Title or headline.
                        </Prop>

                        <Prop name="body" type="string" sourceLineNumbers={[753]}>
                          Body text or description.
                        </Prop>
                      </Prop.List>
                    </Tab>
                  </Tabs>
                </Prop>
              </Prop.List>
            </Tab>

            <Tab name="GetContentSummaryError" icon={<StateIndicator state="preview" />}>
              Error response from getContentSummary.

              <Prop.List>
                <Prop name="status" required type="string" sourceLineNumbers={[69]}>
                  The only valid value is `"app_error"`.
                </Prop>

                <Prop name="message" required type="string" sourceLineNumbers={[80]}>
                  (required) The raw error message, for logging purposes. It will not display in the UI.
                  To display custom error messages in the UI use `localizedMessageId`.

                  This should typically be the javascript error.message or a REST JSON error message
                  body passed without modification.

                  WARNING: Do not include personally identifiable information (PII) in this
                  message, such as names, emails, usernames, etc.
                </Prop>

                <Prop name="localizedMessageId" type="string" sourceLineNumbers={[87]}>
                  (optional) Message ID of the translated error message that will be
                  displayed to the user. The message ID should be present and uploaded in
                  your translation file. If omitted, Canva will display a generic error
                  message.
                </Prop>

                <Prop name="httpCode" type="number" sourceLineNumbers={[89]}>
                  HTTP status code, if applicable
                </Prop>

                <Prop name="appDefinedPayload" type="string" sourceLineNumbers={[94]}>
                  Used only by app developer. Canva does not use this value. Use this to pass
                  additional information like JSON to your settings frame.
                </Prop>

                <Prop name="errorCause" type="ErrorCause" sourceLineNumbers={[100]}>
                  (optional) Source of the error if it relates to a component on the Canva
                  UI. When present, the error may render near a relevant Canva component.
                  When omitted, the cause is considered unspecified or "generic".

                  <Prop.Extras>
                    **Available values**:

                    * `"invalid_selection"`
                    * `"invalid_format"`
                  </Prop.Extras>
                </Prop>
              </Prop.List>
            </Tab>
          </Tabs>
        </Prop>
      </Prop.List>
    </PillAccordion>
  </Prop>
</Prop.List>

## Returns

`void`