@commercelayer/app-elements 1.8.2 → 1.8.3

package/dist/main.d.ts

@@ -40,6 +40,7 @@ export { SkeletonTemplate, withSkeletonTemplate } from './ui/atoms/SkeletonTempl
 export { Spacer, type SpacerProps } from './ui/atoms/Spacer';
 export { Stack, type StackProps } from './ui/atoms/Stack';
 export { StatusDot, type StatusDotProps } from './ui/atoms/StatusDot';
+export { StatusIcon, type StatusIconProps } from './ui/atoms/StatusIcon';
 export { Steps, type StepsProps } from './ui/atoms/Steps';
 export { Table, Td, Th, Tr, type TableProps, type TdProps, type ThProps, type TrProps } from './ui/atoms/Table';
 export { Tab, Tabs, type TabProps, type TabsProps } from './ui/atoms/Tabs';

package/dist/main.js

@@ -1,4 +1,4 @@
-import { ar as i, b0 as c, as as p, at as b, au as l, av as d, aw as g, ax as m, ay as S, b1 as I, az as k, aA as T, ai as D, b2 as R, b3 as h, b4 as y, aB as C, al as H, am as A, aC as P, aD as f, bj as B, bk as F, bm as O, bo as v, bq as L, bu as N, bw as w, bB as G, bE as V, bG as x, bN as M, bP as E, bR as z, bT as J, bV as W, bZ as j, b_ as U, aE as Y, aF as Z, bl as $, bn as q, bp as K, br as Q, bt as X, bv as _, bx as aa, by as ea, bz as sa, bA as ta, bC as oa, bD as ra, bF as na, bH as ua, bO as ia, bQ as ca, bS as pa, bU as ba, bW as la, bX as da, bY as ga, b5 as ma, b6 as Sa, b7 as Ia, b8 as ka, ao as Ta, b9 as Da, ba as Ra, bb as ha, aG as ya, bc as Ca, bd as Ha, aH as Aa, aI as Pa, aJ as fa, aK as Ba, be as Fa, c1 as Oa, c2 as va, c3 as La, c4 as Na, c5 as wa, c6 as Ga, c7 as Va, c8 as xa, c9 as Ma, bf as Ea, aL as za, aM as Ja, aN as Wa, aO as ja, aQ as Ua, aR as Ya, aS as Za, aT as $a, bg as qa, aY as Ka, aU as Qa, bh as Xa, aZ as _a, a_ as ae, aV as ee, a$ as se, aW as te, bi as oe, ap as re, aX as ne, a3 as ue, a2 as ie, bI as ce, bs as pe, W as be, Y as le, a4 as de, a5 as ge, a6 as me, cb as Se, cc as Ie, bJ as ke, Z as Te, $ as De, cd as Re, ce as he, cf as ye, cg as Ce, ch as He, ci as Ae, a7 as Pe, a8 as fe, cj as Be, ck as Fe, cl as Oe, a9 as ve, aa as Le, cm as Ne, cn as we, co as Ge, S as Ve, ab as xe, ac as Me, U as Ee, bK as ze, bL as Je, bM as We, T as je, V as Ue, b$ as Ye, a0 as Ze, a1 as $e, ad as qe, aj as Ke, ak as Qe, ae as Xe, af as _e, ag as as, ah as es, ca as ss, an as ts, aq as os, c0 as rs, aP as ns } from "./main-9651b7ba.js";
+import { ar as i, b1 as c, as as p, at as b, au as l, av as d, aw as g, ax as m, ay as S, b2 as I, az as k, aA as T, ai as D, b3 as R, b4 as h, b5 as y, aB as C, al as H, am as A, aC as P, aD as f, bk as B, bl as F, bn as O, bp as v, br as L, bv as N, bx as w, bC as G, bF as V, bH as x, bO as M, bQ as E, bS as z, bU as J, bW as W, b_ as j, b$ as U, aE as Y, aF as Z, bm as $, bo as q, bq as K, bs as Q, bu as X, bw as _, by as aa, bz as ea, bA as sa, bB as ta, bD as oa, bE as ra, bG as na, bI as ua, bP as ia, bR as ca, bT as pa, bV as ba, bX as la, bY as da, bZ as ga, b6 as ma, b7 as Sa, b8 as Ia, b9 as ka, ao as Ta, ba as Da, bb as Ra, bc as ha, aG as ya, bd as Ca, be as Ha, aH as Aa, aI as Pa, aJ as fa, aK as Ba, bf as Fa, c2 as Oa, c3 as va, c4 as La, c5 as Na, c6 as wa, c7 as Ga, c8 as Va, c9 as xa, ca as Ma, bg as Ea, aL as za, aM as Ja, aN as Wa, aO as ja, aQ as Ua, aR as Ya, aS as Za, aT as $a, aU as qa, bh as Ka, aZ as Qa, aV as Xa, bi as _a, a_ as ae, a$ as ee, aW as se, b0 as te, aX as oe, bj as re, ap as ne, aY as ue, a3 as ie, a2 as ce, bJ as pe, bt as be, W as le, Y as de, a4 as ge, a5 as me, a6 as Se, cc as Ie, cd as ke, bK as Te, Z as De, $ as Re, ce as he, cf as ye, cg as Ce, ch as He, ci as Ae, cj as Pe, a7 as fe, a8 as Be, ck as Fe, cl as Oe, cm as ve, a9 as Le, aa as Ne, cn as we, co as Ge, cp as Ve, S as xe, ab as Me, ac as Ee, U as ze, bL as Je, bM as We, bN as je, T as Ue, V as Ye, c0 as Ze, a0 as $e, a1 as qe, ad as Ke, aj as Qe, ak as Xe, ae as _e, af as as, ag as es, ah as ss, cb as ts, an as os, aq as rs, c1 as ns, aP as us } from "./main-33ca6087.js";
 import "react";
 import "react-dom";
 import "@commercelayer/sdk";
