@alma-oss/spirit-web-react 4.2.1 → 4.3.0

package/translations/defaults.d.ts

@@ -0,0 +1,29 @@
+export declare const defaultLabels: {
+    common: {
+        close: string;
+        edit: string;
+        remove: string;
+    };
+    breadcrumbs: {
+        back: string;
+    };
+    fileUploader: {
+        edit: string;
+        remove: string;
+        attachments: string;
+    };
+    pagination: {
+        next: string;
+        previous: string;
+        goToPage: string;
+    };
+    textField: {
+        password: {
+            show: string;
+            hide: string;
+        };
+    };
+    splitButton: {
+        dropdown: string;
+    };
+};

package/translations/defaults.js

@@ -0,0 +1,30 @@
+export const defaultLabels = {
+    common: {
+        close: 'Close',
+        edit: 'Edit',
+        remove: 'Remove',
+    },
+    breadcrumbs: {
+        back: 'Go back',
+    },
+    fileUploader: {
+        edit: 'Edit',
+        remove: 'Remove',
+        attachments: 'Attachments',
+    },
+    pagination: {
+        next: 'Next',
+        previous: 'Previous',
+        goToPage: 'Go to page',
+    },
+    textField: {
+        password: {
+            show: 'Show password',
+            hide: 'Hide password',
+        },
+    },
+    splitButton: {
+        dropdown: 'More',
+    },
+};
+//# sourceMappingURL=defaults.js.map

package/translations/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../src/translations/defaults.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,QAAQ;KACjB;IACD,WAAW,EAAE;QACX,IAAI,EAAE,SAAS;KAChB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,QAAQ;QAChB,WAAW,EAAE,aAAa;KAC3B;IACD,UAAU,EAAE;QACV,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE;YACR,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,eAAe;SACtB;KACF;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC"}

package/translations/index.d.ts

@@ -0,0 +1,3 @@
+export { defaultLabels } from './defaults';
+export { replaceTranslationParams } from './replaceTranslationParams';
+export { resolveTranslationKey } from './resolveTranslationKey';

package/translations/index.js

@@ -0,0 +1,4 @@
+export { defaultLabels } from "./defaults.js";
+export { replaceTranslationParams } from "./replaceTranslationParams.js";
+export { resolveTranslationKey } from "./resolveTranslationKey.js";
+//# sourceMappingURL=index.js.map

package/translations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/translations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/translations/replaceTranslationParams.d.ts

@@ -0,0 +1 @@
+export declare const replaceTranslationParams: (translation: string, params: Record<string, unknown>) => string;

package/translations/replaceTranslationParams.js

@@ -0,0 +1,5 @@
+export const replaceTranslationParams = (translation, params) => Object.entries(params).reduce((result, [paramKey, value]) => {
+    const safeParamKey = paramKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return result.replace(new RegExp(`\\{${safeParamKey}\\}`, 'g'), String(value));
+}, translation);
+//# sourceMappingURL=replaceTranslationParams.js.map

package/translations/replaceTranslationParams.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replaceTranslationParams.js","sourceRoot":"","sources":["../../src/translations/replaceTranslationParams.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAmB,EAAE,MAA+B,EAAU,EAAE,CACvG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,EAAE;IAC1D,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;IAErE,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,MAAM,YAAY,KAAK,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACjF,CAAC,EAAE,WAAW,CAAC,CAAC"}

package/translations/resolveTranslationKey.d.ts

@@ -0,0 +1,10 @@
+type Segment = string;
+type TwoSegments = `${Segment}.${Segment}`;
+type ThreeSegments = `${TwoSegments}.${Segment}`;
+type FourSegments = `${ThreeSegments}.${Segment}`;
+type DotPath = Segment | TwoSegments | ThreeSegments | FourSegments;
+type Translations = {
+    [key: string]: string | Translations;
+};
+export declare const resolveTranslationKey: (obj: Translations, path: DotPath) => string;
+export {};

package/translations/resolveTranslationKey.js

@@ -0,0 +1,14 @@
+export const resolveTranslationKey = (obj, path) => {
+    const keys = path.split('.');
+    let current = obj;
+    for (const key of keys) {
+        if (typeof current === 'object' && current !== null && key in current) {
+            current = current[key];
+        }
+        else {
+            return path;
+        }
+    }
+    return typeof current === 'string' ? current : path;
+};
+//# sourceMappingURL=resolveTranslationKey.js.map

package/translations/resolveTranslationKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveTranslationKey.js","sourceRoot":"","sources":["../../src/translations/resolveTranslationKey.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,GAAiB,EAAE,IAAa,EAAU,EAAE;IAChF,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7B,IAAI,OAAO,GAA0B,GAAG,CAAC;IAEzC,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,EAAE,CAAC;YACtE,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED,OAAO,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AACtD,CAAC,CAAC"}

package/types/accordion.d.ts

@@ -1,32 +1,32 @@
 import { type ElementType, type ReactNode } from 'react';
