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

package/components/global-status/GlobalStatus.d.ts

@@ -1,64 +1,25 @@
 import * as React from 'react';
+import type { IconIcon, IconSize } from '../Icon';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type GlobalStatusTitle = React.ReactNode | boolean;
 export type GlobalStatusText =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type GlobalStatusItems = string | ((...args: any[]) => any) | any[];
-export type GlobalStatusIcon =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
 export type GlobalStatusState = 'error' | 'info';
 export type GlobalStatusShow = 'auto' | any | any | 'true' | 'false';
-export type GlobalStatusAutoscroll = string | boolean;
-export type GlobalStatusAutoclose = string | boolean;
-export type GlobalStatusNoAnimation = string | boolean;
 export type GlobalStatusDelay = string | number;
-export type GlobalStatusHideCloseButton = string | boolean;
-export type GlobalStatusOmitSetFocus = string | boolean;
-export type GlobalStatusOmitSetFocusOnUpdate = string | boolean;
-export type GlobalStatusSkeleton = string | boolean;
-export type GlobalStatusSpace =
-  | 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 GlobalStatusTop = string | number | boolean;
-export type GlobalStatusRight = string | number | boolean;
-export type GlobalStatusBottom = string | number | boolean;
-export type GlobalStatusLeft = string | number | boolean;
 export type GlobalStatusChildren =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
+export interface GlobalStatusProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
-   * The main ID. Defaults to the prop
+   * The main ID. Defaults to `main`.
    */
   id?: string;
   status_id?: string;
@@ -82,12 +43,12 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   /**
    * The icon shown before the status title. Defaults to `exclamation`.
    */
-  icon?: GlobalStatusIcon;
+  icon?: IconIcon;
 
   /**
    * The icon size of the title icon shows. Defaults to `medium`.
    */
-  icon_size?: string;
+  icon_size?: IconSize;
 
   /**
    * Defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`.
@@ -102,17 +63,17 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   /**
    * Set to `true` to automatically scroll the page to the appeared global status. Defaults to `true`.
    */
-  autoscroll?: GlobalStatusAutoscroll;
+  autoscroll?: boolean;
 
   /**
    * Set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`.
    */
-  autoclose?: GlobalStatusAutoclose;
+  autoclose?: boolean;
 
   /**
    * Set to `true` to disable the show/hide/slide/fade/grow/shrink animation. Defaults to `false`.
    */
-  no_animation?: GlobalStatusNoAnimation;
+  no_animation?: boolean;
 
   /**
    * Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.
@@ -127,81 +88,153 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   /**
    * Set to `true` if the close button should be hidden for the user. Defaults to `false`.
    */
-  hide_close_button?: GlobalStatusHideCloseButton;
+  hide_close_button?: boolean;
 
   /**
    * Set to `true` to omit setting the focus during visibility. Defaults to `false`. Additionally, there is `omit_set_focus_on_update` which is set to `true` by default.
    */
-  omit_set_focus?: GlobalStatusOmitSetFocus;
-  omit_set_focus_on_update?: GlobalStatusOmitSetFocusOnUpdate;
+  omit_set_focus?: boolean;
+  omit_set_focus_on_update?: boolean;
 
   /**
    * Defines the anchor text showing up after every item, in case there is a `status_id` defined. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition.
    */
   status_anchor_text?: React.ReactNode;
-  skeleton?: GlobalStatusSkeleton;
+  skeleton?: SkeletonShow;
+  class?: string;
+  className?: string;
 
   /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
-  space?: GlobalStatusSpace;
+  children?: GlobalStatusChildren;
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   * Gets triggered once the GlobalStatus is getting new content by the user. Returns `{ id, status_id, ...properties }`.
    */
-  top?: GlobalStatusTop;
+  on_adjust?: (...args: any[]) => any;
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   * Gets triggered the first time the GlobalStatus appears on the screen. In other words, it has to have been hidden before. Returns `{ id, status_id, ...properties }`.
    */
-  right?: GlobalStatusRight;
+  on_open?: (...args: any[]) => any;
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   * Gets triggered for the first time and for every new content update the GlobalStatus gets. Returns `{ id, status_id, ...properties }`.
    */
-  bottom?: GlobalStatusBottom;
+  on_show?: (...args: any[]) => any;
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   * Gets triggered once the GlobalStatus disappears from the screen. Works only if `no_animation` is not `true`. Returns `{ id, status_id, ...properties }`.
    */