@@ -100,71 +100,72 @@ export {
   Ua as Spacer,
   Ya as Stack,
   Za as StatusDot,
-  $a as Steps,
-  qa as SwitchMode,
-  Ka as Tab,
-  Qa as Table,
-  Xa as TableData,
-  _a as Tabs,
-  ae as Tag,
-  ee as Td,
-  se as Text,
-  te as Th,
-  oe as Timeline,
-  re as TokenProvider,
-  ne as Tr,
-  ue as computeFullname,
-  ie as downloadJsonAsFile,
-  ce as flatSelectValues,
-  pe as formatCentsToCurrency,
-  be as formatDate,
-  le as formatDateWithPredicate,
-  de as formatDisplayName,
-  ge as formatResourceName,
-  me as getAvatarSrcFromRate,
-  Se as getCustomerDisplayStatus,
-  Ie as getCustomerStatusName,
-  ke as getDefaultValueFromFlatten,
-  Te as getIsoDateAtDayEdge,
-  De as getIsoDateAtDaysBefore,
-  Re as getOrderDisplayStatus,
-  he as getOrderFulfillmentStatusName,
-  ye as getOrderPaymentStatusName,
-  Ce as getOrderStatusName,
-  He as getOrderTransactionPastTense,
-  Ae as getOrderTriggerAttributeName,
-  Pe as getParcelTrackingDetail,
-  fe as getParcelTrackingDetails,
-  Be as getReturnDisplayStatus,
-  Fe as getReturnStatusName,
-  Oe as getShipmentDisplayStatus,
-  ve as getShipmentRate,
-  Le as getShipmentRates,
-  Ne as getShipmentStatusName,
-  we as getStockTransferDisplayStatus,
-  Ge as getStockTransferStatusName,
-  Ve as goBack,
-  xe as hasBeenPurchased,
-  Me as hasSingleTracking,
-  Ee as isAttachmentValidNote,
-  ze as isGroupedSelectValues,
-  Je as isMultiValueSelected,
-  We as isSingleValueSelected,
-  je as navigateTo,
-  Ue as referenceOrigins,
-  Ye as setApiFormErrors,
-  Ze as sortAndGroupByDate,
-  $e as timeSeparator,
-  qe as useClickAway,
-  Ke as useCoreApi,
-  Qe as useCoreSdkProvider,
-  Xe as useDelayShow,
-  _e as useIsChanged,
-  as as useOnBlurFromContainer,
-  es as useOverlay,
-  ss as useResourceFilters,
-  ts as useTagManager,
-  os as useTokenProvider,
-  rs as useValidationFeedback,
-  ns as withSkeletonTemplate
+  $a as StatusIcon,
+  qa as Steps,
+  Ka as SwitchMode,
+  Qa as Tab,
+  Xa as Table,
+  _a as TableData,
+  ae as Tabs,
+  ee as Tag,
+  se as Td,
+  te as Text,
+  oe as Th,
+  re as Timeline,
+  ne as TokenProvider,
+  ue as Tr,
+  ie as computeFullname,
+  ce as downloadJsonAsFile,
+  pe as flatSelectValues,
+  be as formatCentsToCurrency,
+  le as formatDate,
+  de as formatDateWithPredicate,
+  ge as formatDisplayName,
+  me as formatResourceName,
+  Se as getAvatarSrcFromRate,
+  Ie as getCustomerDisplayStatus,
+  ke as getCustomerStatusName,
+  Te as getDefaultValueFromFlatten,
+  De as getIsoDateAtDayEdge,
+  Re as getIsoDateAtDaysBefore,
+  he as getOrderDisplayStatus,
+  ye as getOrderFulfillmentStatusName,
+  Ce as getOrderPaymentStatusName,
+  He as getOrderStatusName,
+  Ae as getOrderTransactionPastTense,
+  Pe as getOrderTriggerAttributeName,
+  fe as getParcelTrackingDetail,
+  Be as getParcelTrackingDetails,
+  Fe as getReturnDisplayStatus,
+  Oe as getReturnStatusName,
+  ve as getShipmentDisplayStatus,
+  Le as getShipmentRate,
+  Ne as getShipmentRates,
+  we as getShipmentStatusName,
+  Ge as getStockTransferDisplayStatus,
+  Ve as getStockTransferStatusName,
+  xe as goBack,
+  Me as hasBeenPurchased,
+  Ee as hasSingleTracking,
+  ze as isAttachmentValidNote,
+  Je as isGroupedSelectValues,
+  We as isMultiValueSelected,
+  je as isSingleValueSelected,
+  Ue as navigateTo,
+  Ye as referenceOrigins,
+  Ze as setApiFormErrors,
+  $e as sortAndGroupByDate,
+  qe as timeSeparator,
+  Ke as useClickAway,
+  Qe as useCoreApi,
+  Xe as useCoreSdkProvider,
+  _e as useDelayShow,
+  as as useIsChanged,
+  es as useOnBlurFromContainer,
+  ss as useOverlay,
+  ts as useResourceFilters,
+  os as useTagManager,
+  rs as useTokenProvider,
+  ns as useValidationFeedback,
+  us as withSkeletonTemplate
 };

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

