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

package/es/components/number-format/NumberFormat.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type NumberFormatValue = number | string;
 export type NumberFormatPrefix =
   | React.ReactNode
@@ -9,63 +11,20 @@ export type NumberFormatSuffix =
 export type NumberFormatCurrency = string | boolean;
 export type NumberFormatCurrencyPosition = 'auto' | 'before' | 'after';
 export type NumberFormatCompact = 'short' | 'long' | boolean;
-export type NumberFormatBan = string | boolean;
-export type NumberFormatNin = string | boolean;
-export type NumberFormatPhone = string | boolean;
-export type NumberFormatOrg = string | boolean;
-export type NumberFormatPercent = string | boolean;
-export type NumberFormatLink = string | boolean;
+export type NumberFormatLink = 'tel' | 'sms';
 export type NumberFormatOptions = Record<string, unknown> | string;
 export type NumberFormatDecimals = number | string;
-export type NumberFormatSelectall = string | boolean;
-export type NumberFormatAlwaysSelectall = string | boolean;
-export type NumberFormatCopySelection = string | boolean;
-export type NumberFormatCleanCopyValue = string | boolean;
-export type NumberFormatOmitRounding = string | boolean;
-export type NumberFormatClean = string | boolean;
-export type NumberFormatElement = string | boolean;
+export type NumberFormatElement = string;
 export type NumberFormatTooltip =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type NumberFormatSkeleton = string | boolean;
