@dnb/eufemia 10.0.0-beta.1 → 10.0.0-beta.2

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

@@ -1,4 +1,15 @@
 import * as React from 'react';
+import type { ButtonIconPosition } from '../button';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { IconPrimaryIcon, IconPrimarySize } from '../IconPrimary';
+import type { InputInputAttributes, InputInputElement } from '../Input';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type InputMaskedMask =
   | Record<string, unknown>
   | any[]
@@ -14,11 +25,6 @@ export type InputMaskedCurrencyMask =
 export type InputMaskedMaskOptions = string | Record<string, unknown>;
 export type InputMaskedNumberFormat = string | Record<string, unknown>;
 export type InputMaskedAsCurrency = string | boolean;
-export type InputMaskedAsNumber = string | boolean;
-export type InputMaskedAsPercent = string | boolean;
-export type InputMaskedShowMask = string | boolean;
-export type InputMaskedShowGuide = string | boolean;
-export type InputMaskedKeepCharPositions = string | boolean;
 export type InputMaskedSize =
   | 'default'
   | 'small'
@@ -26,40 +32,11 @@ export type InputMaskedSize =
   | 'large'
   | number;
 export type InputMaskedValue = string | number;
-export type InputMaskedLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type InputMaskedLabelDirection = 'horizontal' | 'vertical';
-export type InputMaskedLabelSrOnly = string | boolean;
-export type InputMaskedStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type InputMaskedStatusNoAnimation = string | boolean;
-export type InputMaskedClear = string | boolean;
-export type InputMaskedKeepPlaceholder = string | boolean;
 export type InputMaskedSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type InputMaskedAlign = 'left' | 'center' | 'right';
-export type InputMaskedSelectall = string | boolean;
-export type InputMaskedStretch = string | boolean;
-export type InputMaskedDisabled = string | boolean;
-export type InputMaskedSkeleton = string | boolean;
-export type InputMaskedInputAttributes = string | Record<string, unknown>;
-export type InputMaskedInputElement =
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type InputMaskedIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export type InputMaskedIconSize = string | number;
-export type InputMaskedIconPosition = 'left' | 'right';
-export type InputMaskedReadOnly = string | boolean;
 export type InputMaskedSubmitElement =
   | ((...args: any[]) => any)
   | React.ReactNode;
@@ -67,43 +44,12 @@ export type InputMaskedSubmitButtonIcon =
   | string
   | React.ReactNode
   | ((...args: any[]) => any);
-export type InputMaskedSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type InputMaskedTop = string | number | boolean;
-export type InputMaskedRight = string | number | boolean;
-export type InputMaskedBottom = string | number | boolean;
-export type InputMaskedLeft = string | number | boolean;
 export type InputMaskedChildren =
   | React.ReactNode
   | ((...args: any[]) => any);
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
+export interface InputMaskedProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * A mask can be defined both as a <a href="https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme">RegExp style of characters</a> or a callback function. Example below.
    */
@@ -142,28 +88,28 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   /**
    * Set to `true` to automatically set a number mask based on the given or inherited locale.
    */
-  as_number?: InputMaskedAsNumber;
+  as_number?: boolean;
 
   /**
    * Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale.
    */
-  as_percent?: InputMaskedAsPercent;
+  as_percent?: boolean;
 
   /**
    * Show mask when input is empty and has no focus. Defaults to `false`.
    */
-  show_mask?: InputMaskedShowMask;
+  show_mask?: boolean;
 
   /**
    * When `false` is given, it doesn&#39;t print out placeholder characters and only adds mask characters when the user reaches them as they&#39;re typing. Defaults to `true`.
    */
-  show_guide?: InputMaskedShowGuide;
+  show_guide?: boolean;
   pipe?: (...args: any[]) => any;
 
   /**
    * When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`.
    */
-  keep_char_positions?: InputMaskedKeepCharPositions;
+  keep_char_positions?: boolean;
 
   /**
    * The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space.
@@ -216,33 +162,33 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   /**
    * Prepends the Form Label component. If no ID is provided, a random ID is created.
    */
-  label?: InputMaskedLabel;
+  label?: FormLabelText;
 
   /**
    * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`
    */
-  label_direction?: InputMaskedLabelDirection;
+  label_direction?: FormLabelLabelDirection;
 
   /**
    * Use `true` to make the label only readable by screen readers.
    */
-  label_sr_only?: InputMaskedLabelSrOnly;
+  label_sr_only?: boolean;
 
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */
-  status?: InputMaskedStatus;
+  status?: FormStatusText;
 
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
-  status_state?: string;
+  status_state?: FormStatusState;
 
   /**
    * Use an object to define additional FormStatus properties.
    */
