@commercelayer/app-elements 2.3.1 → 2.3.3

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

@@ -43,12 +43,16 @@ export interface PageHeadingProps {
 declare const PageHeading: import('../SkeletonTemplate').SkeletonTemplateComponent<{
     title: ReactNode;
     description?: ReactNode;
-    gap?: "none" | "only-top" | "only-bottom" | "both";
+    gap?: ("none" | "only-top" | "only-bottom" | "both") | undefined;
     badge?: {
         label: string;
         /**  @default warning-solid  */
         variant?: BadgeProps["variant"];
-    };
+    }
+    /**
+     * When set, it will render a navigation (eg: go back) button on the left side of the first row
+     */
+     | undefined;
     navigationButton?: {
         label: string;
         onClick: () => void;
@@ -57,9 +61,13 @@ declare const PageHeading: import('../SkeletonTemplate').SkeletonTemplateCompone
          * @default arrowLeft
          */
         icon?: "x" | "arrowLeft";
-    };
-    toolbar?: PageHeadingToolbarProps;
-    delayMs?: number;
-    isLoading?: boolean;
+    }
+    /**
+     * When set, it will render a proper toolbar on the right side of the first row
+     */
+     | undefined;
+    toolbar?: PageHeadingToolbarProps | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;
 export { PageHeading };

package/dist/ui/atoms/PageHeading/PageHeadingToolbar.d.ts

