docs: adds import statement to info doc

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Accordion } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Accordion component is a combination of an accessible button (header area) and a content container.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Anchor } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Anchor, also knows as `Link` is used to navigate from one page to the next HTML page.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { AriaLive } from '@dnb/eufemia'
+```
+
 ## Description
 
 AriaLive is a React component and hook that helps make your web app more accessible by adding or defining an ARIA live region that announces dynamic changes to screen readers.

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

@@ -9,6 +9,12 @@ import {
   AutocompleteContentDecoupledExample,
 } from 'Docs/uilib/components/autocomplete/Examples'
 
+## Import
+
+```tsx
+import { Autocomplete } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Autocomplete component is a combination of an [Input](/uilib/components/input) and a [Dropdown](/uilib/components/dropdown), also called **ComboBox**. During typing, matching data items gets suggested in an option menu (listbox).

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Avatar } from '@dnb/eufemia'
+```
+
 ## Description
 
 Avatars are identifiers that makes people and companies more scannable for payments, spending overviews and social functionality. The fallback for a person is the letter version that uses the first letter of a persons name. A company has the icon version as it’s default/fallback.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Badge } from '@dnb/eufemia'
+```
+
 ## Description
 
 Badge generates a small badge on its child(ren), or can be a inline/standalone badge.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Breadcrumb } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Breadcrumb is a component for navigation and for showing the current website path or tree.

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

@@ -10,6 +10,12 @@ import {
   IconButtonSizes,
 } from 'Docs/uilib/components/button/Examples'
 
+## Import
+
+```tsx
+import { Button } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Button component should be used as the **primary call-to-action** in a form, or as a user interaction mechanism.

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

@@ -4,6 +4,12 @@ showTabs: true
 
 import * as Examples from './Examples'
 
+## Import
+
+```tsx
+import { Card } from '@dnb/eufemia'
+```
+
 ## Description
 
 `Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Checkbox } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Checkbox component is shown as a square box that is ticked (checked) when activated.

packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click/info.mdx

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { CopyOnClick } from '@dnb/eufemia'
+```
+
 ## Description
 
 The `CopyOnClick` component provides a convenient way to copy text to the clipboard with a single click. This component is particularly useful in scenarios where users need to quickly copy text, such as when copying codes, IDs, URLs, or any other text content that needs to be easily shared or reused.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { DatePicker } from '@dnb/eufemia'
+```
+
 ## Description
 
 The DatePicker component should be used whenever there is to enter a single date or a date range/period with a start and end date.

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

@@ -6,6 +6,12 @@ import InlineImg from 'dnb-design-system-portal/src/shared/tags/Img'
 import DialogConfirmExample from 'Docs/uilib/components/dialog/assets/dialog_confirm.png'
 import DialogInformExample from 'Docs/uilib/components/dialog/assets/dialog_inform.png'
 
+## Import
+
+```tsx
+import { Dialog } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Dialog component is a [Modal](/uilib/components/modal) variation that appears at the center of the screen. The Dialog has similar functionality to a traditional popup window. Similar to Modal, it has to be triggered by the user to appear. Typical usage would be to read an explanation, then closing it.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Drawer } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Drawer component is a [Modal](/uilib/components/modal) variation that appears as a side panel at any chosen side of the page; top, bottom, left or right (default `right`). A Drawer is typically used to show additional information. It can also be used to have easy/quick tasks while being in context.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Dropdown } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Dropdown component is a fully custom-made component. This allows us to change its form based on context (small screens, touch devices, etc.)

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { FormLabel } from '@dnb/eufemia'
+```
+
 ## Description
 
 The FormLabel component represents a caption for all sorts of HTML elements in a user interface.

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

@@ -6,6 +6,12 @@ redirect_from:
 
 import FormStatusIcons from 'Docs/icons/form-status.mdx'
 
