> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.auth0-mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Web で組織の詳細を編集する

> 名前、表示名、ブランドカラー、ロゴなど、organization の詳細を編集します。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="読み込み中" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

`OrganizationDetailsEdit` コンポーネントは、[組織](/docs/ja-jp/manage-users/organizations)の詳細を編集するための統合インターフェースを提供します。

<ComponentLoader componentSelector="organization-details-edit" componentPreviewText="組織の詳細編集コンポーネントのプレビュー" />

<h2 id="third-party-application-access">
  サードパーティアプリケーションのアクセス
</h2>

`third_party_client_access` は Organizationレベルの設定で、サードパーティアプリケーションがOrganizationの SSO プロバイダーを通じてユーザーを認証できるかどうかを制御します。設定できる値は `"allow"` と `"block"` で、既定値は `"block"` です。

コンポーネントは `GET /my-org/config` を読み取り、テナントが許可している値を判断します。`third_party_client_access.allowed_values` に `"block"` のみが含まれる場合、ラジオグループは表示されるものの読み取り専用となり、Organizationの管理者は変更できません。両方の値が許可されている場合は、このフィールドを編集でき、Organization詳細リソースに保存されます。

この設定はOrganization全体に適用されるゲートとして機能します。Cross App Access (XAA) を構成するものではありません。XAA は SSO プロバイダーレベルで制御される別の認可経路です。

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      設定の要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—tenant で
      My Organization API が設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    <h2 id="installation">
      インストール
    </h2>

    <CodeGroup>
      ```bash pnpm  wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      どちらのコマンドを実行しても、共有ユーティリティとAuth0連携に必要な@auth0/universal-components-core
      依存パッケージもインストールされます。
    </Callout>

    <h2 id="get-started">
      はじめに
    </h2>

    ```tsx wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
    import { useNavigate } from "react-router-dom";

    export function OrganizationSettingsPage() {
      const navigate = useNavigate();

      return (
        <OrganizationDetailsEdit
          saveAction={{
            onAfter: () => navigate("/organization"),
          }}
          backButton={{
            onClick: () => navigate("/organization"),
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function OrganizationSettingsPage() {
        const navigate = useNavigate();

        const handleSaveSuccess = (org) => {
          analytics.track("Organization Updated", {
            name: org.name,
            displayName: org.display_name,
          });
          navigate("/organization");
        };

        return (
          <div className="max-w-2xl mx-auto p-6">
            <OrganizationDetailsEdit
              schema={{
                details: {
                  displayName: {
                    required: true,
                    maxLength: 100,
                  },
                  color: {
                    regex: /^#[0-9A-Fa-f]{6}$/,
                    errorMessage: "Enter a valid hex color",
                  },
                },
              }}
              saveAction={{
                onBefore: (org) => {
                  return confirm(`Save changes to "${org.display_name}"?`);
                },
                onAfter: handleSaveSuccess,
              }}
              cancelAction={{
                onAfter: () => navigate("/organization"),
              }}
              backButton={{
                onClick: () => navigate("/organization"),
              }}
              customMessages={{
                header: {
                  title: "Organization Settings",
                },
                save_organization_changes_message: "Settings saved successfully!",
              }}
              styling={{
                variables: {
                  common: {
                    "--color-primary": "#059669",
                  },
                },
                classes: {
                  "OrganizationDetails_Card": "shadow-xl rounded-lg",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "your-domain.auth0.com";
        const clientId = "your-client-id";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証のチャレンジを処理するために必要
          >
            <Auth0ComponentProvider>
              <OrganizationSettingsPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    <h2 id="props">
      プロップス
    </h2>

    <h3 id="required-props">
      必須のプロップス
    </h3>

    必須の props はコンポーネントの動作に不可欠です。`OrganizationDetailsEdit` には必須の props はなく、現在の組織の詳細を My Organization API から自動的に読み込みます。

    ***

    <h3 id="display-props">
      表示関連のプロップス
    </h3>

    表示用のプロップスは、コンポーネントの動作に影響を与えることなく、その表示方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            すべてのフォーム入力を無効にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props">
      Action のプロップス
    </h3>

    Actionのプロップスはユーザー操作を処理し、ユーザーが変更を保存またはキャンセルしたときの動作を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用すると、アプリケーションのルーティングや分析と連携できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            変更を保存するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            変更をキャンセルまたは破棄するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            戻るボタンの設定。
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **型:** `ComponentAction<OrganizationPrivate>`

    ユーザーが organization の変更を送信した際の保存フローを制御します。保存の成功後に別の画面へ遷移させるには `onAfter` を使用します。

    **プロパティ:**

    * `disabled`—保存ボタンを無効にします (たとえば、別の操作の実行中) 。
    * `onBefore(data)`—保存処理の前に実行されます。保存を中止するには`false`を返します (たとえば、先に確認ダイアログを表示する場合) 。
    * `onAfter(data)`—organizationが正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    // 保存後に前の画面へ戻る
    saveAction={{
      onAfter: () => navigate("/organization"),
    }}

    // 保存前に確認ダイアログを表示する
    saveAction={{
      onBefore: (org) => {
        return confirm(`Save changes to "${org.display_name}"?`);
      },
      onAfter: () => navigate("/organization"),
    }}

    // 保存時に分析イベントを記録する
    saveAction={{
      onAfter: (org) => {
        analytics.track("Organization Updated", {
          name: org.name,
          displayName: org.display_name,
        });
        navigate("/organization");
      },
    }}
    ```

    ***

    **cancelAction**

    **型:** `ComponentAction<OrganizationPrivate>`

    キャンセル/破棄のフローを制御します。破棄された変更の管理には、このアクションを使用します。

    **プロパティ:**

    * `disabled`—キャンセルボタンを無効にします
    * `onAfter(data)`—キャンセルが確定した後に実行されます。Formから移動する際に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      cancelAction={{
        onAfter: () => navigate("/organization"),
      }}
    />
    ```

    ***

    **backButton**

    **型:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    コンポーネントのヘッダーにある戻るボタンを設定します。organization の概要ページや前のページに戻る導線として使用します。

    **プロパティ:**

    * `icon`—カスタム Lucide アイコンコンポーネント (省略可、デフォルトは ArrowLeft)
    * `onClick`—ナビゲーション用のクリックハンドラー

    **例:**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <OrganizationDetailsEdit
      backButton={{
        icon: ChevronLeft,
        onClick: () => navigate("/organization"),
      }}
    />;
    ```

    ***

    <h3 id="customization-props">
      カスタマイズ用プロップス
    </h3>

    カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランド、ロケール、バリデーションの要件に合わせてコンポーネントを調整できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            フィールドのバリデーションルール。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            i18n テキストの上書き。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            CSS 変数およびクラスの上書き。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    organizationの詳細フィールドにカスタムのバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマフィールド">
      すべてのschemaフィールドでサポートされる項目: `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—組織の内部名
      **details.displayName**—組織の表示名
      **details.primaryColor**—プライマリブランドカラー (16進数形式)
      **details.backgroundColor**—ページの背景色 (16進数形式)
      **details.logoURL**—ロゴのURL
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      schema={{
        details: {
          name: {
            minLength: 3,
            maxLength: 50,
            regex: /^[a-zA-Z0-9-_]+$/,
            errorMessage: "Name must be alphanumeric with hyphens/underscores",
          },
          displayName: {
            required: true,
            maxLength: 100,
          },
          primaryColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FF5500)",
          },
          backgroundColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
          },
          logoURL: {
            regex: /^https:\/\/.+/,
            errorMessage: "Logo URL must use HTTPS",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズします。すべてのフィールドは任意で、指定されていない場合はデフォルトが使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントヘッダー

      * `title`, `back_button_text`

      **details.sections.settings**—設定セクション

      * `title`
      * `fields.name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.display_name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.third_party_client_access`—`label`, `options.block.label`, `options.block.helper_text`, `options.allow.label`, `options.allow.helper_text`

      **details.sections.branding**—ブランディングセクション

      * `title`
      * `fields.logo`—`label`, `helper_text`, `error`
      * `fields.primary_color`—`label`, `helper_text`, `error`
      * `fields.page_background_color`—`label`, `helper_text`, `error`

      **details**—フォームのラベル

      * `unsaved_changes_text`, `submit_button_label`, `cancel_button_label`

      **notifications**—APIレスポンス

      * `save_organization_changes_message`, `organization_changes_error_message`, `organization_changes_error_message_generic`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      customMessages={{
        header: {
          title: "Edit Organization",
        },
        details: {
          sections: {
            settings: {
              fields: {
                name: {
                  label: "Organization ID",
                  helper_text: "Internal identifier (cannot be changed after creation)",
                },
                display_name: {
                  label: "Organization Name",
                  placeholder: "Enter display name",
                },
                third_party_client_access: {
                  label: "Third-Party Application Access",
                  options: {
                    block: {
                      label: "Block Third-Party Access",
                      helper_text: "Users can only authenticate through official apps",
                    },
                    allow: {
                      label: "Allow Third-Party Access",
                      helper_text: "Users can authenticate through external applications",
                    },
                  },
                },
              },
            },
          },
        },
        save_organization_changes_message: "Organization updated successfully!",
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用
      * `light`—ライトテーマのみ
      * `dark`—ダークテーマのみ

      **クラス**—コンポーネントクラスのオーバーライド

      * `OrganizationDetails_Card`
      * `OrganizationDetails_FormActions`
      * `OrganizationDetails_SettingsDetails`
      * `OrganizationDetails_BrandingDetails`
      * `OrganizationDetails_ThirdPartyAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks">
      利用可能なフック
    </h3>

    これらのフックは、UIを持たない基盤ロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェースを構築したい場合にご利用ください。

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>組織の編集ロジックとAPI連携</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      設定の要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—tenant が
      My Organization API で構成されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-2">
      インストール
    </h2>

    <CodeGroup>
      ```bash npm (Recommended) wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      npm または pnpm コマンドを実行すると、共通ユーティリティと Auth0 連携用の @auth0/universal-components-core
      依存パッケージがインストールされます。
    </Callout>

    <h2 id="get-started-2">
      はじめに
    </h2>

    ```tsx page.tsx wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

    export function OrganizationSettingsPage() {
      const router = useRouter();

      return (
        <OrganizationDetailsEdit
          saveAction={{
            onAfter: () => router.push("/organization"),
          }}
          backButton={{
            onClick: () => router.push("/organization"),
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
      import { useRouter } from "next/navigation";
      import { analytics } from "./lib/analytics";

      function OrganizationSettingsPage() {
        const router = useRouter();

        const handleSaveSuccess = (org) => {
          analytics.track("Organization Updated", {
            name: org.name,
            displayName: org.display_name,
          });
          router.push("/organization");
        };

        return (
          <div className="max-w-2xl mx-auto p-6">
            <OrganizationDetailsEdit
              schema={{
                details: {
                  displayName: {
                    required: true,
                    maxLength: 100,
                  },
                  color: {
                    regex: /^#[0-9A-Fa-f]{6}$/,
                    errorMessage: "Enter a valid hex color",
                  },
                },
              }}
              saveAction={{
                onBefore: (org) => {
                  return confirm(`Save changes to "${org.display_name}"?`);
                },
                onAfter: handleSaveSuccess,
              }}
              cancelAction={{
                onAfter: () => router.push("/organization"),
              }}
              backButton={{
                onClick: () => router.push("/organization"),
              }}
              customMessages={{
                header: {
                  title: "Organization Settings",
                },
                save_organization_changes_message: "Settings saved successfully!",
              }}
              styling={{
                variables: {
                  common: {
                    "--color-primary": "#059669",
                  },
                },
                classes: {
                  "OrganizationDetails_Card": "shadow-xl rounded-lg",
                },
              }}
            />
          </div>
        );
      }

      export default OrganizationSettingsPage;
      ```
    </Accordion>

    <h2 id="props-2">
      プロップス
    </h2>

    <h3 id="core-props">
      主要なプロップス
    </h3>

    コアプロップスはコンポーネントの動作に不可欠です。`OrganizationDetailsEdit` には必須のプロップはなく、現在の組織の詳細を My Organization API から自動的に読み込みます。

    ***

    <h3 id="display-props-2">
      表示関連のプロップス
    </h3>

    表示用のプロップスは、コンポーネントの動作に影響を与えることなく、その表示方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            すべてのフォーム入力を無効にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-2">
      Action のプロップス
    </h3>

    Actionのプロップスは、ユーザー操作を処理し、ユーザーが変更を保存またはキャンセルしたときの動作を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用すると、アプリケーションのルーティングや分析と連携できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            変更を保存するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            変更をキャンセルまたは破棄するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            戻るボタンの設定。
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **型:** `ComponentAction<OrganizationPrivate>`

    ユーザーが organization の変更を送信した際の保存フローを制御します。保存の成功後に別の画面へ遷移させるには `onAfter` を使用します。

    **プロパティ:**

    * `disabled`—保存ボタンを無効にします (たとえば、別の操作の実行中) 。
    * `onBefore(data)`—保存処理の前に実行されます。保存を中止するには`false`を返します (たとえば、先に確認ダイアログを表示する場合) 。
    * `onAfter(data)`—organizationが正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

    **よくあるパターン:**

    ```tsx wrap lines theme={null}
    // 保存後に前の画面へ戻る
    saveAction={{
      onAfter: () => router.push("/organization"),
    }}

    // 保存前に確認ダイアログを表示する
    saveAction={{
      onBefore: (org) => {
        return confirm(`Save changes to "${org.display_name}"?`);
      },
      onAfter: () => router.push("/organization"),
    }}

    // 保存時に分析イベントを記録する
    saveAction={{
      onAfter: (org) => {
        analytics.track("Organization Updated", {
          name: org.name,
          displayName: org.display_name,
        });
        router.push("/organization");
      },
    }}
    ```

    ***

    **cancelAction**

    **型:** `ComponentAction<OrganizationPrivate>`

    キャンセル/破棄のフローを制御します。破棄された変更の管理には、このアクションを使用します。

    **プロパティ:**

    * `disabled`—キャンセルボタンを無効にします
    * `onAfter(data)`—キャンセルが確定した後に実行されます。Formから移動する際に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      cancelAction={{
        onAfter: () => router.push("/organization"),
      }}
    />
    ```

    ***

    **backButton**

    **型:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    コンポーネントヘッダー内の戻るボタンを設定します。organizationの概要ページや前のページに戻る導線として使用します。

    **プロパティ:**

    * `icon`—カスタム Lucide アイコンコンポーネント (省略可、デフォルトは ArrowLeft)
    * `onClick`—ナビゲーション用のクリックハンドラー

    **例:**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <OrganizationDetailsEdit
      backButton={{
        icon: ChevronLeft,
        onClick: () => router.push("/organization"),
      }}
    />;
    ```

    ***

    <h3 id="customization-props-2">
      カスタマイズ用プロップス
    </h3>

    カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランド、ロケール、バリデーションの要件に合わせてコンポーネントを調整できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            フィールドのバリデーションルール。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            i18n テキストの上書き。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            CSS 変数とクラスの上書き。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    organizationの詳細フィールドにカスタムのバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマフィールド">
      すべてのschemaフィールドでサポートされる項目: `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—組織の内部名
      **details.displayName**—組織の表示名
      **details.primaryColor**—プライマリブランドカラー (16進数形式)
      **details.backgroundColor**—ページの背景色 (16進数形式)
      **details.logoURL**—ロゴのURL
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      schema={{
        details: {
          name: {
            minLength: 3,
            maxLength: 50,
            regex: /^[a-zA-Z0-9-_]+$/,
            errorMessage: "Name must be alphanumeric with hyphens/underscores",
          },
          displayName: {
            required: true,
            maxLength: 100,
          },
          primaryColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FF5500)",
          },
          backgroundColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
          },
          logoURL: {
            regex: /^https:\/\/.+/,
            errorMessage: "Logo URL must use HTTPS",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズします。すべてのフィールドは任意で、指定されていない場合はデフォルトが使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントヘッダー

      * `title`, `back_button_text`

      **details.sections.settings**—設定セクション

      * `title`
      * `fields.name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.display_name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.third_party_client_access`—`label`, `options.block.label`, `options.block.helper_text`, `options.allow.label`, `options.allow.helper_text`

      **details.sections.branding**—ブランディングセクション

      * `title`
      * `fields.logo`—`label`, `helper_text`, `error`
      * `fields.primary_color`—`label`, `helper_text`, `error`
      * `fields.page_background_color`—`label`, `helper_text`, `error`

      **details**—Formのラベル

      * `unsaved_changes_text`, `submit_button_label`, `cancel_button_label`

      **notifications**—APIレスポンス

      * `save_organization_changes_message`, `organization_changes_error_message`, `organization_changes_error_message_generic`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      customMessages={{
        header: {
          title: "Edit Organization",
        },
        details: {
          sections: {
            settings: {
              fields: {
                name: {
                  label: "Organization ID",
                  helper_text: "Internal identifier (cannot be changed after creation)",
                },
                display_name: {
                  label: "Organization Name",
                  placeholder: "Enter display name",
                },
                third_party_client_access: {
                  label: "Third-Party Application Access",
                  options: {
                    block: {
                      label: "Block Third-Party Access",
                      helper_text: "Users can only authenticate through official apps",
                    },
                    allow: {
                      label: "Allow Third-Party Access",
                      helper_text: "Users can authenticate through external applications",
                    },
                  },
                },
              },
            },
          },
        },
        save_organization_changes_message: "Organization updated successfully!",
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用
      * `light`—ライトテーマのみ
      * `dark`—ダークテーマのみ

      **クラス**—コンポーネントクラスのオーバーライド

      * `OrganizationDetails_Card`
      * `OrganizationDetails_FormActions`
      * `OrganizationDetails_SettingsDetails`
      * `OrganizationDetails_BrandingDetails`
      * `OrganizationDetails_ThirdPartyAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization-2">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks-2">
      利用可能なフック
    </h3>

    これらのフックは、UIを持たない基盤ロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェースを構築したい場合にご利用ください。

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>組織の編集ロジックとAPI連携</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    <h2 id="setup-requirements-3">
      設定の要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—tenant が
      My Organization API で構成されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-3">
      インストール
    </h2>

    GitHub Registry を使用して、shadcn CLI 経由でコンポーネントをインストールします。

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-details-edit
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      shadcn CLI では、共有ユーティリティと Auth0 連携に必要な `@auth0/universal-components-core`
      依存関係もインストールされます。
      **shadcn CLI v2.5.0+** が必要です。
    </Callout>

    <details>
      <summary>レガシー Vercel レジストリ (廃止)</summary>

      既存の利用者は、**2026年9月17日**までVercelでホストされるパスを引き続き使用できます。

      ```bash wrap lines theme={null}
      npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/organization-details-edit.json
      ```

      新しいプロジェクトでは、上記の GitHub Registry パスを使用してください。
    </details>

    <h2 id="get-started-3">
      はじめに
    </h2>

    ```tsx wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

    export function OrganizationSettingsPage() {
      const navigate = useNavigate();

      return (
        <OrganizationDetailsEdit
          saveAction={{
            onAfter: () => navigate("/organization"),
          }}
          backButton={{
            onClick: () => navigate("/organization"),
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function OrganizationSettingsPage() {
        const navigate = useNavigate();

        const handleSaveSuccess = (org) => {
          analytics.track("Organization Updated", {
            name: org.name,
            displayName: org.display_name,
          });
          navigate("/organization");
        };

        return (
          <div className="max-w-2xl mx-auto p-6">
            <OrganizationDetailsEdit
              schema={{
                details: {
                  displayName: {
                    required: true,
                    maxLength: 100,
                  },
                  color: {
                    regex: /^#[0-9A-Fa-f]{6}$/,
                    errorMessage: "Enter a valid hex color",
                  },
                },
              }}
              saveAction={{
                onBefore: (org) => {
                  return confirm(`Save changes to "${org.display_name}"?`);
                },
                onAfter: handleSaveSuccess,
              }}
              cancelAction={{
                onAfter: () => navigate("/organization"),
              }}
              backButton={{
                onClick: () => navigate("/organization"),
              }}
              customMessages={{
                header: {
                  title: "Organization Settings",
                },
                save_organization_changes_message: "Settings saved successfully!",
              }}
              styling={{
                variables: {
                  common: {
                    "--color-primary": "#059669",
                  },
                },
                classes: {
                  "OrganizationDetails_Card": "shadow-xl rounded-lg",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "your-domain.auth0.com";
        const clientId = "your-client-id";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証のチャレンジを処理するために必要
          >
            <Auth0ComponentProvider>
              <OrganizationSettingsPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    <h2 id="props-3">
      プロップス
    </h2>

    <h3 id="core-props-2">
      主要なプロップス
    </h3>

    コアプロップスはコンポーネントの動作に不可欠です。`OrganizationDetailsEdit` には必須のプロップはなく、現在の組織の詳細を My Organization API から自動的に読み込みます。

    ***

    <h3 id="display-props-3">
      表示関連のプロップス
    </h3>

    表示用のプロップスは、コンポーネントの動作に影響を与えることなく、その表示方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            すべてのフォーム入力を無効にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-3">
      Action のプロップス
    </h3>

    Actionのプロップスは、ユーザー操作を処理し、ユーザーが変更を保存またはキャンセルしたときの動作を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用すると、アプリケーションのルーティングや分析と連携できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            変更を保存するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            変更をキャンセルまたは破棄するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            戻るボタンの設定。
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **型:** `ComponentAction<OrganizationPrivate>`

    ユーザーが organization の変更を送信した際の保存フローを制御します。保存の成功後に別の画面へ遷移させるには `onAfter` を使用します。

    **プロパティ:**

    * `disabled`—保存ボタンを無効にします (たとえば、別の操作の実行中) 。
    * `onBefore(data)`—保存処理の前に実行されます。保存を中止するには`false`を返します (たとえば、先に確認ダイアログを表示する場合) 。
    * `onAfter(data)`—organizationが正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

    **よくあるパターン:**

    ```tsx wrap lines theme={null}
    // 保存後に前の画面へ戻る
    saveAction={{
      onAfter: () => navigate("/organization"),
    }}

    // 保存前に確認ダイアログを表示する
    saveAction={{
      onBefore: (org) => {
        return confirm(`Save changes to "${org.display_name}"?`);
      },
      onAfter: () => navigate("/organization"),
    }}

    // 保存時に分析イベントを記録する
    saveAction={{
      onAfter: (org) => {
        analytics.track("Organization Updated", {
          name: org.name,
          displayName: org.display_name,
        });
        navigate("/organization");
      },
    }}
    ```

    ***

    **cancelAction**

    **型:** `ComponentAction<OrganizationPrivate>`

    キャンセル/破棄のフローを制御します。破棄された変更の管理には、このアクションを使用します。

    **プロパティ:**

    * `disabled`—キャンセルボタンを無効にします
    * `onAfter(data)`—キャンセルが確定した後に実行されます。Formから移動する際に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      cancelAction={{
        onAfter: () => navigate("/organization"),
      }}
    />
    ```

    ***

    **backButton**

    **型:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    コンポーネントのヘッダーにある戻るボタンを設定します。organization の概要ページや前のページに戻る導線として使用します。

    **プロパティ:**

    * `icon`—カスタム Lucide アイコンコンポーネント (省略可、デフォルトは ArrowLeft)
    * `onClick`—ナビゲーション用のクリックハンドラー

    **例:**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <OrganizationDetailsEdit
      backButton={{
        icon: ChevronLeft,
        onClick: () => navigate("/organization"),
      }}
    />;
    ```

    ***

    <h3 id="customization-props-3">
      カスタマイズ用プロップス
    </h3>

    カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランド、ロケール、バリデーション要件に合わせてコンポーネントを調整できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            フィールドのバリデーションルール。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            i18n テキストの上書き。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            CSS 変数とクラスの上書き。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    organizationの詳細フィールドにカスタムのバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマフィールド">
      すべてのschemaフィールドでサポートされる項目: `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—組織の内部名
      **details.displayName**—組織の表示名
      **details.primaryColor**—プライマリブランドカラー (16進数形式)
      **details.backgroundColor**—ページの背景色 (16進数形式)
      **details.logoURL**—ロゴのURL
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      schema={{
        details: {
          name: {
            minLength: 3,
            maxLength: 50,
            regex: /^[a-zA-Z0-9-_]+$/,
            errorMessage: "Name must be alphanumeric with hyphens/underscores",
          },
          displayName: {
            required: true,
            maxLength: 100,
          },
          primaryColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FF5500)",
          },
          backgroundColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
          },
          logoURL: {
            regex: /^https:\/\/.+/,
            errorMessage: "Logo URL must use HTTPS",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズします。すべてのフィールドは任意で、指定されていない場合はデフォルトが使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントヘッダー

      * `title`, `back_button_text`

      **details.sections.settings**—設定セクション

      * `title`
      * `fields.name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.display_name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.third_party_client_access`—`label`, `options.block.label`, `options.block.helper_text`, `options.allow.label`, `options.allow.helper_text`

      **details.sections.branding**—ブランディングセクション

      * `title`
      * `fields.logo`—`label`, `helper_text`, `error`
      * `fields.primary_color`—`label`, `helper_text`, `error`
      * `fields.page_background_color`—`label`, `helper_text`, `error`

      **details**—Formのラベル

      * `unsaved_changes_text`, `submit_button_label`, `cancel_button_label`

      **notifications**—APIレスポンス

      * `save_organization_changes_message`, `organization_changes_error_message`, `organization_changes_error_message_generic`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      customMessages={{
        header: {
          title: "Edit Organization",
        },
        details: {
          sections: {
            settings: {
              fields: {
                name: {
                  label: "Organization ID",
                  helper_text: "Internal identifier (cannot be changed after creation)",
                },
                display_name: {
                  label: "Organization Name",
                  placeholder: "Enter display name",
                },
                third_party_client_access: {
                  label: "Third-Party Application Access",
                  options: {
                    block: {
                      label: "Block Third-Party Access",
                      helper_text: "Users can only authenticate through official apps",
                    },
                    allow: {
                      label: "Allow Third-Party Access",
                      helper_text: "Users can authenticate through external applications",
                    },
                  },
                },
              },
            },
          },
        },
        save_organization_changes_message: "Organization updated successfully!",
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用
      * `light`—ライトテーマのみ
      * `dark`—ダークテーマのみ

      **クラス**—コンポーネントクラスのオーバーライド

      * `OrganizationDetails_Card`
      * `OrganizationDetails_FormActions`
      * `OrganizationDetails_SettingsDetails`
      * `OrganizationDetails_BrandingDetails`
      * `OrganizationDetails_ThirdPartyAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization-3">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks-3">
      利用可能なフック
    </h3>

    これらのフックは、UIを持たない基盤ロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェースを構築したい場合にご利用ください。

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>Organization データの取得・編集ロジック</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>