@commercelayer/app-elements 5.5.4 → 5.7.0

package/dist/tailwind.config.js

@@ -1,197 +1,196 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-const colorBrand = '#101111'
+const colorBrand = "#101111"
 
 /** @type {(percentage: number) => string} */
 function alphaToHex(percentage) {
   return Math.floor((percentage * 255) / 100)
     .toString(16)
     .toUpperCase()
-    .padStart(2, '0')
+    .padStart(2, "0")
 }
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     screens: {
-      md: '768px',
-      lg: '992px',
-      xl: '1280px'
+      md: "768px",
+      lg: "992px",
+      xl: "1280px",
     },
     container: {
       screens: {
-        md: '632px'
-      }
+        md: "632px",
+      },
     },
     borderRadius: {
-      DEFAULT: '0.313rem',
-      sm: '0.188rem',
-      md: '0.625rem',
-      full: '9999px'
+      DEFAULT: "0.313rem",
+      sm: "0.188rem",
+      md: "0.625rem",
+      full: "9999px",
     },
     colors: {
-      inherit: 'inherit',
+      inherit: "inherit",
       primary: {
         light: `${colorBrand}${alphaToHex(80)}`,
         DEFAULT: colorBrand,
-        50: '#F8F8F8',
-        100: '#EDEEEE',
-        200: '#E6E7E7',
-        300: '#BBBEBE',
-        400: '#878888',
-        500: '#686E6E',
-        600: '#404141',
-        700: '#343535',
-        800: '#282929',
-        900: '#1D1E1E'
+        50: "#F8F8F8",
+        100: "#EDEEEE",
+        200: "#E6E7E7",
+        300: "#BBBEBE",
+        400: "#878888",
+        500: "#686E6E",
+        600: "#404141",
+        700: "#343535",
+        800: "#282929",
+        900: "#1D1E1E",
       },
-      transparent: 'transparent',
-      black: '#101111',
-      white: '#fff',
+      transparent: "transparent",
+      black: "#101111",
+      white: "#fff",
       violet: {
-        DEFAULT: '#666EFF',
-        50: '#ECF2FF',
-        100: '#DDE6FF',
-        200: '#C2D1FF',
-        300: '#9CB1FF',
-        400: '#7586FF',
-        500: '#666EFF',
-        600: '#3B36F5',
-        700: '#322AD8',
-        800: '#2925AE',
-        900: '#181650'
+        DEFAULT: "#666EFF",
+        50: "#ECF2FF",
+        100: "#DDE6FF",
+        200: "#C2D1FF",
+        300: "#9CB1FF",
+        400: "#7586FF",
+        500: "#666EFF",
+        600: "#3B36F5",
+        700: "#322AD8",
+        800: "#2925AE",
+        900: "#181650",
       },
       gray: {
-        50: '#F8F8F8',
-        100: '#EDEEEE',
-        200: '#E6E7E7',
-        300: '#BBBEBE',
-        400: '#878888',
-        500: '#686E6E',
-        600: '#404141',
-        700: '#343535',
-        800: '#282929',
-        900: '#1D1E1E'
+        50: "#F8F8F8",
+        100: "#EDEEEE",
+        200: "#E6E7E7",
+        300: "#BBBEBE",
+        400: "#878888",
+        500: "#686E6E",
+        600: "#404141",
+        700: "#343535",
+        800: "#282929",
+        900: "#1D1E1E",
       },
       green: {
-        DEFAULT: '#1FDA8A',
-        50: '#F0FDF7',
-        100: '#DBFDEE',
-        200: '#B9F9DC',
-        300: '#83F2C2',
-        400: '#45E39F',
-        500: '#1FDA8A',
-        600: '#11A868',
-        700: '#11784C',
-        800: '#0A472D',
-        900: '#03160E'
+        DEFAULT: "#1FDA8A",
+        50: "#F0FDF7",
+        100: "#DBFDEE",
+        200: "#B9F9DC",
+        300: "#83F2C2",
+        400: "#45E39F",
+        500: "#1FDA8A",
+        600: "#11A868",
+        700: "#11784C",
+        800: "#0A472D",
+        900: "#03160E",
       },
       orange: {
-        DEFAULT: '#FFAB2E',
-        50: '#FFF5E6',
-        100: '#FFEDD1',
-        200: '#FFDCA8',
-        300: '#FFCC80',
-        400: '#FFBB57',
-        500: '#FFAB2E',
-        600: '#f98107',
-        700: '#dd5c02',
-        800: '#942e0c',
-        900: '#461202'
+        DEFAULT: "#FFAB2E",
+        50: "#FFF5E6",
+        100: "#FFEDD1",
+        200: "#FFDCA8",
+        300: "#FFCC80",
+        400: "#FFBB57",
+        500: "#FFAB2E",
+        600: "#f98107",
+        700: "#dd5c02",
+        800: "#942e0c",
+        900: "#461202",
       },
       red: {
-        DEFAULT: '#FF656B',
-        50: '#FFF4F4',
-        100: '#FFDFE1',
-        200: '#FFB7B9',
-        300: '#FF8E92',
-        400: '#FF656B',
-        500: '#FF2D35',
-        600: '#F40009',
-        700: '#BC0007',
-        800: '#840005',
-        900: '#4B0003'
+        DEFAULT: "#FF656B",
+        50: "#FFF4F4",
+        100: "#FFDFE1",
+        200: "#FFB7B9",
+        300: "#FF8E92",
+        400: "#FF656B",
+        500: "#FF2D35",
+        600: "#F40009",
+        700: "#BC0007",
+        800: "#840005",
+        900: "#4B0003",
       },
       teal: {
-        DEFAULT: '#055463',
-        50: '#EDFBFE',
-        100: '#C7F4FC',
-        200: '#A0ECFA',
-        300: '#79E4F8',
-        400: '#52DCF6',
-        500: '#18D0F3',
-        600: '#0BB7D8',
-        700: '#0996B1',
-        800: '#07758A',
-        900: '#055463'
+        DEFAULT: "#055463",
+        50: "#EDFBFE",
+        100: "#C7F4FC",
+        200: "#A0ECFA",
+        300: "#79E4F8",
+        400: "#52DCF6",
+        500: "#18D0F3",
+        600: "#0BB7D8",
+        700: "#0996B1",
+        800: "#07758A",
+        900: "#055463",
       },
       yellow: {
-        DEFAULT: '#FFEA2E',
-        50: '#FFFCE6',
-        100: '#FFFAD1',
-        200: '#FFF6A8',
-        300: '#FFF280',
-        400: '#FFEE57',
-        500: '#FFEA2E',
-        600: '#F5DC00',
-        700: '#BDAA00',
-        800: '#857700',
-        900: '#4D4500'
+        DEFAULT: "#FFEA2E",
+        50: "#FFFCE6",
+        100: "#FFFAD1",
+        200: "#FFF6A8",
+        300: "#FFF280",
+        400: "#FFEE57",
+        500: "#FFEA2E",
+        600: "#F5DC00",
+        700: "#BDAA00",
+        800: "#857700",
+        900: "#4D4500",
       },
       pink: {
-        DEFAULT: '#FE84BA',
-        50: '#FFE9F3',
-        100: '#FFD5E7',
-        200: '#FEACD1',
-        300: '#FE84BA',
-        400: '#FE4C9B',
-        500: '#FD157C',
-        600: '#D80261',
-        700: '#A00148',
-        800: '#69012F',
-        900: '#310016'
-      }
+        DEFAULT: "#FE84BA",
+        50: "#FFE9F3",
+        100: "#FFD5E7",
+        200: "#FEACD1",
+        300: "#FE84BA",
+        400: "#FE4C9B",
+        500: "#FD157C",
+        600: "#D80261",
+        700: "#A00148",
+        800: "#69012F",
+        900: "#310016",
+      },
     },
     fontFamily: {
-      sans: ['Manrope', 'ui-sans-serif', 'sans-serif'],
-      mono: ['Roboto Mono', 'ui-monospace', 'Menlo', 'monospace']
+      sans: ["Manrope", "ui-sans-serif", "sans-serif"],
+      mono: ["Roboto Mono", "ui-monospace", "Menlo", "monospace"],
     },
     fontSize: {
-      '2xs': '.688rem',
-      xs: '.75rem',
-      sm: '.875rem',
-      base: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '2.5xl': '2rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '4rem',
-      '8xl': '6rem',
-      '10xl': '8rem',
-      title: '2rem'
+      "2xs": ".688rem",
+      xs: ".75rem",
+      sm: ".875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "2.5xl": "2rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem",
+      "8xl": "6rem",
+      "10xl": "8rem",
+      title: "2rem",
     },
     extend: {
       boxShadow: {
-        hover: '0 0 0 1px #101111',
-        focus: '0 0 0 2px #101111',
-        inputfocus: 'inset 0 0 0 2px #101111'
+        hover: "0 0 0 1px #101111",
+        focus: "0 0 0 2px #101111",
+        inputfocus: "inset 0 0 0 2px #101111",
       },
       lineHeight: {
-        title: '2.375rem'
+        title: "2.375rem",
       },
       transitionProperty: {
-        bg: 'background'
+        bg: "background",
       },
       objectPosition: {
-        'out-of-bounds': '-99999px 99999px'
+        "out-of-bounds": "-99999px 99999px",
       },
       fontWeight: {
-        inherit: 'inherit'
-      }
-    }
+        inherit: "inherit",
+      },
+    },
   },