@@ -17,9 +17,13 @@ export interface PageHeadingToolbarProps {
  * It will use the `Toolbar` component UI to render properly the given items providing automated responsive behaviors to reorganize them.
  */
 export declare const PageHeadingToolbar: import('../SkeletonTemplate').SkeletonTemplateComponent<{
-    buttons?: ToolbarButton[];
-    dropdownItems?: DropdownItemProps[][];
-    delayMs?: number;
-    isLoading?: boolean;
+    buttons?: ToolbarButton[]
+    /**
+     * Toolbar dropdown items sets. They are rendered in a generated `Dropdown`.
+     */
+     | undefined;
+    dropdownItems?: DropdownItemProps[][] | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;
 export {};

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

@@ -23,10 +23,12 @@ export interface SectionProps {
 export declare const Section: import('./SkeletonTemplate').SkeletonTemplateComponent<{
     children: React.ReactNode;
     title?: ReactNode;
-    titleSize?: "normal" | "small";
-    border?: "none";
+    titleSize?: ("normal" | "small") | undefined;
+    border?: "none"
+    /** This will render a button on the right side of the row. */
+     | undefined;
     actionButton?: ReactNode;
-    className?: string;
-    delayMs?: number;
-    isLoading?: boolean;
+    className?: string | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

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

@@ -16,6 +16,6 @@ export declare const ActionButtons: import('../../atoms/SkeletonTemplate').Skele
         variant?: ButtonProps["variant"];
         disabled?: boolean;
     }>;
-    delayMs?: number;
-    isLoading?: boolean;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

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

@@ -30,12 +30,20 @@ export interface CardDialogProps {
 }
 export declare const CardDialog: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     title: string;
-    subtitle?: string;
+    subtitle?: string
+    /**
+     * This text is displayed in the card header on the right
+     */
+     | undefined;
     rightContent?: React.ReactNode;
-    icon?: JSX.Element;
-    onClose?: () => void;
+    icon?: JSX.Element
+    /**
+     * When defined, this will show a close button on the right
+     */
+     | undefined;
+    onClose?: (() => void) | undefined;
     children?: React.ReactNode;
     footer?: React.ReactNode;
-    delayMs?: number;
-    isLoading?: boolean;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

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

@@ -66,20 +66,20 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     unselectable?: "on" | "off" | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
-    'data-tooltip-id'?: string;
-    'data-tooltip-place'?: import('react-tooltip').PlacesType;
-    'data-tooltip-content'?: string | null;
-    'data-tooltip-html'?: string | null;
-    'data-tooltip-variant'?: import('react-tooltip').VariantType;
-    'data-tooltip-offset'?: number;
-    'data-tooltip-wrapper'?: import('react-tooltip').WrapperType;
-    'data-tooltip-events'?: import('react-tooltip').EventsType[];
-    'data-tooltip-position-strategy'?: import('react-tooltip').PositionStrategy;
-    'data-tooltip-delay-show'?: number;
-    'data-tooltip-delay-hide'?: number;
-    'data-tooltip-float'?: boolean;
-    'data-tooltip-hidden'?: boolean;
-    'data-tooltip-class-name'?: string;
+    'data-tooltip-id'?: string | undefined;
+    'data-tooltip-place'?: import('react-tooltip').PlacesType | undefined;
+    'data-tooltip-content'?: (string | null) | undefined;
+    'data-tooltip-html'?: (string | null) | undefined;
+    'data-tooltip-variant'?: import('react-tooltip').VariantType | undefined;
+    'data-tooltip-offset'?: number | undefined;
+    'data-tooltip-wrapper'?: import('react-tooltip').WrapperType | undefined;
+    'data-tooltip-events'?: import('react-tooltip').EventsType[] | undefined;
+    'data-tooltip-position-strategy'?: import('react-tooltip').PositionStrategy | undefined;
+    'data-tooltip-delay-show'?: number | undefined;
+    'data-tooltip-delay-hide'?: number | undefined;
+    'data-tooltip-float'?: boolean | undefined;
+    'data-tooltip-hidden'?: boolean | undefined;
+    'data-tooltip-class-name'?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -298,11 +298,11 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     onTransitionEnd?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     label: string;
-    icon?: IconProps["name"] | "keep-space";
+    icon?: (IconProps["name"] | "keep-space") | undefined;
     href: string;
-    target?: string;
-    delayMs?: number;
-    isLoading?: boolean;
+    target?: string | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 } | {
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -352,20 +352,20 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     unselectable?: "on" | "off" | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
-    'data-tooltip-id'?: string;
-    'data-tooltip-place'?: import('react-tooltip').PlacesType;
-    'data-tooltip-content'?: string | null;
-    'data-tooltip-html'?: string | null;
-    'data-tooltip-variant'?: import('react-tooltip').VariantType;
-    'data-tooltip-offset'?: number;
-    'data-tooltip-wrapper'?: import('react-tooltip').WrapperType;
-    'data-tooltip-events'?: import('react-tooltip').EventsType[];
-    'data-tooltip-position-strategy'?: import('react-tooltip').PositionStrategy;
-    'data-tooltip-delay-show'?: number;
-    'data-tooltip-delay-hide'?: number;
-    'data-tooltip-float'?: boolean;
-    'data-tooltip-hidden'?: boolean;
-    'data-tooltip-class-name'?: string;
+    'data-tooltip-id'?: string | undefined;
+    'data-tooltip-place'?: import('react-tooltip').PlacesType | undefined;
+    'data-tooltip-content'?: (string | null) | undefined;
+    'data-tooltip-html'?: (string | null) | undefined;
+    'data-tooltip-variant'?: import('react-tooltip').VariantType | undefined;
+    'data-tooltip-offset'?: number | undefined;
+    'data-tooltip-wrapper'?: import('react-tooltip').WrapperType | undefined;
+    'data-tooltip-events'?: import('react-tooltip').EventsType[] | undefined;
+    'data-tooltip-position-strategy'?: import('react-tooltip').PositionStrategy | undefined;
+    'data-tooltip-delay-show'?: number | undefined;
+    'data-tooltip-delay-hide'?: number | undefined;
+    'data-tooltip-float'?: boolean | undefined;
+    'data-tooltip-hidden'?: boolean | undefined;
+    'data-tooltip-class-name'?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -584,8 +584,8 @@ export declare const DropdownItem: import('../../atoms/SkeletonTemplate').Skelet
     onTransitionEnd?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLElement> | undefined;
     label: string;
-    icon?: IconProps["name"] | "keep-space";
-    href?: never;
-    delayMs?: number;
-    isLoading?: boolean;
+    icon?: (IconProps["name"] | "keep-space") | undefined;
+    href?: never | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

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

@@ -8,7 +8,7 @@ export interface ListDetailsItemProps {
     /**
      * content to show on the right side.
      * It represent the value.
-     * Most of the type it should be a `<CopyToClipboard>` component
+     * Most of the time it should be a `<CopyToClipboard>` component
      */
     children?: ReactNode;
     /**

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

@@ -23,19 +23,23 @@ export interface PageLayoutProps extends Pick<PageHeadingProps, 'title' | 'descr
 }
 export declare const PageLayout: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     children: ReactNode;
-    mode?: "test" | "live";
-    overlay?: boolean;
-    scrollToTop?: boolean;
+    mode?: ("test" | "live") | undefined;
+    overlay?: boolean
+    /**
+     * Optional prop to enable scroll to top behavior on location change
+     */
+     | undefined;
+    scrollToTop?: boolean | undefined;
     description?: ReactNode;
     title: ReactNode;
-    gap?: "none" | "only-top" | "only-bottom" | "both";
-    toolbar?: import('../atoms/PageHeading/PageHeadingToolbar').PageHeadingToolbarProps;
+    gap?: ("none" | "only-top" | "only-bottom" | "both") | undefined;
+    toolbar?: import('../atoms/PageHeading/PageHeadingToolbar').PageHeadingToolbarProps | undefined;
     navigationButton?: {
         label: string;
         onClick: () => void;
         icon?: "x" | "arrowLeft";
-    };
-    minHeight?: boolean;
-    delayMs?: number;
-    isLoading?: boolean;
+    } | undefined;
+    minHeight?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

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

@@ -14,11 +14,11 @@ export interface TimelineProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 export declare const Timeline: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     events: TimelineEvent[];
-    timezone?: string;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-    delayMs?: number;
-    isLoading?: boolean;
+    timezone?: string | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

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

@@ -27,6 +27,6 @@ export interface ToolbarProps {
  */
 export declare const Toolbar: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     items: ToolbarItem[];
-    delayMs?: number;
-    isLoading?: boolean;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

package/dist/ui/forms/InputCheckboxGroup/InputCheckboxGroup.d.ts

@@ -21,12 +21,20 @@ export interface SelectedItem {
  * <span type="info">Quantity for each option item has a min/max range, to prevent selecting less or more than the allowed number.</span>
  */
 export declare const InputCheckboxGroup: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
-    title?: string;
+    title?: string
+    /**
+     * list of options to render as checkboxes with quantity input
+     */
+     | undefined;
     options: InputCheckboxGroupOption[];
-    defaultValues?: SelectedItem[];
+    defaultValues?: SelectedItem[]
+    /**
+     * Callback triggered when the user checks/unchecks an option or changes the quantity
+     */
+     | undefined;
     onChange: (selected: SelectedItem[]) => void;
-    feedback?: Omit<import('../InputFeedback').InputFeedbackProps, "className">;
-    delayMs?: number;
-    isLoading?: boolean;
+    feedback?: Omit<import('../InputFeedback').InputFeedbackProps, "className"> | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;
 export type InputCheckboxGroupProps = ComponentProps<typeof InputCheckboxGroup>;

package/dist/ui/forms/InputCheckboxGroup/InputCheckboxGroupItem.d.ts

@@ -40,17 +40,21 @@ export interface Props extends InputCheckboxGroupOption {
  */
 export declare const InputCheckboxGroupItem: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     onChange: (value: string, newQuantity?: number) => void;
-    defaultQuantity?: number;
-    name?: string;
+    defaultQuantity?: number | undefined;
+    name?: string
+    /**
+     * Item identifier, must be unique and will be used for the onChange callback.
+     */
+     | undefined;
     value: string;
     content: React.ReactNode;
     quantity?: {
         min: number;
         max: number;
-    };
-    icon?: JSX.Element;
+    } | undefined;
+    icon?: JSX.Element | undefined;
     checked?: boolean | undefined;
-    delayMs?: number;
-    isLoading?: boolean;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;
 export type InputCheckboxGroupItemProps = ComponentProps<typeof InputCheckboxGroupItem>;

package/dist/ui/forms/InputRadioGroup/InputRadioGroup.d.ts

@@ -19,20 +19,33 @@ interface OptionItem {
     className?: string;
 }
 export declare const InputRadioGroup: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
-    title?: string;
+    title?: string
+    /**
+     * Input name, will be used to set the html name for all radios
+     */
+     | undefined;
     name: string;
     options: OptionItem[];
-    defaultValue?: string;
-    onChange?: (selected: string | undefined) => void;
-    showInput?: boolean;
-    viewMode?: "list" | "inline" | "grid" | "simple";
+    defaultValue?: string
+    /**
+     * Callback triggered when the user update the selection
+     */
+     | undefined;
+    onChange?: ((selected: string | undefined) => void) | undefined;
+    showInput?: boolean
+    /**
+     * Define how the item options are rendered
+     * @default list
+     */
+     | undefined;
+    viewMode?: ("list" | "inline" | "grid" | "simple") | undefined;
     hint?: {
         icon?: import('../../atoms/Hint').HintProps["icon"];
         text: import('../../atoms/Hint').HintProps["children"];
-    };
-    feedback?: Omit<import('../InputFeedback').InputFeedbackProps, "className">;
-    delayMs?: number;
-    isLoading?: boolean;
+    } | undefined;
+    feedback?: Omit<import('../InputFeedback').InputFeedbackProps, "className"> | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;
 export type InputRadioGroupProps = ComponentProps<typeof InputRadioGroup>;
 export {};

package/dist/ui/internals/InputWrapper.d.ts

@@ -33,19 +33,32 @@ export interface InputWrapperProps extends InputWrapperBaseProps {
     fieldset?: boolean;
 }
 export declare const InputWrapper: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
-    className?: string;
-    name?: string;
+    className?: string | undefined;
+    name?: string | undefined;
     children: React.ReactNode;
-    fieldset?: boolean;
-    label?: string;
+    fieldset?: boolean | undefined;
+    label?: string
+    /**
+     * Optional hint to be rendered below
+     */
+     | undefined;
     hint?: {
         icon?: HintProps["icon"];
         text: HintProps["children"];
-    };
-    feedback?: Omit<InputFeedbackProps, "className">;
-    inline?: boolean;
-    delayMs?: number;
-    isLoading?: boolean;
+    }
+    /**
+     * Optional hint to be rendered below
+     */
+     | undefined;
+    feedback?: Omit<InputFeedbackProps, "className">
+    /**
+     * Show label and input on the same line
+     * @default false
+     */
+     | undefined;
+    inline?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;
 export declare function getFeedbackStyle(feedback?: Omit<InputFeedbackProps, 'className'>): Record<string, boolean>;
 export declare function getFeedbackCssInJs(variant?: InputFeedbackProps['variant']): Pick<CSSStyleDeclaration, 'boxShadow'> & {

package/dist/ui/resources/ResourceAddress/ResourceAddress.d.ts

@@ -31,10 +31,26 @@ export interface ResourceAddressProps {
  */
 export declare const ResourceAddress: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     resource: Address;
-    title?: string;
-    editable?: boolean;
-    showBillingInfo?: boolean;
-    showNotes?: boolean;
-    delayMs?: number;
-    isLoading?: boolean;
+    title?: string
+    /**
+     * Optional setting to define if given address is editable (if set the Edit button and Overlay will be enabled).
+     * Given the setting the component will also verify user abilities to ensure if he is enabled to update the
+     * requested resource before to render editable related functionalities.
+     */
+     | undefined;
+    editable?: boolean
+    /**
+     * Optional setting to define if given `Address` `billing_info` data is visible.
+     * @default false
+     */
+     | undefined;
+    showBillingInfo?: boolean
+    /**
+     * Optional setting to define if given `Address` `billing_info` data is visible.
+     * @default true
+     */
+     | undefined;
+    showNotes?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

package/dist/ui/resources/ResourceAddress/ResourceAddressForm.d.ts

@@ -3,9 +3,9 @@ import { Address } from '@commercelayer/sdk';
 export declare const ResourceAddressForm: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     address: Address;
     onChange: (updatedAddress: Address) => void;
-    showBillingInfo?: boolean;
-    showNotes?: boolean;
-    showNameOrCompany?: boolean;
-    delayMs?: number;
-    isLoading?: boolean;
+    showBillingInfo?: boolean | undefined;
+    showNotes?: boolean | undefined;
+    showNameOrCompany?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

package/dist/ui/resources/ResourceAddress/ResourceAddressFormFields.d.ts

@@ -98,10 +98,29 @@ export interface ResourceAddressFormFieldsProps {
     showNameOrCompany?: boolean;
 }
 export declare const ResourceAddressFormFields: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
-    name?: string;
-    showBillingInfo?: boolean;
-    showNotes?: boolean;
-    showNameOrCompany?: boolean;
-    delayMs?: number;
-    isLoading?: boolean;
+    name?: string
+    /**
+     * Optional setting to define if given `Address` `billing_info` data is visible.
+     * @default false
+     */
+     | undefined;
+    showBillingInfo?: boolean
+    /**
+     * Optional setting to define if given `Address` `billing_info` data is visible.
+     * @default true
+     */
+     | undefined;
+    showNotes?: boolean
+    /**
+     * Determines whether to show only business fields (`company`) or non-business fields (`first_name` and `last_name`).
+     *
+     * When `business` is set to **`true`** the `first_name` and `last_name` fields are hidden.
+     * When `business` is set to **`false`** the `company` field is hidden.
+     *
+     * @default false
+     */
+     | undefined;
+    showNameOrCompany?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

package/dist/ui/resources/ResourceLineItems/ResourceLineItems.d.ts

@@ -9,15 +9,23 @@ export type ResourceLineItemsProps = ComponentProps<typeof ResourceLineItems>;
  */
 export declare const ResourceLineItems: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     items: Item[];
-    size?: "small" | "normal";
+    size?: ("small" | "normal") | undefined;
     footer?: Array<{
         key: string;
         element: React.ReactNode;
         fullWidth?: boolean;
-    }>;
-    editable?: boolean;
-    onChange?: () => void;
-    delayMs?: number;
-    isLoading?: boolean;
+    }>
+    /**
+     * Optional setting to define the visibility of line item Edit link.
+     */
+     | undefined;
+    editable?: boolean
+    /**
+     * Optional onChange function to define line item Edit callback.
+     */
+     | undefined;
+    onChange?: (() => void) | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;
 export {};

package/dist/ui/resources/ResourceListItem/ResourceListItem.d.ts

@@ -26,7 +26,7 @@ export declare const ResourceListItem: import('../../atoms/SkeletonTemplate').Sk
     resource: ResourceListItemType;
     href?: ListItemProps["href"];
     onClick?: ListItemProps["onClick"];
-    showRightContent?: boolean;
-    delayMs?: number;
-    isLoading?: boolean;
+    showRightContent?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

package/dist/ui/resources/ResourceListItem/ResourceListItem.mocks.d.ts

@@ -396,6 +396,22 @@ export declare const presetResourceListItem: {
             created_at: string;
         };
     };
+    skuListItemWithQuantity: {
+        type: "sku_list_items";
+        id: string;
+        quantity: number;
+        sku: {
+            readonly type: "skus";
+            readonly id: "";
+            readonly code: "BASEBHAT000000FFFFFFXXXX";
+            readonly name: "Black Baseball Hat with White Logo";
+            readonly image_url: "https://res.cloudinary.com/commercelayer/image/upload/f_auto,b_white/demo-store/skus/BASEBHAT000000FFFFFFXXXX_FLAT.png";
+            readonly created_at: "";
+            readonly updated_at: "";
+        };
+        created_at: string;
+        updated_at: string;
+    };
     stockTransferUpcoming: {
         type: "stock_transfers";
         id: string;

package/dist/ui/resources/ResourceListItem/common.d.ts

@@ -3,13 +3,13 @@ import { DisplayStatus } from '../../../dictionaries/types';
 export declare const ListItemDescription: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     displayStatus: DisplayStatus;
     date: string;
-    additionalInfos?: string;
-    delayMs?: number;
-    isLoading?: boolean;
+    additionalInfos?: string | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;
 export declare const ListItemIcon: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     color: import('../../atoms/StatusIcon').StatusIconProps["background"];
     icon: import('../../atoms/StatusIcon').StatusIconProps["name"];
-    delayMs?: number;
-    isLoading?: boolean;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
 }>;

package/dist/ui/resources/ResourceListItem/transformers/index.d.ts

@@ -2,4 +2,5 @@ export { customerToProps } from './customers';
 export { orderToProps } from './orders';
 export { returnToProps } from './returns';
 export { shipmentToProps } from './shipments';
+export { skuListItemToProps } from './skuListItem';
 export { stockTransferToProps } from './stockTransfers';

package/dist/ui/resources/ResourceListItem/transformers/skuListItem.d.ts

@@ -0,0 +1,4 @@
+import { SkuListItem } from '@commercelayer/sdk';
+import { ResourceToProps } from '../types';
+
+export declare const skuListItemToProps: ResourceToProps<SkuListItem>;

package/dist/ui/resources/ResourceListItem/types.d.ts

@@ -1,12 +1,15 @@
 import { TokenProviderAuthUser } from '../../../providers/TokenProvider/types';
-import { BuyXPayYPromotion, Customer, ExternalPromotion, FixedAmountPromotion, FixedPricePromotion, FreeGiftPromotion, FreeShippingPromotion, Order, PercentageDiscountPromotion, Return, Shipment, StockTransfer } from '@commercelayer/sdk';
+import { ListItemProps } from '../../composite/ListItem';
+import { BuyXPayYPromotion, Customer, ExternalPromotion, FixedAmountPromotion, FixedPricePromotion, FreeGiftPromotion, FreeShippingPromotion, Order, PercentageDiscountPromotion, Return, Shipment, SkuListItem, StockTransfer } from '@commercelayer/sdk';
 
-export type ResourceListItemType = Order | Return | Customer | StockTransfer | Shipment | BuyXPayYPromotion | ExternalPromotion | FixedAmountPromotion | FixedPricePromotion | FreeGiftPromotion | FreeShippingPromotion | PercentageDiscountPromotion;
+export type ResourceListItemType = Order | Return | Customer | StockTransfer | SkuListItem | Shipment | BuyXPayYPromotion | ExternalPromotion | FixedAmountPromotion | FixedPricePromotion | FreeGiftPromotion | FreeShippingPromotion | PercentageDiscountPromotion;
 export interface ResourceListItemComponentProps {
     name: React.ReactNode;
     description: JSX.Element | string;
     icon: JSX.Element;
     rightContent?: JSX.Element;
+    invertNameDescription?: boolean;
+    alignItems?: ListItemProps['alignItems'];
 }
 export type ResourceToProps<Resource> = (options: {
     resource: Resource;