-  left?: GlobalStatusLeft;
-  class?: string;
-  className?: string;
+  on_close?: (...args: any[]) => any;
+
+  /**
+   * Gets triggered once the GlobalStatus is getting closed/hidden by the user. Returns `{ id, status_id, ...properties }`.
+   */
+  on_hide?: (...args: any[]) => any;
+}
+export type GlobalStatusStatusId = string;
+export type GlobalStatusAddProps = {
+  /**
+   * The main ID. Defaults to `main`.
+   */
+  id: string;
+  status_id: GlobalStatusStatusId;
+
+  /**
+   * The title appears as a part of the status content. Use `false` to hide / remove the title and icon. Defaults to `En feil har skjedd`.
+   */
+  title?: string;
 
   /**
    * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
-  children?: GlobalStatusChildren;
+  text: string;
+  item: string;
 
   /**
-   * Gets triggered once the GlobalStatus is getting new content by the user. Returns `{ id, status_id, ...properties }`.
+   * Gets triggered once the GlobalStatus disappears from the screen. Works only if `no_animation` is not `true`. Returns `{ id, status_id, ...properties }`.
    */
-  on_adjust?: (...args: any[]) => any;
+  on_close: ({ status_id }: { status_id: GlobalStatusStatusId }) => void;
+};
+export type GlobalStatusUpdateProps = {
+  /**
+   * The main ID. Defaults to `main`.
+   */
+  id: string;
 
   /**
-   * Gets triggered the first time the GlobalStatus appears on the screen. In other words, it has to have been hidden before. Returns `{ id, status_id, ...properties }`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
-  on_open?: (...args: any[]) => any;
+  text: string;
+};
+export type GlobalStatusRemoveProps = {
+  /**
+   * The main ID. Defaults to `main`.
+   */
+  id: string;
+  status_id: GlobalStatusStatusId;
+};
+export type GlobalStatusInterceptorProps = {
+  /**
+   * The main ID. Defaults to `main`.
+   */
+  id: string;
+
+  /**
+   * The title appears as a part of the status content. Use `false` to hide / remove the title and icon. Defaults to `En feil har skjedd`.
+   */
+  title: string;
+
+  /**
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
+   */
+  text: string;
+  status_id: GlobalStatusStatusId;
 
+  /**
+   * Set to `true` or `false` to manually make the global status visible. Defaults to `true`.
+   */
+  show: boolean;
+};
+export type GlobalStatusInterceptorUpdateEvents = {
   /**
    * Gets triggered for the first time and for every new content update the GlobalStatus gets. Returns `{ id, status_id, ...properties }`.
    */
-  on_show?: (...args: any[]) => any;
+  on_show?: () => void;
+
+  /**
+   * Gets triggered once the GlobalStatus is getting closed/hidden by the user. Returns `{ id, status_id, ...properties }`.
+   */
+  on_hide?: () => void;
 
   /**
    * Gets triggered once the GlobalStatus disappears from the screen. Works only if `no_animation` is not `true`. Returns `{ id, status_id, ...properties }`.
    */
-  on_close?: (...args: any[]) => any;
+  on_close?: () => void;
 
   /**
-   * Gets triggered once the GlobalStatus is getting closed/hidden by the user. Returns `{ id, status_id, ...properties }`.
+   * Set to `true` or `false` to manually make the global status visible. Defaults to `true`.
    */
-  on_hide?: (...args: any[]) => any;
-}
+  show?: boolean;
+};
+export type GlobalStatusInterceptor = {
+  update: (props: GlobalStatusInterceptorUpdateEvents) => void;
+  remove: () => void;
+};
 export default class GlobalStatus extends React.Component<
   GlobalStatusProps,
   any
 > {
   static defaultProps: object;
+  static create: (
+    props: GlobalStatusInterceptorProps
+  ) => GlobalStatusInterceptor;
+  static Add: (props: GlobalStatusAddProps) => JSX.Element;
+  static Update: (
+    props: GlobalStatusUpdateProps
+  ) => GlobalStatusInterceptor;
+  static Remove: (props: GlobalStatusRemoveProps) => JSX.Element;
   render(): JSX.Element;
 }

package/components/global-status/GlobalStatusController.d.ts

@@ -1,17 +1,12 @@
 import * as React from 'react';
