@marigold/system 7.1.0 → 7.3.0

package/dist/index.d.mts

@@ -1,15 +1,30 @@
 import * as React from 'react';
 import React__default, { 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'> {
+interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
     size?: number | string | number[] | string[];
     className?: string;
 }
 declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
 
+interface DateFormatProps extends DateFormatterOptions {
+    value: Date;
+    tabular?: boolean;
+}
+declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React__default.JSX.Element;
+
+interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+    value: number | bigint;
+    numberingSystem?: string;
+    tabular?: boolean;
+    styleFormat?: string;
+}
+declare const NumericFormat: ({ value, styleFormat, tabular, ...props }: NumericFormatProps) => React__default.JSX.Element;
+
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
     [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
@@ -34,6 +49,9 @@ declare const cn: (...inputs: ClassValue[]) => string;
 declare const createVar: (o: {
     [key: string]: string | number | undefined;
 }) => React.CSSProperties;
+declare const isObject: (val: any) => val is {
+    [key: string]: any;
+};
 /**
  * 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
@@ -42,6 +60,15 @@ declare const createVar: (o: {
  * Based on: https://github.com/developit/dlv
  */
 declare const get: (obj: object, path: string, fallback?: any) => any;
+/**
+ * Safely get a color value from a Tailwind theme object. This also supports
+ * Tailwind's "DEFAULT" fallback.
+ *
+ * Note: Use the CSS "var name" (e.g. primary-500) not the dot notation.
+ */
+declare const getColor: (theme: {
+    colors?: object;
+}, path: string, fallback?: any) => any;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;
@@ -147,8 +174,9 @@ declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
     theme: T;
     children: ReactNode;
+    className?: string;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): React__default.JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React__default.JSX.Element;
 
 declare const useSmallScreen: () => boolean;
 
@@ -693,4 +721,4 @@ type WidthProp = {
     width?: keyof typeof width;
 };
 
-export { type AlignmentProp, type AspectProp, type ClassArray, type ClassDictionary, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type GridColsAlignProp, type GridColumn, type NestedStringObject, type ObjectFitProp, type ObjectPositionProp, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, fontWeight, gapSpace, get, gridColsAlign, gridColumn, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };
+export { type AlignmentProp, type AspectProp, type ClassArray, type ClassDictionary, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type GridColsAlignProp, type GridColumn, type NestedStringObject, NumericFormat, type ObjectFitProp, type ObjectPositionProp, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, fontWeight, gapSpace, get, getColor, gridColsAlign, gridColumn, isObject, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.d.ts

@@ -1,15 +1,30 @@
 import * as React from 'react';
 import React__default, { 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'> {
+interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
     size?: number | string | number[] | string[];
     className?: string;
 }
 declare const SVG: React__default.ForwardRefExoticComponent<SVGProps & React__default.RefAttributes<SVGSVGElement>>;
 
+interface DateFormatProps extends DateFormatterOptions {
+    value: Date;
+    tabular?: boolean;
+}
+declare const DateFormat: ({ value, tabular, ...props }: DateFormatProps) => React__default.JSX.Element;
+
+interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+    value: number | bigint;
+    numberingSystem?: string;
+    tabular?: boolean;
+    styleFormat?: string;
+}
+declare const NumericFormat: ({ value, styleFormat, tabular, ...props }: NumericFormatProps) => React__default.JSX.Element;
+
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
     [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
@@ -34,6 +49,9 @@ declare const cn: (...inputs: ClassValue[]) => string;
 declare const createVar: (o: {
     [key: string]: string | number | undefined;
 }) => React.CSSProperties;
+declare const isObject: (val: any) => val is {
+    [key: string]: any;
+};
 /**
  * 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
@@ -42,6 +60,15 @@ declare const createVar: (o: {
  * Based on: https://github.com/developit/dlv
  */
 declare const get: (obj: object, path: string, fallback?: any) => any;
+/**
+ * Safely get a color value from a Tailwind theme object. This also supports
+ * Tailwind's "DEFAULT" fallback.
+ *
+ * Note: Use the CSS "var name" (e.g. primary-500) not the dot notation.
+ */
+declare const getColor: (theme: {
+    colors?: object;
+}, path: string, fallback?: any) => any;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;
@@ -147,8 +174,9 @@ declare const useTheme: () => Theme;
 interface ThemeProviderProps<T extends Theme> {
     theme: T;
     children: ReactNode;
+    className?: string;
 }
-declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): React__default.JSX.Element;
+declare function ThemeProvider<T extends Theme>({ theme, children, className, }: ThemeProviderProps<T>): React__default.JSX.Element;
 
 declare const useSmallScreen: () => boolean;
 
