Update docs for site re-design

Author: rawilk

docs/components/date-picker.md

@@ -14,7 +14,7 @@ While the `date-picker` component works out-of-the-box when you've [set the dire
 we recommend that you install and compile the JavaScript libraries before you deploy to production:
 
 - [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
-- [Flatpickr](https://flatpickr.js.org/) `4.6.3`
+- [Flatpickr](https://flatpickr.js.org/) `^4.6.9`
 
 Make sure you import flatpickr as `flatpickr` in your JavaScript, and make sure it's available globally:
 
@@ -24,9 +24,6 @@ import flatpickr from 'flatpickr';
 window.flatpickr = flatpickr;
 ```
 
-**Note:** There is a bug introduced to flatpickr with the latest release that affects chrome users on MacOS. For this reason,
-you should lock your version to `4.6.3` until a fix for this issue is released. See [the github issue](https://github.com/flatpickr/flatpickr/issues/2249) for more information.
-
 ### Styling
 
 If you pull the `flatpickr` package in via npm, you should import the styles into your stylesheet:

docs/components/file-upload.md

@@ -55,7 +55,7 @@ This will output the following HTML:
 </div>
 ```
 
-**Note:** Since the component applies a class of `sr-only` (hides the input) to the input itself, the input must have an id assigned to it
+> {note} Since the component applies a class of `sr-only` (hides the input) to the input itself, the input must have an id assigned to it
 for the label to be able to trigger a click on the input. By default, the component assigns the `id` to the `name` attribute if you don't
 provide an `id` to it.
 
@@ -71,7 +71,7 @@ for the `display-upload-progress` attribute.
 <x-file-upload wire:model="avatar" :display-upload-progress="false" />
 ```
 
-**Note:** Since the upload progress hooks into livewire events, it will not be shown unless you provide a `wire:model` to it.
+> {note} Since the upload progress hooks into livewire events, it will not be shown unless you provide a `wire:model` to it.
 
 ## Custom Button Label