-  plugins: [require('@tailwindcss/forms')]
+  plugins: [require("@tailwindcss/forms")],
 }

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

@@ -1,6 +1,6 @@
 import { SetRequired } from 'type-fest';
 import { InteractiveElementProps } from '../internals/InteractiveElement.className';
-export type AProps = SetRequired<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & InteractiveElementProps;
+export type AProps = SetRequired<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & InteractiveElementProps;
 /**
  * This component wraps an [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) HTML element.
  * <span type='info'>This component is always rendered as an accessible `<a>` HTML element. It has the same props from the `Button` component, so it can renders as a button (UI only).</span>

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

@@ -1,6 +1,6 @@
 export interface AlertProps {
     /** Alert status. This affects the color scheme and icon used. */
-    status: 'error' | 'success' | 'warning' | 'info';
+    status: "error" | "success" | "warning" | "info";
     children: React.ReactNode;
 }
 /**

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

@@ -14,18 +14,18 @@ export interface AvatarProps {
     /**
      * Specify `none` to remove border
      */
-    border?: 'none';
+    border?: "none";
     /**
      * Image shape
      * @default "rounded"
      */
-    shape?: 'rounded' | 'circle';
+    shape?: "rounded" | "circle";
     /**
      * Image size
      * (x-small: 32px, small: 48px, normal: 58px, large: 72px)
      * @default "normal"
      */