+## Import
+
+```tsx
+import { FormStatus } from '@dnb/eufemia'
+```
+
 ## Description
 
 The FormStatus is a simple component meant for displaying the status of a form ( displaying form errors, messages etc. )

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/info.mdx

@@ -4,6 +4,12 @@ showTabs: true
 
 import { DrawerListExampleOptionsRender } from 'Docs/uilib/components/fragments/drawer-list/Examples'
 
+## Import
+
+```tsx
+import { DrawerList } from '@dnb/eufemia/fragments'
+```
+
 ## Description
 
 The DrawerList component is a fragment inside other components.

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/scroll-view/info.mdx

@@ -4,6 +4,12 @@ showTabs: true
 
 import { ScrollViewInfo } from 'Docs/uilib/components/fragments/scroll-view/Examples'
 
+## Import
+
+```tsx
+import { ScrollView } from '@dnb/eufemia/fragments'
+```
+
 ## Description
 
 ScrollView is a tiny helper component helping the user controlling overflowing content horizontally or vertically.

packages/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/info.mdx

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { TextCounter } from '@dnb/eufemia/fragments'
+```
+
 ## Description
 
 The `TextCounter` is a component designed to provide real-time character count feedback in text input fields.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { GlobalError } from '@dnb/eufemia'
+```
+
 ## Description
 
 The GlobalError is a simple component to integrate when a `404` or `500` has to be shown.

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

@@ -11,6 +11,12 @@ import {
   GlobalStatusInfoExampleManipulate3,
 } from 'Docs/uilib/components/global-status/Examples'
 
+## Import
+
+```tsx
+import { GlobalStatus } from '@dnb/eufemia'
+```
+
 ## Description
 
 The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form ( displaying form errors, messages etc. ).

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

@@ -9,6 +9,12 @@ import {
   HeadingInfoBasic,
 } from 'Docs/uilib/components/heading/Examples'
 
+## Import
+
+```tsx
+import { Heading } from '@dnb/eufemia'
+```
+
 ## Description
 
 The Heading component is a helper to create automated semantic headings within a boundary of the web heading rules.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { HeightAnimation } from '@dnb/eufemia'
+```
+
 ## Description
 
 The HeightAnimation component calculates the height, and animates from `auto` to `auto` – or from `0` to `auto` in height – powered by CSS transition. It calculates the height on the fly.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { HelpButton } from '@dnb/eufemia'
+```
+
 ## Description
 
 A help button with custom semantics, helping screen readers determine the meaning of that button. For the visual part, it is a default [icon button](/uilib/components/button#icon-button) with the `question` icon as a basis.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { IconPrimary } from '@dnb/eufemia'
+```
+
 ## Description
 
 The IconPrimary component loads by default all [Primary Icons](/icons/primary) so they can easily be included and used without additionally importing every icon.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { Icon } from '@dnb/eufemia'
+```
+
 ## Description
 
 The main Icon component is a wrapper for whatever icon you place within it. This means a `span` wrapping an inline `SVG`.

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

@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+## Import
+
+```tsx
+import { InfoCard } from '@dnb/eufemia'
+```
+
 ## Description
 
 The InfoCard is used to give the user more information than we can give in a [FormStatus](/uilib/components/form-status/) (message box). It can also be used to give useful tips.

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

@@ -12,6 +12,12 @@ import {
   InputMaskedExampleMulti,
 } from 'Docs/uilib/components/input-masked/Examples'
 
+## Import
+
+```tsx
+import { InputMasked } from '@dnb/eufemia'
+```
+
 ## Description
 
 The InputMasked component uses the basic [Input](/uilib/components/input) component, but with some additional masking functionality.

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

@@ -5,6 +5,12 @@ showTabs: true
 import * as Examples from './Examples'
 import { MultipleOneRow } from '../../extensions/forms/base-fields/String/Examples'
 
+## Import
+
+```tsx
+import { Input } from '@dnb/eufemia'
+```
+
 ## Description
 
 The input component is an umbrella component for all inputs which share the same style as the classic `text` input field.