@marigold/system 15.4.3 → 16.0.1

package/dist/index.d.mts

@@ -1,5 +1,7 @@
-import React$1, { Context, ReactNode } from "react";
+import * as react0 from "react";
+import { CSSProperties, Context, ReactNode } from "react";
 import { VariantProps } from "class-variance-authority";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { DateFormatterOptions, useNumberFormatter } from "@react-aria/i18n";
 import { HtmlProps, KebabCase } from "@marigold/types";
 import { ClassProp, ClassValue, StringToBoolean } from "class-variance-authority/dist/types";
@@ -15,7 +17,7 @@ interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
    */
   className?: string;
 }
-declare const SVG: React$1.ForwardRefExoticComponent<SVGProps & React$1.RefAttributes<SVGSVGElement>>;
+declare const SVG: react0.ForwardRefExoticComponent<SVGProps & react0.RefAttributes<SVGSVGElement>>;
 //#endregion
 //#region src/components/Formatters/DateFormat.d.ts
 interface DateFormatProps extends DateFormatterOptions {
@@ -33,7 +35,7 @@ declare const DateFormat: ({
   value,
   tabular,
   ...props
-}: DateFormatProps) => React$1.JSX.Element;
+}: DateFormatProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/Formatters/NumericFormat.d.ts
 type NumerFormatterOptions = NonNullable<Parameters<typeof useNumberFormatter>[0]>;