@@ -1,8 +1,10 @@
+import { type IconProps } from '../../atoms/Icon';
 import React from 'react';
 import { variantCss } from './badgeVariants';
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Render a different variant. */
     variant: keyof typeof variantCss;
+    icon?: IconProps['name'];
     children: React.ReactNode;
 }
 /** Badges are used to highlight an item's status for quick recognition. */

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { type IconProps } from './Icon';
+import { type StatusIconProps } from './StatusIcon';
 export interface ButtonFilterProps extends React.HTMLAttributes<HTMLDivElement> {
     onClick?: () => void;
     onRemoveRequest?: () => void;
-    icon?: IconProps['name'];
+    icon?: StatusIconProps['name'];
     label: string;
 }
 declare function ButtonFilter({ onClick, onRemoveRequest, label, icon, className, ...rest }: ButtonFilterProps): JSX.Element;

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

@@ -1,11 +1,11 @@
 import { type ReactNode } from 'react';
-import { type IconProps } from './Icon';
+import { type StatusIconProps } from './StatusIcon';
 export interface EmptyStateProps {
     title: string;
     description?: ReactNode;
     action?: ReactNode;
     className?: string;
-    icon?: IconProps['name'];
+    icon?: StatusIconProps['name'];
 }
 declare function EmptyState({ title, description, action, icon, className, ...rest }: EmptyStateProps): JSX.Element;
 declare namespace EmptyState {

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

@@ -1,18 +1,11 @@
 /// <reference types="react" />
+import { type IconProps as PhosphorIconProps } from '@phosphor-icons/react';
 import { iconMapping } from './icons';
-export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IconProps extends PhosphorIconProps {
     /**
      * Name of the icon to display
      */
     name: keyof typeof iconMapping;
-    /**
-     * Background color, `none` for no background
-     */
-    background?: 'green' | 'orange' | 'red' | 'gray' | 'teal' | 'white' | 'black' | 'none';
-    /**
-     * padding around the icon can bne: 'none' | 'small' | 'large'
-     */
-    gap?: 'none' | 'small' | 'large';
 }
 /** `app-elements` provides a subset of [Phosphor Icons](https://phosphoricons.com/) out-of-the-box. */
 export declare const Icon: React.FC<IconProps>;

package/dist/ui/atoms/Icon/icons.d.ts

@@ -25,6 +25,7 @@ export declare const iconMapping: {
     readonly hourglass: phosphor.Icon;
     readonly magnifyingGlass: phosphor.Icon;
     readonly minus: phosphor.Icon;
+    readonly minusCircle: phosphor.Icon;
     readonly package: phosphor.Icon;
     readonly pencilSimple: phosphor.Icon;
     readonly printer: phosphor.Icon;
@@ -39,4 +40,5 @@ export declare const iconMapping: {
     readonly warning: phosphor.Icon;
     readonly warningCircle: phosphor.Icon;
     readonly x: phosphor.Icon;
+    readonly xCircle: phosphor.Icon;
 };

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

@@ -1,5 +1,5 @@
 import { type SVGAttributes } from 'react';
-import { type IconProps } from './Icon';
+import { type StatusIconProps } from './StatusIcon';
 export interface RadialProgressProps extends SVGAttributes<SVGElement> {
     /**
      * Progress percentage express as number from 0 to 100.
@@ -15,7 +15,7 @@ export interface RadialProgressProps extends SVGAttributes<SVGElement> {
     /**
      * Optional icon to be rendered in the center of the circle
      */
-    icon?: IconProps['name'];
+    icon?: StatusIconProps['name'];
 }
 /**
  * Used to render a radial progress with a pending and a progress state. It also accepts an optional icon to be rendered in the center of the circle.

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { type iconMapping } from './Icon/icons';
+export interface StatusIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Name of the icon to display
+     */
+    name: keyof typeof iconMapping;
+    /**
+     * Background color, `none` for no background
+     */
+    background?: 'green' | 'orange' | 'red' | 'gray' | 'teal' | 'white' | 'black' | 'none';
+    /**
+     * padding around the icon can bne: 'none' | 'small' | 'large'
+     */
+    gap?: 'none' | 'small' | 'large';
+}
+export declare const StatusIcon: React.FC<StatusIconProps>;

package/dist/ui/atoms/StatusIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 type Props = Pick<FlexRowProps, 'children'> & {
     /**
      * Icon component
-     * Example: `<Icon>` or `<RadialProgress>` or `<Avatar>`
+     * Example: `<StatusIcon>` or `<RadialProgress>` or `<Avatar>`
      */
     icon?: JSX.Element;
 };

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

@@ -3,7 +3,7 @@ import { type FC } from 'react';
 type Props = Pick<FlexRowProps, 'alignItems' | 'children'> & {
     /**
      * Icon component
-     * Example: `<Icon>` or `<RadialProgress>` or `<Avatar>`
+     * Example: `<StatusIcon>` or `<RadialProgress>` or `<Avatar>`
      */
     icon?: JSX.Element;
     /**

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

@@ -8,7 +8,7 @@ export declare const ListItemDescription: import('../../atoms/SkeletonTemplate')
 }>;
 export declare const ListItemIcon: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     color: "none" | "green" | "orange" | "red" | "gray" | "teal" | "white" | "black" | undefined;
-    icon: "download" | "package" | "settings" | "arrowBendDownRight" | "apps" | "arrowCircleDown" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowsLeftRight" | "arrowUpRight" | "asterisk" | "caretRight" | "chatCircle" | "check" | "cloud" | "credentials" | "creditCard" | "eye" | "flag" | "funnel" | "github" | "google" | "home" | "hourglass" | "magnifyingGlass" | "minus" | "pencilSimple" | "printer" | "pulse" | "resources" | "shoppingBag" | "team" | "truck" | "upload" | "user" | "warning" | "warningCircle" | "x";
+    icon: "download" | "package" | "settings" | "x" | "arrowBendDownRight" | "apps" | "arrowCircleDown" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowsLeftRight" | "arrowUpRight" | "asterisk" | "caretRight" | "chatCircle" | "check" | "cloud" | "credentials" | "creditCard" | "eye" | "flag" | "funnel" | "github" | "google" | "home" | "hourglass" | "magnifyingGlass" | "minus" | "minusCircle" | "pencilSimple" | "printer" | "pulse" | "resources" | "shoppingBag" | "team" | "truck" | "upload" | "user" | "warning" | "warningCircle" | "xCircle";
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "type": "module",
   "license": "MIT",
   "files": [