chore: spelling You -> you (#2193)

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v4-info.mdx

@@ -17,9 +17,9 @@ All the major edge cases as listed below:
 
 Every component that provides a `label` property is now wrapping the `FormLabel` inside itself.
 
-> **Note:** This is not a breaking change, but if You have made CSS styling to the component, then this can cause some issues.
+> **Note:** This is not a breaking change, but if you have made CSS styling to the component, then this can cause some issues.
 
-To select and change the component **inside** with CSS, You can use now the `*__inner` wrapper. But - for sure, it depends on your customization made with v3.
+To select and change the component **inside** with CSS, you can use now the `*__inner` wrapper. But - for sure, it depends on your customization made with v3.
 
 **Before** (v3):
 
@@ -51,7 +51,7 @@ To select and change the component **inside** with CSS, You can use now the `*__
 
 ## Dropdown event handling
 
-Did You use `on_select` before? Then make sure You double-check that You really want `on_select`. In most cases, You will only need `on_change`. [Read more about the difference](/uilib/components/dropdown/events) between `on_change` and `on_select`.
+Did you use `on_select` before? Then make sure you double-check that you really want `on_select`. In most cases, you will only need `on_change`. [Read more about the difference](/uilib/components/dropdown/events) between `on_change` and `on_select`.
 
 ## Switch label position
 
@@ -62,14 +62,14 @@ Now the [Switch](/uilib/components/switch) component has `right` as the default
 Spacing is an important part of Eufemia, that's why there are now three new helper components to make it easy and fast to build forms and layouts with proper spacing.
 
 - [FormSet](/uilib/components/form-set) provides by default the `<form>` tag and sends some `FormRow` properties along down.
-- [FormRow](/uilib/components/form-row) provides by default the `<fieldset>` tag and `<legend>` tag. `FormRow` is meant to help You achieve easily common DNB layout patterns and setups. Also, `FormRow` is supporting the `Spacing` component.
+- [FormRow](/uilib/components/form-row) provides by default the `<fieldset>` tag and `<legend>` tag. `FormRow` is meant to help you achieve easily common DNB layout patterns and setups. Also, `FormRow` is supporting the `Spacing` component.
 - [Space](/uilib/components/space) is made to achieve the Eufemia [spacing patterns](/uilib/usage/layout/spacing#spacing-helpers). In other words; _margin_ within the provided spacing blocks.
 
 ### Components and Spacing
 
 In v4, all components have the properties `top`, `right`, `bottom` and `left` available to define [spacing directly](/uilib/components/space#components-and-spacing).
 
-E.g. this `right="small"` will give You a spacing of `8rem` to the left side.
+E.g. this `right="small"` will give you a spacing of `8rem` to the left side.
 
 ```jsx
 <Input label="My Input" right="small" />

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v4.10-info.mdx

@@ -38,7 +38,7 @@ import { Input } from 'dnb-ui-lib/components'
 <Input label="My Input" status="Error message" />
 ```
 
-But You can also manually update / show as many messages as You want:
+But you can also manually update / show as many messages as you want:
 
 ```jsx
 import { GlobalStatus } from 'dnb-ui-lib/components'
@@ -54,7 +54,7 @@ import { GlobalStatus } from 'dnb-ui-lib/components'
   item="Item from status #1"
 />
 
-// 3. and remove it again when ever You want
+// 3. and remove it again when ever you want
 <GlobalStatus.Remove status_id="custom-id-1" />
 ```
 

packages/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.mdx

@@ -8,7 +8,7 @@ redirect_from:
 
 | Properties                                  | Description                                                                                                                                              |
 | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `text` or `children`                        | _(optional)_ the `text` appears as the status message. Beside plain text, You can send in a React component as well.                                     |
+| `text` or `children`                        | _(optional)_ the `text` appears as the status message. Beside plain text, you can send in a React component as well.                                     |
 | `title`                                     | _(optional)_ the `title` attribute in the status.                                                                                                        |
 | `role`                                      | _(optional)_ the `role` attribute for accessibility, defaults to `alert`                                                                                 |
 | `state`                                     | _(optional)_ defines the visual appearance of the status. These are the statuses `error`, `warn`, `info` and `marketing`. The default status is `error`. |

packages/dnb-design-system-portal/src/docs/uilib/components/global-status/info.mdx

@@ -16,7 +16,7 @@ By default, the `GlobalStatus` is automatically connected together with the [For
 
 ### Several Global statuses
 
-Normally, You only want to have **one** `GlobalStatus` inside your application. But you can have several in parallel. But make sure you give every other a new ID:
+Normally, you only want to have **one** `GlobalStatus` inside your application. But you can have several in parallel. But make sure you give every other a new ID:
 
 ```jsx
 <GlobalStatus id="other-global-status" />
@@ -33,7 +33,7 @@ Normally, You only want to have **one** `GlobalStatus` inside your application.
 <Input global_status_id="other-global-status" ... />
 ```
 
-But You can also make use of the [FormSet](/uilib/components/form-set) or [FormRow](/uilib/components/form-row) which will send along the `global_status_id` the underlying/wrapped components, like:
+But you can also make use of the [FormSet](/uilib/components/form-set) or [FormRow](/uilib/components/form-row) which will send along the `global_status_id` the underlying/wrapped components, like:
 
 ```jsx
 <GlobalStatus id="other-global-status" />
@@ -90,7 +90,7 @@ import { GlobalStatus } from '@dnb/eufemia/components'
 // 1. Place it under the header bar
 <GlobalStatus text="Optional default text" />
 
-// 2. later on, You can show a message
+// 2. later on, you can show a message
 <GlobalStatus.Add
   status_id="custom-id-1"
   title="New title"
@@ -102,7 +102,7 @@ import { GlobalStatus } from '@dnb/eufemia/components'
 <GlobalStatus.Remove status_id="custom-id-1" />
 ```
 
-If You need an additional `GlobalStatus`, define a custom ID (custom-status):
+If you need an additional `GlobalStatus`, define a custom ID (custom-status):
 
 ```jsx
 import { GlobalStatus } from '@dnb/eufemia/components'

packages/dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx

@@ -47,7 +47,7 @@ const items = [
 
 ## Controllers
 
-In React You can make use of the helper components, the function as a kind of a controller component.
+In React, you can make use of the helper components, the function as a kind of a controller component.
 The goal is to update the content (properties/events) of the target GlobalStatus.
 
 ```jsx
@@ -62,7 +62,7 @@ The goal is to update the content (properties/events) of the target GlobalStatus
 // or update the status.
 <GlobalStatus.Update id="custom-id" show />
 
-// Later You can remove a resolved item.
+// Later you can remove a resolved item.
 <GlobalStatus.Remove id="custom-id" status_id="status-3" />
 ```
 

packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx

@@ -24,8 +24,8 @@ showTabs: true
 | `type`                                      | _(optional)_ choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.                                                                                                                                                                                                                            |
 | `autocomplete`                              | _(optional)_ defaults to `off`. Set to `on` or any of [allowed `attributes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete). Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form. |
 | `submit_button_title`                       | _(optional)_ title attribute for the search icon. Only relevant if search input.                                                                                                                                                                                                                                         |
-| `suffix`                                    | _(optional)_ text describing the content of the input more than the label. You can also send in a React component, so it gets wrapped inside the Input component.                                                                                                                                                        |
-| `size`                                      | _(optional)_ the sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then it will be forwarded as the input element attribute.                                  |
+| `suffix`                                    | _(optional)_ text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.                                                                                                                                                        |
+| `size`                                      | _(optional)_ the sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if you define a number like `size="2"` then it will be forwarded as the input element attribute.                                  |
 | `selectall`                                 | _(optional)_ if set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.                                                                                                                                                                 |
 | `clear`                                     | _(optional)_ if set to `true`, then a clear button will be shown which lets the user clear any given input value.                                                                                                                                                                                                        |
 | `stretch`                                   | _(optional)_ if set to `true`, then the input field will be 100% in `width`.                                                                                                                                                                                                                                             |

packages/dnb-design-system-portal/src/docs/uilib/components/modal/event-table.mdx

@@ -5,4 +5,4 @@
 | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `onOpen` / `on_open`                  | _(optional)_ This event gets triggered once the modal shows up. Returns the modal id: `\{ id \}`.`.                                                                                                                                                                                    |
 | `onClose` / `on_close`                | _(optional)_ this event gets triggered once the modal gets closed. Returns the modal id: `\{ id, event, triggeredBy \}`.                                                                                                                                                               |
-| `onClosePrevent` / `on_close_prevent` | _(optional)_ this event gets triggered once the user tries to close the modal, but `prevent_close` is set to **true**. Returns a callback `close` You can call to trigger the close mechanism. More details below. Returns the modal id: `\{ id, event, close: Method, triggeredBy \}` |
+| `onClosePrevent` / `on_close_prevent` | _(optional)_ this event gets triggered once the user tries to close the modal, but `prevent_close` is set to **true**. Returns a callback `close` you can call to trigger the close mechanism. More details below. Returns the modal id: `\{ id, event, close: Method, triggeredBy \}` |

packages/dnb-design-system-portal/src/docs/uilib/components/modal/prop-table.mdx

@@ -3,7 +3,7 @@
 | `id`                                                            | _(optional)_ The id used internal for the trigger button and Modal component.                                                                                                                                                          |
 | `rootId` / `root_id`                                            | _(optional)_ The id used internal in the modal root element. Defaults to `root`, so the element id will be `dnb-modal-root`.                                                                                                           |
 | `contentId` / `content_id`                                      | _(optional)_ Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal content.                                                                                                               |
-| `labelledBy` / `labelled_by`                                    | _(optional)_ The ID of the trigger component, describing the modal content. Defaults to the internal `trigger`, so make sure You define the `title` in `triggerAttributes`.                                                            |
+| `labelledBy` / `labelled_by`                                    | _(optional)_ The ID of the trigger component, describing the modal content. Defaults to the internal `trigger`, so make sure you define the `title` in `triggerAttributes`.                                                            |
 | `children` or `function`                                        | _(optional)_ the content which will appear when triggering open the modal. If a function is given, you get a close method `() => ({ close })` in the arguments.                                                                        |
 | `fullscreen`                                                    | _(optional)_ If set to `true` then the modal content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`.                                  |
 | `openState` / `open_state`                                      | _(optional)_ use this prop to control the open/close state by setting either: `opened` / `closed` or `true` / `false`.                                                                                                                 |

packages/dnb-design-system-portal/src/docs/uilib/components/space/info.mdx

@@ -9,7 +9,7 @@ import SpacingTable from 'Docs/uilib/usage/layout/spacing-table.mdx'
 The Space component provides `margins` within the [provided spacing patterns](/uilib/usage/layout/spacing#spacing-helpers).
 
 The reason why this exists is to make your syntax as clean as possible.
-This way You see directly in words what the spacing is for every affected component
+This way you see directly in words what the spacing is for every affected component
 
 ### Spacing Table
 

packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/info.mdx

@@ -8,7 +8,7 @@ The ToggleButton component should be used to toggle on or off a limited number o
 
 You can use the React component `<ToggleButton.Group>` to wrap several `ToggleButton`. This makes it easier to handle the event `on_change` on a higher level - as well as several other [context related properties](/uilib/components/toggle-button/properties).
 
-By default the `ToggleButton.Group` is single-select, like a [Radio](/uilib/components/radio) button. But You can easily enable `multiselect` as well.
+By default the `ToggleButton.Group` is single-select, like a [Radio](/uilib/components/radio) button. But you can easily enable `multiselect` as well.
 
 ## How to use
 

packages/dnb-design-system-portal/src/docs/uilib/elements/code.mdx

@@ -6,7 +6,7 @@ title: 'Code'
 
 ## Code and Syntax highlighting
 
-[Prism](https://prismjs.com) is a popular Syntax Highlighting tool. DNB has its own **theme** You can use:
+[Prism](https://prismjs.com) is a popular Syntax Highlighting tool. DNB has its own **theme** you can use:
 
 - `@dnb/eufemia/style/themes/theme-ui/prism/dnb-prism-theme.js`
 

packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/focus.mdx

@@ -28,7 +28,7 @@ From the technical side, we have to assign an _invisible_ focus, so the user can
 
 ## Managing the Focus state
 
-Make sure You ...
+Make sure you ...
 
 - set the focus on the content (e.g. `<h1 class="dnb-h--xx-large">`) after a navigation action, initiated by the user.
 - set the focus into a _menu or navigation_ area, if it has an opening mechanism.
@@ -68,7 +68,7 @@ import {
 // 1. Somewhere in your app, set either an element, or a CSS Selector
 setPageFocusElement('.css-selector', 'MyCustomName')
 
-// 2. Later You can call this action, once it's time to activate the new focus state
+// 2. Later you can call this action, once it's time to activate the new focus state
 applyPageFocus('MyCustomName', (element) => {
   /* optional callback */
 })

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling.mdx

@@ -50,7 +50,7 @@ The following Diagram gives an overall overview how the packages are structured.
 
 ## How to deal with existing styles
 
-The **dnb-ui-core** package includes some styles which effects the global scope (`<body>` reset). To avoid interference with existing styles, let's say a header or a menu, You could only use the **dnb-ui-basis** package in combination with other packages like **dnb-theme-basis** and **dnb-theme-components**.
+The **dnb-ui-core** package includes some styles which effects the global scope (`<body>` reset). To avoid interference with existing styles, let's say a header or a menu, you could only use the **dnb-ui-basis** package in combination with other packages like **dnb-theme-basis** and **dnb-theme-components**.
 
 You may have a look at some [code examples of dealing with legacy code](/uilib/usage/customisation/styling/legacy-styling).
 
@@ -83,9 +83,9 @@ To have the Eufemia Core styles inside a wrapper anyway, simply use the followin
 
 #### CSS Specificity
 
-Once You use the `.dnb-core-style` wrapper class, You may in some circumstances, need to use it to modify already given properties.
+Once you use the `.dnb-core-style` wrapper class, you may in some circumstances, need to use it to modify already given properties.
 
-For **Styled Components** You do it this way:
+For **Styled Components** you do it this way:
 
 ```jsx
 import { P } from '@dnb/eufemia/elements'
@@ -97,7 +97,7 @@ const MyElement = styled(P)`
 `
 ```
 
-In CSS You simply do it this way:
+In CSS you simply do it this way:
 
 ```css
 .dnb-core-style .my-element {
@@ -128,7 +128,7 @@ For more details, check out the source file: `spacing.scss`
 
 ## Styling of HTML Elements (tags)
 
-To deal with HTML Elements, without declaring them individual with the right css classes, like `<h1 class="dnb-h--xx-large">`, You can import the sub package **dnb-theme-tags**.
+To deal with HTML Elements, without declaring them individual with the right css classes, like `<h1 class="dnb-h--xx-large">`, you can import the sub package **dnb-theme-tags**.
 
 **NB:** Use it carefully - cause this will effect existing styles as well!
 

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/legacy-styling.js

@@ -23,7 +23,7 @@ const LegacyCodeStyling = () => (
     <article className={LegacyCodeExample}>
       <h1>Example usage</h1>
       <p>
-        Further down on this page You find visual examples of how to deal
+        Further down on this page you find visual examples of how to deal
         with legacy styling.
       </p>
       <p>