@@ -57,18 +59,18 @@ declare const NumericFormat: ({
   value,
   tabular,
   ...props
-}: NumericFormatProps) => React$1.JSX.Element;
+}: NumericFormatProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/utils.d.ts
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
-type ConfigVariants<T extends ConfigSchema> = { [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined };
-type ConfigVariantsMulti<T extends ConfigSchema> = { [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined };
-type Config<T> = T extends ConfigSchema ? {
-  variants?: T;
-  defaultVariants?: ConfigVariants<T>;
-  compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
+type ConfigVariants<T$1 extends ConfigSchema> = { [Variant in keyof T$1]?: StringToBoolean<keyof T$1[Variant]> | null | undefined };
+type ConfigVariantsMulti<T$1 extends ConfigSchema> = { [Variant in keyof T$1]?: StringToBoolean<keyof T$1[Variant]> | StringToBoolean<keyof T$1[Variant]>[] | undefined };
+type Config<T$1> = T$1 extends ConfigSchema ? {
+  variants?: T$1;
+  defaultVariants?: ConfigVariants<T$1>;
+  compoundVariants?: (T$1 extends ConfigSchema ? (ConfigVariants<T$1> | ConfigVariantsMulti<T$1>) & ClassProp : ClassProp)[];
 } : never;
-type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
+type Props<T$1> = T$1 extends ConfigSchema ? ConfigVariants<T$1> & ClassProp : ClassProp;
 declare const cva: <T>(base?: ClassValue, config?: Config<T>) => {
   (props?: Props<T>): string;
   variants: T | undefined;
@@ -76,7 +78,7 @@ declare const cva: <T>(base?: ClassValue, config?: Config<T>) => {
 declare const cn: (...inputs: ClassValue[]) => string;
 declare const createVar: (o: {
   [key: string]: string | number | undefined;
-}) => React.CSSProperties;
+}) => CSSProperties;
 /**
  * Safely get a dot-notated path within a nested object, with ability
  * to return a default if the full key path does not exist or
@@ -129,7 +131,7 @@ type Theme = {
   height?: NestedStringObject;
   root?: ComponentStyleFunction;
   components: {
-    Accordion?: Record<'container' | 'item' | 'header' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
+    Accordion?: Record<'container' | 'item' | 'header' | 'panel' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
     Badge?: ComponentStyleFunction<string, string>;
     Breadcrumbs?: Record<'container' | 'item' | 'link' | 'current', ComponentStyleFunction<string, string>>;
     Button?: ComponentStyleFunction<string, string>;
@@ -149,7 +151,7 @@ type Theme = {
     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>>;
+    Label?: ComponentStyleFunction<string, string>;
     List?: Record<'ol' | 'ul' | 'item', ComponentStyleFunction<string, string>>;
     Link?: ComponentStyleFunction<string, string>;
     ListBox?: Record<'container' | 'list' | 'item' | 'section' | 'header', ComponentStyleFunction<string, string>>;
@@ -157,7 +159,7 @@ type Theme = {
     Modal?: ComponentStyleFunction<string, string>;
     MultiSelect?: Record<'container' | 'closeButton' | 'field' | 'input' | 'icon' | 'listContainer' | 'list' | 'option' | 'tag' | 'valueContainer', ComponentStyleFunction<string, string>>;
     Pagination?: Record<'container' | 'navigationButton' | 'pageButton' | 'icon' | 'ellipsis', ComponentStyleFunction<string, string>>;
-    ProgressCycle?: ComponentStyleFunction<string, string>;
+    ProgressCircle?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
     Radio?: Record<'container' | 'label' | 'radio' | 'group', ComponentStyleFunction<string, string>>;
     Slider?: Record<'container' | 'track' | 'thumb' | 'output' | 'selectedTrack', ComponentStyleFunction<string, string>>;
     Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
@@ -174,12 +176,13 @@ type Theme = {
     Calendar?: Record<'calendar' | 'calendarListboxButton' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid' | 'select', ComponentStyleFunction<string, string>>;
     DatePicker?: ComponentStyleFunction<string, string>;
     ComboBox?: ComponentStyleFunction<string, string>;
-    XLoader?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
+    Loader?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
+    FileField?: Record<'container' | 'dropZone' | 'dropZoneContent' | 'dropZoneLabel' | 'item' | 'itemLabel' | 'itemDescription', ComponentStyleFunction<string, string>>;
   };
 };
 type ComponentNames = keyof Theme['components'];
-type ThemeComponent<C extends ComponentNames> = NonNullable<Theme['components'][C]>;
-type ThemeComponentParts<C extends ComponentNames> = keyof ThemeComponent<C>;
+type ThemeComponent<C$1 extends ComponentNames> = NonNullable<Theme['components'][C$1]>;
+type ThemeComponentParts<C$1 extends ComponentNames> = keyof ThemeComponent<C$1>;
 //#endregion
 //#region src/hooks/useClassNames.d.ts
 interface ComponentContextProps {
@@ -187,14 +190,14 @@ interface ComponentContextProps {
   variant?: string;
   [key: string]: any;
 }
-interface UseClassNamesProps<C extends ComponentNames> {
-  component: C;
+interface UseClassNamesProps<C$1 extends ComponentNames> {
+  component: C$1;
   variant?: string;
   size?: string;
-  className?: ThemeComponent<C> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C>]?: string };
+  className?: ThemeComponent<C$1> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C$1>]?: string };
   context?: Context<ComponentContextProps>;
 }
-type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C>]: string };
+type ComponentClassNames<C$1 extends ComponentNames> = ThemeComponent<C$1> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C$1>]: string };
 declare const useClassNames: <C extends ComponentNames>({
   component,
   className,
@@ -225,11 +228,11 @@ declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 //#endregion
 //#region src/hooks/useTheme.d.ts
 declare const useTheme: () => Theme;
-interface ThemeProviderProps<T extends Theme> {
+interface ThemeProviderProps<T$1 extends Theme> {
   /**
    * The theme that should be used within the provider context.
    */
-  theme: T;
+  theme: T$1;
   /**
    * The children of the component.
    */
@@ -239,11 +242,11 @@ interface ThemeProviderProps<T extends Theme> {
    */
   className?: string;
 }
-declare function ThemeProvider<T extends Theme>({
+declare function ThemeProvider<T$1 extends Theme>({
   theme,
   children,
   className
-}: ThemeProviderProps<T>): React$1.JSX.Element;
+}: ThemeProviderProps<T$1>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/hooks/useSmallScreen.d.ts
 declare const useSmallScreen: () => boolean;
@@ -252,7 +255,7 @@ declare const useSmallScreen: () => boolean;
 type StylesProps = { [K in keyof Theme['components']]: Partial<Theme['components'][K]> };
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
   components: {
-    Accordion?: Record<"container" | "item" | "header" | "content" | "icon", ComponentStyleFunction<string, string>>;
+    Accordion?: Record<"container" | "item" | "header" | "panel" | "content" | "icon", ComponentStyleFunction<string, string>>;
     Badge?: ComponentStyleFunction<string, string>;
     Breadcrumbs?: Record<"container" | "item" | "link" | "current", ComponentStyleFunction<string, string>>;
     Button?: ComponentStyleFunction<string, string>;
@@ -272,7 +275,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     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>>;
+    Label?: ComponentStyleFunction<string, string>;
     List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string>>;
     Link?: ComponentStyleFunction<string, string>;
     ListBox?: Record<"container" | "list" | "item" | "section" | "header", ComponentStyleFunction<string, string>>;
@@ -280,7 +283,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     Modal?: ComponentStyleFunction<string, string>;
     MultiSelect?: Record<"container" | "closeButton" | "field" | "input" | "icon" | "listContainer" | "list" | "option" | "tag" | "valueContainer", ComponentStyleFunction<string, string>>;
     Pagination?: Record<"container" | "navigationButton" | "pageButton" | "icon" | "ellipsis", ComponentStyleFunction<string, string>>;
-    ProgressCycle?: ComponentStyleFunction<string, string>;
+    ProgressCircle?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
     Radio?: Record<"container" | "label" | "radio" | "group", ComponentStyleFunction<string, string>>;
     Slider?: Record<"container" | "track" | "thumb" | "output" | "selectedTrack", ComponentStyleFunction<string, string>>;
     Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
@@ -297,7 +300,8 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     Calendar?: Record<"calendar" | "calendarListboxButton" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid" | "select", ComponentStyleFunction<string, string>>;
     DatePicker?: ComponentStyleFunction<string, string>;
     ComboBox?: ComponentStyleFunction<string, string>;
-    XLoader?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
+    Loader?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
+    FileField?: Record<"container" | "dropZone" | "dropZoneContent" | "dropZoneLabel" | "item" | "itemLabel" | "itemDescription", ComponentStyleFunction<string, string>>;
   };
   name: string;
   screens?: {

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-import React$1, { Context, ReactNode } from "react";
+import * as react0 from "react";
+import { CSSProperties, Context, ReactNode } from "react";
 import { HtmlProps, KebabCase } from "@marigold/types";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { DateFormatterOptions, useNumberFormatter } from "@react-aria/i18n";
 import { ClassProp, ClassValue, StringToBoolean } from "class-variance-authority/dist/types";
 import { VariantProps } from "class-variance-authority";
@@ -15,7 +17,7 @@ interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
    */
   className?: string;
 }
-declare const SVG: React$1.ForwardRefExoticComponent<SVGProps & React$1.RefAttributes<SVGSVGElement>>;
+declare const SVG: react0.ForwardRefExoticComponent<SVGProps & react0.RefAttributes<SVGSVGElement>>;
 //#endregion
 //#region src/components/Formatters/DateFormat.d.ts
 interface DateFormatProps extends DateFormatterOptions {
@@ -33,7 +35,7 @@ declare const DateFormat: ({
   value,
   tabular,
   ...props
-}: DateFormatProps) => React$1.JSX.Element;
+}: DateFormatProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/Formatters/NumericFormat.d.ts
 type NumerFormatterOptions = NonNullable<Parameters<typeof useNumberFormatter>[0]>;
@@ -57,18 +59,18 @@ declare const NumericFormat: ({
   value,
   tabular,
   ...props
-}: NumericFormatProps) => React$1.JSX.Element;
+}: NumericFormatProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/utils.d.ts
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
-type ConfigVariants<T extends ConfigSchema> = { [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined };
-type ConfigVariantsMulti<T extends ConfigSchema> = { [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined };
-type Config<T> = T extends ConfigSchema ? {
-  variants?: T;
-  defaultVariants?: ConfigVariants<T>;
-  compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
+type ConfigVariants<T$1 extends ConfigSchema> = { [Variant in keyof T$1]?: StringToBoolean<keyof T$1[Variant]> | null | undefined };
+type ConfigVariantsMulti<T$1 extends ConfigSchema> = { [Variant in keyof T$1]?: StringToBoolean<keyof T$1[Variant]> | StringToBoolean<keyof T$1[Variant]>[] | undefined };
+type Config<T$1> = T$1 extends ConfigSchema ? {
+  variants?: T$1;
+  defaultVariants?: ConfigVariants<T$1>;
+  compoundVariants?: (T$1 extends ConfigSchema ? (ConfigVariants<T$1> | ConfigVariantsMulti<T$1>) & ClassProp : ClassProp)[];
 } : never;
-type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
+type Props<T$1> = T$1 extends ConfigSchema ? ConfigVariants<T$1> & ClassProp : ClassProp;
 declare const cva: <T>(base?: ClassValue, config?: Config<T>) => {
   (props?: Props<T>): string;
   variants: T | undefined;
@@ -76,7 +78,7 @@ declare const cva: <T>(base?: ClassValue, config?: Config<T>) => {
 declare const cn: (...inputs: ClassValue[]) => string;
 declare const createVar: (o: {
   [key: string]: string | number | undefined;
-}) => React.CSSProperties;
+}) => CSSProperties;
 /**
  * Safely get a dot-notated path within a nested object, with ability
  * to return a default if the full key path does not exist or
@@ -129,7 +131,7 @@ type Theme = {
   height?: NestedStringObject;
   root?: ComponentStyleFunction;
   components: {
-    Accordion?: Record<'container' | 'item' | 'header' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
+    Accordion?: Record<'container' | 'item' | 'header' | 'panel' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
     Badge?: ComponentStyleFunction<string, string>;
     Breadcrumbs?: Record<'container' | 'item' | 'link' | 'current', ComponentStyleFunction<string, string>>;
     Button?: ComponentStyleFunction<string, string>;
@@ -149,7 +151,7 @@ type Theme = {
     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>>;
+    Label?: ComponentStyleFunction<string, string>;
     List?: Record<'ol' | 'ul' | 'item', ComponentStyleFunction<string, string>>;
     Link?: ComponentStyleFunction<string, string>;
     ListBox?: Record<'container' | 'list' | 'item' | 'section' | 'header', ComponentStyleFunction<string, string>>;
@@ -157,7 +159,7 @@ type Theme = {
     Modal?: ComponentStyleFunction<string, string>;
     MultiSelect?: Record<'container' | 'closeButton' | 'field' | 'input' | 'icon' | 'listContainer' | 'list' | 'option' | 'tag' | 'valueContainer', ComponentStyleFunction<string, string>>;
     Pagination?: Record<'container' | 'navigationButton' | 'pageButton' | 'icon' | 'ellipsis', ComponentStyleFunction<string, string>>;
-    ProgressCycle?: ComponentStyleFunction<string, string>;
+    ProgressCircle?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
     Radio?: Record<'container' | 'label' | 'radio' | 'group', ComponentStyleFunction<string, string>>;
     Slider?: Record<'container' | 'track' | 'thumb' | 'output' | 'selectedTrack', ComponentStyleFunction<string, string>>;
     Select?: Record<'select' | 'icon', ComponentStyleFunction<string, string>>;
@@ -174,12 +176,13 @@ type Theme = {
     Calendar?: Record<'calendar' | 'calendarListboxButton' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid' | 'select', ComponentStyleFunction<string, string>>;
     DatePicker?: ComponentStyleFunction<string, string>;
     ComboBox?: ComponentStyleFunction<string, string>;
-    XLoader?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
+    Loader?: Record<'container' | 'loader' | 'label', ComponentStyleFunction<string, string>>;
+    FileField?: Record<'container' | 'dropZone' | 'dropZoneContent' | 'dropZoneLabel' | 'item' | 'itemLabel' | 'itemDescription', ComponentStyleFunction<string, string>>;
   };
 };
 type ComponentNames = keyof Theme['components'];
-type ThemeComponent<C extends ComponentNames> = NonNullable<Theme['components'][C]>;
-type ThemeComponentParts<C extends ComponentNames> = keyof ThemeComponent<C>;
+type ThemeComponent<C$1 extends ComponentNames> = NonNullable<Theme['components'][C$1]>;
+type ThemeComponentParts<C$1 extends ComponentNames> = keyof ThemeComponent<C$1>;
 //#endregion
 //#region src/hooks/useClassNames.d.ts
 interface ComponentContextProps {
@@ -187,14 +190,14 @@ interface ComponentContextProps {
   variant?: string;
   [key: string]: any;
 }
-interface UseClassNamesProps<C extends ComponentNames> {
-  component: C;
+interface UseClassNamesProps<C$1 extends ComponentNames> {
+  component: C$1;
   variant?: string;
   size?: string;
-  className?: ThemeComponent<C> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C>]?: string };
+  className?: ThemeComponent<C$1> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C$1>]?: string };
   context?: Context<ComponentContextProps>;
 }
-type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C>]: string };
+type ComponentClassNames<C$1 extends ComponentNames> = ThemeComponent<C$1> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C$1>]: string };
 declare const useClassNames: <C extends ComponentNames>({
   component,
   className,
@@ -225,11 +228,11 @@ declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 //#endregion
 //#region src/hooks/useTheme.d.ts
 declare const useTheme: () => Theme;
-interface ThemeProviderProps<T extends Theme> {
+interface ThemeProviderProps<T$1 extends Theme> {
   /**
    * The theme that should be used within the provider context.
    */
-  theme: T;
+  theme: T$1;
   /**
    * The children of the component.
    */
@@ -239,11 +242,11 @@ interface ThemeProviderProps<T extends Theme> {
    */
   className?: string;
 }
-declare function ThemeProvider<T extends Theme>({
+declare function ThemeProvider<T$1 extends Theme>({
   theme,
   children,
   className
-}: ThemeProviderProps<T>): React$1.JSX.Element;
+}: ThemeProviderProps<T$1>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/hooks/useSmallScreen.d.ts
 declare const useSmallScreen: () => boolean;
@@ -252,7 +255,7 @@ declare const useSmallScreen: () => boolean;
 type StylesProps = { [K in keyof Theme['components']]: Partial<Theme['components'][K]> };
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
   components: {
-    Accordion?: Record<"container" | "item" | "header" | "content" | "icon", ComponentStyleFunction<string, string>>;
+    Accordion?: Record<"container" | "item" | "header" | "panel" | "content" | "icon", ComponentStyleFunction<string, string>>;
     Badge?: ComponentStyleFunction<string, string>;
     Breadcrumbs?: Record<"container" | "item" | "link" | "current", ComponentStyleFunction<string, string>>;
     Button?: ComponentStyleFunction<string, string>;
@@ -272,7 +275,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     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>>;
+    Label?: ComponentStyleFunction<string, string>;
     List?: Record<"ol" | "ul" | "item", ComponentStyleFunction<string, string>>;
     Link?: ComponentStyleFunction<string, string>;
     ListBox?: Record<"container" | "list" | "item" | "section" | "header", ComponentStyleFunction<string, string>>;
@@ -280,7 +283,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     Modal?: ComponentStyleFunction<string, string>;
     MultiSelect?: Record<"container" | "closeButton" | "field" | "input" | "icon" | "listContainer" | "list" | "option" | "tag" | "valueContainer", ComponentStyleFunction<string, string>>;
     Pagination?: Record<"container" | "navigationButton" | "pageButton" | "icon" | "ellipsis", ComponentStyleFunction<string, string>>;
-    ProgressCycle?: ComponentStyleFunction<string, string>;
+    ProgressCircle?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
     Radio?: Record<"container" | "label" | "radio" | "group", ComponentStyleFunction<string, string>>;
     Slider?: Record<"container" | "track" | "thumb" | "output" | "selectedTrack", ComponentStyleFunction<string, string>>;
     Select?: Record<"select" | "icon", ComponentStyleFunction<string, string>>;
@@ -297,7 +300,8 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     Calendar?: Record<"calendar" | "calendarListboxButton" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid" | "select", ComponentStyleFunction<string, string>>;
     DatePicker?: ComponentStyleFunction<string, string>;
     ComboBox?: ComponentStyleFunction<string, string>;
-    XLoader?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
+    Loader?: Record<"container" | "loader" | "label", ComponentStyleFunction<string, string>>;
+    FileField?: Record<"container" | "dropZone" | "dropZoneContent" | "dropZoneLabel" | "item" | "itemLabel" | "itemDescription", ComponentStyleFunction<string, string>>;
   };
   name: string;
   screens?: {

package/dist/index.js

@@ -27,6 +27,8 @@ let class_variance_authority = require("class-variance-authority");
 class_variance_authority = __toESM(class_variance_authority);
 let tailwind_merge = require("tailwind-merge");
 tailwind_merge = __toESM(tailwind_merge);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = __toESM(react_jsx_runtime);
 let __react_aria_i18n = require("@react-aria/i18n");
 __react_aria_i18n = __toESM(__react_aria_i18n);
 let react_fast_compare = require("react-fast-compare");
@@ -81,28 +83,35 @@ const ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(-
 //#endregion
 //#region src/components/SVG/SVG.tsx
 const SVG = (0, react.forwardRef)(({ size = 24, children, className, color,...props }, ref) => {
-	return /* @__PURE__ */ react.default.createElement("svg", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		...props,
 		ref,
 		width: `${props.width || size}px`,
 		height: `${props.height || size}px`,
 		className: cn("flex-none fill-current", className),
-		style: { color: color && ensureCssVar(color, "color") }
-	}, children);
+		style: { color: color && ensureCssVar(color, "color") },
+		children
+	});
 });
 
 //#endregion
 //#region src/components/Formatters/DateFormat.tsx
 const DateFormat = ({ value, tabular,...props }) => {
 	const formatter = (0, __react_aria_i18n.useDateFormatter)({ ...props });
-	return /* @__PURE__ */ react.default.createElement("span", { className: tabular ? "tabular-nums" : "" }, Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: tabular ? "tabular-nums" : "",
+		children: Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value)
+	});
 };
 
 //#endregion
 //#region src/components/Formatters/NumericFormat.tsx
 const NumericFormat = ({ value, tabular = true,...props }) => {
 	const formatter = (0, __react_aria_i18n.useNumberFormatter)({ ...props });
-	return /* @__PURE__ */ react.default.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: tabular ? "tabular-nums" : void 0,
+		children: Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value)
+	});
 };
 
 //#endregion
@@ -126,7 +135,13 @@ const useTheme = () => {
 	return (0, react.useContext)(InternalContext);
 };
 function ThemeProvider({ theme, children, className }) {
-	return /* @__PURE__ */ react.default.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ react.default.createElement("div", { className }, children));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalContext.Provider, {
+		value: theme,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className,
+			children
+		})
+	});
 }
 
 //#endregion

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import React, { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { cva as cva$1, cx } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
 import { useDateFormatter, useNumberFormatter } from "@react-aria/i18n";
 import isEqual from "react-fast-compare";
 
@@ -53,28 +54,35 @@ const ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(-
 //#endregion
 //#region src/components/SVG/SVG.tsx
 const SVG = forwardRef(({ size = 24, children, className, color,...props }, ref) => {
-	return /* @__PURE__ */ React.createElement("svg", {
+	return /* @__PURE__ */ jsx("svg", {
 		...props,
 		ref,
 		width: `${props.width || size}px`,
 		height: `${props.height || size}px`,
 		className: cn("flex-none fill-current", className),
-		style: { color: color && ensureCssVar(color, "color") }
-	}, children);
+		style: { color: color && ensureCssVar(color, "color") },
+		children
+	});
 });
 
 //#endregion
 //#region src/components/Formatters/DateFormat.tsx
 const DateFormat = ({ value, tabular,...props }) => {
 	const formatter = useDateFormatter({ ...props });
-	return /* @__PURE__ */ React.createElement("span", { className: tabular ? "tabular-nums" : "" }, Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value));
+	return /* @__PURE__ */ jsx("span", {
+		className: tabular ? "tabular-nums" : "",
+		children: Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value)
+	});
 };
 
 //#endregion
 //#region src/components/Formatters/NumericFormat.tsx
 const NumericFormat = ({ value, tabular = true,...props }) => {
 	const formatter = useNumberFormatter({ ...props });
-	return /* @__PURE__ */ React.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value));
+	return /* @__PURE__ */ jsx("span", {
+		className: tabular ? "tabular-nums" : void 0,
+		children: Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value)
+	});
 };
 
 //#endregion