-export type NumberFormatSpace =
-  | 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 NumberFormatTop = string | number | boolean;
-export type NumberFormatRight = string | number | boolean;
-export type NumberFormatBottom = string | number | boolean;
-export type NumberFormatLeft = string | number | boolean;
 export type NumberFormatChildren =
   | 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 NumberFormatProps extends React.HTMLProps<HTMLElement> {
+export interface NumberFormatProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   id?: string;
 
   /**
@@ -111,27 +70,27 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   /**
    * "Bank Account Number": use `true` to use the default Norwegian style (2000 12 34567) formatting.
    */
-  ban?: NumberFormatBan;
+  ban?: boolean;
 
   /**
    * "National Identification Number": use `true` to use the default Norwegian style (180892 12345) formatting.
    */
-  nin?: NumberFormatNin;
+  nin?: boolean;
 
   /**
    * Use `true` to use the default Norwegian style (22 22 22 22) of phone number formatting, regulated by the <a href="https://lovdata.no/forskrift/2004-02-16-426/§16">Norwegian authority</a>. More info by <a href="https://www.sprakradet.no/sprakhjelp/Skriveregler/Dato/#tlf">Sprakradet</a> as well.
    */
-  phone?: NumberFormatPhone;
+  phone?: boolean;
 
   /**
    * "Organization Number": use `true` to use the default Norwegian style (123 456 789) formatting. Screen readers get digit by digit.
    */
-  org?: NumberFormatOrg;
+  org?: boolean;
 
   /**
    * "Percentage": use `true` to enable percent formatting.
    */
-  percent?: NumberFormatPercent;
+  percent?: boolean;
 
   /**
    * Use `tel` or `sms` to enable a clickable / touchable anchor link.
@@ -151,32 +110,32 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   /**
    * Use `false` to disable the auto select all on the first click. Defaults to `true`.
    */
-  selectall?: NumberFormatSelectall;
+  selectall?: boolean;
 
   /**
    * Use `true` to always auto select all on the first click. Defaults to `false`.
    */
-  always_selectall?: NumberFormatAlwaysSelectall;
+  always_selectall?: boolean;
 
   /**
    * Use `false` to disable the auto copy feature. Defaults to `true`.
    */
-  copy_selection?: NumberFormatCopySelection;
+  copy_selection?: boolean;
 
   /**
    * If set to `true` the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to `false`.
    */
-  clean_copy_value?: NumberFormatCleanCopyValue;
+  clean_copy_value?: boolean;
 
   /**
    * If set to `true`, the decimal will NOT be rounded. Normally, by using `toFixed` or by using `maximumFractionDigits`, decimals get rounded.
    */
-  omit_rounding?: NumberFormatOmitRounding;
+  omit_rounding?: boolean;
 
   /**
    * If set to `true` a dirty string will be parsed to to extract the number (`prefix -123.45 suffix` would result in e.g. `kr -123,45`).
    */
-  clean?: NumberFormatClean;
+  clean?: boolean;
 
   /**
    * Will add a visually hidden label to give screen reader users the missing context to understand easier what the number represents.
@@ -196,32 +155,7 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: NumberFormatSkeleton;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: NumberFormatSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: NumberFormatTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: NumberFormatRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: NumberFormatBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: NumberFormatLeft;
+  skeleton?: SkeletonShow;
   class?: string;
   className?: string;
 

package/es/components/number-format/NumberUtils.d.ts

@@ -1,3 +1,5 @@
+import { NumberFormatCurrency } from './NumberFormat';
+
 export type formatTypes =
   | 'phone'
   | 'org'
@@ -54,7 +56,7 @@ export interface formatOptionParams {
   /** percent type */
   percent?: boolean;
   /** Currency code (ISO 4217) or `true` to use the default, `NOK`. */
-  currency?: string | boolean;
+  currency?: NumberFormatCurrency;
 
   /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name. Defaults to narrowSymbol when the locale is no else we default to code. */
   currency_display?:

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

@@ -1,17 +1,14 @@
 import * as React from 'react';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type PaginationStartupPage = string | number;
 export type PaginationCurrentPage = string | number;
 export type PaginationPageCount = string | number;
 export type PaginationStartupCount = string | number;
 export type PaginationParallelLoadCount = string | number;
-export type PaginationPlaceMakerBeforeContent = string | boolean;
 export type PaginationMinWaitTime = string | number;
-export type PaginationDisabled = string | boolean;
-export type PaginationSkeleton = string | boolean;
 export type PaginationMode = 'pagination' | 'infinity';
-export type PaginationUseLoadButton = string | boolean;
 export type PaginationItems = string | any[];
-export type PaginationHideProgressIndicator = string | boolean;
 export type PaginationSetContentHandler =
   | string
   | ((...args: any[]) => any);
@@ -43,43 +40,12 @@ export type PaginationIndicatorElement =
   | React.ReactNode
   | ((...args: any[]) => any)
   | string;
-export type PaginationSpace =
-  | 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 PaginationTop = string | number | boolean;
-export type PaginationRight = string | number | boolean;
-export type PaginationBottom = string | number | boolean;
-export type PaginationLeft = string | number | boolean;
 export type PaginationChildren =
   | 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 PaginationProps extends React.HTMLProps<HTMLElement> {
+export interface PaginationProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
@@ -108,7 +74,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
-  place_maker_before_content?: PaginationPlaceMakerBeforeContent;
+  place_maker_before_content?: boolean;
 
   /**
    * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds.
@@ -118,12 +84,12 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, all pagination bar buttons are disabled.
    */
-  disabled?: PaginationDisabled;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: PaginationSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
@@ -133,13 +99,13 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead.
    */
-  use_load_button?: PaginationUseLoadButton;
+  use_load_button?: boolean;
   items?: PaginationItems;
 
   /**
    * If set to `true` no indicator will be shown.
    */
-  hide_progress_indicator?: PaginationHideProgressIndicator;
+  hide_progress_indicator?: boolean;
 
   /**
    * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode.
@@ -212,34 +178,9 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to `true`, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: PaginationSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: PaginationTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: PaginationRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: PaginationBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: PaginationLeft;
   class?: string;
   className?: string;
 
@@ -280,14 +221,9 @@ export type PaginationInstanceCurrentPage = string | number;
 export type PaginationInstancePageCount = string | number;
 export type PaginationInstanceStartupCount = string | number;
 export type PaginationInstanceParallelLoadCount = string | number;
-export type PaginationInstancePlaceMakerBeforeContent = string | boolean;
 export type PaginationInstanceMinWaitTime = string | number;
-export type PaginationInstanceDisabled = string | boolean;
-export type PaginationInstanceSkeleton = string | boolean;
 export type PaginationInstanceMode = 'pagination' | 'infinity';
-export type PaginationInstanceUseLoadButton = string | boolean;
 export type PaginationInstanceItems = string | any[];
-export type PaginationInstanceHideProgressIndicator = string | boolean;
 export type PaginationInstanceSetContentHandler =
   | string
   | ((...args: any[]) => any);
@@ -319,43 +255,10 @@ export type PaginationInstanceIndicatorElement =
   | React.ReactNode
   | ((...args: any[]) => any)
   | string;
-export type PaginationInstanceSpace =
-  | 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 PaginationInstanceTop = string | number | boolean;
-export type PaginationInstanceRight = string | number | boolean;
-export type PaginationInstanceBottom = string | number | boolean;
-export type PaginationInstanceLeft = string | number | boolean;
 export type PaginationInstanceChildren =
   | 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 PaginationInstanceProps {
+export interface PaginationInstanceProps extends SpacingProps {
   /**
    * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
@@ -384,7 +287,7 @@ export interface PaginationInstanceProps {
   /**
    * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
-  place_maker_before_content?: PaginationInstancePlaceMakerBeforeContent;
+  place_maker_before_content?: boolean;
 
   /**
    * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds.
@@ -394,12 +297,12 @@ export interface PaginationInstanceProps {
   /**
    * If set to `true`, all pagination bar buttons are disabled.
    */
-  disabled?: PaginationInstanceDisabled;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: PaginationInstanceSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
@@ -409,13 +312,13 @@ export interface PaginationInstanceProps {
   /**
    * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead.
    */
-  use_load_button?: PaginationInstanceUseLoadButton;
+  use_load_button?: boolean;
   items?: PaginationInstanceItems;
 
   /**
    * If set to `true` no indicator will be shown.
    */
-  hide_progress_indicator?: PaginationInstanceHideProgressIndicator;
+  hide_progress_indicator?: boolean;
 
   /**
    * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode.
@@ -488,34 +391,9 @@ export interface PaginationInstanceProps {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to `true`, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: PaginationInstanceSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: PaginationInstanceTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: PaginationInstanceRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: PaginationInstanceBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: PaginationInstanceLeft;
   class?: string;
   className?: string;
 
@@ -558,14 +436,9 @@ export type InfinityMarkerCurrentPage = string | number;
 export type InfinityMarkerPageCount = string | number;
 export type InfinityMarkerStartupCount = string | number;
 export type InfinityMarkerParallelLoadCount = string | number;
-export type InfinityMarkerPlaceMakerBeforeContent = string | boolean;
 export type InfinityMarkerMinWaitTime = string | number;
-export type InfinityMarkerDisabled = string | boolean;
-export type InfinityMarkerSkeleton = string | boolean;
 export type InfinityMarkerMode = 'pagination' | 'infinity';
-export type InfinityMarkerUseLoadButton = string | boolean;
 export type InfinityMarkerItems = string | any[];
-export type InfinityMarkerHideProgressIndicator = string | boolean;
 export type InfinityMarkerSetContentHandler =
   | string
   | ((...args: any[]) => any);
@@ -597,43 +470,10 @@ export type InfinityMarkerIndicatorElement =
   | React.ReactNode
   | ((...args: any[]) => any)
   | string;
-export type InfinityMarkerSpace =
-  | 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 InfinityMarkerTop = string | number | boolean;
-export type InfinityMarkerRight = string | number | boolean;
-export type InfinityMarkerBottom = string | number | boolean;
-export type InfinityMarkerLeft = string | number | boolean;
 export type InfinityMarkerChildren =
   | 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 InfinityMarkerProps {
+export interface InfinityMarkerProps extends SpacingProps {
   /**
    * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
@@ -662,7 +502,7 @@ export interface InfinityMarkerProps {
   /**
    * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
-  place_maker_before_content?: InfinityMarkerPlaceMakerBeforeContent;
+  place_maker_before_content?: boolean;
 
   /**
    * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds.
@@ -672,12 +512,12 @@ export interface InfinityMarkerProps {
   /**
    * If set to `true`, all pagination bar buttons are disabled.
    */
-  disabled?: InfinityMarkerDisabled;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: InfinityMarkerSkeleton;
+  skeleton?: SkeletonShow;
 
   /**
    * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
@@ -687,13 +527,13 @@ export interface InfinityMarkerProps {
   /**
    * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead.
    */
-  use_load_button?: InfinityMarkerUseLoadButton;
+  use_load_button?: boolean;
   items?: InfinityMarkerItems;
 
   /**
    * If set to `true` no indicator will be shown.
    */
-  hide_progress_indicator?: InfinityMarkerHideProgressIndicator;
+  hide_progress_indicator?: boolean;
 
   /**
    * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode.
@@ -766,34 +606,9 @@ export interface InfinityMarkerProps {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to `true`, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: InfinityMarkerSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: InfinityMarkerTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: InfinityMarkerRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: InfinityMarkerBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: InfinityMarkerLeft;
   class?: string;
   className?: string;
 
@@ -832,10 +647,6 @@ export class InfinityMarker extends React.Component<
 export type PaginationContentChildren =
   | 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 PaginationContentProps {
   /**
    * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section.
@@ -843,3 +654,13 @@ export interface PaginationContentProps {
   children: PaginationContentChildren;
 }
 declare const PaginationContent: React.FC<PaginationContentProps>;
+export type CreatePaginationReturn = {
+  Pagination: (props?: Record<string, unknown>) => JSX.Element;
+  InfinityMarker: (props?: Record<string, unknown>) => void;
+  setContent: (pageNumber: number, content: React.ReactDom) => void;
+  resetContent: () => void;
+  resetInfinity: () => void;
+  endInfinity: () => void;
+};
+export const createPagination = (initProps?: Record<string, unknown>) =>
+  CreatePaginationReturn;

package/es/components/pagination/PaginationBar.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { LocaleProps } from '../../shared/types';
-import { SkeletonShow } from '../Skeleton';
+import type { SkeletonShow } from '../Skeleton';
 export declare type PaginationBarProps = {
     /**
      * The title used in every button shown in the bar. Defaults to Side %s.

package/es/components/pagination/PaginationBar.js

@@ -11,7 +11,7 @@ import PaginationContext from './PaginationContext';
 import Context from '../../shared/Context';
 import Button from '../button/Button';
 import IconPrimary from '../icon-primary/IconPrimary';
-import styleProperties from '../../style/properties';
+import styleProperties from '../../style/themes/theme-ui/properties';
 const defaultProps = {
   button_title: null,
   prev_title: null,

package/es/components/pagination/PaginationHelpers.d.ts

@@ -4,10 +4,6 @@ export type PaginationIndicatorIndicatorElement =
   | React.ReactNode
   | ((...args: any[]) => any)
   | string;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface PaginationIndicatorProps {
   /**
    * (infinity mode) is used by the <em>indicator</em>. Falls back to `fallback_element` if not defined.

package/es/components/pagination/PaginationInfinity.d.ts

@@ -2,10 +2,6 @@ import * as React from 'react';
 export type InfinityScrollerChildren =
   | 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 InfinityScrollerProps
   extends React.HTMLProps<HTMLElement> {
   /**
@@ -28,10 +24,6 @@ export type InfinityLoadButtonPressedElement =
   | Record<string, unknown>
   | 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 InfinityLoadButtonProps {
   element?: InfinityLoadButtonElement;
   pressed_element?: InfinityLoadButtonPressedElement;