-  status_props?: Record<string, unknown>;
-  status_no_animation?: InputMaskedStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`.
@@ -273,12 +219,12 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, then a clear button will be shown which lets the user clear any given input value.
    */
-  clear?: InputMaskedClear;
+  clear?: boolean;
 
   /**
    * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
    */
-  keep_placeholder?: InputMaskedKeepPlaceholder;
+  keep_placeholder?: boolean;
 
   /**
    * 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.
@@ -293,18 +239,18 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   /**
    * 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.
    */
-  selectall?: InputMaskedSelectall;
+  selectall?: boolean;
 
   /**
    * If set to `true`, then the input field will be 100% in `width`.
    */
-  stretch?: InputMaskedStretch;
-  disabled?: InputMaskedDisabled;
+  stretch?: boolean;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: InputMaskedSkeleton;
+  skeleton?: SkeletonShow;
   class?: string;
 
   /**
@@ -315,28 +261,28 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   /**
    * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.
    */
-  input_attributes?: InputMaskedInputAttributes;
+  input_attributes?: InputInputAttributes;
 
   /**
    * <em>(internal)</em> by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.
    */
-  input_element?: InputMaskedInputElement;
+  input_element?: InputInputElement;
 
   /**
    * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.
    */
-  icon?: InputMaskedIcon;
+  icon?: IconPrimaryIcon;
 
   /**
    * The icon size of the icon shows. Defaults to `medium`.
    */
-  icon_size?: InputMaskedIconSize;
+  icon_size?: IconPrimarySize;
 
   /**
    * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.
    */
-  icon_position?: InputMaskedIconPosition;
-  readOnly?: InputMaskedReadOnly;
+  icon_position?: ButtonIconPosition;
+  readOnly?: boolean;
 
   /**
    * <em>(internal)</em> by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component.
@@ -350,31 +296,6 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   submit_button_variant?: any;
   submit_button_icon?: InputMaskedSubmitButtonIcon;
   submit_button_status?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: InputMaskedSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: InputMaskedTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: InputMaskedRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: InputMaskedBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: InputMaskedLeft;
   className?: string;
   children?: InputMaskedChildren;
   on_state_update?: (...args: any[]) => any;

package/cjs/components/input-masked/InputMasked.js

@@ -33,7 +33,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-const InputMasked = _react.default.forwardRef((props, ref) => {
+const InputMasked = props => {
   const context = _react.default.useContext(_Context.default);
 
   if (props !== null && props !== void 0 && props.mask) {
@@ -50,12 +50,11 @@ const InputMasked = _react.default.forwardRef((props, ref) => {
 
   return _react.default.createElement(_InputMaskedContext.default.Provider, {
     value: {
-      inner_ref: ref,
       props: contextAndProps,
       context
     }
   }, _InputMaskedElement || (_InputMaskedElement = _react.default.createElement(_InputMaskedElement2.default, null)));
-});
+};
 
 var _default = InputMasked;
 exports.default = _default;

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

@@ -2,7 +2,6 @@ export function useFilteredProps(): {
     props: any;
     htmlAttributes: any;
 };
-export function useInputElementRef(): any;
 export function useLocale(): any;
 export function useLocalValue(): {
     localValue: string;

package/cjs/components/input-masked/InputMaskedHooks.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useNumberMask = exports.useMaskParams = exports.useMask = exports.useLocale = exports.useLocalValue = exports.useInputElementRef = exports.useInputElement = exports.useFilteredProps = exports.useEventMapping = void 0;
+exports.useNumberMask = exports.useMaskParams = exports.useMask = exports.useLocale = exports.useLocalValue = exports.useInputElement = exports.useFilteredProps = exports.useEventMapping = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -72,18 +72,6 @@ const useFilteredProps = () => {
 
 exports.useFilteredProps = useFilteredProps;
 
-const useInputElementRef = () => {
-  var _props$inner_ref;
-
-  const {
-    props
-  } = _react.default.useContext(_InputMaskedContext.default);
-
-  return typeof (props === null || props === void 0 ? void 0 : (_props$inner_ref = props.inner_ref) === null || _props$inner_ref === void 0 ? void 0 : _props$inner_ref.current) !== 'undefined' ? props === null || props === void 0 ? void 0 : props.inner_ref : _react.default.createRef();
-};
-
-exports.useInputElementRef = useInputElementRef;
-
 const useLocale = () => {
   const {
     props,
@@ -207,8 +195,6 @@ const useMaskParams = () => {
 exports.useMaskParams = useMaskParams;
 
 const useInputElement = () => {
-  const ref = useInputElementRef();
-
   const {
     props
   } = _react.default.useContext(_InputMaskedContext.default);
@@ -224,6 +210,10 @@ const useInputElement = () => {
     keepCharPositions
   } = useMaskParams();
 
+  const _ref = _react.default.useRef();
+
+  const ref = (props === null || props === void 0 ? void 0 : props.inner_ref) || _ref;
+
   const inputElementRef = _react.default.useRef(_react.default.createElement("input", {
     ref: ref
   }));
@@ -254,10 +244,10 @@ const useInputElement = () => {
 
 exports.useInputElement = useInputElement;
 
-const useEventMapping = _ref => {
+const useEventMapping = _ref2 => {
   let {
     setLocalValue
-  } = _ref;
+  } = _ref2;
   const callEvent = useCallEvent({
     setLocalValue
   });
@@ -283,10 +273,10 @@ const useEventMapping = _ref => {
 
 exports.useEventMapping = useEventMapping;
 
-const useCallEvent = _ref2 => {
+const useCallEvent = _ref3 => {
   let {
     setLocalValue
-  } = _ref2;
+  } = _ref3;
 
   const {
     props
@@ -297,11 +287,11 @@ const useCallEvent = _ref2 => {
   const decimalSeparators = /[,.'·]/;
   let isUnidentified = false;
 
-  const callEvent = (_ref3, name) => {
+  const callEvent = (_ref4, name) => {
     let {
       event,
       value
-    } = _ref3;
+    } = _ref4;
     value = value || event.target.value;
     const selStart = event.target.selectionStart;
     let keyCode = (0, _keycode.default)(event);

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

@@ -11,10 +11,6 @@ export type TextMaskInputElement =
   | React.ReactNode
   | ((...args: any[]) => any);
 export type TextMaskValue = string | number;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface TextMaskProps extends React.HTMLProps<HTMLElement> {
   mask: TextMaskMask;
   inputRef?: Record<string, unknown>;

package/cjs/components/logo/Logo.d.ts

@@ -1,42 +1,12 @@
 import * as React from 'react';
+import type { SpacingProps } from '../space/types';
 export type LogoSize = number | string;
 export type LogoRatio = number | string;
 export type LogoWidth = number | string;
 export type LogoHeight = number | string;
-export type LogoSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type LogoTop = string | number | boolean;
-export type LogoRight = string | number | boolean;
-export type LogoBottom = string | number | boolean;
-export type LogoLeft = string | number | boolean;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface LogoProps extends React.HTMLProps<HTMLElement> {
+export interface LogoProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto`
    */
