@marigold/system 7.8.2 → 8.0.1

package/dist/index.d.mts

@@ -1,29 +1,50 @@
-import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React$1, { ReactNode } from 'react';
 import { HtmlProps, KebabCase } from '@marigold/types';
 import { DateFormatterOptions } from '@react-aria/i18n';
 import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
 export { VariantProps } from 'class-variance-authority';
 
 interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
+    /**
+     * The size of an svg.
+     */
     size?: number | string | number[] | string[];
+    /**
+     * To add a className on svg and icons.
+     */
     className?: string;
 }
-declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
+declare const SVG: React$1.ForwardRefExoticComponent<SVGProps & React$1.RefAttributes<SVGSVGElement>>;
 
 interface DateFormatProps extends DateFormatterOptions {
+    /**
+     * Value to be formatted.
+     */
     value: Date;
+    /**
+     * Specifies that the digits should take the full width.
+     * @default true
+     */
     tabular?: boolean;
 }
-declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React__default.JSX.Element;
+declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React$1.JSX.Element;
 
-interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+interface NumericFormatProps extends Intl.NumberFormatOptions {
+    /**
+     * Value to be formatted.
+     */
     value: number | bigint;
+    /**
+     * The numberingSystem accessor property of Intl.Locale instances returns the numeral system for this locale.
+     */
     numberingSystem?: string;
+    /**
+     * Specifies that the digits should take the full width.
+     * @default true
+     */
     tabular?: boolean;
-    styleFormat?: string;
 }
