@marigold/system 10.2.1 → 11.0.0

package/dist/index.d.mts

@@ -68,9 +68,6 @@ 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
@@ -79,15 +76,6 @@ declare const isObject: (val: any) => val is {
  * 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;
@@ -112,7 +100,7 @@ type Theme = {
     height?: NestedStringObject;
     root?: ComponentStyleFunction;
     components: {
-        Accordion?: Record<'button' | 'item', ComponentStyleFunction<string, string>>;
+        Accordion?: Record<'container' | 'item' | 'header' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
         Badge?: ComponentStyleFunction<string, string>;
         Body?: ComponentStyleFunction<string, string>;
         Button?: ComponentStyleFunction<string, string>;
@@ -216,7 +204,7 @@ type StylesProps = {
 };
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     components: {
-        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string>>;
+        Accordion?: Record<"container" | "item" | "header" | "content" | "icon", ComponentStyleFunction<string, string>>;
         Badge?: ComponentStyleFunction<string, string>;
         Body?: ComponentStyleFunction<string, string>;
         Button?: ComponentStyleFunction<string, string>;
@@ -777,16 +765,6 @@ declare const textAlign: {
     center: string;
     right: string;
 };
-declare const gridColsAlign: {
-    left: string;
-    center: string;
-    right: string;
-};
-declare const gridColumn: {
-    left: string;
-    center: string;
-    right: string;
-};
 declare const aspect: {
     square: string;
     landscape: string;
@@ -880,12 +858,6 @@ type FontSizeProp = {
      */
     fontSize?: keyof typeof textSize;
 };
-type GridColsAlignProp = {
-    /**
-     * Set the alignment of grid columns.
-     */
-    align?: keyof typeof gridColsAlign;
-};
 type GapSpaceProp = {
     /**
      * The space between the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
@@ -971,4 +943,4 @@ type HeightProp = {
     height?: keyof typeof height;
 };
 
-export { type AlignmentProp, type AspectProp, 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 HeightProp, 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 StylesProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, extendTheme, fontWeight, gapSpace, get, getColor, gridColsAlign, gridColumn, height, isObject, 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 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 HeightProp, 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 StylesProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, extendTheme, fontWeight, gapSpace, get, height, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.d.ts

@@ -68,9 +68,6 @@ 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
@@ -79,15 +76,6 @@ declare const isObject: (val: any) => val is {
  * 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;
@@ -112,7 +100,7 @@ type Theme = {
     height?: NestedStringObject;
     root?: ComponentStyleFunction;
     components: {
-        Accordion?: Record<'button' | 'item', ComponentStyleFunction<string, string>>;
+        Accordion?: Record<'container' | 'item' | 'header' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
         Badge?: ComponentStyleFunction<string, string>;
         Body?: ComponentStyleFunction<string, string>;
         Button?: ComponentStyleFunction<string, string>;
@@ -216,7 +204,7 @@ type StylesProps = {
 };
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     components: {
-        Accordion?: Record<"button" | "item", ComponentStyleFunction<string, string>>;
+        Accordion?: Record<"container" | "item" | "header" | "content" | "icon", ComponentStyleFunction<string, string>>;
         Badge?: ComponentStyleFunction<string, string>;
         Body?: ComponentStyleFunction<string, string>;
         Button?: ComponentStyleFunction<string, string>;
@@ -777,16 +765,6 @@ declare const textAlign: {
     center: string;
     right: string;
 };
-declare const gridColsAlign: {
-    left: string;
-    center: string;
-    right: string;
-};
-declare const gridColumn: {
-    left: string;
-    center: string;
-    right: string;
-};
 declare const aspect: {
     square: string;
     landscape: string;
@@ -880,12 +858,6 @@ type FontSizeProp = {
      */
     fontSize?: keyof typeof textSize;
 };
-type GridColsAlignProp = {
-    /**
-     * Set the alignment of grid columns.
-     */
-    align?: keyof typeof gridColsAlign;
-};
 type GapSpaceProp = {
     /**
      * The space between the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
@@ -971,4 +943,4 @@ type HeightProp = {
     height?: keyof typeof height;
 };
 
-export { type AlignmentProp, type AspectProp, 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 HeightProp, 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 StylesProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, extendTheme, fontWeight, gapSpace, get, getColor, gridColsAlign, gridColumn, height, isObject, 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 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 HeightProp, 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 StylesProps, type TextAlignProp, type Theme, type ThemeComponent, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, extendTheme, fontWeight, gapSpace, get, height, objectFit, objectPosition, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, width };

package/dist/index.js

@@ -45,11 +45,7 @@ __export(index_exports, {
   fontWeight: () => fontWeight,
   gapSpace: () => gapSpace,
   get: () => get,
-  getColor: () => getColor,
-  gridColsAlign: () => gridColsAlign,
-  gridColumn: () => gridColumn,
   height: () => height,
-  isObject: () => isObject,
   objectFit: () => objectFit,
   objectPosition: () => objectPosition,
   paddingBottom: () => paddingBottom,
@@ -73,15 +69,14 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/SVG/SVG.tsx
-var import_react5 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 
 // src/utils.ts
 var import_class_variance_authority = require("class-variance-authority");
-var import_class_variance_authority2 = require("class-variance-authority");
 var import_tailwind_merge = require("tailwind-merge");
 var cva = (base, config) => {
   function styles(props) {
-    return (0, import_tailwind_merge.twMerge)((0, import_class_variance_authority2.cva)(base, config)(props));
+    return (0, import_tailwind_merge.twMerge)((0, import_class_variance_authority.cva)(base, config)(props));
   }
   styles.variants = config == null ? void 0 : config.variants;
   return styles;
@@ -90,7 +85,6 @@ 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;
@@ -100,13 +94,51 @@ var get = (obj, path, fallback) => {
   }
   return result === void 0 ? fallback : result;
 };
-var getColor = (theme, path, fallback) => {
-  const result = get(theme.colors || {}, path.replace(/-/g, "."), fallback);
-  return isObject(result) ? result["DEFAULT"] : result;
+
+// src/components/SVG/SVG.tsx
+var SVG = (0, import_react.forwardRef)(
+  ({ size = 24, children, className, color, ...props }, ref) => {
+    return /* @__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),
+        style: { color: color && `var(--color-${color})` }
+      },
+      children
+    );
+  }
+);
+
+// src/components/Formatters/DateFormat.tsx
+var import_react2 = __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_react2.default.createElement("span", { className: tabular ? "tabular-nums" : "" }, dateFormatter.format(value));
+};
+
+// src/components/Formatters/NumericFormat.tsx
+var import_react3 = __toESM(require("react"));
+var import_i18n2 = require("@react-aria/i18n");
+var NumericFormat = ({
+  value,
+  tabular = true,
+  ...props
+}) => {
+  const numberFormatter = (0, import_i18n2.useNumberFormatter)({
+    ...props
+  });
+  return /* @__PURE__ */ import_react3.default.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
 };
 
 // src/hooks/useTheme.tsx
-var import_react = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 
 // src/defaultTheme.ts
 var defaultTheme = {
@@ -122,9 +154,9 @@ var defaultTheme = {
 };
 
 // src/hooks/useTheme.tsx
-var InternalContext = (0, import_react.createContext)(defaultTheme);
+var InternalContext = (0, import_react4.createContext)(defaultTheme);
 var useTheme = () => {
-  const theme = (0, import_react.useContext)(InternalContext);
+  const theme = (0, import_react4.useContext)(InternalContext);
   return theme;
 };
 function ThemeProvider({
@@ -134,7 +166,7 @@ function ThemeProvider({
 }) {
   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, className) }, children));
+  return /* @__PURE__ */ import_react4.default.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ import_react4.default.createElement("div", { className: cn(root, className) }, children));
 }
 
 // src/hooks/useClassNames.tsx
@@ -181,7 +213,7 @@ var useClassNames = ({
 };
 
 // src/hooks/useResponsiveValue.ts
-var import_react2 = require("react");
+var import_react5 = require("react");
 var useResponsiveValue = (values, defaultIndex = 0) => {
   const theme = useTheme();
   const screens = theme.screens || defaultTheme.screens;
@@ -190,8 +222,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_react2.useState)(defaultIndex);
-  (0, import_react2.useEffect)(() => {
+  const [index, setIndex] = (0, import_react5.useState)(defaultIndex);
+  (0, import_react5.useEffect)(() => {
     if (typeof window == "undefined") return;
     const getIndex = () => Object.values(screens).filter(
       (breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
@@ -210,12 +242,12 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
 };
 
 // src/hooks/useStateProps.ts
-var import_react3 = require("react");
+var import_react6 = 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_react3.useRef)({});
+  const statePropsRef = (0, import_react6.useRef)({});
   let stateProps = {};
   for (let state in states) {
     if (states[state]) {
@@ -230,7 +262,7 @@ var useStateProps = (states) => {
 };
 
 // src/hooks/useSmallScreen.ts
-var import_react4 = require("react");
+var import_react7 = require("react");
 var useSmallScreen = () => {
   const getMatches = () => {
     if (typeof window == "undefined") {
@@ -238,11 +270,11 @@ var useSmallScreen = () => {
     }
     return window.matchMedia("(max-width: 600px)").matches;
   };
-  const [matches, setMatches] = (0, import_react4.useState)(getMatches());
-  const handleResize = (0, import_react4.useCallback)(() => {
+  const [matches, setMatches] = (0, import_react7.useState)(getMatches());
+  const handleResize = (0, import_react7.useCallback)(() => {
     setMatches(getMatches());
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     handleResize();
     if (typeof window == "undefined") return;
     window.addEventListener("resize", handleResize);
@@ -305,56 +337,6 @@ var extendTheme = (newStyles, theme) => {
   return { ...theme, components: { ...mergedStyles } };
 };
 
-// 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,
-  tabular = true,
-  ...props
-}) => {
-  const numberFormatter = (0, import_i18n2.useNumberFormatter)({
-    ...props
-  });
-  return /* @__PURE__ */ import_react7.default.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
-};
-
 // src/style-props.tsx
 var width = {
   auto: "w-auto",
@@ -854,22 +836,12 @@ var textAlign = {
   center: "text-center",
   right: "text-right"
 };
-var gridColsAlign = {
-  left: "grid-cols-[minmax(0,_var(--maxWidth))_1fr_1fr]",
-  center: "grid-cols-[1fr_minmax(0,_var(--maxWidth))_1fr]",
-  right: " grid-cols-[1fr_1fr_minmax(0,_var(--maxWidth))]"
-};
-var gridColumn = {
-  left: "[&>*]:col-[1]",
-  center: "[&>*]:col-[2]",
-  right: "[&>*]:col-[3]"
-};
 var aspect = {
   square: "aspect-[1]",
-  landscape: "aspect-[4/3]",
-  portrait: "aspect-[3/4]",
-  widescreen: "aspect-[16/9]",
-  ultrawide: "aspect-[18/5]",
+  landscape: "aspect-4/3",
+  portrait: "aspect-3/4",
+  widescreen: "aspect-16/9",
+  ultrawide: "aspect-18/5",
   golden: "aspect-[1.6180/1]"
 };
 var objectFit = {
@@ -935,11 +907,7 @@ var cursorStyle = {
   fontWeight,
   gapSpace,
   get,
-  getColor,
-  gridColsAlign,
-  gridColumn,
   height,
-  isObject,
   objectFit,
   objectPosition,
   paddingBottom,

package/dist/index.mjs

@@ -1,9 +1,8 @@
 // src/components/SVG/SVG.tsx
-import React2, { forwardRef } from "react";
+import React, { forwardRef } from "react";
 
 // src/utils.ts
-import { cx } from "class-variance-authority";
-import { cva as _cva } from "class-variance-authority";
+import { cva as _cva, cx } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
 var cva = (base, config) => {
   function styles(props) {
@@ -16,7 +15,6 @@ 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,13 +24,51 @@ var get = (obj, path, fallback) => {
   }
   return result === void 0 ? fallback : result;
 };
-var getColor = (theme, path, fallback) => {
-  const result = get(theme.colors || {}, path.replace(/-/g, "."), fallback);
-  return isObject(result) ? result["DEFAULT"] : result;
+
+// src/components/SVG/SVG.tsx
+var SVG = forwardRef(
+  ({ size = 24, children, className, color, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ...props,
+        ref,
+        width: `${props.width || size}px`,
+        height: `${props.height || size}px`,
+        className: cn("flex-none fill-current", className),
+        style: { color: color && `var(--color-${color})` }
+      },
+      children
+    );
+  }
+);
+
+// src/components/Formatters/DateFormat.tsx
+import React2 from "react";
+import { useDateFormatter } from "@react-aria/i18n";
+var DateFormat = ({ value, tabular, ...props }) => {
+  const dateFormatter = useDateFormatter({
+    ...props
+  });
+  return /* @__PURE__ */ React2.createElement("span", { className: tabular ? "tabular-nums" : "" }, dateFormatter.format(value));
+};
+
+// src/components/Formatters/NumericFormat.tsx
+import React3 from "react";
+import { useNumberFormatter } from "@react-aria/i18n";
+var NumericFormat = ({
+  value,
+  tabular = true,
+  ...props
+}) => {
+  const numberFormatter = useNumberFormatter({
+    ...props
+  });
+  return /* @__PURE__ */ React3.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
 };
 
 // src/hooks/useTheme.tsx
-import React, { createContext, useContext } from "react";
+import React4, { createContext, useContext } from "react";
 
 // src/defaultTheme.ts
 var defaultTheme = {
@@ -60,7 +96,7 @@ function ThemeProvider({
 }) {
   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, className) }, children));
+  return /* @__PURE__ */ React4.createElement(InternalContext.Provider, { value: theme }, /* @__PURE__ */ React4.createElement("div", { className: cn(root, className) }, children));
 }
 
 // src/hooks/useClassNames.tsx
@@ -231,56 +267,6 @@ var extendTheme = (newStyles, theme) => {
   return { ...theme, components: { ...mergedStyles } };
 };
 
-// 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,
-  tabular = true,
-  ...props
-}) => {
-  const numberFormatter = useNumberFormatter({
-    ...props
-  });
-  return /* @__PURE__ */ React4.createElement("span", { className: tabular ? "tabular-nums" : void 0 }, numberFormatter.format(value));
-};
-
 // src/style-props.tsx
 var width = {
   auto: "w-auto",
@@ -780,22 +766,12 @@ var textAlign = {
   center: "text-center",
   right: "text-right"
 };
-var gridColsAlign = {
-  left: "grid-cols-[minmax(0,_var(--maxWidth))_1fr_1fr]",
-  center: "grid-cols-[1fr_minmax(0,_var(--maxWidth))_1fr]",
-  right: " grid-cols-[1fr_1fr_minmax(0,_var(--maxWidth))]"
-};
-var gridColumn = {
-  left: "[&>*]:col-[1]",
-  center: "[&>*]:col-[2]",
-  right: "[&>*]:col-[3]"
-};
 var aspect = {
   square: "aspect-[1]",
-  landscape: "aspect-[4/3]",
-  portrait: "aspect-[3/4]",
-  widescreen: "aspect-[16/9]",
-  ultrawide: "aspect-[18/5]",
+  landscape: "aspect-4/3",
+  portrait: "aspect-3/4",
+  widescreen: "aspect-16/9",
+  ultrawide: "aspect-18/5",
   golden: "aspect-[1.6180/1]"
 };
 var objectFit = {
@@ -860,11 +836,7 @@ export {
   fontWeight,
   gapSpace,
   get,
-  getColor,
-  gridColsAlign,
-  gridColumn,
   height,
-  isObject,
   objectFit,
   objectPosition,
   paddingBottom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "10.2.1",
+  "version": "11.0.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -39,7 +39,7 @@
     "@babel/core": "7.26.7",
     "postcss": "8.5.1",
     "react": "19.0.0",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.0",
     "tsup": "8.3.5",
     "@marigold/tsconfig": "0.4.0"
   },