fix: ChaptersButton Types (#473)

# Description

* Updates video player types to get fix for chapters button
* Adds examples to docs for chapters

## Issue Ticket Number

Fixes #469 

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes
https://github.com/cloudinary-community/next-cloudinary/issues/<ISSUE_NUMBER>
-->

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/cloudinary-community/next-cloudinary/issues)
ticket for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/cloudinary-community/next-cloudinary/pulls)
for the same update/change?
- [ ] I have performed a self-review of my own code
- [ ] I have run tests locally to ensure they all pass
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes needed to the documentation

docs/pages/cldvideoplayer/examples.mdx

@@ -113,6 +113,44 @@ Utilizes the browser's Picture-in-Picture API to create a floating video on top
 
 ## Player Customization
 
+### Chapters & Selector
+
+Adding a button to select chapters.
+
+<HeaderImage>
+  <CldVideoPlayer
+    id="chapters-selector"
+    width="2048"
+    height="1080"
+    src={`${process.env.VIDEOS_DIRECTORY}/dog-running-snow`}
+    chapters={{
+      0: "Chapter 1",
+      6: "Chapter 2",
+      9: "Chapter 3"
+    }}
+    chaptersButton
+  />
+</HeaderImage>
+
+<CodeBlock>
+  ```jsx copy showLineNumbers
+  import { CldVideoPlayer } from 'next-cloudinary';
+
+  <CldVideoPlayer
+    id="chapters-selector"
+    width="4096"
+    height="2160"
+    src="<Your Public ID>"
+    chapters={{
+      0: "Chapter 1",
+      6: "Chapter 2",
+      9: "Chapter 3"
+    }}
+    chaptersButton
+  />
+  ```
+</CodeBlock>
+
 ### Colors & Font
 
 Changing the player theme using colors and fonts.
@@ -458,9 +496,7 @@ export const VideoPlayerWithRef = () => {
 }
 
 <HeaderImage>
-  <VideoPlayerWithRef
-
-  />
+  <VideoPlayerWithRef />
 </HeaderImage>
 
 <Callout emoji={false}>

next-cloudinary/package.json

@@ -16,7 +16,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@cloudinary-util/types": "1.0.2",
+    "@cloudinary-util/types": "1.0.3",
     "@cloudinary-util/url-loader": "5.2.2",
     "@cloudinary-util/util": "^3.0.0",
     "@tsconfig/recommended": "^1.0.3"