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

package/CHANGELOG.md

@@ -3,6 +3,65 @@
 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.2](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.1...v10.0.0-beta.2) (2023-03-10)
+
+
+### ⚠ BREAKING CHANGES
+
+* - CSS Packages such as `dnb-ui-basis` and `dnb-ui-core` do not contain the fonts anymore. Fonts are now only a part of a theme file, such as: `/style/themes/theme-ui/dnb-theme-ui.*`.
+- The CSS package `dnb-ui-fonts` is moved inside a theme folder `/themes/theme-ui`
+* The DNB font is moved inside a subfolder in /assets/fonts/dnb/...
+
+### :sparkles: Features
+
+* move `dnb-ui-fonts` package inside `/style/themes/theme-ui/` ([abb5ff7](https://github.com/dnbexperience/eufemia/commit/abb5ff7b8f381ae427d191291b96ddc6eb1ae0cf))
+* move `properties.scss` into theme ui ([#2035](https://github.com/dnbexperience/eufemia/issues/2035)) ([42f8c3a](https://github.com/dnbexperience/eufemia/commit/42f8c3ab679427d3e97d44d381d81df66011273a))
+* move DNB font in subfolder ([eb15950](https://github.com/dnbexperience/eufemia/commit/eb15950d27e4ba695390ccf4fcd5c229b813d41c))
+* **Pagination:** replace `page` with `pageNumber` ([9d971c9](https://github.com/dnbexperience/eufemia/commit/9d971c9c0811c1259d69609f5b3c21b4053a5014))
+
+
+### :bug: Bug Fixes
+
+* **Accordion:** enhance TypeScript type definitions ([7c5eead](https://github.com/dnbexperience/eufemia/commit/7c5eead37fae836a5ea09467cadfc47c24f69051))
+* **Anchor:** ensure id is passed down ([#2016](https://github.com/dnbexperience/eufemia/issues/2016)) ([363af36](https://github.com/dnbexperience/eufemia/commit/363af36a448207cac41eeecc5513a1dac7dba022))
+* **Autocomplete:** add HorizontalItem TypeScript type definition ([c4e7322](https://github.com/dnbexperience/eufemia/commit/c4e7322ee6655d226e7e5bdd67b3bf12062eb324))
+* **DatePicker:** make focus handling on input work on second click ([#2039](https://github.com/dnbexperience/eufemia/issues/2039)) ([dc25e65](https://github.com/dnbexperience/eufemia/commit/dc25e65dc11ebfb4e299e2a0221257e9ed3c3f66))
+* **DrawerList:** enhance TypeScript definition types ([381183f](https://github.com/dnbexperience/eufemia/commit/381183f36336367b2791e0e952c2153bf878e84e))
+* **Dropdown:** enhance TypeScript definition types ([9854ba6](https://github.com/dnbexperience/eufemia/commit/9854ba677aeb7524e3ec336fc3c7b8fb073d76ba))
+* enhance scrollbar appearance ([#2046](https://github.com/dnbexperience/eufemia/issues/2046)) ([54b2222](https://github.com/dnbexperience/eufemia/commit/54b2222da2da4261c4675801b9e6528ce1302030))
+* **GlobalStatus:** enhance TypeScript definition types ([9e6d724](https://github.com/dnbexperience/eufemia/commit/9e6d72472137c6ddc44f64a779c87f679fe51e74))
+* **Heading:** enhance TypeScript definition types ([8c0e78a](https://github.com/dnbexperience/eufemia/commit/8c0e78a5e380d4f4fb70d7debbda4d5c16105e61))
+* **InputMasked:** expose inner_ref input element when useRef is used ([#2042](https://github.com/dnbexperience/eufemia/issues/2042)) ([6629a99](https://github.com/dnbexperience/eufemia/commit/6629a99004bc6e0ba1b9f2e6fd7f00f1ba72db38))
+* make docs/portal Windows compatible by properly handle backslashes and newlines ([#2038](https://github.com/dnbexperience/eufemia/issues/2038)) ([20a90d5](https://github.com/dnbexperience/eufemia/commit/20a90d5dc3f11e92d06476fc3f0590de3ff19444))
+* **MediaQuery:** enhance TypeScript types ([3959026](https://github.com/dnbexperience/eufemia/commit/395902605f1f32fa1fda3cd26f1008429b966623))
+* **Modal:** make children accept function with close method in parameters ([#2015](https://github.com/dnbexperience/eufemia/issues/2015)) ([ef4fa2e](https://github.com/dnbexperience/eufemia/commit/ef4fa2e917b835308b2b63b11e458643708fde69))
+* **Pagination:** enhance Pagination and InfinityScroller TypeScript definitions ([2a0d9da](https://github.com/dnbexperience/eufemia/commit/2a0d9dadbcc723839c1e7350736a4da5d8849b74))
+* **Pagination:** fix hover style state after click to be emerald-green ([#2032](https://github.com/dnbexperience/eufemia/issues/2032)) ([5bc802e](https://github.com/dnbexperience/eufemia/commit/5bc802e3b8007cfae21e9981a90a905963ef1097))
+* remove FormRow context support from /elements ([#2031](https://github.com/dnbexperience/eufemia/issues/2031)) ([fa14c40](https://github.com/dnbexperience/eufemia/commit/fa14c40a4d359fa607b1621ad65f417fea347f55))
+* **ScrollView:** avoid usage of useLayoutEffect during SSR ([#2012](https://github.com/dnbexperience/eufemia/issues/2012)) ([bd21281](https://github.com/dnbexperience/eufemia/commit/bd212815680d1509677534196e546047fa5ceb73))
+* **Skeleton:** add Skeleton.Exclude types ([f49d900](https://github.com/dnbexperience/eufemia/commit/f49d900596d78462db2e71fad284b086cc134aac))
+* **StepIndicator:** fix TypeScript spacing types ([89dd4b6](https://github.com/dnbexperience/eufemia/commit/89dd4b6f749aa509c683cb25686f142fa5c35c12))
+
+
+### :memo: Documentation
+
+* **Accordion:** improve docs of group & allow_close_all ([#2070](https://github.com/dnbexperience/eufemia/issues/2070)) ([78440b0](https://github.com/dnbexperience/eufemia/commit/78440b05df4986d78d893c8d5855a74ed6fdfd42))
+* adds missing accents to values in docs ([#2041](https://github.com/dnbexperience/eufemia/issues/2041)) ([3730947](https://github.com/dnbexperience/eufemia/commit/37309478e9cce6aa9eaba21e72537eb8e012c01b))
+* **Autocomplete:** minor spelling improvement in title ([#2069](https://github.com/dnbexperience/eufemia/issues/2069)) ([f796e8c](https://github.com/dnbexperience/eufemia/commit/f796e8c0e2a349430702d1c611f5a822cd68d96f))
+* **Avatar:** fixes broken properties table ([#2030](https://github.com/dnbexperience/eufemia/issues/2030)) ([d872d72](https://github.com/dnbexperience/eufemia/commit/d872d72193eb78e2dd0f059b3381e1d4fb900a1a))
+* **Contact:** adds Joakim as contact ([#2023](https://github.com/dnbexperience/eufemia/issues/2023)) ([534c69a](https://github.com/dnbexperience/eufemia/commit/534c69a713f13ff084059e5645c3448a2d6231d8))
+* **Contribution Guide:** update legacy type definition handling ([#2048](https://github.com/dnbexperience/eufemia/issues/2048)) ([f004f6a](https://github.com/dnbexperience/eufemia/commit/f004f6a727384ecf901b922f6faa8a2501b9b24d))
+* **Extension:** convert md to mdx files ([#2026](https://github.com/dnbexperience/eufemia/issues/2026)) ([68c54ee](https://github.com/dnbexperience/eufemia/commit/68c54eeef726ddfe8f6f27e26373edfb59419c15))
+* fix outdated boolean usage ([#2013](https://github.com/dnbexperience/eufemia/issues/2013)) ([f4fb26d](https://github.com/dnbexperience/eufemia/commit/f4fb26d6842dd2a922985fd499c7b72bad1c3350))
+* fix wrong Heading example about margin collapse ([f810f2c](https://github.com/dnbexperience/eufemia/commit/f810f2c3eb5ca97976c00800dd8567936829a643))
+* **getOffsetTop:** fix wrong docs and console.log usage ([#2018](https://github.com/dnbexperience/eufemia/issues/2018)) ([5c31970](https://github.com/dnbexperience/eufemia/commit/5c319707d8507093cb8907fcb8c5179a0a065dbe))
+* **GlobalStatus:** improve docs for id prop ([#2067](https://github.com/dnbexperience/eufemia/issues/2067)) ([b7bf098](https://github.com/dnbexperience/eufemia/commit/b7bf09893793d1e248bc92b823ecc7188a26b273))
+* **Input:** adds on_key_down event ([#2062](https://github.com/dnbexperience/eufemia/issues/2062)) ([a9b07be](https://github.com/dnbexperience/eufemia/commit/a9b07be0ce23a573db32165fcc3d41a0188a14ab))
+* make click on anchor with hash work on first click ([#2019](https://github.com/dnbexperience/eufemia/issues/2019)) ([a4ac4c8](https://github.com/dnbexperience/eufemia/commit/a4ac4c8e9e3ede462abe6d27bb6b900c7a748ce9))
+* remove `smoothscroll-polyfill` as a recommendation ([#2020](https://github.com/dnbexperience/eufemia/issues/2020)) ([cc06592](https://github.com/dnbexperience/eufemia/commit/cc0659278dce5ab0e641a2648a7fe25362ee2556))
+* remove properties import from docs ([#2034](https://github.com/dnbexperience/eufemia/issues/2034)) ([15b4238](https://github.com/dnbexperience/eufemia/commit/15b42384bac75c699e07b777e635d3fe60d4d642))
+* removes cards and spaceholder indicator ([#2061](https://github.com/dnbexperience/eufemia/issues/2061)) ([a782522](https://github.com/dnbexperience/eufemia/commit/a7825228326feda84c7c8eb69936c002da6b8fb6))
+
 ## [10.0.0-beta.1](https://github.com/dnbexperience/eufemia/compare/v9.47.1...v10.0.0-beta.1) (2023-02-23)
 
 

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

@@ -1,25 +1,16 @@
 import * as React from 'react';
+import type { ButtonIconPosition } from '../button';
+import type { HeadingLevel } from '../Heading';
+import type { IconPrimaryIcon, IconPrimarySize } from '../IconPrimary';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 import AccordionContent from './AccordionContent';
 import AccordionHeader from './AccordionHeader';
 import AccordionProvider from './AccordionProvider';
-export type AccordionExpanded = string | boolean;
-export type AccordionNoAnimation = string | boolean;
-export type AccordionExpandedSsr = string | boolean;
-export type AccordionPrerender = string | boolean;
-export type AccordionPreventRerender = string | boolean;
-export type AccordionPreventRerenderConditional = string | boolean;
-export type AccordionRememberState = string | boolean;
-export type AccordionFlushRememberedState = string | boolean;
-export type AccordionSingleContainer = string | boolean;
 export type AccordionVariant = 'plain' | 'default' | 'outlined' | 'filled';
-export type AccordionAllowCloseAll = string | boolean;
-export type AccordionDisabled = string | boolean;
-export type AccordionSkeleton = string | boolean;
 export type AccordionHeading = boolean | React.ReactNode;
-export type AccordionHeadingLevel = string | number;
 export type AccordionIcon =
-  | React.ReactNode
-  | ((...args: any[]) => any)
+  | IconPrimaryIcon
   | {
       closed?: React.ReactNode | ((...args: any[]) => any);
 
@@ -29,81 +20,50 @@ export type AccordionIcon =
       expanded?: React.ReactNode | ((...args: any[]) => any);
     };
 export type AccordionClosed = React.ReactNode | ((...args: any[]) => any);
-export type AccordionIconPosition = 'left' | 'right';
 export type AccordionAttributes = string | Record<string, unknown>;
-export type AccordionSpace =
-  | 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 AccordionTop = string | number | boolean;
-export type AccordionRight = string | number | boolean;
-export type AccordionBottom = string | number | boolean;
-export type AccordionLeft = 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 AccordionProps extends React.HTMLProps<HTMLElement> {
+export interface AccordionProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * A title as a string or React element. It will be used as the button text.
    */
   title?: React.ReactNode;
+  description?: React.ReactNode;
 
   /**
    * If set to `true` the accordion will be expanded as its initial state.
    */
-  expanded?: AccordionExpanded;
+  expanded?: boolean;
 
   /**
    * If set to `true`, the open and close animation will be omitted.
    */
-  no_animation?: AccordionNoAnimation;
+  no_animation?: boolean;
 
   /**
    * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that&#39;s mainly a technical aspect to consider.
    */
-  expanded_ssr?: AccordionExpandedSsr;
+  expanded_ssr?: boolean;
 
   /**
    * If set to `true` the content will be present, even the accordion is not expanded. Can be useful for assistive technology or SEO.
    */
-  prerender?: AccordionPrerender;
+  prerender?: boolean;
 
   /**
    * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don&#39;t have control of storing the temporary state during an interaction.
    */
-  prevent_rerender?: AccordionPreventRerender;
+  prevent_rerender?: boolean;
 
   /**
    * Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match anymore the previews one.
    */
-  prevent_rerender_conditional?: AccordionPreventRerenderConditional;
+  prevent_rerender_conditional?: boolean;
 
   /**
    * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
    */
-  remember_state?: AccordionRememberState;
+  remember_state?: boolean;
 
   /**
    * Send along a custom React Ref for `.dnb-accordion__content`.
@@ -113,12 +73,12 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.
    */
-  flush_remembered_state?: AccordionFlushRememberedState;
+  flush_remembered_state?: boolean;
 
   /**
    * If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens.
    */
-  single_container?: AccordionSingleContainer;
+  single_container?: boolean;
 
   /**
    * Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.
@@ -129,17 +89,17 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
    * Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`.
    */
   left_component?: React.ReactNode;
-  allow_close_all?: AccordionAllowCloseAll;
+  allow_close_all?: boolean;
 
   /**
    * If set to `true`, the accordion button will be disabled (dimmed).
    */
-  disabled?: AccordionDisabled;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: AccordionSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
@@ -160,7 +120,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   /**
    * If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`.
    */
-  heading_level?: AccordionHeadingLevel;
+  heading_level?: HeadingLevel;
 
   /**
    * Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.
@@ -171,42 +131,17 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   /**
    * Will set the placement of the icon. Defaults to `left`.
    */
-  icon_position?: AccordionIconPosition;
+  icon_position?: ButtonIconPosition;
 
   /**
    * Define a different icon size. Defaults to `medium` (1.5rem).
    */
-  icon_size?: string;
+  icon_size?: IconPrimarySize;
   attributes?: AccordionAttributes;
   class?: string;
   className?: string;
   children?: React.ReactNode;
 
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: AccordionSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: AccordionTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: AccordionRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: AccordionBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: AccordionLeft;
-
   /**
    * Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`.
    */
@@ -221,14 +156,10 @@ export default class Accordion extends React.Component<
   static Content = AccordionContent;
   static Header = AccordionHeader;
   static Provider = AccordionProvider;
+  static Group: (props: GroupProps) => JSX.Element;
   render(): JSX.Element;
 }
-export type GroupRememberState = 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 GroupProps {
+export type GroupProps = {
   /**
    * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
    */
@@ -238,8 +169,9 @@ export interface GroupProps {
   /**
    * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
    */
-  remember_state?: GroupRememberState;
-}
+  remember_state?: boolean;
+  children: React.ReactNode;
+} & AccordionProps;
 
 declare class Group extends React.Component<GroupProps, any> {
   static defaultProps: object;

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

@@ -1,33 +1,12 @@
 import * as React from 'react';
-export type AccordionContentSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type AccordionContentTop = string | number | boolean;
-export type AccordionContentRight = string | number | boolean;
-export type AccordionContentBottom = string | number | boolean;
-export type AccordionContentLeft = string | number | boolean;
+import type { SpacingProps } from '../space/types';
 export type AccordionContentChildren =
   | 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 AccordionContentProps
-  extends React.HTMLProps<HTMLElement> {
-  instance?: Record<string, unknown>;
-  space?: AccordionContentSpace;
-  top?: AccordionContentTop;
-  right?: AccordionContentRight;
-  bottom?: AccordionContentBottom;
-  left?: AccordionContentLeft;
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
+  instance?: React.LegacyRef;
   className?: string;
   children?: AccordionContentChildren;
 }

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

@@ -1,96 +1,22 @@
 import * as React from 'react';
-export type AccordionHeaderTitleSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type AccordionHeaderTitleTop = string | number | boolean;
-export type AccordionHeaderTitleRight = string | number | boolean;
-export type AccordionHeaderTitleBottom = string | number | boolean;
-export type AccordionHeaderTitleLeft = 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 AccordionHeaderTitleProps {
-  space?: AccordionHeaderTitleSpace;
-  top?: AccordionHeaderTitleTop;
-  right?: AccordionHeaderTitleRight;
-  bottom?: AccordionHeaderTitleBottom;
-  left?: AccordionHeaderTitleLeft;
+import type { ButtonIconPosition } from '../button';
+import type { HeadingLevel } from '../Heading';
+import type { IconPrimarySize } from '../IconPrimary';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
+import type { AccordionIcon } from './Accordion';
+export interface AccordionHeaderTitleProps extends SpacingProps {
   children?: React.ReactNode;
 }
 declare const AccordionHeaderTitle: React.FC<AccordionHeaderTitleProps>;
-export type AccordionHeaderDescriptionSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type AccordionHeaderDescriptionTop = string | number | boolean;
-export type AccordionHeaderDescriptionRight = string | number | boolean;
-export type AccordionHeaderDescriptionBottom = string | number | boolean;
-export type AccordionHeaderDescriptionLeft = 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 AccordionHeaderDescriptionProps {
-  space?: AccordionHeaderDescriptionSpace;
-  top?: AccordionHeaderDescriptionTop;
-  right?: AccordionHeaderDescriptionRight;
-  bottom?: AccordionHeaderDescriptionBottom;
-  left?: AccordionHeaderDescriptionLeft;
+export interface AccordionHeaderDescriptionProps extends SpacingProps {
   children?: React.ReactNode;
 }
 declare const AccordionHeaderDescription: React.FC<AccordionHeaderDescriptionProps>;
-export type AccordionHeaderContainerSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type AccordionHeaderContainerTop = string | number | boolean;
-export type AccordionHeaderContainerRight = string | number | boolean;
-export type AccordionHeaderContainerBottom = string | number | boolean;
-export type AccordionHeaderContainerLeft = 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 AccordionHeaderContainerProps {
-  space?: AccordionHeaderContainerSpace;
-  top?: AccordionHeaderContainerTop;
-  right?: AccordionHeaderContainerRight;
-  bottom?: AccordionHeaderContainerBottom;
-  left?: AccordionHeaderContainerLeft;
+export interface AccordionHeaderContainerProps extends SpacingProps {
   children?: React.ReactNode;
 }
 declare const AccordionHeaderContainer: React.FC<AccordionHeaderContainerProps>;
-export type AccordionHeaderIconIcon =
-  | React.ReactNode
-  | ((...args: any[]) => any)
-  | {
-      closed?: React.ReactNode | ((...args: any[]) => any);
-      expanded?: 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 AccordionHeaderIconProps {
   icon?: AccordionHeaderIconIcon;
   size?: string;
@@ -118,7 +44,6 @@ export type AccordionHeaderHeading =
   | string
   | React.ReactNode
   | ((...args: any[]) => any);
-export type AccordionHeaderHeadingLevel = string | number;
 export type AccordionHeaderIcon =
   | React.ReactNode
   | ((...args: any[]) => any)
@@ -126,51 +51,25 @@ export type AccordionHeaderIcon =
       closed?: React.ReactNode | ((...args: any[]) => any);
       expanded?: React.ReactNode | ((...args: any[]) => any);
     };
-export type AccordionHeaderIconPosition = 'left' | 'right';
-export type AccordionHeaderDisabled = string | boolean;
-export type AccordionHeaderSkeleton = string | boolean;
-export type AccordionHeaderNoAnimation = string | boolean;
-export type AccordionHeaderSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type AccordionHeaderTop = string | number | boolean;
-export type AccordionHeaderRight = string | number | boolean;
-export type AccordionHeaderBottom = string | number | boolean;
-export type AccordionHeaderLeft = string | number | boolean;
 export type AccordionHeaderChildren =
   | string
   | 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 AccordionHeaderProps
-  extends React.HTMLProps<HTMLElement> {
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   title?: AccordionHeaderTitle;
   description?: AccordionHeaderDescription;
   left_component?: AccordionHeaderLeftComponent;
   element?: AccordionHeaderElement;
   heading?: AccordionHeaderHeading;
-  heading_level?: AccordionHeaderHeadingLevel;
-  icon?: AccordionHeaderIcon;
-  icon_position?: AccordionHeaderIconPosition;
-  icon_size?: string;
-  disabled?: AccordionHeaderDisabled;
-  skeleton?: AccordionHeaderSkeleton;
-  no_animation?: AccordionHeaderNoAnimation;
-  space?: AccordionHeaderSpace;
-  top?: AccordionHeaderTop;
-  right?: AccordionHeaderRight;
-  bottom?: AccordionHeaderBottom;
-  left?: AccordionHeaderLeft;
+  heading_level?: HeadingLevel;
+  icon?: AccordionIcon;
+  icon_position?: ButtonIconPosition;
+  icon_size?: IconPrimarySize;
+  disabled?: boolean;
+  skeleton?: SkeletonShow;
+  no_animation?: boolean;
   className?: string;
   children?: AccordionHeaderChildren;
 }
@@ -179,5 +78,20 @@ export default class AccordionHeader extends React.Component<
   any
 > {
   static defaultProps: object;
+  static Container: ({
+    children
+  }: {
+    children: React.ReactNode;
+  }) => JSX.Element;
+  static Title: ({
+    children
+  }: {
+    children: React.ReactNode;
+  }) => JSX.Element;
+  static Description: ({
+    children
+  }: {
+    children: React.ReactNode;
+  }) => JSX.Element;
   render(): JSX.Element;
 }