@dnb/eufemia 10.0.0-beta.5 → 10.0.0-beta.6

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.0-beta.6](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.5...v10.0.0-beta.6) (2023-05-10)
+
+
+### :memo: Documentation
+
+* **Portal:** removes Modal's new status ([#2312](https://github.com/dnbexperience/eufemia/issues/2312)) ([38016b6](https://github.com/dnbexperience/eufemia/commit/38016b6b5fb9125e8f8358990849ee986642380f))
+* **v10:** add docs for HelpButton's modal_props ([#2314](https://github.com/dnbexperience/eufemia/issues/2314)) ([66132f4](https://github.com/dnbexperience/eufemia/commit/66132f4a1207e860d7ebccd1c7d586d468ac777e))
+* **v10:** add example for updating import of properties ([#2313](https://github.com/dnbexperience/eufemia/issues/2313)) ([c31c679](https://github.com/dnbexperience/eufemia/commit/c31c679b1c76cd98ed0cc94b6ee79b3ce7f70f6a))
+
+
+### :sparkles: Features
+
+* release of v10.0.0-beta.6 ([61bd05c](https://github.com/dnbexperience/eufemia/commit/61bd05cb9bc43632197811e46dfd8e795ce23bc3))
+
 ## [10.0.0-beta.5](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.4...v10.0.0-beta.5) (2023-05-08)
 
 

package/cjs/components/accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ButtonIconPosition } from '../button';
+import type { ButtonIconPosition } from '../Button';
 import type { HeadingLevel } from '../Heading';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';

package/cjs/components/accordion/AccordionHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ButtonIconPosition } from '../button';
+import type { ButtonIconPosition } from '../Button';
 import type { HeadingLevel } from '../Heading';
 import type { IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';

package/cjs/components/autocomplete/Autocomplete.d.ts

@@ -4,7 +4,7 @@ import type {
   DrawerListData,
   DrawerListOptionsRender
 } from '../../fragments/DrawerList';
-import type { ButtonIconPosition } from '../button';
+import type { ButtonIconPosition } from '../Button';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 import type {
   FormStatusProps,
@@ -29,7 +29,7 @@ type AutocompleteSubmitButtonIcon =
   | ((...args: any[]) => any);
 type AutocompleteInputRef =
   | ((...args: any[]) => any)
-  | Record<string, unknown>;
+  | React.MutableRefObject<HTMLInputElement | undefined>;
 type AutocompleteInputIcon =
   | string
   | React.ReactNode

package/cjs/components/dialog/parts/DialogHeader.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ModalHeaderProps } from '../../modal/parts/ModalHeader';
-interface DialogHeaderProps extends ModalHeaderProps {
+import type { SpacingProps } from '../../space/types';
+interface DialogHeaderProps extends ModalHeaderProps, SpacingProps {
     titleClass?: string;
 }
 export default function DialogHeader({ className, titleClass, size, ref, // eslint-disable-line

package/cjs/components/dropdown/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
-import type { ButtonIconPosition, ButtonVariant } from '../button';
+import type { ButtonIconPosition, ButtonVariant } from '../Button';
 import type {
   FormStatusProps,
   FormStatusState,

package/cjs/components/help-button/HelpButton.d.ts

@@ -3,7 +3,7 @@
  *
  */
 import React from 'react';
-import { ButtonProps } from '../button/Button';
+import type { ButtonProps } from '../button/Button';
 import { ModalProps } from '../modal/types';
 export declare type HelpButtonProps = {
     modal_content?: React.ReactNode;

package/cjs/components/input/Input.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ButtonIconPosition, ButtonVariant } from '../button';
+import type { ButtonIconPosition, ButtonVariant } from '../Button';
 import type {
   FormStatusProps,
   FormStatusState,

package/cjs/components/input-masked/InputMasked.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Locale } from '../../shared/Context';
-import type { ButtonIconPosition } from '../button';
+import type { ButtonIconPosition } from '../Button';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 import type {
   FormStatusProps,

package/cjs/components/modal/ModalContent.d.ts

@@ -33,6 +33,7 @@ export default class ModalContent extends React.PureComponent<ModalContentProps,
     _androidFocusTimeout: NodeJS.Timeout;
     _ii: InteractionInvalidation;
     _iiLocal: InteractionInvalidation;
+    static contextType: React.Context<import("../../shared/Context").ContextProps>;
     constructor(props: ModalContentProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/cjs/components/modal/ModalContent.js

@@ -21,6 +21,10 @@ var _helpers = require("../../shared/helpers");
 
 var _helpers2 = require("./helpers");
 
+var _Theme = require("../../shared/Theme");
+
+var _shared = require("../../shared");
+
 const _excluded = ["triggeredBy"],
       _excluded2 = ["hide", "title", "labelled_by", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "no_animation", "no_animation_on_mobile", "fullscreen", "container_placement", "close", "content_class", "overlay_class", "content_id", "children", "dialog_role"];
 
@@ -317,6 +321,8 @@ class ModalContent extends _react.default.PureComponent {
   }
 
   render() {
+    var _this$context;
+
     const _this$props2 = this.props,
           {
       hide,
@@ -357,7 +363,7 @@ class ModalContent extends _react.default.PureComponent {
       'aria-labelledby': (0, _componentHelper.combineLabelledBy)(this.props, title ? contentId + '-title' : null, labelled_by),
       'aria-describedby': (0, _componentHelper.combineDescribedBy)(this.props, contentId + '-content'),
       'aria-label': !title && !labelled_by ? dialog_title : undefined,
-      className: (0, _classnames.default)('dnb-modal__content', (0, _componentHelper.isTrue)(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', content_class, container_placement && `dnb-modal__content--${container_placement || 'right'}`),
+      className: (0, _classnames.default)('dnb-modal__content', (0, _componentHelper.isTrue)(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', (0, _Theme.getThemeClasses)((_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.theme), content_class, container_placement && `dnb-modal__content--${container_placement || 'right'}`),
       onMouseDown: this.onContentMouseDownHandler,
       onClick: this.onContentClickHandler
     };
@@ -394,4 +400,6 @@ class ModalContent extends _react.default.PureComponent {
 
 }
 
-exports.default = ModalContent;
+exports.default = ModalContent;
+
+_defineProperty(ModalContent, "contextType", _shared.Context);

package/cjs/components/modal/parts/CloseButton.d.ts

@@ -3,7 +3,7 @@
  *
  */
 import React from 'react';
-import { ButtonProps } from '../../button';
+import type { ButtonProps } from '../../button/Button';
 export declare type CloseButtonProps = {
     /**
      * The title of the close button. Defaults to <em>Close</em> or <em>Lukk</em>.

package/cjs/components/modal/types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { CloseButtonProps } from './parts/CloseButton';
-import { ButtonProps } from '../button/Button';
-import { ModalRootProps } from './ModalRoot';
+import type { CloseButtonProps } from './parts/CloseButton';
+import type { ButtonProps } from '../button/Button';
+import type { ModalRootProps } from './ModalRoot';
 export declare type ReactChildType = React.ReactNode | ((...args: any[]) => any);
 export declare type ModalFullscreen = 'auto' | boolean;
 export declare type ModalAlignContent = 'left' | 'center' | 'centered' | 'right';

package/cjs/components/pagination/Pagination.d.ts

@@ -34,170 +34,170 @@ type PaginationIndicatorElement =
   | ((...args: any[]) => any)
   | string;
 type PaginationChildren = React.ReactNode | ((...args: any[]) => any);
-interface PaginationProps
+export interface PaginationProps
   extends React.HTMLProps<HTMLElement>,
     SpacingProps {
   /**
    * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: PaginationStartupPage;
+
   /**
    * The page shown at the moment the component renders. Defaults to `1`.
    */
-
   current_page?: PaginationCurrentPage;
+
   /**
    * The total pages count. Defaults to `1`.
    */
-
   page_count?: PaginationPageCount;
+
   /**
    * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`.
    */
-
   startup_count?: PaginationStartupCount;
+
   /**
    * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`.
    */
-
   parallel_load_count?: PaginationParallelLoadCount;
+
   /**
    * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
-
   place_maker_before_content?: boolean;
+
   /**
    * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds.
    */
-
   min_wait_time?: PaginationMinWaitTime;
+
   /**
    * If set to `true`, all pagination bar buttons are disabled.
    */
-
   disabled?: boolean;
+
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-
   skeleton?: SkeletonShow;
+
   /**
    * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
    */
-
   mode?: PaginationMode;
+
   /**
    * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead.
    */
-
   use_load_button?: boolean;
   items?: PaginationItems;
+
   /**
    * If set to `true` no indicator will be shown.
    */
-
   hide_progress_indicator?: boolean;
+
   /**
    * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode.
    */
-
   set_content_handler?: PaginationSetContentHandler;
+
   /**
    * Callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content.
    */
-
   reset_content_handler?: PaginationResetContentHandler;
+
   /**
    * Callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states.
    */
-
   reset_pagination_handler?: PaginationResetPaginationHandler;
+
   /**
    * Callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown.
    */
-
   end_infinity_handler?: PaginationEndInfinityHandler;
+
   /**
    * By default a `<div>` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown.
    */
-
   page_element?: PaginationPageElement;
+
   /**
    * (infinity mode) is used by the <em>indicator</em>, <em>load more</em> bar as well as by the marker. Defaults to a `div`.
    */
-
   fallback_element?: PaginationFallbackElement;
+
   /**
    * (infinity mode) is used by the internal marker. Falls back to `fallback_element` if not defined.
    */
-
   marker_element?: PaginationMarkerElement;
+
   /**
    * (infinity mode) is used by the <em>indicator</em>. Falls back to `fallback_element` if not defined.
    */
-
   indicator_element?: PaginationIndicatorElement;
+
   /**
    * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
    */
-
   align?: string;
+
   /**
    * The title used in every button shown in the bar. Defaults to `Side %s`.
    */
-
   button_title?: string;
+
   /**
    * The title used in the previous page button. Defaults to `Forrige side`.
    */
-
   prev_title?: string;
+
   /**
    * The title used in the next page button. Defaults to `Neste side`.
    */
-
   next_title?: string;
+
   /**
    * The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`.
    */
-
   more_pages?: string;
+
   /**
    * Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`.
    */
-
   is_loading_text?: string;
+
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to `true`, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
-
   load_button_text?: string;
   class?: string;
   className?: string;
+
   /**
    * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section.
    */
-
   children?: PaginationChildren;
+
   /**
    * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details.
    */
-
   on_change?: (...args: any[]) => any;
+
   /**
    * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
    */
-
   on_startup?: (...args: any[]) => any;
+
   /**
    * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details.
    */
-
   on_load?: (...args: any[]) => any;
+
   /**
    * Only on "infinity" mode. Will be called once `page_count` is reached or `endInfinity` was called.
    */
-
   on_end?: (...args: any[]) => any;
 }
 export default class Pagination extends React.Component<

package/cjs/components/tooltip/TooltipPortal.js

@@ -13,6 +13,10 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _TooltipContainer = _interopRequireDefault(require("./TooltipContainer"));
 
+var _shared = require("../../shared");
+
+var _Theme = require("../../shared/Theme");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -45,12 +49,13 @@ function TooltipPortal(props) {
   const isInDOM = _react.default.useRef(false);
 
   const hasGroup = props.group;
+  const theme = (0, _shared.useTheme)();
 
   const makePortal = () => {
     if (!tooltipPortal[id]) {
       tooltipPortal[id] = {
         count: 0,
-        node: hasGroup ? createGroupElement(id) : createRootElement()
+        node: hasGroup ? createGroupElement(theme, id) : createRootElement(theme)
       };
     }
   };
@@ -76,7 +81,7 @@ function TooltipPortal(props) {
         if (hasGroup) {
           _reactDom.default.unmountComponentAtNode(ref.node);
 
-          createRootElement().removeChild(ref.node);
+          createRootElement(theme).removeChild(ref.node);
         }
 
         delete tooltipPortal[id];
@@ -169,20 +174,24 @@ function TooltipPortal(props) {
 var _default = TooltipPortal;
 exports.default = _default;
 
-const createGroupElement = id => {
+const createGroupElement = (theme, id) => {
   try {
     const elem = document.createElement('div');
     elem.classList.add('dnb-tooltip__group');
     elem.setAttribute('id', id);
-    createRootElement().appendChild(elem);
+    createRootElement(theme).appendChild(elem);
     return elem;
   } catch (e) {
     (0, _componentHelper.warn)(e);
   }
 };
 
-const createRootElement = function () {
-  let className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'dnb-tooltip__portal';
+const createRootElement = function (theme) {
+  let className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  if (!className) {
+    className = 'dnb-tooltip__portal';
+  }
 
   try {
     const element = document.querySelector(`.${className}`);
@@ -194,6 +203,11 @@ const createRootElement = function () {
     const elem = document.createElement('div');
     elem.classList.add(className);
     elem.classList.add('dnb-core-style');
+
+    if (theme) {
+      elem.classList.add.call(elem.classList, ...(0, _Theme.getThemeClasses)(theme).split(' '));
+    }
+
     document.body.appendChild(elem);
     return elem;
   } catch (e) {

package/cjs/elements/div/Div.d.ts

@@ -3,6 +3,8 @@
  *
  */
 import React from 'react';
+import { SpacingProps } from '../../components/space/types';
+export declare type DivProps = SpacingProps & React.HTMLAttributes<HTMLElement>;
 declare const Div: React.ForwardRefExoticComponent<import("../../components/space/types").SpacingElementProps & {
     space?: import("../../components/space/types").SpaceType | import("../../components/space/types").SpacingElementProps;
 } & React.HTMLAttributes<HTMLElement> & React.RefAttributes<unknown>>;

package/cjs/fragments/drawer-list/DrawerList.js

@@ -16,6 +16,8 @@ var _keycode = _interopRequireDefault(require("keycode"));
 
 var _componentHelper = require("../../shared/component-helper");
 
+var _Theme = require("../../shared/Theme");
+
 var _SpacingHelper = require("../../components/space/SpacingHelper");
 
 var _DrawerListContext = _interopRequireDefault(require("./DrawerListContext"));
@@ -144,6 +146,8 @@ class DrawerListInstance extends _react.default.PureComponent {
   }
 
   render() {
+    var _this$context2;
+
     const props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, DrawerList.defaultProps, this.context.getTranslation(this.props).DrawerList);
 
     const {
@@ -299,7 +303,7 @@ class DrawerListInstance extends _react.default.PureComponent {
       include_owner_width: align_drawer === 'right',
       independent_width: (0, _componentHelper.isTrue)(independent_width),
       fixed_position: (0, _componentHelper.isTrue)(fixed_position),
-      className: portal_class
+      className: (0, _Theme.getThemeClasses)((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.theme, portal_class)
     }, mainList) : mainList);
   }
 

package/cjs/shared/Eufemia.js

@@ -9,7 +9,7 @@ function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '10.0.0-beta.5';
+        return '10.0.0-beta.6';
       }
 
     }

package/cjs/shared/Theme.d.ts

@@ -13,7 +13,15 @@ export declare type ThemeProps = {
     variant?: ThemeVariants;
     size?: ThemeSizes;
     colorMapping?: ColorMapping;
-    element?: DynamicElement;
+    element?: DynamicElement | false;
 };
 export declare type ThemeAllProps = ThemeProps & React.HTMLAttributes<HTMLElement>;
 export default function Theme(themeProps: ThemeAllProps): JSX.Element;
+export declare function ThemeWrapper({ children, theme, element, className, ...rest }: {
+    [x: string]: any;
+    children: any;
+    theme: any;
+    element?: any;
+    className?: any;
+}): any;
+export declare function getThemeClasses(theme: ThemeProps, className?: any): any;

package/cjs/shared/Theme.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ThemeWrapper = ThemeWrapper;
 exports.default = Theme;
+exports.getThemeClasses = getThemeClasses;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,19 +15,15 @@ var _Context = _interopRequireDefault(require("./Context"));
 
 var _Provider = _interopRequireDefault(require("./Provider"));
 
-const _excluded = ["children", "element"],
-      _excluded2 = ["name", "variant", "size", "colorMapping"];
+var _componentHelper = require("./component-helper");
+
+const _excluded = ["children", "element", "name", "variant", "size", "colorMapping"],
+      _excluded2 = ["children", "theme", "element", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -35,45 +33,72 @@ function Theme(themeProps) {
 
   const {
     children,
-    element
+    element,
+    name,
+    variant,
+    size,
+    colorMapping
   } = themeProps,
-        theme = _objectWithoutProperties(themeProps, _excluded);
-
-  const currentTheme = _objectSpread(_objectSpread({}, context === null || context === void 0 ? void 0 : context.theme), theme);
+        restProps = _objectWithoutProperties(themeProps, _excluded);
 
+  const theme = (0, _componentHelper.extendPropsWithContext)({
+    name,
+    variant,
+    size,
+    colorMapping
+  }, null, context === null || context === void 0 ? void 0 : context.theme);
   return _react.default.createElement(_Provider.default, {
-    theme: currentTheme
-  }, _react.default.createElement(ThemeWrapper, {
+    theme: theme
+  }, _react.default.createElement(ThemeWrapper, _extends({
     element: element,
-    currentTheme: currentTheme
-  }, children));
+    theme: theme
+  }, restProps), children));
 }
 
 function ThemeWrapper(_ref) {
   let {
     children,
-    element,
-    currentTheme
-  } = _ref;
-
-  const {
-    name,
-    variant,
-    size,
-    colorMapping
-  } = currentTheme,
-        rest = _objectWithoutProperties(currentTheme, _excluded2);
+    theme,
+    element = null,
+    className = null
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded2);
 
-  const Wrapper = element || 'div';
+  const Wrapper = element === false ? _react.default.Fragment : element || 'div';
 
   const ref = _react.default.useRef(null);
 
+  if (Wrapper === _react.default.Fragment) {
+    return children;
+  }
+
   rest['ref'] = ref;
-  const className = (0, _classnames.default)('eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), colorMapping && `eufemia-theme__color-mapping--${colorMapping}`, size && `eufemia-theme__size--${size}`);
+  const classNames = getThemeClasses(theme, className);
+  const {
+    name,
+    variant,
+    size
+  } = theme;
   return _react.default.createElement(Wrapper, _extends({
     "data-name": name,
     "data-variant": variant,
     "data-size": size,
-    className: className
+    className: classNames
   }, rest), children);
+}
+
+function getThemeClasses(theme) {
+  let className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  if (!theme) {
+    return className;
+  }
+
+  const {
+    name,
+    variant,
+    size,
+    colorMapping
+  } = theme;
+  return (0, _classnames.default)(className, 'eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), colorMapping && `eufemia-theme__color-mapping--${colorMapping}`, size && `eufemia-theme__size--${size}`);
 }

package/components/accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ButtonIconPosition } from '../button';
+import type { ButtonIconPosition } from '../Button';
 import type { HeadingLevel } from '../Heading';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';

package/components/accordion/AccordionHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ButtonIconPosition } from '../button';
+import type { ButtonIconPosition } from '../Button';
 import type { HeadingLevel } from '../Heading';
 import type { IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';