-declare const NumericFormat: ({ value, styleFormat, tabular, ...props }: NumericFormatProps) => React__default.JSX.Element;
+declare const NumericFormat: ({ value, tabular, ...props }: NumericFormatProps) => React$1.JSX.Element;
 
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
@@ -120,7 +141,7 @@ type Theme = {
         Slider?: Record<'container' | 'track' | 'thumb' | 'output', ComponentStyleFunction<string, string>>;
         Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
         NumberField?: Record<'group' | 'stepper' | 'input', ComponentStyleFunction<string, string>>;
-        Message?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
+        SectionMessage?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
         Table?: Record<'table' | 'header' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
         Tag?: Record<'tag' | 'listItems' | 'closeButton', ComponentStyleFunction<string, string>>;
         Text?: ComponentStyleFunction<string, string>;
@@ -147,7 +168,7 @@ interface UseClassNamesProps<C extends ComponentNames> {
 type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends (...args: any) => any ? string : {
     [slot in keyof ThemeComponent<C>]: string;
 };
-declare const useClassNames: <C extends "Accordion" | "Badge" | "Body" | "Button" | "Card" | "DateField" | "Dialog" | "Divider" | "Field" | "Footer" | "Header" | "Headline" | "Popover" | "HelpText" | "Image" | "Checkbox" | "Switch" | "Input" | "Label" | "List" | "Link" | "ListBox" | "Menu" | "Radio" | "Slider" | "Select" | "NumberField" | "Message" | "Table" | "Tag" | "Text" | "TextArea" | "Tooltip" | "Tabs" | "Underlay" | "Calendar" | "DatePicker" | "ComboBox">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
+declare const useClassNames: <C extends ComponentNames>({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
 
 /**
  * Hook that can be used to return values based on the current screen size,
@@ -173,11 +194,20 @@ declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 
 declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
+    /**
+     * The theme that should be used within the provider context.
+     */
     theme: T;
+    /**
+     * The children of the component.
+     */
     children: ReactNode;
+    /**
+     * Additional class names to apply to the root element of the provider.
+     */
     className?: string;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React__default.JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React$1.JSX.Element;
 
 declare const useSmallScreen: () => boolean;
 
@@ -186,53 +216,53 @@ type StylesProps = {
 };
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     components: {
-        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
-        Badge?: ComponentStyleFunction<string, string, {}> | undefined;
-        Body?: ComponentStyleFunction<string, string, {}> | undefined;
-        Button?: ComponentStyleFunction<string, string, {}> | undefined;
-        Card?: ComponentStyleFunction<string, string, {}> | undefined;
-        DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string, {}>> | undefined;
-        Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        Divider?: ComponentStyleFunction<string, string, {}> | undefined;
-        Field?: ComponentStyleFunction<string, string, {}> | undefined;
-        Footer?: ComponentStyleFunction<string, string, {}> | undefined;
-        Header?: ComponentStyleFunction<string, string, {}> | undefined;
-        Headline?: ComponentStyleFunction<string, string, {}> | undefined;
-        Popover?: ComponentStyleFunction<string, string, {}> | undefined;
-        HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        Image?: ComponentStyleFunction<string, string, {}> | undefined;
-        Checkbox?: Record<"label" | "container" | "checkbox" | "group", ComponentStyleFunction<string, string, {}>> | undefined;
-        Switch?: Record<"track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
-        Input?: Record<"input" | "action" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string, {}>> | undefined;
-        List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
-        Link?: ComponentStyleFunction<string, string, {}> | undefined;
-        ListBox?: Record<"option" | "section" | "container" | "list" | "sectionTitle", ComponentStyleFunction<string, string, {}>> | undefined;
-        Menu?: Record<"section" | "item" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        Radio?: Record<"label" | "container" | "group" | "radio", ComponentStyleFunction<string, string, {}>> | undefined;
-        Slider?: Record<"output" | "track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
-        Select?: Record<"select" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        NumberField?: Record<"input" | "group" | "stepper", ComponentStyleFunction<string, string, {}>> | undefined;
-        Message?: Record<"title" | "container" | "icon" | "content", ComponentStyleFunction<string, string, {}>> | undefined;
-        Table?: Record<"header" | "table" | "row" | "cell", ComponentStyleFunction<string, string, {}>> | undefined;
-        Tag?: Record<"closeButton" | "tag" | "listItems", ComponentStyleFunction<string, string, {}>> | undefined;
-        Text?: ComponentStyleFunction<string, string, {}> | undefined;
-        TextArea?: ComponentStyleFunction<string, string, {}> | undefined;
-        Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string, {}>> | undefined;
-        Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string, {}>> | undefined;
-        Underlay?: ComponentStyleFunction<string, string, {}> | undefined;
-        Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string, {}>> | undefined;
-        DatePicker?: Record<"button" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        ComboBox?: ComponentStyleFunction<string, string, {}> | undefined;
+        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string>>;
+        Badge?: ComponentStyleFunction<string, string>;
+        Body?: ComponentStyleFunction<string, string>;
+        Button?: ComponentStyleFunction<string, string>;
+        Card?: ComponentStyleFunction<string, string>;
+        DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string>>;
+        Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string>>;
+        Divider?: ComponentStyleFunction<string, string>;
+        Field?: ComponentStyleFunction<string, string>;
+        Footer?: ComponentStyleFunction<string, string>;
+        Header?: ComponentStyleFunction<string, string>;
+        Headline?: ComponentStyleFunction<string, string>;
+        Popover?: ComponentStyleFunction<string, string>;
+        HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string>>;
+        Image?: ComponentStyleFunction<string, string>;
+        Checkbox?: Record<"container" | "label" | "checkbox" | "group", ComponentStyleFunction<string, string>>;
+        Switch?: Record<"container" | "track" | "thumb", ComponentStyleFunction<string, string>>;
+        Input?: Record<"input" | "icon" | "action", ComponentStyleFunction<string, string>>;
+        Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string>>;
+        List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string>>;
+        Link?: ComponentStyleFunction<string, string>;
+        ListBox?: Record<"container" | "list" | "option" | "section" | "sectionTitle", ComponentStyleFunction<string, string>>;
+        Menu?: Record<"container" | "section" | "item", ComponentStyleFunction<string, string>>;
+        Radio?: Record<"container" | "label" | "radio" | "group", ComponentStyleFunction<string, string>>;
+        Slider?: Record<"container" | "track" | "thumb" | "output", ComponentStyleFunction<string, string>>;
+        Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
+        NumberField?: Record<"group" | "stepper" | "input", ComponentStyleFunction<string, string>>;
+        SectionMessage?: Record<"container" | "icon" | "title" | "content", ComponentStyleFunction<string, string>>;
+        Table?: Record<"table" | "header" | "row" | "cell", ComponentStyleFunction<string, string>>;
+        Tag?: Record<"tag" | "listItems" | "closeButton", ComponentStyleFunction<string, string>>;
+        Text?: ComponentStyleFunction<string, string>;
+        TextArea?: ComponentStyleFunction<string, string>;
+        Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string>>;
+        Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
+        Underlay?: ComponentStyleFunction<string, string>;
+        Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string>>;
+        DatePicker?: Record<"container" | "button", ComponentStyleFunction<string, string>>;
+        ComboBox?: ComponentStyleFunction<string, string>;
     };
     name: string;
     screens?: {
         [key: string]: string;
-    } | undefined;
-    colors?: NestedStringObject | undefined;
-    shadow?: NestedStringObject | undefined;
-    height?: NestedStringObject | undefined;
-    root?: ComponentStyleFunction<never, never, {}> | undefined;
+    };
+    colors?: NestedStringObject;
+    shadow?: NestedStringObject;
+    height?: NestedStringObject;
+    root?: ComponentStyleFunction;
 };
 
 declare const defaultTheme: {
@@ -829,63 +859,123 @@ type AlignmentProp = {
     };
 };
 type CursorProp = {
+    /**
+     * Set the cursor for the element.
+     */
     cursor?: keyof typeof cursorStyle;
 };
 type FontStyleProp = {
+    /**
+     * Set the font style for the text element.
+     */
     fontStyle?: keyof typeof textStyle;
 };
 type FontWeightProp = {
+    /**
+     * Set the font weight for the text element.
+     */
     weight?: keyof typeof fontWeight;
 };
 type FontSizeProp = {
+    /**
+     * Set the font size for the text element.
+     */
     fontSize?: keyof typeof textSize;
 };
 type GridColsAlignProp = {
+    /**
+     * Set the alignment of grid columns.
+     */
     align?: keyof typeof gridColsAlign;
 };
 type GridColumn = {
+    /**
+     * Set the alignment of a grid column.
+     */
     align?: keyof typeof gridColumn;
 };
 type GapSpaceProp = {
+    /**
+     * The space between the children.
+     */
     space?: keyof typeof gapSpace;
 };
 type ObjectFitProp = {
+    /**
+     * Set the object-fit property for the element.
+     */
     fit?: keyof typeof objectFit;
 };
 type ObjectPositionProp = {
+    /**
+     * Set the object-position property for the element.
+     */
     position?: keyof typeof objectPosition;
 };
 type PaddingSpaceProp = {
+    /**
+     * Set the padding space for the element.
+     */
     space?: keyof typeof paddingSpace;
 };
 type PaddingSpacePropX = {
+    /**
+     * Set the horizontal padding space for the element.
+     */
     spaceX?: keyof typeof paddingSpaceX;
 };
 type PaddingSpacePropY = {
+    /**
+     * Set the vertical padding space for the element.
+     */
     spaceY?: keyof typeof paddingSpaceY;
 };
 type PaddingRightProp = {
+    /**
+     * Set the right padding for the element.
+     */
     pr?: keyof typeof paddingRight;
 };
 type PaddingLeftProp = {
+    /**
+     * Set the left padding for the element.
+     */
     pl?: keyof typeof paddingLeft;
 };
 type PaddingTopProp = {
+    /**
+     * Set the top padding for the element.
+     */
     pt?: keyof typeof paddingTop;
 };
 type PaddingBottomProp = {
+    /**
+     * Set the bottom padding for the element.
+     */
     pb?: keyof typeof paddingBottom;
 };
 type PlaceItemsProp = {
+    /**
+     * Set the alignment of place-items property for the element.
+     */
     align?: keyof typeof placeItems;
 };
 type TextAlignProp = {
+    /**
+     * Set the text alignment for the element.
+     */
     align?: keyof typeof textAlign;
 };
 type WidthProp = {
+    /**
+     * Set the width of the element.
+     */
     width?: keyof typeof width;
 };
 type HeightProp = {
+    /**
+     * Set the height of the element.
+     */
     height?: keyof typeof height;
 };
 

package/dist/index.d.ts

@@ -1,29 +1,50 @@
-import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React$1, { ReactNode } from 'react';
 import { HtmlProps, KebabCase } from '@marigold/types';
 import { DateFormatterOptions } from '@react-aria/i18n';
 import { StringToBoolean, ClassProp } from 'class-variance-authority/dist/types';
 export { VariantProps } from 'class-variance-authority';
 
 interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
+    /**
+     * The size of an svg.
+     */
     size?: number | string | number[] | string[];
+    /**
+     * To add a className on svg and icons.
+     */
     className?: string;
 }
-declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
+declare const SVG: React$1.ForwardRefExoticComponent<SVGProps & React$1.RefAttributes<SVGSVGElement>>;
 
 interface DateFormatProps extends DateFormatterOptions {
+    /**
+     * Value to be formatted.
+     */
     value: Date;
+    /**
+     * Specifies that the digits should take the full width.
+     * @default true
+     */
     tabular?: boolean;
 }
-declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React__default.JSX.Element;
+declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React$1.JSX.Element;
 
-interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+interface NumericFormatProps extends Intl.NumberFormatOptions {
+    /**
+     * Value to be formatted.
+     */
     value: number | bigint;
+    /**
+     * The numberingSystem accessor property of Intl.Locale instances returns the numeral system for this locale.
+     */
     numberingSystem?: string;
+    /**
+     * Specifies that the digits should take the full width.
+     * @default true
+     */
     tabular?: boolean;
-    styleFormat?: string;
 }
-declare const NumericFormat: ({ value, styleFormat, tabular, ...props }: NumericFormatProps) => React__default.JSX.Element;
+declare const NumericFormat: ({ value, tabular, ...props }: NumericFormatProps) => React$1.JSX.Element;
 
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
@@ -120,7 +141,7 @@ type Theme = {
         Slider?: Record<'container' | 'track' | 'thumb' | 'output', ComponentStyleFunction<string, string>>;
         Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
         NumberField?: Record<'group' | 'stepper' | 'input', ComponentStyleFunction<string, string>>;
-        Message?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
+        SectionMessage?: Record<'container' | 'icon' | 'title' | 'content', ComponentStyleFunction<string, string>>;
         Table?: Record<'table' | 'header' | 'row' | 'cell', ComponentStyleFunction<string, string>>;
         Tag?: Record<'tag' | 'listItems' | 'closeButton', ComponentStyleFunction<string, string>>;
         Text?: ComponentStyleFunction<string, string>;
@@ -147,7 +168,7 @@ interface UseClassNamesProps<C extends ComponentNames> {
 type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends (...args: any) => any ? string : {
     [slot in keyof ThemeComponent<C>]: string;
 };
-declare const useClassNames: <C extends "Accordion" | "Badge" | "Body" | "Button" | "Card" | "DateField" | "Dialog" | "Divider" | "Field" | "Footer" | "Header" | "Headline" | "Popover" | "HelpText" | "Image" | "Checkbox" | "Switch" | "Input" | "Label" | "List" | "Link" | "ListBox" | "Menu" | "Radio" | "Slider" | "Select" | "NumberField" | "Message" | "Table" | "Tag" | "Text" | "TextArea" | "Tooltip" | "Tabs" | "Underlay" | "Calendar" | "DatePicker" | "ComboBox">({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
+declare const useClassNames: <C extends ComponentNames>({ component, className, variant, size, }: UseClassNamesProps<C>) => ComponentClassNames<C>;
 
 /**
  * Hook that can be used to return values based on the current screen size,
@@ -173,11 +194,20 @@ declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 
 declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
+    /**
+     * The theme that should be used within the provider context.
+     */
     theme: T;
+    /**
+     * The children of the component.
+     */
     children: ReactNode;
+    /**
+     * Additional class names to apply to the root element of the provider.
+     */
     className?: string;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React__default.JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React$1.JSX.Element;
 
 declare const useSmallScreen: () => boolean;
 
@@ -186,53 +216,53 @@ type StylesProps = {
 };
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     components: {
-        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
-        Badge?: ComponentStyleFunction<string, string, {}> | undefined;
-        Body?: ComponentStyleFunction<string, string, {}> | undefined;
-        Button?: ComponentStyleFunction<string, string, {}> | undefined;
-        Card?: ComponentStyleFunction<string, string, {}> | undefined;
-        DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string, {}>> | undefined;
-        Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        Divider?: ComponentStyleFunction<string, string, {}> | undefined;
-        Field?: ComponentStyleFunction<string, string, {}> | undefined;
-        Footer?: ComponentStyleFunction<string, string, {}> | undefined;
-        Header?: ComponentStyleFunction<string, string, {}> | undefined;
-        Headline?: ComponentStyleFunction<string, string, {}> | undefined;
-        Popover?: ComponentStyleFunction<string, string, {}> | undefined;
-        HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        Image?: ComponentStyleFunction<string, string, {}> | undefined;
-        Checkbox?: Record<"label" | "container" | "checkbox" | "group", ComponentStyleFunction<string, string, {}>> | undefined;
-        Switch?: Record<"track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
-        Input?: Record<"input" | "action" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string, {}>> | undefined;
-        List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string, {}>> | undefined;
-        Link?: ComponentStyleFunction<string, string, {}> | undefined;
-        ListBox?: Record<"option" | "section" | "container" | "list" | "sectionTitle", ComponentStyleFunction<string, string, {}>> | undefined;
-        Menu?: Record<"section" | "item" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        Radio?: Record<"label" | "container" | "group" | "radio", ComponentStyleFunction<string, string, {}>> | undefined;
-        Slider?: Record<"output" | "track" | "container" | "thumb", ComponentStyleFunction<string, string, {}>> | undefined;
-        Select?: Record<"select" | "icon", ComponentStyleFunction<string, string, {}>> | undefined;
-        NumberField?: Record<"input" | "group" | "stepper", ComponentStyleFunction<string, string, {}>> | undefined;
-        Message?: Record<"title" | "container" | "icon" | "content", ComponentStyleFunction<string, string, {}>> | undefined;
-        Table?: Record<"header" | "table" | "row" | "cell", ComponentStyleFunction<string, string, {}>> | undefined;
-        Tag?: Record<"closeButton" | "tag" | "listItems", ComponentStyleFunction<string, string, {}>> | undefined;
-        Text?: ComponentStyleFunction<string, string, {}> | undefined;
-        TextArea?: ComponentStyleFunction<string, string, {}> | undefined;
-        Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string, {}>> | undefined;
-        Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string, {}>> | undefined;
-        Underlay?: ComponentStyleFunction<string, string, {}> | undefined;
-        Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string, {}>> | undefined;
-        DatePicker?: Record<"button" | "container", ComponentStyleFunction<string, string, {}>> | undefined;
-        ComboBox?: ComponentStyleFunction<string, string, {}> | undefined;
+        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string>>;
+        Badge?: ComponentStyleFunction<string, string>;
+        Body?: ComponentStyleFunction<string, string>;
+        Button?: ComponentStyleFunction<string, string>;
+        Card?: ComponentStyleFunction<string, string>;
+        DateField?: Record<"segment" | "field" | "action", ComponentStyleFunction<string, string>>;
+        Dialog?: Record<"closeButton" | "container", ComponentStyleFunction<string, string>>;
+        Divider?: ComponentStyleFunction<string, string>;
+        Field?: ComponentStyleFunction<string, string>;
+        Footer?: ComponentStyleFunction<string, string>;
+        Header?: ComponentStyleFunction<string, string>;
+        Headline?: ComponentStyleFunction<string, string>;
+        Popover?: ComponentStyleFunction<string, string>;
+        HelpText?: Record<"container" | "icon", ComponentStyleFunction<string, string>>;
+        Image?: ComponentStyleFunction<string, string>;
+        Checkbox?: Record<"container" | "label" | "checkbox" | "group", ComponentStyleFunction<string, string>>;
+        Switch?: Record<"container" | "track" | "thumb", ComponentStyleFunction<string, string>>;
+        Input?: Record<"input" | "icon" | "action", ComponentStyleFunction<string, string>>;
+        Label?: Record<"container" | "indicator", ComponentStyleFunction<string, string>>;
+        List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string>>;
+        Link?: ComponentStyleFunction<string, string>;
+        ListBox?: Record<"container" | "list" | "option" | "section" | "sectionTitle", ComponentStyleFunction<string, string>>;
+        Menu?: Record<"container" | "section" | "item", ComponentStyleFunction<string, string>>;
+        Radio?: Record<"container" | "label" | "radio" | "group", ComponentStyleFunction<string, string>>;
+        Slider?: Record<"container" | "track" | "thumb" | "output", ComponentStyleFunction<string, string>>;
+        Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
+        NumberField?: Record<"group" | "stepper" | "input", ComponentStyleFunction<string, string>>;
+        SectionMessage?: Record<"container" | "icon" | "title" | "content", ComponentStyleFunction<string, string>>;
+        Table?: Record<"table" | "header" | "row" | "cell", ComponentStyleFunction<string, string>>;
+        Tag?: Record<"tag" | "listItems" | "closeButton", ComponentStyleFunction<string, string>>;
+        Text?: ComponentStyleFunction<string, string>;
+        TextArea?: ComponentStyleFunction<string, string>;
+        Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string>>;
+        Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
+        Underlay?: ComponentStyleFunction<string, string>;
+        Calendar?: Record<"calendar" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid", ComponentStyleFunction<string, string>>;
+        DatePicker?: Record<"container" | "button", ComponentStyleFunction<string, string>>;
+        ComboBox?: ComponentStyleFunction<string, string>;
     };
     name: string;
     screens?: {
         [key: string]: string;
-    } | undefined;
-    colors?: NestedStringObject | undefined;
-    shadow?: NestedStringObject | undefined;
-    height?: NestedStringObject | undefined;
-    root?: ComponentStyleFunction<never, never, {}> | undefined;
+    };
+    colors?: NestedStringObject;
+    shadow?: NestedStringObject;
+    height?: NestedStringObject;
+    root?: ComponentStyleFunction;
 };
 
 declare const defaultTheme: {
@@ -829,63 +859,123 @@ type AlignmentProp = {
     };
 };
 type CursorProp = {
+    /**
+     * Set the cursor for the element.
+     */
     cursor?: keyof typeof cursorStyle;
 };
 type FontStyleProp = {
+    /**
+     * Set the font style for the text element.
+     */
     fontStyle?: keyof typeof textStyle;
 };
 type FontWeightProp = {
+    /**
+     * Set the font weight for the text element.
+     */
     weight?: keyof typeof fontWeight;
 };
 type FontSizeProp = {
+    /**
+     * Set the font size for the text element.
+     */
     fontSize?: keyof typeof textSize;
 };
 type GridColsAlignProp = {
+    /**
+     * Set the alignment of grid columns.
+     */
     align?: keyof typeof gridColsAlign;
 };
 type GridColumn = {
+    /**
+     * Set the alignment of a grid column.
+     */
     align?: keyof typeof gridColumn;
 };
 type GapSpaceProp = {
+    /**
+     * The space between the children.
+     */
     space?: keyof typeof gapSpace;
 };
 type ObjectFitProp = {
+    /**
+     * Set the object-fit property for the element.
+     */
     fit?: keyof typeof objectFit;
 };
 type ObjectPositionProp = {
+    /**
+     * Set the object-position property for the element.
+     */
     position?: keyof typeof objectPosition;
 };
 type PaddingSpaceProp = {
+    /**
+     * Set the padding space for the element.
+     */
     space?: keyof typeof paddingSpace;
 };
 type PaddingSpacePropX = {
+    /**
+     * Set the horizontal padding space for the element.
+     */
     spaceX?: keyof typeof paddingSpaceX;
 };
 type PaddingSpacePropY = {
+    /**
+     * Set the vertical padding space for the element.
+     */
     spaceY?: keyof typeof paddingSpaceY;
 };
 type PaddingRightProp = {
+    /**
+     * Set the right padding for the element.
+     */
     pr?: keyof typeof paddingRight;
 };
 type PaddingLeftProp = {
+    /**
+     * Set the left padding for the element.
+     */
     pl?: keyof typeof paddingLeft;
 };
 type PaddingTopProp = {
+    /**
+     * Set the top padding for the element.
+     */
     pt?: keyof typeof paddingTop;
 };
 type PaddingBottomProp = {
+    /**
+     * Set the bottom padding for the element.
+     */
     pb?: keyof typeof paddingBottom;
 };
 type PlaceItemsProp = {
+    /**
+     * Set the alignment of place-items property for the element.
+     */
     align?: keyof typeof placeItems;
 };
 type TextAlignProp = {
+    /**
+     * Set the text alignment for the element.
+     */
     align?: keyof typeof textAlign;
 };
 type WidthProp = {
+    /**
+     * Set the width of the element.
+     */
     width?: keyof typeof width;
 };
 type HeightProp = {
+    /**
+     * Set the height of the element.
+     */
     height?: keyof typeof height;
 };
 

package/dist/index.js

@@ -95,8 +95,7 @@ var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
   for (let i = 0, length = key.length; i < length; i++) {
-    if (!result)
-      break;
+    if (!result) break;
     result = result[key[i]];
   }
   return result === void 0 ? fallback : result;
@@ -193,8 +192,7 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
   }
   const [index, setIndex] = (0, import_react2.useState)(defaultIndex);
   (0, import_react2.useEffect)(() => {
-    if (typeof window == "undefined")
-      return;
+    if (typeof window == "undefined") return;
     const getIndex = () => Object.values(screens).filter(
       (breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
     ).length;
@@ -246,8 +244,7 @@ var useSmallScreen = () => {
   }, []);
   (0, import_react4.useEffect)(() => {
     handleResize();
-    if (typeof window == "undefined")
-      return;
+    if (typeof window == "undefined") return;
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [handleResize]);
@@ -260,8 +257,7 @@ var extendTheme = (newStyles, theme) => {
   Object.keys(newStyles).forEach((component) => {
     const componentStyles = newStyles[component];
     const mergedComponentStyles = mergedStyles[component];
-    if (!mergedComponentStyles)
-      return mergedStyles;
+    if (!mergedComponentStyles) return mergedStyles;
     if (typeof newStyles[component] !== "function") {
       const mergeSlotStyles = Object.keys(componentStyles).reduce(
         (acc, slot) => {
@@ -271,7 +267,7 @@ var extendTheme = (newStyles, theme) => {
             var _a, _b;
             acc2[variantItem] = {
               ...(_a = newSlot == null ? void 0 : newSlot.variants) == null ? void 0 : _a[variantItem],
-              ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b.variantItem
+              ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b[variantItem]
             };
             return acc2;
           }, {});
@@ -350,15 +346,13 @@ var import_react7 = __toESM(require("react"));
 var import_i18n2 = require("@react-aria/i18n");
 var NumericFormat = ({
   value,
-  styleFormat,
   tabular = true,
   ...props
 }) => {
   const numberFormatter = (0, import_i18n2.useNumberFormatter)({
-    style: styleFormat,
     ...props
   });
-  return /* @__PURE__ */ import_react7.default.createElement("span", { className: tabular ? "tabular-nums" : "" }, numberFormatter.format(value));
+  return /* @__PURE__ */ import_react7.default.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
 };
 
 // src/style-props.tsx

package/dist/index.mjs

@@ -21,8 +21,7 @@ var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
   for (let i = 0, length = key.length; i < length; i++) {
-    if (!result)
-      break;
+    if (!result) break;
     result = result[key[i]];
   }
   return result === void 0 ? fallback : result;
@@ -119,8 +118,7 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
   }
   const [index, setIndex] = useState(defaultIndex);
   useEffect(() => {
-    if (typeof window == "undefined")
-      return;
+    if (typeof window == "undefined") return;
     const getIndex = () => Object.values(screens).filter(
       (breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
     ).length;
@@ -172,8 +170,7 @@ var useSmallScreen = () => {
   }, []);
   useEffect2(() => {
     handleResize();
-    if (typeof window == "undefined")
-      return;
+    if (typeof window == "undefined") return;
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [handleResize]);
@@ -186,8 +183,7 @@ var extendTheme = (newStyles, theme) => {
   Object.keys(newStyles).forEach((component) => {
     const componentStyles = newStyles[component];
     const mergedComponentStyles = mergedStyles[component];
-    if (!mergedComponentStyles)
-      return mergedStyles;
+    if (!mergedComponentStyles) return mergedStyles;
     if (typeof newStyles[component] !== "function") {
       const mergeSlotStyles = Object.keys(componentStyles).reduce(
         (acc, slot) => {
@@ -197,7 +193,7 @@ var extendTheme = (newStyles, theme) => {
             var _a, _b;
             acc2[variantItem] = {
               ...(_a = newSlot == null ? void 0 : newSlot.variants) == null ? void 0 : _a[variantItem],
-              ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b.variantItem
+              ...(_b = mergedSlot == null ? void 0 : mergedSlot.variants) == null ? void 0 : _b[variantItem]
             };
             return acc2;
           }, {});
@@ -276,15 +272,13 @@ import React4 from "react";
 import { useNumberFormatter } from "@react-aria/i18n";
 var NumericFormat = ({
   value,
-  styleFormat,
   tabular = true,
   ...props
 }) => {
   const numberFormatter = useNumberFormatter({
-    style: styleFormat,
     ...props
   });
-  return /* @__PURE__ */ React4.createElement("span", { className: tabular ? "tabular-nums" : "" }, numberFormatter.format(value));
+  return /* @__PURE__ */ React4.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
 };
 
 // src/style-props.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "7.8.2",
+  "version": "8.0.1",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -27,20 +27,20 @@
     "@react-aria/i18n": "3.11.1",
     "class-variance-authority": "0.7.0",
     "deepmerge": "4.2.2",
-    "react-fast-compare": "3.2.0",
-    "tailwind-merge": "2.2.1",
-    "@marigold/types": "1.1.0"
+    "react-fast-compare": "3.2.2",
+    "tailwind-merge": "2.3.0",
+    "@marigold/types": "1.1.1"
   },
   "peerDependencies": {
     "react": "18.x",
     "react-dom": "18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.24.6",
-    "postcss": "8.4.35",
+    "@babel/core": "7.24.7",
+    "postcss": "8.4.38",
     "react": "18.3.1",
-    "tailwindcss": "3.4.1",
-    "tsup": "8.0.2",
+    "tailwindcss": "3.4.4",
+    "tsup": "8.1.0",
     "@marigold/tsconfig": "0.4.0"
   },
   "scripts": {