@@ -64,31 +34,6 @@ export interface LogoProps extends React.HTMLProps<HTMLElement> {
    */
   inherit_color?: boolean;
   class?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: LogoSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: LogoTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: LogoRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: LogoBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: LogoLeft;
   className?: string;
 }
 export default class Logo extends React.Component<LogoProps, any> {

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

@@ -10,7 +10,7 @@ import ModalHeader from './parts/ModalHeader';
 import ModalHeaderBar from './parts/ModalHeaderBar';
 import { ScrollViewAllProps } from '../../fragments/scroll-view/ScrollView';
 import CloseButton from './parts/CloseButton';
-import { SpacingProps } from '../../shared/types';
+import type { SpacingProps } from '../../shared/types';
 import { ToCamelCasePartial } from '../../shared/helpers/withCamelCaseProps';
 export declare const ANIMATION_DURATION = 300;
 interface ModalState {

package/cjs/components/modal/ModalContent.js

@@ -21,7 +21,8 @@ var _helpers = require("../../shared/helpers");
 
 var _helpers2 = require("./helpers");
 
-const _excluded = ["triggeredBy"];
+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"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -316,7 +317,8 @@ class ModalContent extends _react.default.PureComponent {
   }
 
   render() {
-    const {
+    const _this$props2 = this.props,
+          {
       hide,
       title,
       labelled_by,
@@ -335,7 +337,9 @@ class ModalContent extends _react.default.PureComponent {
       content_id,
       children,
       dialog_role = null
-    } = this.props;
+    } = _this$props2,
+          rest = _objectWithoutProperties(_this$props2, _excluded2);
+
     const {
       color
     } = this.state;
@@ -357,6 +361,9 @@ class ModalContent extends _react.default.PureComponent {
       onMouseDown: this.onContentMouseDownHandler,
       onClick: this.onContentClickHandler
     };
+    const content = typeof children === 'function' ? children(_objectSpread(_objectSpread({}, rest), {}, {
+      close
+    })) : children;
     return _react.default.createElement(_ModalContext.default.Provider, {
       value: {
         id: this.props.id,
@@ -379,9 +386,9 @@ class ModalContent extends _react.default.PureComponent {
       style: color ? {
         '--modal-background-color': `var(--color-${color})`
       } : null
-    }, contentParams), children), _react.default.createElement("span", {
+    }, contentParams), content), _react.default.createElement("span", {
       className: (0, _classnames.default)('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__overlay--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
-      "aria-hidden": "true"
+      "aria-hidden": true
     }));
   }
 

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

@@ -11,7 +11,7 @@ export interface ModalRootProps extends ModalContentProps {
      */
     id?: string;
     root_id?: string;
-    direct_dom_return?: string | boolean;
+    direct_dom_return?: boolean;
     /**
      * The content which will appear when triggering the modal/drawer.
      */

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

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { CloseButtonProps } from './parts/CloseButton';
 import { ButtonProps } from '../button/Button';
 import { ModalRootProps } from './ModalRoot';
-export declare type ExtendedBoolean = string | boolean;
 export declare type ReactChildType = React.ReactNode | ((...args: any[]) => any);
-export declare type ModalFullscreen = 'auto' | ExtendedBoolean;
+export declare type ModalFullscreen = 'auto' | boolean;
 export declare type ModalAlignContent = 'left' | 'center' | 'centered' | 'right';
 export declare type ModalContainerPlacement = 'left' | 'right' | 'top' | 'bottom';
 export declare type ModalOpenState = 'opened' | 'closed' | boolean;
@@ -20,7 +19,7 @@ export interface ModalProps extends ModalRootProps {
     /**
      * Will disable the trigger button
      */
-    disabled?: ExtendedBoolean;
+    disabled?: boolean;
     /**
      * Forces the modal/drawer to delay the opening. The delay is given in `ms`.
      */
@@ -28,7 +27,7 @@ export interface ModalProps extends ModalRootProps {
     /**
      * If set to `true` (boolean or string), then the user can't close the modal/drawer.
      */
-    prevent_close?: ExtendedBoolean;
+    prevent_close?: boolean;
     /**
      * Duration of animation open/close in ms. Defaults to 300ms.
      */
@@ -36,7 +35,7 @@ export interface ModalProps extends ModalRootProps {
     /**
      * If set to `true`, no open/close animation will be shown. Defaults to false.
      */
-    no_animation?: ExtendedBoolean;
+    no_animation?: boolean;
     /**
      * Use this prop to control the open/close state by setting either: `opened` / `closed` or `true` / `false`.
      */
@@ -93,9 +92,9 @@ export interface ModalProps extends ModalRootProps {
      */
     modal_content?: ReactChildType;
     /**
-     * If truthy, the drawer will not open in a new DOM but directly in current DOM. Defaults to `false`.
+     * If true, the drawer will not open in a new DOM but directly in current DOM. Defaults to `false`.
      */
-    direct_dom_return?: string | boolean;
+    direct_dom_return?: boolean;
     /**
      * To get the inner content Element, pass in your own React ref
      */
@@ -148,9 +147,9 @@ export interface ModalContentProps {
      */
     dialog_title?: string;
     /**
-     * If truthy, the close button will not be shown.
+     * If boolean, the close button will not be shown.
      */
-    hide_close_button?: ExtendedBoolean;
+    hide_close_button?: boolean;
     /**
      * Define any valid Eufemia Button property or HTML attribute inside an object.
      */
@@ -158,24 +157,24 @@ export interface ModalContentProps {
     /**
      * If set to `false` then the modal/drawer content will be shown without any spacing. Defaults to `true`.
      */
-    spacing?: ExtendedBoolean;
+    spacing?: boolean;
     /**
      * By default the modal/drawer content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior.
      */
-    prevent_core_style?: ExtendedBoolean;
+    prevent_core_style?: boolean;
     animation_duration?: string | number;
     /**
      * Disable clicking the background overlay to close the modal
      */
-    prevent_overlay_close?: ExtendedBoolean;
+    prevent_overlay_close?: boolean;
     /**
      * If set to `true`, no open/close animation will be shown. Defaults to false.
      */
-    no_animation?: ExtendedBoolean;
+    no_animation?: boolean;
     /**
      * Same as `no_animation`, but gets triggered only if the viewport width is less than `40em`. Defaults to false.
      */
-    no_animation_on_mobile?: ExtendedBoolean;
+    no_animation_on_mobile?: boolean;
     /**
      * The minimum Modal content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `min_width` so you don't break responsiveness. Defaults to `30rem` (average width is set to `60vw`).
      */