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

package/components/pagination/PaginationProvider.d.ts

@@ -2,17 +2,9 @@ import * as React from 'react';
 export type PaginationProviderStartupPage = string | number;
 export type PaginationProviderCurrentPage = string | number;
 export type PaginationProviderPageCount = 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 PaginationProviderRerender {
   current?: (...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 PaginationProviderStore {
   current?: Record<string, unknown> | ((...args: any[]) => any);
 }
@@ -28,10 +20,6 @@ export type PaginationProviderChildren =
   | React.ReactNode
   | Record<string, unknown>
   | 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 PaginationProviderProps
   extends React.HTMLProps<HTMLElement> {
   /**

package/components/pagination/style/themes/dnb-pagination-theme-ui.css

@@ -18,19 +18,13 @@
 .dnb-pagination__indicator__inner {
   animation: show-page 300ms ease-out forwards;
 }
-.dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):hover, .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):hover {
+.dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]), .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]) {
   background-color: var(--color-emerald-green);
   color: var(--color-mint-green);
 }
-.dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus {
+html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus {
   color: var(--color-emerald-green);
   background-color: var(--color-mint-green);
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus {
-  --border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
-  border-color: transparent;
 }
 
 .dnb-pagination__dots {

package/components/pagination/style/themes/dnb-pagination-theme-ui.min.css

@@ -1 +1 @@
-.dnb-pagination__loadbar,.dnb-pagination__page{min-height:6rem}.dnb-pagination__bar{margin-bottom:1rem;margin-top:1rem}.dnb-pagination__indicator{min-height:inherit}.dnb-pagination__indicator__inner{animation:show-page .3s ease-out forwards}.dnb-core-style .dnb-pagination__button.dnb-button--primary,.dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):hover,.dnb-pagination__button.dnb-button--primary,.dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):hover{background-color:var(--color-emerald-green);color:var(--color-mint-green)}.dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus,.dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green);outline:none}html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-pagination__dots{color:var(--color-black-55)}@keyframes show-page{0%{opacity:.1;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translateZ(0)}}
+.dnb-pagination__loadbar,.dnb-pagination__page{min-height:6rem}.dnb-pagination__bar{margin-bottom:1rem;margin-top:1rem}.dnb-pagination__indicator{min-height:inherit}.dnb-pagination__indicator__inner{animation:show-page .3s ease-out forwards}.dnb-core-style .dnb-pagination__button.dnb-button--primary,.dnb-core-style .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]),.dnb-pagination__button.dnb-button--primary,.dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]){background-color:var(--color-emerald-green);color:var(--color-mint-green)}html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus,html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus{background-color:var(--color-mint-green);color:var(--color-emerald-green)}.dnb-pagination__dots{color:var(--color-black-55)}@keyframes show-page{0%{opacity:.1;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translateZ(0)}}

package/components/pagination/style/themes/dnb-pagination-theme-ui.scss

@@ -28,16 +28,15 @@
   @at-root .dnb-core-style &__button.dnb-button--primary,
     &__button.dnb-button--primary {
     &,
-    &:not([disabled], :active):hover {
+    &:not(:active):hover:not([disabled]) {
       background-color: var(--color-emerald-green);
       color: var(--color-mint-green);
     }
 
-    &:not([disabled], :active, :hover):focus {
+    html[data-whatinput='keyboard']
+      &:not([disabled]):not(:active):not(:hover):focus {
       color: var(--color-emerald-green);
       background-color: var(--color-mint-green);
-
-      @include fakeFocus(null, var(--color-emerald-green));
     }
   }
 

package/components/progress-indicator/ProgressIndicator.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-export type ProgressIndicatorVisible = string | boolean;
+import type { SectionSpacing, SectionStyleTypes } from '../Section';
+import type { SpacingProps } from '../space/types';
 export type ProgressIndicatorType = 'circular' | 'linear';
-export type ProgressIndicatorNoAnimation = string | boolean;
 export type ProgressIndicatorSize =
   | 'default'
   | 'small'
@@ -9,49 +9,16 @@ export type ProgressIndicatorSize =
   | 'large'
   | 'huge';
 export type ProgressIndicatorProgress = string | number;
-export type ProgressIndicatorShowLabel = string | boolean;
-export type ProgressIndicatorSpace =
-  | 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 ProgressIndicatorTop = string | number | boolean;
-export type ProgressIndicatorRight = string | number | boolean;
-export type ProgressIndicatorBottom = string | number | boolean;
-export type ProgressIndicatorLeft = string | number | boolean;
 export type ProgressIndicatorChildren =
   | 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 ProgressIndicatorProps
-  extends React.HTMLProps<HTMLElement> {
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
-   * Defines the visibility of the progress. Toggling the `visible` property to false will force a fade-out animation. Defaults to `true`.
+   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
    */
-  visible?: ProgressIndicatorVisible;
+  visible?: boolean;
 
   /**
    * Defines the "type" of progress, like `circular` or `linear`. Defaults to `circular`.
@@ -59,9 +26,9 @@ export interface ProgressIndicatorProps
   type?: ProgressIndicatorType;
 
   /**
-   * Disables the fade-in and fade-out animation. Defaults to false.
+   * Disables the fade-in and fade-out animation. Defaults to `false`.
    */
-  no_animation?: ProgressIndicatorNoAnimation;
+  no_animation?: boolean;
 
   /**
    * Defines the size, like `large` or `medium`. Defaults to `medium`.
@@ -86,48 +53,23 @@ export interface ProgressIndicatorProps
   /**
    * If set to `true` a default label will be shown.
    */
-  show_label?: ProgressIndicatorShowLabel;
+  show_label?: boolean;
   indicator_label?: string;
 
   /**
-   * To enable the visual helper `.dnb-section` class. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to null.
+   * To enable the visual helper `.dnb-section` class. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
-  section_style?: string;
+  section_style?: SectionStyleTypes;
 
   /**
-   * To modify the `spacing`. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to null.
+   * To modify the `spacing`. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
-  section_spacing?: string;
+  section_spacing?: SectionSpacing;
 
   /**
    * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
    */
   title?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: ProgressIndicatorSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: ProgressIndicatorTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: ProgressIndicatorRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: ProgressIndicatorBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: ProgressIndicatorLeft;
   class?: string;
   className?: string;
   children?: ProgressIndicatorChildren;

package/components/progress-indicator/ProgressIndicatorCircular.d.ts

@@ -1,9 +1,5 @@
 import * as React from 'react';
 export type ProgressIndicatorCircularProgress = 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 ProgressIndicatorCircularProps
   extends React.HTMLProps<HTMLElement> {
   /**
@@ -12,7 +8,7 @@ export interface ProgressIndicatorCircularProps
   size?: string;
 
   /**
-   * Defines the visibility of the progress. Toggling the `visible` property to false will force a fade-out animation. Defaults to `true`.
+   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
    */
   visible?: boolean;
   complete?: boolean;

package/components/progress-indicator/ProgressIndicatorLinear.d.ts

@@ -1,9 +1,5 @@
 import * as React from 'react';
 export type ProgressIndicatorLinearProgress = 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 ProgressIndicatorLinearProps
   extends React.HTMLProps<HTMLElement> {
   /**
@@ -12,7 +8,7 @@ export interface ProgressIndicatorLinearProps
   size?: string;
 
   /**
-   * Defines the visibility of the progress. Toggling the `visible` property to false will force a fade-out animation. Defaults to `true`.
+   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
    */
   visible?: boolean;
   complete?: boolean;

package/components/radio/Radio.d.ts

@@ -1,47 +1,27 @@
 import * as React from 'react';
+import {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 import RadioGroup from './RadioGroup';
 export type RadioLabel =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type RadioLabelSrOnly = string | boolean;
 export type RadioLabelPosition = 'left' | 'right';
-export type RadioChecked = string | boolean;
-export type RadioDisabled = string | boolean;
 export type RadioSize = 'default' | 'medium' | 'large';
-export type RadioStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type RadioStatusNoAnimation = string | boolean;
 export type RadioSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type RadioAttributes = string | Record<string, unknown>;
-export type RadioSkeleton = string | boolean;
-export type RadioReadOnly = string | boolean;
-export type RadioSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type RadioTop = string | number | boolean;
-export type RadioRight = string | number | boolean;
-export type RadioBottom = string | number | boolean;
-export type RadioLeft = string | number | boolean;
 export type RadioChildren = string | ((...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 RadioProps extends React.HTMLProps<HTMLElement> {
+export interface RadioProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.
    */
@@ -50,7 +30,7 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   /**
    * Use `true` to make the label only readable by screen readers.
    */
-  label_sr_only?: RadioLabelSrOnly;
+  label_sr_only?: boolean;
 
   /**
    * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
@@ -60,8 +40,8 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   /**
    * Determine whether the radio is checked or not. Default will be `false`.
    */
-  checked?: RadioChecked;
-  disabled?: RadioDisabled;
+  checked?: boolean;
+  disabled?: boolean;
   id?: string;
   element?: React.ReactNode;
 
@@ -78,17 +58,17 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   /**
    * 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?: RadioStatus;
+  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_props?: FormStatusProps;
   status_no_animation?: RadioStatusNoAnimation;
 
   /**
@@ -102,13 +82,8 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
    */
   value?: string;
   attributes?: RadioAttributes;
-  skeleton?: RadioSkeleton;
-  readOnly?: RadioReadOnly;
-  space?: RadioSpace;
-  top?: RadioTop;
-  right?: RadioRight;
-  bottom?: RadioBottom;
-  left?: RadioLeft;
+  skeleton?: SkeletonShow;
+  readOnly?: boolean;
   class?: string;
   className?: string;
   children?: RadioChildren;

package/components/radio/RadioGroup.d.ts

@@ -1,70 +1,46 @@
 import * as React from 'react';
-export type RadioGroupLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type RadioGroupLabelDirection = 'horizontal' | 'vertical';
-export type RadioGroupLabelSrOnly = string | boolean;
+import type {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type RadioGroupLabelPosition = 'left' | 'right';
-export type RadioGroupNoFieldset = string | boolean;
-export type RadioGroupDisabled = string | boolean;
-export type RadioGroupSkeleton = string | boolean;
 export type RadioGroupSize = 'default' | 'medium' | 'large';
-export type RadioGroupStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type RadioGroupStatusNoAnimation = string | boolean;
 export type RadioGroupSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type RadioGroupLayoutDirection = 'column' | 'row';
-export type RadioGroupVertical = string | boolean;
 export type RadioGroupAttributes = string | Record<string, unknown>;
-export type RadioGroupSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type RadioGroupTop = string | number | boolean;
-export type RadioGroupRight = string | number | boolean;
-export type RadioGroupBottom = string | number | boolean;
-export type RadioGroupLeft = string | number | boolean;
 export type RadioGroupChildren =
   | 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 RadioGroupProps extends React.HTMLProps<HTMLElement> {
+export interface RadioGroupProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Use either the `label` property or provide a custom one.
    */
-  label?: RadioGroupLabel;
-  label_direction?: RadioGroupLabelDirection;
+  label?: FormLabelText;
+  label_direction?: FormLabelLabelDirection;
 
   /**
    * Use `true` to make the label only readable by screen readers.
    */
-  label_sr_only?: RadioGroupLabelSrOnly;
+  label_sr_only?: boolean;
 
   /**
    * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
    */
   label_position?: RadioGroupLabelPosition;
   title?: string;
-  no_fieldset?: RadioGroupNoFieldset;
-  disabled?: RadioGroupDisabled;
-  skeleton?: RadioGroupSkeleton;
+  no_fieldset?: boolean;
+  disabled?: boolean;
+  skeleton?: SkeletonShow;
   id?: string;
   name?: string;
 
@@ -76,18 +52,18 @@ export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   /**
    * 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?: RadioGroupStatus;
+  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?: RadioGroupStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
@@ -95,18 +71,13 @@ export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   global_status_id?: string;
   suffix?: RadioGroupSuffix;
   layout_direction?: RadioGroupLayoutDirection;
-  vertical?: RadioGroupVertical;
+  vertical?: boolean;
 
   /**
    * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
    */
   value?: string;
   attributes?: RadioGroupAttributes;
-  space?: RadioGroupSpace;
-  top?: RadioGroupTop;
-  right?: RadioGroupRight;
-  bottom?: RadioGroupBottom;
-  left?: RadioGroupLeft;
   class?: string;
   className?: string;
   children?: RadioGroupChildren;

package/components/section/Section.d.ts

@@ -3,7 +3,7 @@
  *
  */
 import React from 'react';
-import { DynamicElement, SpacingProps } from '../../shared/types';
+import type { DynamicElement, SpacingProps } from '../../shared/types';
 export declare type SectionStyleTypes = 'divider' | 'white' | 'transparent' | 'lavender' | 'pistachio' | 'emerald-green' | 'sea-green' | 'fire-red' | 'fire-red-8' | 'sand-yellow' | 'black-3' | 'mint-green' | 'mint-green-12';
 export declare type SectionSpacing = boolean | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
 export declare type SectionProps = {

package/components/skeleton/Skeleton.d.ts

@@ -1,58 +1,27 @@
 import * as React from 'react';
-export type SkeletonShow = string | boolean;
-export type SkeletonNoAnimation = string | boolean;
+import type { SpacingProps } from '../space/types';
+export type SkeletonShow = boolean;
 export type SkeletonStyleType = 'lines' | string;
 export type SkeletonFigure =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type SkeletonSpace =
-  | 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 SkeletonTop = string | number | boolean;
-export type SkeletonRight = string | number | boolean;
-export type SkeletonBottom = string | number | boolean;
-export type SkeletonLeft = string | number | boolean;
 export type SkeletonChildren =
   | 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 SkeletonProps extends React.HTMLProps<HTMLElement> {
+export interface SkeletonProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.
    */
-  show?: SkeletonShow;
+  show?: boolean;
 
   /**
    * Use `true` to disable the animation.
    */
-  no_animation?: SkeletonNoAnimation;
+  no_animation?: boolean;
 
   /**
    * Defines the style type to use (`shine`). Defaults to `lines`.
@@ -78,36 +47,16 @@ export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
    * Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`
    */
   element?: React.ReactNode;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: SkeletonSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: SkeletonTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: SkeletonRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: SkeletonBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: SkeletonLeft;
   class?: string;
   className?: string;
   children?: SkeletonChildren;
 }
 export default class Skeleton extends React.Component<SkeletonProps, any> {
   static defaultProps: object;
+  static Exclude: ({
+    children
+  }: {
+    children: React.ReactNode;
+  }) => JSX.Element;
   render(): JSX.Element;
 }

package/components/skeleton/SkeletonHelper.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SkeletonShow } from './Skeleton';
+import type { SkeletonShow } from './Skeleton';
 export interface AutoSizeProps {
   __element?: React.ReactNode;
   children?: React.ReactNode;
@@ -37,6 +37,6 @@ export interface skeletonDOMAttributesContext {
 }
 export const skeletonDOMAttributes: (
   params: React.HTMLProps<HTMLElement>,
-  skeleton: boolean,
+  skeleton: SkeletonShow,
   context?: SkeletonContextProps
 ) => void;

package/components/skeleton/figures/Article.d.ts

@@ -4,10 +4,6 @@ export type SkeletonArticleChildren =
   | 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 SkeletonArticleProps
   extends React.HTMLProps<HTMLElement> {
   rows?: SkeletonArticleRows;

package/components/skeleton/figures/Circle.d.ts

@@ -4,10 +4,6 @@ export type SkeletonCircleChildren =
   | 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 SkeletonCircleProps extends React.HTMLProps<HTMLElement> {
   rows?: SkeletonCircleRows;
   children?: SkeletonCircleChildren;

package/components/skeleton/figures/Product.d.ts

@@ -4,10 +4,6 @@ export type SkeletonProductChildren =
   | 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 SkeletonProductProps
   extends React.HTMLProps<HTMLElement> {
   rows?: SkeletonProductRows;