-    size?: 'x-small' | 'small' | 'normal' | 'large';
+    size?: "x-small" | "small" | "normal" | "large";
     /**
      * Image class
      */

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

@@ -1,21 +1,21 @@
 export declare const presets: {
     gift_card: string;
-    'carriers:generic': string;
-    'carriers:fedex': string;
-    'carriers:ups': string;
-    'carriers:dhl': string;
-    'payments:stripe': string;
-    'payments:braintree': string;
-    'payments:paypal': string;
-    'payments:klarna': string;
-    'payments:checkout': string;
-    'payments:adyen': string;
-    'payments:axerve': string;
-    'payments:satispay': string;
-    'payments:manual': string;
-    'payments:external': string;
-    'tax-calculators:avalara': string;
-    'tax-calculators:taxjar': string;
-    'tax-calculators:manual': string;
-    'tax-calculators:external': string;
+    "carriers:generic": string;
+    "carriers:fedex": string;
+    "carriers:ups": string;
+    "carriers:dhl": string;
+    "payments:stripe": string;
+    "payments:braintree": string;
+    "payments:paypal": string;
+    "payments:klarna": string;
+    "payments:checkout": string;
+    "payments:adyen": string;
+    "payments:axerve": string;
+    "payments:satispay": string;
+    "payments:manual": string;
+    "payments:external": string;
+    "tax-calculators:avalara": string;
+    "tax-calculators:taxjar": string;
+    "tax-calculators:manual": string;
+    "tax-calculators:external": string;
 };

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