-export type GlobalStatusControllerRemoveOnUnmount = string | 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 GlobalStatusControllerProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * The main ID. Defaults to the prop
+   * The main ID. Defaults to `main`.
    */
   id?: string;
   status_id?: string;
-  remove_on_unmount?: GlobalStatusControllerRemoveOnUnmount;
+  remove_on_unmount?: boolean;
 }
 export default class GlobalStatusController extends React.Component<
   GlobalStatusControllerProps,
@@ -20,13 +15,9 @@ export default class GlobalStatusController extends React.Component<
   static defaultProps: object;
   render(): JSX.Element;
 }
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface GlobalStatusRemoveProps {
   /**
-   * The main ID. Defaults to the prop
+   * The main ID. Defaults to `main`.
    */
   id?: string;
   status_id: string;

package/components/heading/Heading.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type HeadingText = React.ReactNode | ((...args: any[]) => any);
 export type HeadingSize =
   | 'auto'
@@ -10,50 +12,13 @@ export type HeadingSize =
   | 'small'
   | 'x-small';
 export type HeadingLevel = number | string;
-export type HeadingIncrease = string | boolean;
-export type HeadingDecrease = string | boolean;
-export type HeadingUp = string | boolean;
-export type HeadingDown = string | boolean;
 export type HeadingDebug = boolean | ((...args: any[]) => any);
 export type HeadingDebugCounter = boolean | ((...args: any[]) => any);
-export type HeadingInherit = string | boolean;
-export type HeadingReset = number | string | boolean;
-export type HeadingSkeleton = string | boolean;
-export type HeadingSpace =
-  | 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 HeadingTop = string | number | boolean;
-export type HeadingRight = string | number | boolean;
-export type HeadingBottom = string | number | boolean;
-export type HeadingLeft = string | number | boolean;
+export type HeadingReset = number | boolean;
 export type HeadingChildren = 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 HeadingProps extends React.HTMLProps<HTMLElement> {
+export interface HeadingProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   id?: string;
   group?: string;
 
@@ -69,77 +34,52 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   level?: HeadingLevel;
 
   /**
-   * If set to true, the heading level will be incremented by 1.
+   * If set to `true`, the heading level will be incremented by 1.
    */
-  increase?: HeadingIncrease;
+  increase?: boolean;
 
   /**
-   * If set to true, the heading level will be decremented by 1.
+   * If set to `true`, the heading level will be decremented by 1.
    */
-  decrease?: HeadingDecrease;
-  up?: HeadingUp;
-  down?: HeadingDown;
+  decrease?: boolean;
+  up?: boolean;
+  down?: boolean;
 
   /**
-   * If set to true, the heading will not be corrected and warnings will not be shown. Warnings do not show up in "production builds" else either.
+   * If set to `true`, the heading will not be corrected and warnings will not be shown. Warnings do not show up in "production builds" else either.
    */
   skip_correction?: boolean;
 
   /**
-   * If set to true, the content will have a prefix, showing the heading level.
+   * If set to `true`, the content will have a prefix, showing the heading level.
    */
   debug?: HeadingDebug;
 
   /**
-   * If set to true, the content will have both a prefix and a JSON log attached to both headings and level contexts.
+   * If set to `true`, the content will have both a prefix and a JSON log attached to both headings and level contexts.
    */
   debug_counter?: HeadingDebugCounter;
   counter?: any;
 
   /**
-   * If set to true, the heading last used level will be inherited. Also from inside a level context.
+   * If set to `true`, the heading last used level will be inherited. Also from inside a level context.
    */
-  inherit?: HeadingInherit;
+  inherit?: boolean;
 
   /**
-   * If set to true, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. `reset(1)`.
+   * If set to `true`, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. `reset(1)`.
    */
   reset?: HeadingReset;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: HeadingSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * Define what HTML element should be used. If you use, e.g. a `span`, then `role="heading"` and `aria-level` gets set. Defaults to semantic heading element.
    */
   element?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: HeadingSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: HeadingTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: HeadingRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: HeadingBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: HeadingLeft;
   class?: string;
   className?: string;
 
@@ -150,5 +90,16 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
 }
 export default class Heading extends React.Component<HeadingProps, any> {
   static defaultProps: object;
+  static Level: (props: HeadingProps) => JSX.Element;
+  static Increase: (props: HeadingProps) => JSX.Element;
+  static Decrease: (props: HeadingProps) => JSX.Element;
   render(): JSX.Element;
 }
+export const setNextLevel = (
+  level: any,
+  { overwriteContext: boolean } = {}
+) => any;
+export const resetLevels = (
+  level: any,
+  { overwriteContext: boolean } = {}
+) => any;

package/components/heading/HeadingProvider.d.ts

@@ -1,15 +1,6 @@
 import * as React from 'react';
 export type HeadingProviderLevel = number | string;
-export type HeadingProviderIncrease = string | boolean;
-export type HeadingProviderDecrease = string | boolean;
-export type HeadingProviderUp = string | boolean;
-export type HeadingProviderDown = string | boolean;
-export type HeadingProviderInherit = string | boolean;
-export type HeadingProviderReset = number | string | boolean;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
+export type HeadingProviderReset = number | boolean;
 export interface HeadingProviderProps
   extends React.HTMLProps<HTMLElement> {
   id?: string;
@@ -17,25 +8,25 @@ export interface HeadingProviderProps
   level?: HeadingProviderLevel;
 
   /**
-   * If set to true, the heading level will be incremented by 1.
+   * If set to `true`, the heading level will be incremented by 1.
    */
-  increase?: HeadingProviderIncrease;
+  increase?: boolean;
 
   /**
-   * If set to true, the heading level will be decremented by 1.
+   * If set to `true`, the heading level will be decremented by 1.
    */
-  decrease?: HeadingProviderDecrease;
-  up?: HeadingProviderUp;
-  down?: HeadingProviderDown;
+  decrease?: boolean;
+  up?: boolean;
+  down?: boolean;
 
   /**
-   * If set to true, the heading last used level will be inherited. Also from inside a level context.
+   * If set to `true`, the heading last used level will be inherited. Also from inside a level context.
    */
-  inherit?: HeadingProviderInherit;
+  inherit?: boolean;
   counter?: any;
 
   /**
-   * If set to true, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. `reset(1)`.
+   * If set to `true`, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. `reset(1)`.
    */
   reset?: HeadingProviderReset;
 

package/components/height-animation/HeightAnimation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SpacingProps } from '../../shared/types';
+import type { SpacingProps } from '../../shared/types';
 import { useHeightAnimationOptions } from './useHeightAnimation';
 import type { DynamicElement } from '../../shared/types';
 export declare type HeightAnimationProps = {

package/components/icon/Icon.d.ts

@@ -1,50 +1,18 @@
 import * as React from 'react';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type IconIcon =
   | string
   | React.ReactNode
   | ((...args: any[]) => any);
 export type IconSize = number | string | 'default' | 'medium' | 'large';
-export type IconSpace =
-  | 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 IconTop = string | number | boolean;
-export type IconRight = string | number | boolean;
-export type IconBottom = string | number | boolean;
-export type IconLeft = string | number | boolean;
 export type IconWidth = string | number;
 export type IconHeight = string | number;
-export type IconBorder = string | boolean;
-export type IconInheritColor = string | boolean;
-export type IconSkeleton = string | boolean;
 export type IconAttributes = string | Record<string, unknown>;
 export type IconChildren = 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 IconProps extends React.HTMLProps<HTMLElement> {
+export interface IconProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
    */
@@ -59,38 +27,13 @@ export interface IconProps extends React.HTMLProps<HTMLElement> {
    * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.
    */
   size?: IconSize;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: IconSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: IconTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: IconRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: IconBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: IconLeft;
   width?: IconWidth;
   height?: IconHeight;
 
   /**
    * Use `true` to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of `+0.5em`.
    */
-  border?: IconBorder;
+  border?: boolean;
 
   /**
    * The color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the <a href="/uilib/usage/customisation/colors">colors table</a>, e.g. `var(--color-ocean-green)`. Default is no color, which means `--color-black-80`.
@@ -100,7 +43,7 @@ export interface IconProps extends React.HTMLProps<HTMLElement> {
   /**
    * Default to `true`. Set to `false` if you do not want to inherit the color by `currentColor`.
    */
-  inherit_color?: IconInheritColor;
+  inherit_color?: boolean;
 
   /**
    * The alternative label (text version) of the icon. Defaults to the imported icon name.
@@ -115,7 +58,7 @@ export interface IconProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: IconSkeleton;
+  skeleton?: SkeletonShow;
   attributes?: IconAttributes;
   className?: string;
   children?: IconChildren;