-import { type ChildrenProps, type ElementTypeProps, type SpiritPolymorphicElementPropsWithRef, type StyleProps } from './shared';
+import { type ChildrenProps, type PolymorphicComponentProps, type StyleProps } from './shared';
 export type AccordionOpenStateType = string | string[] | undefined;
-export interface AccordionHandlingProps {
+export interface AccordionState {
     open: AccordionOpenStateType;
     toggle: (id: string) => void;
 }
 export interface AccordionItemContextProps {
     id: string;
 }
-export interface BaseAccordionProps extends ChildrenProps, StyleProps {
+export interface AccordionStateProps {
+    defaultOpen?: AccordionOpenStateType;
+    stayOpen?: boolean;
+}
+export interface AccordionBaseProps extends ChildrenProps, StyleProps {
 }
-export interface AccordionBaseProps extends BaseAccordionProps, AccordionHandlingProps {
+export interface AccordionStyleProps extends AccordionBaseProps, AccordionState {
 }
-export type AccordionProps<T extends ElementType> = ElementTypeProps<T> & AccordionBaseProps;
-export type SpiritAccordionProps<T extends ElementType = 'section'> = AccordionProps<T> & SpiritPolymorphicElementPropsWithRef<T, AccordionProps<T>>;
-export type AccordionHeaderProps<T extends ElementType = 'h3'> = ElementTypeProps<T> & {
+export interface AccordionProps extends AccordionStyleProps {
+}
+export interface AccordionHeaderProps extends AccordionBaseProps {
     slot?: ReactNode;
-} & BaseAccordionProps;
-export type SpiritAccordionHeaderProps<T extends ElementType = 'h3'> = AccordionHeaderProps<T> & SpiritPolymorphicElementPropsWithRef<T, AccordionHeaderProps<T>>;
-export interface AccordionItemBaseProps extends BaseAccordionProps, AccordionItemContextProps {
 }
-export type AccordionItemProps<T extends ElementType> = ElementTypeProps<T> & AccordionItemBaseProps;
-export type SpiritAccordionItemProps<T extends ElementType = 'article'> = AccordionItemProps<T> & SpiritPolymorphicElementPropsWithRef<T, AccordionItemProps<T>>;
-export interface AccordionContentProps extends BaseAccordionProps {
+export interface AccordionItemProps extends AccordionBaseProps, AccordionItemContextProps {
 }
-export interface UncontrolledAccordionBaseProps extends BaseAccordionProps {
-    defaultOpen?: AccordionOpenStateType;
-    stayOpen?: boolean;
+export interface AccordionContentProps extends AccordionBaseProps {
 }
-export type UncontrolledAccordionProps<T extends ElementType> = ElementTypeProps<T> & UncontrolledAccordionBaseProps;
-export type SpiritUncontrolledAccordionProps<T extends ElementType = 'section'> = UncontrolledAccordionProps<T> & SpiritPolymorphicElementPropsWithRef<T, UncontrolledAccordionProps<T>>;
+export type UncontrolledAccordionProps = AccordionBaseProps & AccordionStateProps;
+export type SpiritAccordionProps<E extends ElementType = 'section'> = PolymorphicComponentProps<E, AccordionProps>;
+export type SpiritAccordionHeaderProps<E extends ElementType = 'h3'> = PolymorphicComponentProps<E, AccordionHeaderProps>;
+export type SpiritAccordionItemProps<E extends ElementType = 'article'> = PolymorphicComponentProps<E, AccordionItemProps>;
+export type SpiritUncontrolledAccordionProps<E extends ElementType = 'section'> = PolymorphicComponentProps<E, UncontrolledAccordionProps>;

package/types/alert.d.ts

@@ -1,12 +1,10 @@
 import { type ElementType } from 'react';
-import type { ChildrenProps, EmotionColorNamesType, StyleProps, TransferProps } from './shared';
-export interface AriaAlertElementTypeProps<T extends ElementType = 'div'> {
-    elementType?: T;
+import type { ChildrenProps, EmotionColorNamesType, SpiritPolymorphicComponentPropWithRef, StyleProps } from './shared';
+export interface AlertBaseProps extends ChildrenProps, StyleProps {
 }
-export interface AlertProps extends ChildrenProps, StyleProps, TransferProps {
-}
-export interface SpiritAlertProps<T extends ElementType = 'div', C = void> extends AriaAlertElementTypeProps<T>, AlertProps {
+export interface AlertProps<C = void> extends AlertBaseProps {
     color?: EmotionColorNamesType | C;
     iconName?: string;
     isCentered?: boolean;
 }
+export type SpiritAlertProps<E extends ElementType = 'div', C = void> = SpiritPolymorphicComponentPropWithRef<E, AlertProps<C>>;

package/types/avatar.d.ts

@@ -1,11 +1,11 @@
 import { type ElementType } from 'react';
-import { type ChildrenProps, type SizeExtendedDictionaryType, type SpiritPolymorphicComponentPropWithRef, type StyleProps } from './shared';
-export type AvatarSize<S> = SizeExtendedDictionaryType<S> | S;
+import { type ChildrenProps, type SingleOrResponsive, type SizeExtendedDictionaryType, type SpiritPolymorphicComponentPropWithRef, type StyleProps } from './shared';
+export type SpiritAvatarSizeType<S> = SingleOrResponsive<SizeExtendedDictionaryType<S> | S>;
 export interface AvatarBaseProps extends ChildrenProps, StyleProps {
 }
-export interface AvatarStyleProps<S = void> extends AvatarBaseProps {
+export interface AvatarStyleProps<S = string> extends AvatarBaseProps {
     isSquare?: boolean;
-    size?: AvatarSize<S>;
+    size?: SpiritAvatarSizeType<S>;
 }
-export type AvatarProps<S = void> = AvatarStyleProps<S>;
-export type SpiritAvatarProps<E extends ElementType = 'div', S = void> = SpiritPolymorphicComponentPropWithRef<E, AvatarProps<S>>;
+export type AvatarProps<S = string> = AvatarStyleProps<S>;
+export type SpiritAvatarProps<E extends ElementType = 'div', S = string> = SpiritPolymorphicComponentPropWithRef<E, AvatarProps<S>>;

package/types/box.d.ts

@@ -1,5 +1,5 @@
-import { type ElementType, type JSXElementConstructor } from 'react';
-import { type BackgroundAccentColorsType, type BackgroundColorsDictionaryType, type BackgroundEmotionColorsType, type BackgroundGradientsDictionaryType, type BackgroundNeutralColorsType, type BorderAccentColorsType, type BorderColorsDictionaryType, type BorderEmotionColorsType, type BorderRadiiTokenType, type BorderStylesDictionaryType, type BorderWidthsDictionaryType, type ChildrenProps, type SingleOrResponsive, type SpaceToken, type SpiritPolymorphicElementPropsWithRef, type StyleProps, type TextColorProps } from './shared';
+import { type ElementType } from 'react';
+import { type BackgroundAccentColorsType, type BackgroundColorsDictionaryType, type BackgroundEmotionColorsType, type BackgroundGradientsDictionaryType, type BackgroundNeutralColorsType, type BorderAccentColorsType, type BorderColorsDictionaryType, type BorderEmotionColorsType, type BorderRadiiTokenType, type BorderStylesDictionaryType, type BorderWidthsDictionaryType, type ChildrenProps, type PolymorphicComponentProps, type SingleOrResponsive, type SpaceToken, type StyleProps, type TextColorProps } from './shared';
 export type BoxBackgroundColorsType = BackgroundColorsDictionaryType | BackgroundAccentColorsType | BackgroundEmotionColorsType | BackgroundNeutralColorsType;
 export interface BoxBaseProps extends ChildrenProps, TextColorProps, StyleProps {
     backgroundColor?: BoxBackgroundColorsType;
@@ -16,7 +16,5 @@ export interface BoxBaseProps extends ChildrenProps, TextColorProps, StyleProps
     paddingLeft?: SingleOrResponsive<SpaceToken>;
     paddingRight?: SingleOrResponsive<SpaceToken>;
 }
-export type BoxProps<E extends ElementType> = {
-    elementType?: E | JSXElementConstructor<unknown>;
-} & BoxBaseProps;
-export type SpiritBoxProps<E extends ElementType = 'div'> = BoxProps<E> & SpiritPolymorphicElementPropsWithRef<E, BoxProps<E>>;
+export type BoxProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, BoxBaseProps>;
+export type SpiritBoxProps<E extends ElementType = 'div'> = BoxProps<E>;

package/types/breadcrumbs.d.ts

@@ -12,8 +12,8 @@ export interface SpiritBreadcrumbsItemProps extends ChildrenProps {
     isCurrent?: boolean;
     isGoBackOnly?: boolean;
 }
-export interface AriaBreadcrumbsElementTypeProps<T extends ElementType = 'nav'> {
-    elementType?: T;
+export interface AriaBreadcrumbsElementTypeProps<E extends ElementType = 'nav'> {
+    elementType?: E;
 }
 export interface BreadcrumbsStyleProps extends StyleProps, TransferProps {
     isGoBackOnly?: boolean;

package/types/button.d.ts

@@ -1,8 +1,10 @@
-import { type ComponentPropsWithRef, type ElementType } from 'react';
-import type { ButtonSizesType, ButtonType, ChildrenProps, ClickEvents, ComponentButtonColorNamesType, EmotionColorNamesType, SingleOrResponsive, SizesDictionaryType, StyleProps } from './shared';
+import { type ElementType } from 'react';
+import type { ButtonSizesType, ButtonType, ChildrenProps, ClickEvents, ComponentButtonColorNamesType, EmotionColorNamesType, PolymorphicComponentProps, SingleOrResponsive, SizesDictionaryType, StyleProps } from './shared';
 export type ButtonColor<C> = ComponentButtonColorNamesType<C> | EmotionColorNamesType<C>;
 export type ButtonSize<S> = keyof S extends never ? SizesDictionaryType : ButtonSizesType | S;
-export interface ButtonBaseProps<C = void, S = void> extends ChildrenProps, StyleProps, ClickEvents {
+export interface ButtonBaseProps extends ChildrenProps, StyleProps, ClickEvents {
+}
+export interface ButtonStyleProps<C = void, S = void> extends ButtonBaseProps {
     color?: ButtonColor<C>;
     isDisabled?: boolean;
     isBlock?: boolean;
@@ -10,12 +12,8 @@ export interface ButtonBaseProps<C = void, S = void> extends ChildrenProps, Styl
     isSymmetrical?: SingleOrResponsive<boolean>;
     size?: ButtonSize<S>;
 }
-export type ButtonProps<E extends ElementType, C = void, S = void> = {
-    elementType?: E;
+export interface ButtonProps<C = void, S = void> extends ButtonStyleProps<C, S> {
     type?: ButtonType;
-} & ButtonBaseProps<C, S>;
-export type ButtonLinkProps<E extends ElementType, C = void, S = void> = {
-    elementType?: E;
-} & ButtonBaseProps<C, S>;
-export type SpiritButtonProps<E extends ElementType = 'button', C = void, S = void> = ButtonProps<E, C, S> & ComponentPropsWithRef<E>;
-export type SpiritButtonLinkProps<E extends ElementType = 'a', C = void, S = void> = ButtonLinkProps<E, C, S> & ComponentPropsWithRef<E>;
+}
+export type SpiritButtonProps<E extends ElementType = 'button', C = void, S = void> = PolymorphicComponentProps<E, ButtonProps<C, S>>;
+export type SpiritButtonLinkProps<E extends ElementType = 'a', C = void, S = void> = PolymorphicComponentProps<E, Omit<ButtonProps<C, S>, 'type'>>;

package/types/card.d.ts

@@ -1,6 +1,6 @@
-import { type ElementType, type JSXElementConstructor } from 'react';
+import { type ElementType } from 'react';
 import { type ObjectFit } from '../constants';
-import { type AlignmentXDictionaryType, type BackgroundAccentColorsType, type BackgroundColorsDictionaryType, type BackgroundEmotionColorsType, type ChildrenProps, type DirectionExtendedDictionaryType, type StyleProps, type TransferProps } from './shared';
+import { type AlignmentXDictionaryType, type AlignmentYDictionaryType, type BackgroundAccentColorsType, type BackgroundColorsDictionaryType, type BackgroundEmotionColorsType, type ChildrenProps, type DirectionExtendedDictionaryType, type SingleOrResponsive, type StyleProps, type TransferProps } from './shared';
 export declare const CardSizes: {
     readonly AUTO: "auto";
     readonly SMALL: "small";
@@ -8,17 +8,17 @@ export declare const CardSizes: {
     readonly LARGE: "large";
 };
 export type CardSizesDictionaryKeys = keyof typeof CardSizes;
-export type CardSizesDictionaryType<T = undefined> = (typeof CardSizes)[CardSizesDictionaryKeys] | T;
-export type CardAlignmentXType = NonNullable<AlignmentXDictionaryType> | {
-    [key: string]: NonNullable<AlignmentXDictionaryType>;
-};
-export interface CardElementTypeProps<T extends ElementType = 'article'> {
-    elementType?: T | JSXElementConstructor<unknown>;
+export type CardSizesDictionaryType<C = undefined> = (typeof CardSizes)[CardSizesDictionaryKeys] | C;
+export type CardAlignmentXType = SingleOrResponsive<NonNullable<AlignmentXDictionaryType>>;
+export type CardAlignmentYType = SingleOrResponsive<NonNullable<AlignmentYDictionaryType>>;
+export interface CardElementTypeProps<E extends ElementType = 'article'> {
+    elementType?: E;
 }
 export type CardDirectionType = NonNullable<DirectionExtendedDictionaryType> | {
     [key: string]: NonNullable<DirectionExtendedDictionaryType>;
 };
-export interface CardProps<T extends ElementType = 'article'> extends CardElementTypeProps<T> {
+export interface CardProps<E extends ElementType = 'article'> extends CardElementTypeProps<E> {
+    alignmentY?: CardAlignmentYType;
     direction?: CardDirectionType;
     isBoxed?: boolean;
 }

package/types/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/types/card.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,EAAE,MAAM,cAAc,CAAC;AAYrD,MAAM,CAAC,MAAM,SAAS,GAAG,gCACpB,KAAK,KACR,IAAI,EAAE,MAAM,GACJ,CAAC"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/types/card.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,EAAE,MAAM,cAAc,CAAC;AAcrD,MAAM,CAAC,MAAM,SAAS,GAAG,gCACpB,KAAK,KACR,IAAI,EAAE,MAAM,GACJ,CAAC"}

package/types/controlButton.d.ts

@@ -1,14 +1,15 @@
-import { type ComponentPropsWithRef, type ElementType } from 'react';
-import type { ButtonType, ChildrenProps, ClickEvents, SingleOrResponsive, SizesDictionaryType, StyleProps } from './shared';
+import { type ElementType } from 'react';
+import type { ButtonType, ChildrenProps, ClickEvents, PolymorphicComponentProps, SingleOrResponsive, SizesDictionaryType, StyleProps } from './shared';
 export type ControlButtonSize<S> = keyof S extends never ? SizesDictionaryType : 'small' | 'medium' | 'large' | S;
-export interface ControlButtonBaseProps<S = void> extends ChildrenProps, StyleProps, ClickEvents {
+export interface ControlButtonBaseProps extends ChildrenProps, StyleProps, ClickEvents {
+}
+export interface ControlButtonStyleProps<S = void> extends ControlButtonBaseProps {
     isDisabled?: boolean;
     isSubtle?: boolean;
     isSymmetrical?: SingleOrResponsive<boolean>;
     size?: ControlButtonSize<S>;
 }
-export type ControlButtonProps<E extends ElementType, S = void> = {
-    elementType?: E;
+export interface ControlButtonProps<S = void> extends ControlButtonStyleProps<S> {
     type?: ButtonType;
-} & ControlButtonBaseProps<S>;
-export type SpiritControlButtonProps<E extends ElementType = 'button', S = void> = ControlButtonProps<E, S> & ComponentPropsWithRef<E>;
+}
+export type SpiritControlButtonProps<E extends ElementType = 'button', S = void> = PolymorphicComponentProps<E, ControlButtonProps<S>>;

package/types/drawer.d.ts

@@ -1,13 +1,13 @@
-import { type ComponentPropsWithRef, type ElementType } from 'react';
+import { type ComponentPropsWithRef, type ElementType, type SyntheticEvent } from 'react';
 import { type AlignmentX } from '../constants';
 import { type ButtonColor, type ButtonSize } from './button';
 import { type IconBoxSize } from './icon';
-import { type ChildrenProps, type ClickEvent, type OmittedExtendedUnsafeStyleProps, type SpiritButtonElementProps, type SpiritDialogElementProps, type StyleProps } from './shared';
+import { type ChildrenProps, type OmittedExtendedUnsafeStyleProps, type SpiritButtonElementProps, type SpiritDialogElementProps, type StyleProps } from './shared';
 export type DrawerAlignmentXType = (typeof AlignmentX)['LEFT' | 'RIGHT'];
 export type DrawerPanelElementType = 'aside' | 'form';
 export type DrawerPanelHandlingProps = {
     isOpen: boolean;
-    onClose: (event: ClickEvent) => void;
+    onClose: (event: Event | SyntheticEvent) => void;
     closeOnBackdropClick?: boolean;
     closeOnEscapeKeyDown?: boolean;
 };

package/types/flex.d.ts

@@ -1,8 +1,5 @@
-import { type ElementType, type JSXElementConstructor } from 'react';
-import { type AlignmentXExtendedDictionaryType, type AlignmentYExtendedDictionaryType, type ChildrenProps, type DirectionExtendedDictionaryType, type SingleOrResponsive, type SpaceToken, type SpiritPolymorphicElementPropsWithRef, type StyleProps } from './shared';
-export interface FlexElementTypeProps<T extends ElementType = 'div'> {
-    elementType?: T | JSXElementConstructor<unknown>;
-}
+import { type ElementType } from 'react';
+import { type AlignmentXExtendedDictionaryType, type AlignmentYExtendedDictionaryType, type ChildrenProps, type DirectionExtendedDictionaryType, type PolymorphicComponentProps, type SingleOrResponsive, type SpaceToken, type StyleProps } from './shared';
 export type FlexDirection = DirectionExtendedDictionaryType | 'row' | 'column';
 export type FlexDirectionType = FlexDirection | {
     [key: string]: FlexDirection;
@@ -16,7 +13,9 @@ export type FlexAlignmentYType = NonNullable<AlignmentYExtendedDictionaryType> |
 export type FlexWrapType = boolean | {
     [key: string]: boolean;
 };
-export interface FlexCustomLayoutProps {
+export interface FlexBaseProps extends ChildrenProps, StyleProps {
+}
+export interface FlexStyleProps extends FlexBaseProps {
     alignmentX?: FlexAlignmentXType;
     alignmentY?: FlexAlignmentYType;
     direction?: FlexDirectionType;
@@ -25,6 +24,6 @@ export interface FlexCustomLayoutProps {
     spacingX?: SingleOrResponsive<SpaceToken>;
     spacingY?: SingleOrResponsive<SpaceToken>;
 }
-export interface FlexProps<T extends ElementType = 'div'> extends FlexElementTypeProps<T>, FlexCustomLayoutProps {
+export interface FlexProps extends FlexStyleProps {
 }
-export type SpiritFlexProps<T extends ElementType = 'div'> = FlexProps<T> & ChildrenProps & StyleProps & SpiritPolymorphicElementPropsWithRef<T, FlexProps<T>>;
+export type SpiritFlexProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, FlexProps>;

package/types/footer.d.ts

@@ -1,14 +1,13 @@
 import { type ElementType } from 'react';
-import { type BackgroundColorsDictionaryType, type ChildrenProps, type SpaceToken, type SpiritPolymorphicElementPropsWithRef, type StyleProps, type TextAlignmentType } from './shared';
-export interface FooterStyleProps {
+import { type BackgroundColorsDictionaryType, type ChildrenProps, type PolymorphicComponentProps, type SpaceToken, type StyleProps, type TextAlignmentType } from './shared';
+export interface FooterBaseProps extends ChildrenProps, StyleProps {
+}
+export interface FooterStyleProps extends FooterBaseProps {
     paddingTop?: SpaceToken;
     paddingBottom?: SpaceToken;
     backgroundColor?: BackgroundColorsDictionaryType;
     textAlignment?: TextAlignmentType;
 }
-export interface FooterBaseProps extends FooterStyleProps, ChildrenProps, StyleProps {
+export interface FooterProps extends FooterStyleProps {
 }
-export type FooterProps<E extends ElementType> = {
-    elementType?: E;
-} & FooterBaseProps;
-export type SpiritFooterProps<E extends ElementType = 'footer'> = FooterProps<E> & SpiritPolymorphicElementPropsWithRef<E, FooterProps<E>>;
+export type SpiritFooterProps<E extends ElementType = 'footer'> = PolymorphicComponentProps<E, FooterProps>;

package/types/grid.d.ts

@@ -1,5 +1,5 @@
-import { type ElementType, type JSXElementConstructor } from 'react';
-import { type AlignmentXExtendedDictionaryType, type AlignmentYExtendedDictionaryType, type ChildrenProps, type GridColumns, type SingleOrResponsive, type SpaceToken, type SpiritPolymorphicElementPropsWithRef, type StyleProps } from './shared';
+import { type ElementType } from 'react';
+import { type AlignmentXExtendedDictionaryType, type AlignmentYExtendedDictionaryType, type ChildrenProps, type GridColumns, type PolymorphicComponentProps, type SingleOrResponsive, type SpaceToken, type StyleProps } from './shared';
 export type GridColsBreakpoints = {
     mobile?: GridColumns;
     tablet?: GridColumns;
@@ -12,12 +12,6 @@ export type GridItemPositionBreakpoints = {
     desktop?: number | GridItemSpan;
 };
 export type GridItemPosition = number | GridItemSpan | GridItemPositionBreakpoints;
-export interface GridElementTypeProps<T extends ElementType = 'div'> {
-    elementType?: T | JSXElementConstructor<unknown>;
-}
-export interface GridItemElementTypeProps<T extends ElementType = 'div'> {
-    elementType?: T | JSXElementConstructor<unknown>;
-}
 export type GridAlignmentXType = NonNullable<AlignmentXExtendedDictionaryType> | {
     [key: string]: NonNullable<AlignmentXExtendedDictionaryType>;
 };
@@ -38,9 +32,17 @@ export interface GridItemCustomLayoutProps {
     rowEnd?: GridItemPosition;
     rowStart?: GridItemPosition;
 }
-export interface GridProps<T extends ElementType = 'div'> extends GridElementTypeProps<T>, GridCustomLayoutProps {
+export interface GridBaseProps extends ChildrenProps, StyleProps {
+}
+export interface GridItemBaseProps extends ChildrenProps, StyleProps {
+}
+export interface GridStyleProps extends GridBaseProps, GridCustomLayoutProps {
+}
+export interface GridItemStyleProps extends GridItemBaseProps, GridItemCustomLayoutProps {
+}
+export interface GridProps extends GridStyleProps {
 }
-export interface GridItemProps<T extends ElementType = 'div'> extends GridItemElementTypeProps<T>, GridItemCustomLayoutProps {
+export interface GridItemProps extends GridItemStyleProps {
 }
-export type SpiritGridProps<T extends ElementType = 'div'> = GridProps<T> & ChildrenProps & StyleProps & SpiritPolymorphicElementPropsWithRef<T, GridProps<T>>;
-export type SpiritGridItemProps<T extends ElementType = 'div'> = GridItemProps<T> & ChildrenProps & StyleProps & SpiritPolymorphicElementPropsWithRef<T, GridItemProps<T>>;
+export type SpiritGridProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, GridProps>;
+export type SpiritGridItemProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, GridItemProps>;

package/types/header.d.ts

@@ -1,14 +1,14 @@
-import { type ElementType } from 'react';
-import { type ChildrenProps, type ClickEvent, type SpiritButtonElementProps, type SpiritDialogElementProps, type SpiritElementProps, type SpiritLItemElementProps, type SpiritPolymorphicElementPropsWithRef, type SpiritSpanElementProps, type SpiritUListElementProps, type StyleProps, type TransferProps } from './shared';
+import { type ElementType, type SyntheticEvent } from 'react';
+import { type ChildrenProps, type PolymorphicComponentProps, type SpiritButtonElementProps, type SpiritDialogElementProps, type SpiritElementProps, type SpiritLItemElementProps, type SpiritSpanElementProps, type SpiritUListElementProps, type StyleProps, type TransferProps } from './shared';
 export type HeaderActionsColorType = 'primary' | 'secondary';
 export type HeaderColorType = 'primary' | 'transparent';
 export type HeaderDialogHandlingProps = {
     isOpen: boolean;
-    onClose: (event: ClickEvent) => void;
+    onClose: (event: Event | SyntheticEvent) => void;
 };
 export type HeaderMobileActionsHandlingProps = {
     isOpen: boolean;
-    onOpen: (event: ClickEvent) => void;
+    onOpen: (event: Event | SyntheticEvent) => void;
 };
 export interface HeaderProps extends SpiritElementProps, ChildrenProps {
     color?: HeaderColorType;
@@ -30,26 +30,12 @@ export interface HeaderDialogButtonProps extends SpiritButtonElementProps, Child
 export interface HeaderDialogCloseButtonProps extends Omit<SpiritButtonElementProps, 'children'> {
     label?: string;
 }
-export interface BaseHeaderDialogLinkProps extends ChildrenProps, StyleProps, TransferProps {
-    isCurrent?: boolean;
-}
-export type HeaderDialogLinkProps<E extends ElementType = 'a'> = {
-    elementType?: E;
-} & BaseHeaderDialogLinkProps;
-export type SpiritDialogHeaderLinkProps<E extends ElementType = 'a'> = HeaderDialogLinkProps<E> & SpiritPolymorphicElementPropsWithRef<E, HeaderDialogLinkProps<E>>;
 export interface HeaderDialogNavProps extends SpiritUListElementProps, ChildrenProps {
 }
 export interface HeaderDialogNavItemProps extends SpiritLItemElementProps, ChildrenProps {
 }
 export interface HeaderDialogTextProps extends SpiritSpanElementProps, ChildrenProps {
 }
-export interface HeaderLinkBaseProps extends ChildrenProps, StyleProps, TransferProps {
-    isCurrent?: boolean;
-}
-export type HeaderLinkProps<E extends ElementType = 'a'> = {
-    elementType?: E;
-} & HeaderLinkBaseProps;
-export type SpiritHeaderLinkProps<E extends ElementType = 'a'> = HeaderLinkProps<E> & SpiritPolymorphicElementPropsWithRef<E, HeaderLinkProps<E>>;
 export interface HeaderMobileActionsProps extends SpiritElementProps, HeaderMobileActionsHandlingProps, ChildrenProps {
     dialogId: string;
     menuToggleLabel?: string;
@@ -58,3 +44,15 @@ export interface HeaderNavProps extends SpiritUListElementProps, ChildrenProps {
 }
 export interface HeaderNavItemProps extends SpiritLItemElementProps, ChildrenProps {
 }
+export interface HeaderDialogLinkStyleProps extends ChildrenProps, StyleProps, TransferProps {
+    isCurrent?: boolean;
+}
+export interface HeaderLinkStyleProps extends ChildrenProps, StyleProps, TransferProps {
+    isCurrent?: boolean;
+}
+export interface HeaderDialogLinkProps extends HeaderDialogLinkStyleProps {
+}
+export interface HeaderLinkProps extends HeaderLinkStyleProps {
+}
+export type SpiritDialogHeaderLinkProps<E extends ElementType = 'a'> = PolymorphicComponentProps<E, HeaderDialogLinkProps>;
+export type SpiritHeaderLinkProps<E extends ElementType = 'a'> = PolymorphicComponentProps<E, HeaderLinkProps>;

package/types/heading.d.ts

@@ -1,10 +1,10 @@
-import { type ElementType, type JSXElementConstructor } from 'react';
+import { type ElementType } from 'react';
 import type { ChildrenProps, EmphasisDictionaryType, EmphasisProps, SizeExtendedDictionaryType, SizeProps, StyleProps, TextColorProps, TextColorsType, TransferProps, TypographyBaseProps } from './shared';
 export type HeadingColorsType<C = undefined> = TextColorsType<C>;
-export interface HeadingElementTypeProps<T extends ElementType> {
-    elementType: T | JSXElementConstructor<unknown>;
+export interface HeadingElementTypeProps<E extends ElementType> {
+    elementType: E;
 }
 export interface HeadingProps<T extends ElementType> extends HeadingElementTypeProps<T>, ChildrenProps, StyleProps, TransferProps, TypographyBaseProps {
 }
-export interface SpiritHeadingProps<T extends ElementType, S = void, E = void, C = void> extends HeadingProps<T>, SizeProps<SizeExtendedDictionaryType<S>>, EmphasisProps<EmphasisDictionaryType<E>>, TextColorProps<HeadingColorsType<C>> {
+export interface SpiritHeadingProps<T extends ElementType, S = void, Emph = void, C = void> extends HeadingProps<T>, SizeProps<SizeExtendedDictionaryType<S>>, EmphasisProps<EmphasisDictionaryType<Emph>>, TextColorProps<HeadingColorsType<C>> {
 }

package/types/hidden.d.ts

@@ -1,10 +1,11 @@
-import { type ElementType, type JSXElementConstructor } from 'react';
-import { type BreakpointToken, type ChildrenProps, type SpiritPolymorphicElementPropsWithRef, type StyleProps } from './shared';
+import { type ElementType } from 'react';
+import { type BreakpointToken, type ChildrenProps, type PolymorphicComponentProps, type StyleProps } from './shared';
 export interface HiddenBaseProps extends ChildrenProps, StyleProps {
+}
+export interface HiddenStyleProps extends HiddenBaseProps {
     from?: BreakpointToken;
     on?: BreakpointToken | BreakpointToken[];
 }
-export type HiddenProps<E extends ElementType> = {
-    elementType?: E | JSXElementConstructor<unknown>;
-} & HiddenBaseProps;
-export type SpiritHiddenProps<E extends ElementType = 'span'> = HiddenProps<E> & SpiritPolymorphicElementPropsWithRef<E, HiddenProps<E>>;
+export interface HiddenProps extends HiddenStyleProps {
+}
+export type SpiritHiddenProps<E extends ElementType = 'span'> = PolymorphicComponentProps<E, HiddenProps>;

package/types/icon.d.ts

@@ -1,12 +1,14 @@
 import { type SVGAttributes } from 'react';
-import { type AccentColorNamesType, type ChildrenProps, type EmotionColorNamesType, type SingleOrResponsive, type StyleProps, type TextColorNamesType, type TransferProps } from './shared';
+import { type AccentColorNamesType, type ChildrenProps, type EmotionColorNamesType, type SingleOrResponsive, type StyleProps, type TextColorNamesType } from './shared';
 export type IconBoxSize = SingleOrResponsive<number>;
 export type IconColorType = TextColorNamesType | EmotionColorNamesType | AccentColorNamesType;
-export interface IconProps extends StyleProps, ChildrenProps, SVGAttributes<SVGElement>, TransferProps {
-    ariaHidden?: boolean;
+export interface IconStyleProps extends SVGAttributes<SVGElement> {
     boxSize?: IconBoxSize;
     color?: IconColorType;
     name: string;
+}
+export interface IconProps extends IconStyleProps, StyleProps, ChildrenProps {
+    ariaHidden?: boolean;
     title?: string;
 }
 export interface SpiritIconProps extends IconProps {

package/types/iconBox.d.ts

@@ -1,10 +1,12 @@
-import { type ElementType, type JSXElementConstructor } from 'react';
+import { type ElementType } from 'react';
 import { type IconBoxShapes } from '../components/IconBox/constants';
-import type { AccentColorNamesType, ChildrenProps, EmotionColorNamesType, SingleOrResponsive, SizeExtendedDictionaryType, SpiritPolymorphicElementPropsWithRef, StyleProps } from './shared';
+import type { AccentColorNamesType, ChildrenProps, EmotionColorNamesType, PolymorphicComponentProps, SingleOrResponsive, SizeExtendedDictionaryType, StyleProps } from './shared';
 export type IconBoxShapeKeys = keyof typeof IconBoxShapes;
 export type IconBoxShapeType = (typeof IconBoxShapes)[IconBoxShapeKeys];
 export type IconBoxColorsType = AccentColorNamesType | EmotionColorNamesType;
 export interface IconBoxBaseProps extends ChildrenProps, StyleProps {
+}
+export interface IconBoxStyleProps extends IconBoxBaseProps {
     color?: IconBoxColorsType;
     shape?: IconBoxShapeType;
     hasBorder?: boolean;
@@ -12,7 +14,6 @@ export interface IconBoxBaseProps extends ChildrenProps, StyleProps {
     isSubtle?: boolean;
     size?: SingleOrResponsive<SizeExtendedDictionaryType>;
 }
-export type IconBoxProps<E extends ElementType> = {
-    elementType?: E | JSXElementConstructor<unknown>;
-} & IconBoxBaseProps;
-export type SpiritIconBoxProps<E extends ElementType = 'div'> = IconBoxProps<E> & SpiritPolymorphicElementPropsWithRef<E, IconBoxProps<E>>;
+export interface IconBoxProps extends IconBoxStyleProps {
+}
+export type SpiritIconBoxProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, IconBoxProps>;

package/types/item.d.ts

@@ -1,7 +1,7 @@
-import { type ElementType, type JSXElementConstructor, type ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
 import { type StyleProps, type TransferProps } from './shared';
-export interface AriaItemElementTypeProps<T extends ElementType = 'button'> {
-    elementType?: T | JSXElementConstructor<unknown>;
+export interface AriaItemElementTypeProps<E extends ElementType = 'button'> {
+    elementType?: E;
 }
 export interface ItemStyleProps extends StyleProps, TransferProps {
     isDisabled?: boolean;