@commercelayer/app-elements 4.7.0 → 5.0.0

package/dist/main.js

@@ -1,13 +1,13 @@
 "use client";
-import { ab as s, aR as t, aS as o, ac as r, ad as n, ae as u, af as c, ag as i, ah as d, ai as l, aj as p, aT as b, ak as g, be as m, al as S, am as I, Y as k, aU as T, aV as D, aW as R, aX as y, an as h, a0 as C, a1 as A, b7 as P, ao as H, ap as F, aY as v, bf as f, bg as B, bh as L, bj as O, bl as E, bo as N, br as G, bt as M, by as w, bA as x, bF as V, bK as W, bM as J, bO as U, bQ as q, bS as Y, bW as j, bX as z, bY as K, aq as Q, a4 as X, ar as Z, bi as _, bk as $, bm as aa, bp as ea, bq as sa, bs as ta, bu as oa, bv as ra, bw as na, bx as ua, bz as ca, bB as ia, bG as da, bL as la, bN as pa, bP as ba, bR as ga, bT as ma, bU as Sa, bV as Ia, aZ as ka, a_ as Ta, a$ as Da, b0 as Ra, b8 as ya, a9 as ha, b1 as Ca, as as Aa, b2 as Pa, b3 as Ha, at as Fa, au as va, av as fa, aw as Ba, b4 as La, c0 as Oa, c1 as Ea, c3 as Na, c4 as Ga, c5 as Ma, c6 as wa, c7 as xa, c8 as Va, ca as Wa, cb as Ja, cc as Ua, b9 as qa, ax as Ya, ba as ja, ay as za, az as Ka, aA as Qa, aB as Xa, aD as Za, aE as _a, aF as $a, aG as ae, aH as ee, aM as se, aI as te, bb as oe, aN as re, aO as ne, aJ as ue, aP as ce, aK as ie, bc as de, aa as le, bd as pe, aQ as be, aL as ge, a6 as me, B as Se, $ as Ie, b5 as ke, b6 as Te, h as De, k as Re, A as ye, a8 as he, bD as Ce, bn as Ae, l as Pe, m as He, p as Fe, C as ve, D as fe, F as Be, cf as Le, cg as Oe, bE as Ee, q as Ne, s as Ge, t as Me, ch as we, ci as xe, cj as Ve, ck as We, cl as Je, G as Ue, H as qe, c9 as Ye, cm as je, b$ as ze, E as Ke, cn as Qe, co as Xe, cp as Ze, J as _e, K as $e, cq as as, cr as es, cs as ss, N as ts, O as os, e as rs, L as ns, M as us, a3 as cs, i as is, bH as ds, bI as ls, bJ as ps, v as bs, n as gs, r as ms, x as Ss, bZ as Is, y as ks, a5 as Ts, z as Ds, P as Rs, Q as ys, Z as hs, _ as Cs, S as As, T as Ps, U as Hs, bC as Fs, V as vs, W as fs, X as Bs, c2 as Ls, cd as Os, ce as Es, a2 as Ns, u as Gs, a7 as Ms, b_ as ws, aC as xs } from "./main-BqLNx3jG.js";
+import { aI as s, bm as t, bn as o, aJ as r, aK as c, aL as n, aM as u, aN as i, aO as d, aP as l, aQ as p, bo as b, aR as g, bL as m, aS as S, aT as I, at as k, bp as T, bq as R, br as D, bs as y, aU as h, ax as C, ay as A, bE as P, aV as H, aW as F, bt as v, bM as f, bN as B, bO as L, bQ as O, bS as E, bV as N, bY as G, b_ as w, c3 as M, c5 as V, ca as x, cf as W, ch as U, cj as J, cl as Y, cn as X, cr as Z, cs as j, ct as q, aX as z, aB as K, aY as Q, bP as _, bR as $, bT as aa, bW as ea, bX as sa, bZ as ta, b$ as oa, c0 as ra, c1 as ca, c2 as na, c4 as ua, c6 as ia, cb as da, cg as la, ci as pa, ck as ba, cm as ga, co as ma, cp as Sa, cq as Ia, bu as ka, bv as Ta, bw as Ra, bx as Da, bF as ya, aG as ha, by as Ca, aZ as Aa, bz as Pa, bA as Ha, a_ as Fa, a$ as va, b0 as fa, b1 as Ba, bB as La, cx as Oa, cy as Ea, cA as Na, cB as Ga, cC as wa, cD as Ma, cE as Va, cF as xa, cH as Wa, cI as Ua, cJ as Ja, bG as Ya, b2 as Xa, bH as Za, b3 as ja, b4 as qa, b5 as za, b6 as Ka, b8 as Qa, b9 as _a, ba as $a, bb as ae, bc as ee, bh as se, bd as te, bI as oe, bi as re, bj as ce, be as ne, bk as ue, bf as ie, bJ as de, aH as le, bK as pe, bl as be, bg as ge, aD as me, a8 as Se, aw as Ie, bC as ke, bD as Te, X as Re, Y as De, a7 as ye, aF as he, c8 as Ce, bU as Ae, Z as Pe, _ as He, $ as Fe, a9 as ve, aa as fe, ac as Be, cM as Le, cN as Oe, c9 as Ee, a0 as Ne, a1 as Ge, a2 as we, cO as Me, cP as Ve, cQ as xe, cR as We, cS as Ue, ad as Je, ae as Ye, cG as Xe, cT as Ze, cw as je, ab as qe, cU as ze, cV as Ke, cW as Qe, af as _e, ag as $e, cX as as, cY as es, cZ as ss, aj as ts, ak as os, T as rs, ah as cs, ai as ns, aA as us, V as is, cc as ds, cd as ls, ce as ps, a3 as bs, U as gs, W as ms, a4 as Ss, cu as Is, a5 as ks, aC as Ts, a6 as Rs, al as Ds, am as ys, au as hs, av as Cs, an as As, ao as Ps, ap as Hs, c7 as Fs, aq as vs, ar as fs, as as Bs, cz as Ls, cK as Os, cL as Es, az as Ns, u as Gs, aE as ws, cv as Ms, b7 as Vs } from "./main-CQtvdM89.js";
 export {
   s as A,
   t as ActionButtons,
   o as Address,
   r as Alert,
-  n as Avatar,
-  u as AvatarLetter,
-  c as Badge,
+  c as Avatar,
+  n as AvatarLetter,
+  u as Badge,
   i as Button,
   d as ButtonFilter,
   l as ButtonImageSelect,
@@ -19,8 +19,8 @@ export {
   I as CopyToClipboard,
   k as CoreSdkProvider,
   T as Dropdown,
-  D as DropdownDivider,
-  R as DropdownItem,
+  R as DropdownDivider,
+  D as DropdownItem,
   y as DropdownSearch,
   h as EmptyState,
   C as ErrorBoundary,
@@ -36,21 +36,21 @@ export {
   E as HookedInputCheckboxGroup,
   N as HookedInputCurrency,
   G as HookedInputDate,
-  M as HookedInputDateRange,
-  w as HookedInputRadioGroup,
-  x as HookedInputResourceGroup,
-  V as HookedInputSelect,
+  w as HookedInputDateRange,
+  M as HookedInputRadioGroup,
+  V as HookedInputResourceGroup,
+  x as HookedInputSelect,
   W as HookedInputSimpleSelect,
-  J as HookedInputSpinner,
-  U as HookedInputSwitch,
-  q as HookedInputTextArea,
-  Y as HookedInputToggleButton,
-  j as HookedMarketWithCurrencySelector,
-  z as HookedValidationApiError,
-  K as HookedValidationError,
-  Q as Hr,
-  X as I18NProvider,
-  Z as Icon,
+  U as HookedInputSpinner,
+  J as HookedInputSwitch,
+  Y as HookedInputTextArea,
+  X as HookedInputToggleButton,
+  Z as HookedMarketWithCurrencySelector,
+  j as HookedValidationApiError,
+  q as HookedValidationError,
+  z as Hr,
+  K as I18NProvider,
+  Q as Icon,
   _ as Input,
   $ as InputCheckbox,
   aa as InputCheckboxGroup,
@@ -59,9 +59,9 @@ export {
   ta as InputDate,
   oa as InputDateRange,
   ra as InputFeedback,
-  na as InputFile,
-  ua as InputJson,
-  ca as InputRadioGroup,
+  ca as InputFile,
+  na as InputJson,
+  ua as InputRadioGroup,
   ia as InputResourceGroup,
   da as InputSelect,
   la as InputSimpleSelect,
@@ -73,8 +73,8 @@ export {
   Ia as Legend,
   ka as List,
   Ta as ListDetails,
-  Da as ListDetailsItem,
-  Ra as ListItem,
+  Ra as ListDetailsItem,
+  Da as ListItem,
   ya as LoadingPage,
   ha as MetaTags,
   Ca as PageError,
@@ -90,21 +90,21 @@ export {
   Ea as ResourceAddressFormFields,
   Na as ResourceAttachments,
   Ga as ResourceDetails,
-  Ma as ResourceLineItems,
-  wa as ResourceListItem,
-  xa as ResourceMetadata,
-  Va as ResourceOrderTimeline,
+  wa as ResourceLineItems,
+  Ma as ResourceListItem,
+  Va as ResourceMetadata,
+  xa as ResourceOrderTimeline,
   Wa as ResourcePaymentMethod,
-  Ja as ResourceShipmentParcels,
-  Ua as ResourceTags,
-  qa as Routes,
-  Ya as ScrollToTop,
-  ja as SearchBar,
-  za as Section,
-  Ka as Skeleton,
-  Qa as SkeletonItem,
-  Xa as SkeletonTemplate,
-  Za as Spacer,
+  Ua as ResourceShipmentParcels,
+  Ja as ResourceTags,
+  Ya as Routes,
+  Xa as ScrollToTop,
+  Za as SearchBar,
+  ja as Section,
+  qa as Skeleton,
+  za as SkeletonItem,
+  Ka as SkeletonTemplate,
+  Qa as Spacer,
   _a as Stack,
   $a as StatusDot,
   ae as StatusIcon,
@@ -113,9 +113,9 @@ export {
   te as Table,
   oe as TableData,
   re as Tabs,
-  ne as Tag,
-  ue as Td,
-  ce as Text,
+  ce as Tag,
+  ne as Td,
+  ue as Text,
   ie as Th,
   de as Timeline,
   le as TokenProvider,
@@ -127,8 +127,8 @@ export {
   Ie as createApp,
   ke as createRoute,
   Te as createTypedRoute,
-  De as currencies,
-  Re as currencyInputSelectOptions,
+  Re as currencies,
+  De as currencyInputSelectOptions,
   ye as downloadJsonAsFile,
   he as encodeExtras,
   Ce as flatSelectValues,
@@ -144,21 +144,21 @@ export {
   Ee as getDefaultValueFromFlatten,
   Ne as getEventDateInfo,
   Ge as getIsoDateAtDayEdge,
-  Me as getIsoDateAtDaysBefore,
-  we as getOrderDisplayStatus,
-  xe as getOrderFulfillmentStatusName,
-  Ve as getOrderPaymentStatusName,
+  we as getIsoDateAtDaysBefore,
+  Me as getOrderDisplayStatus,
+  Ve as getOrderFulfillmentStatusName,
+  xe as getOrderPaymentStatusName,
   We as getOrderStatusName,
-  Je as getOrderTransactionName,
-  Ue as getParcelTrackingDetail,
-  qe as getParcelTrackingDetails,
-  Ye as getPaymentMethodLogoSrc,
-  je as getPromotionDisplayStatus,
-  ze as getResourceAddressFormFieldsSchema,
-  Ke as getResourceEndpoint,
-  Qe as getReturnDisplayStatus,
-  Xe as getReturnStatusName,
-  Ze as getShipmentDisplayStatus,
+  Ue as getOrderTransactionName,
+  Je as getParcelTrackingDetail,
+  Ye as getParcelTrackingDetails,
+  Xe as getPaymentMethodLogoSrc,
+  Ze as getPromotionDisplayStatus,
+  je as getResourceAddressFormFieldsSchema,
+  qe as getResourceEndpoint,
+  ze as getReturnDisplayStatus,
+  Ke as getReturnStatusName,
+  Qe as getShipmentDisplayStatus,
   _e as getShipmentRate,
   $e as getShipmentRates,
   as as getShipmentStatusName,
@@ -167,9 +167,9 @@ export {
   ts as getUnitOfWeightName,
   os as getUnitsOfWeightForSelect,
   rs as goBack,
-  ns as hasBeenPurchased,
-  us as hasSingleTracking,
-  cs as i18nLocales,
+  cs as hasBeenPurchased,
+  ns as hasSingleTracking,
+  us as i18nLocales,
   is as isAttachmentValidNote,
   ds as isGroupedSelectValues,
   ls as isMultiValueSelected,
@@ -181,8 +181,8 @@ export {
   Is as setApiFormErrors,
   ks as sortAndGroupByDate,
   Ts as t,
-  Ds as timeSeparator,
-  Rs as useAppLinking,
+  Rs as timeSeparator,
+  Ds as useAppLinking,
   ys as useClickAway,
   hs as useCoreApi,
   Cs as useCoreSdkProvider,
@@ -198,7 +198,7 @@ export {
   Es as useResourceList,
   Ns as useTagManager,
   Gs as useTokenProvider,
-  Ms as useTranslation,
-  ws as useValidationFeedback,
-  xs as withSkeletonTemplate
+  ws as useTranslation,
+  Ms as useValidationFeedback,
+  Vs as withSkeletonTemplate
 };

package/dist/providers/CoreSdkProvider/CoreSdkProvider.d.ts

@@ -1,5 +1,5 @@
 import { CommerceLayerClient } from '@commercelayer/sdk';
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 interface CoreSdkProviderValue {
     /**
      * Valid SDK client

package/dist/providers/TokenProvider/MockTokenProvider.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { TokenProviderProps } from './TokenProvider';
 export declare function MockTokenProvider({ children, isInDashboard, onAppClose }: TokenProviderProps): JSX.Element;
 export declare namespace MockTokenProvider {

package/dist/providers/createApp.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactNode } from 'react';
 import { Root } from 'react-dom/client';
 import { TokenProviderAllowedApp } from './TokenProvider';
 import { TokenProviderProps } from './TokenProvider/TokenProvider';
@@ -31,5 +31,5 @@ export interface ClAppProps extends Partial<Omit<TokenProviderProps, 'appSlug' |
  * The React application will them be mounted into the provided `node` element, when the `init` method is called.
  * @param children - The root component of the app.
  **/
-export declare function createApp(children: FC<ClAppProps>, appSlug: TokenProviderAllowedApp): void;
+export declare function createApp(children: (props: ClAppProps) => ReactNode, appSlug: TokenProviderAllowedApp): void;
 export {};

package/dist/ui/atoms/Avatar.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { presets } from './Avatar.utils';
 type SrcPreset = keyof typeof presets;
 type SrcUrl = `https://${string}` | `data:image/${string}`;

package/dist/ui/atoms/AvatarLetter/AvatarLetter.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface AvatarLetterProps {
     /**
      * Text to be used to generate initials

package/dist/ui/atoms/Button.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { InteractiveElementProps } from '../internals/InteractiveElement.className';
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & InteractiveElementProps;
 /**

package/dist/ui/atoms/ButtonFilter.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { StatusIconProps } from './StatusIcon';
 export interface ButtonFilterProps extends React.HTMLAttributes<HTMLDivElement> {
     onClick?: () => void;

package/dist/ui/atoms/ButtonImageSelect.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 interface ButtonImage {
     src: string;
     alt: string;

package/dist/ui/atoms/Card.d.ts

@@ -39,7 +39,7 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -78,6 +78,10 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     children?: import('react').ReactNode | Iterable<import('react').ReactNode>;
@@ -309,8 +313,16 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLElement> | undefined;
     onAnimationIteration?: import('react').AnimationEventHandler<HTMLElement> | undefined;
     onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: import('react').ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: import('react').ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEnd?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     href?: string | undefined | undefined;
     footer?: import('react').ReactNode;
     backgroundColor?: "light" | undefined;
@@ -332,7 +344,7 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -371,6 +383,10 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     children?: import('react').ReactNode | Iterable<import('react').ReactNode>;
@@ -602,8 +618,16 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLElement> | undefined;
     onAnimationIteration?: import('react').AnimationEventHandler<HTMLElement> | undefined;
     onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: import('react').ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: import('react').ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEnd?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     href?: string | undefined | undefined;
     footer?: import('react').ReactNode;
     backgroundColor?: "light" | undefined;

package/dist/ui/atoms/EmptyState.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 import { StatusIconProps } from './StatusIcon';
 export interface EmptyStateProps {
     title: string;

package/dist/ui/atoms/Grid.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import { default as React, JSX, ReactNode } from 'react';
 export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /**
      * Grid items

package/dist/ui/atoms/Hint.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 import { IconProps } from './Icon';
 export interface HintProps {
     icon?: IconProps['name'];

package/dist/ui/atoms/Pagination.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface PaginationProps {
     /**
      * CSS classes

package/dist/ui/atoms/RadialProgress.d.ts

@@ -1,4 +1,4 @@
-import { SVGAttributes } from 'react';
+import { JSX, SVGAttributes } from 'react';
 import { StatusIconProps } from './StatusIcon';
 export interface RadialProgressProps extends SVGAttributes<SVGElement> {
     /**

package/dist/ui/atoms/RemoveButton.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface RemoveButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 /** Remove button is simply a button with attached an icon that highlight the functionality. */

package/dist/ui/atoms/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 export interface SkeletonProps {
     /**
      * This prevents Skeleton to appear immediately.

package/dist/ui/atoms/SkeletonTemplate.d.ts

@@ -1,6 +1,6 @@
-import { FC, FunctionComponent, ReactNode, ReactPortal } from 'react';
+import { FunctionComponent, ReactNode, ReactPortal } from 'react';
 import { Simplify } from 'type-fest';
-type ReactNodeNoPortal = Exclude<ReactNode, ReactPortal>;
+type ReactNodeNoPortal = Exclude<Awaited<ReactNode>, ReactPortal>;
 export type SkeletonTemplateProps<P = Record<string, unknown>> = Simplify<P & {
     /**
      * This prevents `SkeletonTemplate` to appear immediately.
@@ -16,7 +16,7 @@ export type SkeletonTemplateProps<P = Record<string, unknown>> = Simplify<P & {
 export interface SkeletonTemplateComponent<P = Record<string, unknown>> extends FunctionComponent<P> {
     isSkeletonTemplate: true;
 }
-export declare function withSkeletonTemplate<P>(Element: FC<SkeletonTemplateProps<P>>): SkeletonTemplateComponent<SkeletonTemplateProps<P>>;
+export declare function withSkeletonTemplate<P>(Element: (props: SkeletonTemplateProps<P>) => ReactNode): SkeletonTemplateComponent<SkeletonTemplateProps<P>>;
 declare const SkeletonTemplate: SkeletonTemplateComponent<SkeletonTemplateProps<{
     children: ReactNodeNoPortal;
 }>>;

package/dist/ui/atoms/Spacer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Value to be applied as `margin-top`

package/dist/ui/atoms/Stack.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 export interface StackProps {
     children: ReactNode;
 }

package/dist/ui/atoms/StatusDot.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 type DotVariant = 'success' | 'danger' | 'warning';
 export interface StatusDotProps {
     variant: DotVariant;

package/dist/ui/atoms/Table/Td.d.ts

@@ -1,6 +1,6 @@
 import { SkeletonTemplateProps } from '../SkeletonTemplate';
 export interface TdProps extends React.TdHTMLAttributes<HTMLElement>, SkeletonTemplateProps {
-    children?: React.ReactNode;
+    children?: Awaited<React.ReactNode>;
     textEllipsis?: number;
 }
 export declare const Td: React.FC<TdProps>;

package/dist/ui/atoms/Table/Th.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface ThProps extends React.ThHTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }

package/dist/ui/atoms/Table/Tr.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface TrProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }

package/dist/ui/atoms/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import { default as React, JSX, ReactNode } from 'react';
 export interface TabsProps {
     /**
      * Used for accessability

package/dist/ui/atoms/Tag.d.ts

@@ -1,5 +1,5 @@
 import { FlexRowProps } from '../internals/FlexRow';
-import { FC } from 'react';
+import { FC, JSX } from 'react';
 type Props = Pick<FlexRowProps, 'children'> & {
     /**
      * Icon component

package/dist/ui/atoms/Text.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 type TextVariant = 'danger' | 'success' | 'primary' | 'warning' | 'info' | 'plain' | 'disabled';
 type TextSize = 'small' | 'regular' | 'large' | 'inherit';
 type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold' | 'inherit';

package/dist/ui/composite/CardDialog.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface CardDialogProps {
     /**
      * Card title

package/dist/ui/composite/Dropdown/DropdownItem.d.ts

@@ -27,7 +27,7 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -66,6 +66,10 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     children?: import('react').ReactNode | Iterable<import('react').ReactNode>;
@@ -297,8 +301,16 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLElement> | undefined;
     onAnimationIteration?: import('react').AnimationEventHandler<HTMLElement> | undefined;
     onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: import('react').ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: import('react').ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEnd?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     label: string;
     info?: string | undefined;
     icon?: (IconProps["name"] | "keep-space") | undefined;
@@ -315,7 +327,7 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -354,6 +366,10 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     children?: import('react').ReactNode | Iterable<import('react').ReactNode>;
@@ -585,8 +601,16 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLElement> | undefined;
     onAnimationIteration?: import('react').AnimationEventHandler<HTMLElement> | undefined;
     onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: import('react').ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: import('react').ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEnd?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: import('react').TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     label: string;
     info?: string | undefined;
     icon?: (IconProps["name"] | "keep-space") | undefined;

package/dist/ui/composite/HomePageLayout.d.ts

@@ -1,6 +1,6 @@
 import { PageHeadingProps } from '../atoms/PageHeading';
 import { PageHeadingToolbarProps } from '../atoms/PageHeading/PageHeadingToolbar';
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 export interface HomePageLayoutProps extends Pick<PageHeadingProps, 'title'> {
     /**
      * Page content

package/dist/ui/composite/List.d.ts

@@ -1,5 +1,5 @@
 import { PaginationProps } from '../atoms/Pagination';
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 type ListPagination = {
     recordsPerPage: number;
     recordCount: number;

package/dist/ui/composite/ListDetails.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 export interface ListDetailsProps {
     /**
      * Optional title to show on top of the list

package/dist/ui/composite/ListDetailsItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 export interface ListDetailsItemProps {
     /**
      * label to show on the left side. In a key/value pair, this is the `key`

package/dist/ui/composite/ListItem.d.ts

@@ -1,5 +1,5 @@
 import { FlexRowProps } from '../internals/FlexRow';
-import { FC } from 'react';
+import { FC, JSX } from 'react';
 type ListItemVariant = 'list' | 'boxed';
 export type ListItemProps = React.HTMLAttributes<HTMLElement> & Pick<FlexRowProps, 'alignItems' | 'children'> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href'> & {
     /**

package/dist/ui/composite/PageError.d.ts

@@ -1,4 +1,5 @@
 import { PageHeadingProps } from '../atoms/PageHeading';
+import { JSX } from 'react';
 export interface PageErrorProps extends Pick<PageHeadingProps, 'navigationButton'> {
     /**
      * Main page title wrapped in a h1 element