@@ -1,2 +1,2 @@
 export declare const BG_COLORS: ["#BBBEBE", "#79E4F8", "#FFCC80", "#FFF280", "#83F2C2", "#18D0F3", "#9CB1FF", "#FFEA2E", "#FF8E92", "#1FDA8A", "#FFAB2E", "#FE84BA", "#BDAA00", "#686E6E", "#11784C", "#BC0007", "#942E0C", "#A00148", "#322AD8", "#343535"];
-export declare function getTextColorForBackground(backgroundColor: string): 'black' | 'white';
+export declare function getTextColorForBackground(backgroundColor: string): "black" | "white";

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

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

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

@@ -1,3 +1,3 @@
-type BadgeVariant = 'danger-solid' | 'danger' | 'primary-solid' | 'primary' | 'secondary-solid' | 'secondary' | 'success-solid' | 'success' | 'teal-solid' | 'teal' | 'warning-solid' | 'warning';
+type BadgeVariant = "danger-solid" | "danger" | "primary-solid" | "primary" | "secondary-solid" | "secondary" | "success-solid" | "success" | "teal-solid" | "teal" | "warning-solid" | "warning";
 export declare const variantCss: Record<BadgeVariant, string>;
 export {};

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

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

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

@@ -1,4 +1,4 @@
-export type CardProps = React.HTMLAttributes<HTMLElement> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href'> & {
+export type CardProps = React.HTMLAttributes<HTMLElement> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "href"> & {
     /**
      * Footer will render in a dedicated section below the main content.
      */
@@ -6,7 +6,7 @@ export type CardProps = React.HTMLAttributes<HTMLElement> & Pick<React.AnchorHTM
     /**
      * Set a gray background color
      */
-    backgroundColor?: 'light';
+    backgroundColor?: "light";
 } & ({
     /**
      * Possible values are:
@@ -16,18 +16,18 @@ export type CardProps = React.HTMLAttributes<HTMLElement> & Pick<React.AnchorHTM
      *
      * @default 6
      */
-    gap?: '1' | '4' | '6';
+    gap?: "1" | "4" | "6";
     /**
      * Set the overflow behavior. In most of the cases you might want to keep overflow visible,
      * but when you have inner content with hover effects you might want to set overflow to hidden.
      */
-    overflow: 'visible' | 'hidden';
+    overflow: "visible" | "hidden";
 } | {
     /**
      * When card is rendered with no gap, overflow is always intended as hidden and cannot be controlled via props,
      * otherwise inner content will overlap the rounded corners of the card.
      */
-    gap: 'none';
+    gap: "none";
 });
 /** Card is a flexible component used to group and display content in a clear and concise format. */
 export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponent<{
@@ -84,6 +84,8 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
     children?: import('react').ReactNode | Iterable<import('react').ReactNode>;
     'data-tooltip-id'?: string | undefined;
     'data-tooltip-place'?: import('react-tooltip').PlacesType | undefined;
@@ -173,7 +175,7 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     onBlurCapture?: import('react').FocusEventHandler<HTMLElement> | undefined;
     onChange?: import('react').FormEventHandler<HTMLElement> | undefined;
     onChangeCapture?: import('react').FormEventHandler<HTMLElement> | undefined;
-    onBeforeInput?: import('react').FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: import('react').InputEventHandler<HTMLElement> | undefined;
     onBeforeInputCapture?: import('react').FormEventHandler<HTMLElement> | undefined;
     onInput?: import('react').FormEventHandler<HTMLElement> | undefined;
     onInputCapture?: import('react').FormEventHandler<HTMLElement> | undefined;
@@ -223,8 +225,6 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     onProgressCapture?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onRateChange?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onRateChangeCapture?: import('react').ReactEventHandler<HTMLElement> | undefined;
-    onResize?: import('react').ReactEventHandler<HTMLElement> | undefined;
-    onResizeCapture?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onSeeked?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onSeekedCapture?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onSeeking?: import('react').ReactEventHandler<HTMLElement> | undefined;
@@ -305,6 +305,8 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLElement> | undefined;
     onScroll?: import('react').UIEventHandler<HTMLElement> | undefined;
     onScrollCapture?: import('react').UIEventHandler<HTMLElement> | undefined;
+    onScrollEnd?: import('react').UIEventHandler<HTMLElement> | undefined;
+    onScrollEndCapture?: import('react').UIEventHandler<HTMLElement> | undefined;
     onWheel?: import('react').WheelEventHandler<HTMLElement> | undefined;
     onWheelCapture?: import('react').WheelEventHandler<HTMLElement> | undefined;
     onAnimationStart?: import('react').AnimationEventHandler<HTMLElement> | undefined;
@@ -389,6 +391,8 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
     children?: import('react').ReactNode | Iterable<import('react').ReactNode>;
     'data-tooltip-id'?: string | undefined;
     'data-tooltip-place'?: import('react-tooltip').PlacesType | undefined;
@@ -478,7 +482,7 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     onBlurCapture?: import('react').FocusEventHandler<HTMLElement> | undefined;
     onChange?: import('react').FormEventHandler<HTMLElement> | undefined;
     onChangeCapture?: import('react').FormEventHandler<HTMLElement> | undefined;
-    onBeforeInput?: import('react').FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: import('react').InputEventHandler<HTMLElement> | undefined;
     onBeforeInputCapture?: import('react').FormEventHandler<HTMLElement> | undefined;
     onInput?: import('react').FormEventHandler<HTMLElement> | undefined;
     onInputCapture?: import('react').FormEventHandler<HTMLElement> | undefined;
@@ -528,8 +532,6 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     onProgressCapture?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onRateChange?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onRateChangeCapture?: import('react').ReactEventHandler<HTMLElement> | undefined;
-    onResize?: import('react').ReactEventHandler<HTMLElement> | undefined;
-    onResizeCapture?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onSeeked?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onSeekedCapture?: import('react').ReactEventHandler<HTMLElement> | undefined;
     onSeeking?: import('react').ReactEventHandler<HTMLElement> | undefined;
@@ -610,6 +612,8 @@ export declare const Card: import('./SkeletonTemplate').SkeletonTemplateComponen
     onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLElement> | undefined;
     onScroll?: import('react').UIEventHandler<HTMLElement> | undefined;
     onScrollCapture?: import('react').UIEventHandler<HTMLElement> | undefined;
+    onScrollEnd?: import('react').UIEventHandler<HTMLElement> | undefined;
+    onScrollEndCapture?: import('react').UIEventHandler<HTMLElement> | undefined;
     onWheel?: import('react').WheelEventHandler<HTMLElement> | undefined;
     onWheelCapture?: import('react').WheelEventHandler<HTMLElement> | undefined;
     onAnimationStart?: import('react').AnimationEventHandler<HTMLElement> | undefined;

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

@@ -1,5 +1,5 @@
 import { InputWrapperBaseProps } from '../internals/InputWrapper';
-export type CodeBlockProps = Pick<InputWrapperBaseProps, 'label' | 'hint'> & {
+export type CodeBlockProps = Pick<InputWrapperBaseProps, "label" | "hint"> & {
     /**
      * Show a Copy to clipboard button.
      */

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

@@ -5,7 +5,7 @@ export interface EmptyStateProps {
     description?: ReactNode;
     action?: ReactNode;
     className?: string;
-    icon?: StatusIconProps['name'];
+    icon?: StatusIconProps["name"];
 }
 declare function EmptyState({ title, description, action, icon, className, ...rest }: EmptyStateProps): JSX.Element;
 declare namespace EmptyState {

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

@@ -1,25 +1,25 @@
-import { default as React, JSX, ReactNode } from 'react';
-export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+import { default as React } from 'react';
+export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Grid items
      */
-    children: ReactNode;
+    children: React.ReactNode;
     /**
      * Number of columns
      */
-    columns?: '1' | '2' | 'auto';
+    columns?: "1" | "2" | "auto";
     /**
      * Items alignment.
      * When not set all items will hame same height (items-stretch)
      */
-    alignItems?: 'center' | 'start' | 'end';
+    alignItems?: "center" | "start" | "end";
 }
 /**
  * Render the children as a grid.
  * By default the grid will have 1 column and al items will have same height.
  * It's possible to set the number of columns and the alignment of the items.
  */
-declare function Grid({ children, columns, className, alignItems, ...rest }: GridProps): JSX.Element;
+declare function Grid({ children, columns, className, alignItems, ...rest }: GridProps): React.JSX.Element;
 declare namespace Grid {
     var displayName: string;
 }

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

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