@@ -693,4 +721,4 @@ type WidthProp = {
     width?: keyof typeof width;
 };
 
-export { type AlignmentProp, type AspectProp, type ClassArray, type ClassDictionary, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type GridColsAlignProp, type GridColumn, type NestedStringObject, type ObjectFitProp, type ObjectPositionProp, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, fontWeight, gapSpace, get, gridColsAlign, gridColumn, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };
+export { type AlignmentProp, type AspectProp, type ClassArray, type ClassDictionary, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type GridColsAlignProp, type GridColumn, type NestedStringObject, NumericFormat, type ObjectFitProp, type ObjectPositionProp, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, fontWeight, gapSpace, get, getColor, gridColsAlign, gridColumn, isObject, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.js

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  DateFormat: () => DateFormat,
+  NumericFormat: () => NumericFormat,
   SVG: () => SVG,
   ThemeProvider: () => ThemeProvider,
   alignment: () => alignment,
@@ -42,8 +44,10 @@ __export(src_exports, {
   fontWeight: () => fontWeight,
   gapSpace: () => gapSpace,
   get: () => get,
+  getColor: () => getColor,
   gridColsAlign: () => gridColsAlign,
   gridColumn: () => gridColumn,
+  isObject: () => isObject,
   objectFit: () => objectFit,
   objectPosition: () => objectPosition,
   paddingBottom: () => paddingBottom,
@@ -67,7 +71,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/SVG/SVG.tsx
-var import_react = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/utils.ts
 var import_class_variance_authority = require("class-variance-authority");
@@ -84,6 +88,7 @@ var cn = (...inputs) => (0, import_tailwind_merge.twMerge)((0, import_class_vari
 var createVar = (o) => Object.fromEntries(
   Object.entries(o).map(([name, val]) => [`--${name}`, val])
 );
+var isObject = (val) => val && val.constructor === Object;
 var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
@@ -94,24 +99,13 @@ var get = (obj, path, fallback) => {
   }
   return result === void 0 ? fallback : result;
 };
-
-// src/components/SVG/SVG.tsx
-var SVG = (0, import_react.forwardRef)(
-  ({ size = 24, children, className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
-    "svg",
-    {
-      ...props,
-      ref,
-      width: `${props.width || size}px`,
-      height: `${props.height || size}px`,
-      className: cn("flex-none fill-current", className)
-    },
-    children
-  )
-);
+var getColor = (theme, path, fallback) => {
+  const result = get(theme.colors || {}, path.replace("-", "."), fallback);
+  return isObject(result) ? result["DEFAULT"] : result;
+};
 
 // src/hooks/useTheme.tsx
-var import_react2 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 
 // src/defaultTheme.ts
 var defaultTheme = {
@@ -127,17 +121,19 @@ var defaultTheme = {
 };
 
 // src/hooks/useTheme.tsx
-var InternalContext = (0, import_react2.createContext)(defaultTheme);
+var InternalContext = (0, import_react.createContext)(defaultTheme);
 var useTheme = () => {
-  const theme = (0, import_react2.useContext)(InternalContext);
+  const theme = (0, import_react.useContext)(InternalContext);
   return theme;
 };
 function ThemeProvider({
   theme,
-  children
+  children,
+  className
 }) {
-  var _a, _b;
-  return /* @__PURE__ */ import_react2.default.createElement("div", { "data-theme": theme.name, className: (_b = (_a = theme.root) == null ? void 0 : _a.call(theme)) != null ? _b : "" }, /* @__PURE__ */ import_react2.default.createElement(InternalContext.Provider, { value: theme }, children));
+  var _a;
+  const root = (_a = theme.root) == null ? void 0 : _a.call(theme);
+  return /* @__PURE__ */ import_react.default.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ import_react.default.createElement("div", { className: cn(root ? root : "", className) }, children));
 }
 
 // src/hooks/useClassNames.tsx
@@ -184,7 +180,7 @@ var useClassNames = ({
 };
 
 // src/hooks/useResponsiveValue.ts
-var import_react3 = require("react");
+var import_react2 = require("react");
 var useResponsiveValue = (values, defaultIndex = 0) => {
   const theme = useTheme();
   const screens = theme.screens || defaultTheme.screens;
@@ -193,8 +189,8 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
       `Default breakpoint index is out of bounds. Theme has ${Object.keys(screens).length + 1} breakpoints, default is ${defaultIndex}.`
     );
   }
-  const [index, setIndex] = (0, import_react3.useState)(defaultIndex);
-  (0, import_react3.useEffect)(() => {
+  const [index, setIndex] = (0, import_react2.useState)(defaultIndex);
+  (0, import_react2.useEffect)(() => {
     if (typeof window == "undefined")
       return;
     const getIndex = () => Object.values(screens).filter(
@@ -214,12 +210,12 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
 };
 
 // src/hooks/useStateProps.ts
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_react_fast_compare = __toESM(require("react-fast-compare"));
 var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
 var toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleLowerCase()}`);
 var useStateProps = (states) => {
-  const statePropsRef = (0, import_react4.useRef)({});
+  const statePropsRef = (0, import_react3.useRef)({});
   let stateProps = {};
   for (let state in states) {
     if (states[state]) {
@@ -234,7 +230,7 @@ var useStateProps = (states) => {
 };
 
 // src/hooks/useSmallScreen.ts
-var import_react5 = require("react");
+var import_react4 = require("react");
 var useSmallScreen = () => {
   const getMatches = () => {
     if (typeof window == "undefined") {
@@ -242,11 +238,11 @@ var useSmallScreen = () => {
     }
     return window.matchMedia("(max-width: 600px)").matches;
   };
-  const [matches, setMatches] = (0, import_react5.useState)(getMatches());
-  const handleResize = (0, import_react5.useCallback)(() => {
+  const [matches, setMatches] = (0, import_react4.useState)(getMatches());
+  const handleResize = (0, import_react4.useCallback)(() => {
     setMatches(getMatches());
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     handleResize();
     if (typeof window == "undefined")
       return;
@@ -256,6 +252,58 @@ var useSmallScreen = () => {
   return matches;
 };
 
+// src/components/SVG/SVG.tsx
+var SVG = (0, import_react5.forwardRef)(
+  ({ size = 24, children, className, color, ...props }, ref) => {
+    const theme = useTheme();
+    return /* @__PURE__ */ import_react5.default.createElement(
+      "svg",
+      {
+        ...props,
+        ref,
+        width: `${props.width || size}px`,
+        height: `${props.height || size}px`,
+        className: cn("flex-none fill-current text-[--color]", className),
+        style: createVar({
+          color: color && getColor(
+            theme,
+            color,
+            color
+            /* fallback */
+          )
+        })
+      },
+      children
+    );
+  }
+);
+
+// src/components/Formatters/DateFormat.tsx
+var import_react6 = __toESM(require("react"));
+var import_i18n = require("@react-aria/i18n");
+var DateFormat = ({ value, tabular, ...props }) => {
+  const dateFormatter = (0, import_i18n.useDateFormatter)({
+    ...props
+  });
+  return /* @__PURE__ */ import_react6.default.createElement("span", { className: tabular ? "tabular-nums" : "" }, dateFormatter.format(value));
+};
+
+// src/components/Formatters/NumericFormat.tsx
+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));
+};
+
 // src/style-props.tsx
 var width = {
   full: "w-full",
@@ -715,6 +763,8 @@ var cursorStyle = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DateFormat,
+  NumericFormat,
   SVG,
   ThemeProvider,
   alignment,
@@ -727,8 +777,10 @@ var cursorStyle = {
   fontWeight,
   gapSpace,
   get,
+  getColor,
   gridColsAlign,
   gridColumn,
+  isObject,
   objectFit,
   objectPosition,
   paddingBottom,

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/SVG/SVG.tsx
-import React, { forwardRef } from "react";
+import React2, { forwardRef } from "react";
 
 // src/utils.ts
 import { cx } from "class-variance-authority";
@@ -16,6 +16,7 @@ var cn = (...inputs) => twMerge(cx(inputs));
 var createVar = (o) => Object.fromEntries(
   Object.entries(o).map(([name, val]) => [`--${name}`, val])
 );
+var isObject = (val) => val && val.constructor === Object;
 var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
@@ -26,24 +27,13 @@ var get = (obj, path, fallback) => {
   }
   return result === void 0 ? fallback : result;
 };
-
-// src/components/SVG/SVG.tsx
-var SVG = forwardRef(
-  ({ size = 24, children, className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      ...props,
-      ref,
-      width: `${props.width || size}px`,
-      height: `${props.height || size}px`,
-      className: cn("flex-none fill-current", className)
-    },
-    children
-  )
-);
+var getColor = (theme, path, fallback) => {
+  const result = get(theme.colors || {}, path.replace("-", "."), fallback);
+  return isObject(result) ? result["DEFAULT"] : result;
+};
 
 // src/hooks/useTheme.tsx
-import React2, { createContext, useContext } from "react";
+import React, { createContext, useContext } from "react";
 
 // src/defaultTheme.ts
 var defaultTheme = {
@@ -66,10 +56,12 @@ var useTheme = () => {
 };
 function ThemeProvider({
   theme,
-  children
+  children,
+  className
 }) {
-  var _a, _b;
-  return /* @__PURE__ */ React2.createElement("div", { "data-theme": theme.name, className: (_b = (_a = theme.root) == null ? void 0 : _a.call(theme)) != null ? _b : "" }, /* @__PURE__ */ React2.createElement(InternalContext.Provider, { value: theme }, children));
+  var _a;
+  const root = (_a = theme.root) == null ? void 0 : _a.call(theme);
+  return /* @__PURE__ */ React.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ React.createElement("div", { className: cn(root ? root : "", className) }, children));
 }
 
 // src/hooks/useClassNames.tsx
@@ -188,6 +180,58 @@ var useSmallScreen = () => {
   return matches;
 };
 
+// src/components/SVG/SVG.tsx
+var SVG = forwardRef(
+  ({ size = 24, children, className, color, ...props }, ref) => {
+    const theme = useTheme();
+    return /* @__PURE__ */ React2.createElement(
+      "svg",
+      {
+        ...props,
+        ref,
+        width: `${props.width || size}px`,
+        height: `${props.height || size}px`,
+        className: cn("flex-none fill-current text-[--color]", className),
+        style: createVar({
+          color: color && getColor(
+            theme,
+            color,
+            color
+            /* fallback */
+          )
+        })
+      },
+      children
+    );
+  }
+);
+
+// src/components/Formatters/DateFormat.tsx
+import React3 from "react";
+import { useDateFormatter } from "@react-aria/i18n";
+var DateFormat = ({ value, tabular, ...props }) => {
+  const dateFormatter = useDateFormatter({
+    ...props
+  });
+  return /* @__PURE__ */ React3.createElement("span", { className: tabular ? "tabular-nums" : "" }, dateFormatter.format(value));
+};
+
+// src/components/Formatters/NumericFormat.tsx
+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));
+};
+
 // src/style-props.tsx
 var width = {
   full: "w-full",
@@ -646,6 +690,8 @@ var cursorStyle = {
   zoomOut: "cursor-zoom-out"
 };
 export {
+  DateFormat,
+  NumericFormat,
   SVG,
   ThemeProvider,
   alignment,
@@ -658,8 +704,10 @@ export {
   fontWeight,
   gapSpace,
   get,
+  getColor,
   gridColsAlign,
   gridColumn,
+  isObject,
   objectFit,
   objectPosition,
   paddingBottom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "7.1.0",
+  "version": "7.3.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -24,10 +24,11 @@
     "directory": "packages/system"
   },
   "dependencies": {
+    "@react-aria/i18n": "3.10.0",
     "class-variance-authority": "0.7.0",
     "deepmerge": "^4.2.2",
     "react-fast-compare": "^3.2.0",
-    "tailwind-merge": "2.1.0",
+    "tailwind-merge": "2.2.0",
     "@marigold/types": "1.1.0"
   },
   "peerDependencies": {
@@ -35,10 +36,10 @@
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.23.3",
-    "postcss": "8.4.32",
+    "@babel/core": "7.23.7",
+    "postcss": "8.4.33",
     "react": "18.2.0",
-    "tailwindcss": "3.3.6",
+    "tailwindcss": "3.4.1",
     "tsup": "8.0.1",
     "@marigold/tsconfig": "0.4.0"
   },