@@ -98,7 +106,13 @@ const useTheme = () => {
 	return useContext(InternalContext);
 };
 function ThemeProvider({ theme, children, className }) {
-	return /* @__PURE__ */ React.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ React.createElement("div", { className }, children));
+	return /* @__PURE__ */ jsx(InternalContext.Provider, {
+		value: theme,
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			children
+		})
+	});
 }
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "15.4.3",
+  "version": "16.0.1",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -38,7 +38,7 @@
     "class-variance-authority": "0.7.1",
     "deepmerge": "4.3.1",
     "react-fast-compare": "3.2.2",
-    "tailwind-merge": "3.3.1",
+    "tailwind-merge": "3.4.0",
     "@marigold/types": "1.4.0"
   },
   "peerDependencies": {
@@ -46,13 +46,13 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.28.4",
+    "@babel/core": "7.28.5",
     "@types/react": "19.2.2",
     "postcss": "8.5.6",
     "react": "19.2.0",
-    "tailwindcss": "4.1.14",
-    "tsdown": "0.15.6",
-    "@marigold/tsconfig": "0.4.1"
+    "tailwindcss": "4.1.17",
+    "tsdown": "0.15.9",
+    "@marigold/tsconfig": "0.4.2"
   },
   "scripts": {
     "build": "tsdown src/index.ts",