{/* This file is NOT rendered directly. Sections are imported by framework pages. */}

<section id="intro">
  `Frame` conditionally renders its children based on consent state. When consent for the specified category is not granted, a placeholder is shown instead. Children are not mounted at all until consent is given, preventing any network requests or script execution.
</section>

<section id="customization">
  ## Custom Placeholder

  Replace the default placeholder:

  ```tsx
  <Frame
    category="experience"
    placeholder={
      <div className="rounded-lg border p-8 text-center">
        <p>This content requires experience cookies.</p>
        <p>Please enable them in your privacy settings.</p>
      </div>
    }
  >
    <InteractiveWidget />
  </Frame>
  ```

  ## Compound Components

  Build fully custom placeholder layouts:

  ```tsx
  <Frame.Root category="marketing">
    <Frame.Title category="marketing" />
    <Frame.Button category="marketing" />
  </Frame.Root>
  ```

  * `Frame.Root` - Container with default placeholder styling
  * `Frame.Title` - Displays a consent-request message with the category name
  * `Frame.Button` - Button that opens the consent dialog for the specified category

  ## Automatic Category Registration

  When `Frame` mounts, it automatically adds its `category` to the active `consentCategories` list. This means you don't need to explicitly list the category in your provider's `consentCategories` option - if a `Frame` component uses it, it will be registered.
</section>

<section id="props">
  ## Props

  | Property    | Type                 | Description                                                                                                                                        | Default   |  Required  |
  | :---------- | :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- | :--------: |
  | children    | ReactNode            | Content rendered when consent is granted. Children are not mounted until&#xA;consent is given, preventing unnecessary network requests.            | -         | ✅ Required |
  | category    | AllConsentNames      | Consent category required to render children.                                                                                                      | -         | ✅ Required |
  | placeholder | ReactNode            | A custom placeholder component to display when consent is not met.&#xA;If not provided, a default placeholder will be displayed.                   | -         |  Optional  |
  | noStyle     | boolean \| undefined | When true, removes all default styling from the component                                                                                          | false     |  Optional  |
  | theme       | any                  | Custom theme to override default styles while maintaining structure and&#xA;accessibility. Merges with defaults. Ignored when \`noStyle=\{true}\`. | undefined |  Optional  |
</section>