@evolve.ui/core-components 1.0.0

package/grid.cjs

@@ -0,0 +1,128 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_nodeEnv = require("./nodeEnv-BdQ-HyQz.cjs");
+const require_gridHighlighter = require("./gridHighlighter-BiSMM7lW.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _evolve_ui_theme_system_cn = require("@evolve.ui/theme-system/cn");
+//#region src/grid/pageGrid.tsx
+const PageGrid = ({ children, className, XL }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, _evolve_ui_theme_system_cn.cn)("mx-auto grid grid-cols-[repeat(12,1fr)] gap-md px-md", XL ? "max-w-[1644px]" : "max-w-[1248px]", "xsMax:mx-sm xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm", "print:px-0", className),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "contents [&>*]:col-span-12 xsMax:[&>*]:col-span-4",
+		children
+	})
+});
+PageGrid.displayName = "PageGrid";
+const baseGridClasses = (0, _evolve_ui_theme_system_cn.cn)("grid grid-cols-[repeat(12,1fr)] gap-md", "xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm");
+const pageGridClasses = (0, _evolve_ui_theme_system_cn.cn)(baseGridClasses, "mx-auto max-w-[1248px] px-md", "xsMax:mx-sm", "print:px-0", "[&>*]:col-span-12 xsMax:[&>*]:col-span-4");
+//#endregion
+//#region src/grid/useSubGridCSS.tsx
+/**
+* Generates sub-grid CSS classes and styles for responsive Hammer-style grid layouts.
+*/
+const useSubGridCSS = ({ extraLeftMarginFr = 0, extraLeftMarginGaps = 0, extraLeftMarginPixels = 0, forceDesktop = false, forceMobile = false, leftColsToRemove = 0, leftColsToRemoveMobile = 0, reduceWidthPixels = 0, rightColsToRemove = 0, rightColsToRemoveMobile = 0 }) => {
+	const { columnCount, columnSize, gapSize } = require_gridHighlighter.useGridSize();
+	(0, react.useMemo)(() => {
+		if (require_nodeEnv.nodeEnv !== "production") {
+			if (leftColsToRemoveMobile && rightColsToRemoveMobile && leftColsToRemoveMobile + rightColsToRemoveMobile >= 4) throw new Error("leftColsToRemoveMobile and rightColsToRemoveMobile sums above available columns");
+			if (leftColsToRemoveMobile && leftColsToRemoveMobile >= 4) throw new Error("leftColsToRemoveMobile is above available columns");
+			if (rightColsToRemoveMobile && rightColsToRemoveMobile >= 4) throw new Error("rightColsToRemoveMobile is above available columns");
+			if (leftColsToRemove && rightColsToRemove && leftColsToRemove + rightColsToRemove >= 12) throw new Error("leftColsToRemove and rightColsToRemove sums above available columns");
+			if (leftColsToRemove && leftColsToRemove >= 12) throw new Error("leftColsToRemove sums above available columns");
+			if (rightColsToRemove && rightColsToRemove >= 12) throw new Error("rightColsToRemove sums above available columns");
+			if (leftColsToRemoveMobile < 0 || rightColsToRemoveMobile < 0 || leftColsToRemove < 0 || rightColsToRemove < 0) throw new Error("negative values supplied");
+		}
+	}, [
+		leftColsToRemove,
+		leftColsToRemoveMobile,
+		rightColsToRemove,
+		rightColsToRemoveMobile
+	]);
+	(0, react.useMemo)(() => {
+		if (require_nodeEnv.nodeEnv !== "production" && extraLeftMarginFr === 0 && extraLeftMarginGaps === 0 && extraLeftMarginPixels === 0 && leftColsToRemove === 0 && leftColsToRemoveMobile === 0 && reduceWidthPixels === 0 && rightColsToRemove === 0 && rightColsToRemoveMobile === 0) throw new Error("nothing supplied");
+	}, [
+		extraLeftMarginFr,
+		extraLeftMarginGaps,
+		extraLeftMarginPixels,
+		leftColsToRemove,
+		leftColsToRemoveMobile,
+		reduceWidthPixels,
+		rightColsToRemove,
+		rightColsToRemoveMobile
+	]);
+	return (0, react.useMemo)(() => {
+		const isMobileGrid = (forceMobile || columnCount === 4) && !forceDesktop;
+		const templateCols = isMobileGrid ? 4 - leftColsToRemoveMobile - rightColsToRemoveMobile : 12 - leftColsToRemove - rightColsToRemove;
+		const leftRemove = isMobileGrid ? leftColsToRemoveMobile : leftColsToRemove;
+		const rightRemove = isMobileGrid ? rightColsToRemoveMobile : rightColsToRemove;
+		const marginLeft = (columnSize + gapSize) * leftRemove + columnSize * extraLeftMarginFr + gapSize * extraLeftMarginGaps + extraLeftMarginPixels;
+		const marginRight = (columnSize + gapSize) * rightRemove - columnSize * extraLeftMarginFr - gapSize * extraLeftMarginGaps - extraLeftMarginPixels - reduceWidthPixels;
+		return {
+			className: "grid",
+			style: {
+				columnGap: `${gapSize}px`,
+				gridTemplateColumns: `repeat(${templateCols}, 1fr)`,
+				marginLeft: `${marginLeft}px`,
+				marginRight: `${marginRight}px`
+			}
+		};
+	}, [
+		columnCount,
+		columnSize,
+		extraLeftMarginFr,
+		extraLeftMarginGaps,
+		extraLeftMarginPixels,
+		forceDesktop,
+		forceMobile,
+		gapSize,
+		leftColsToRemove,
+		leftColsToRemoveMobile,
+		reduceWidthPixels,
+		rightColsToRemove,
+		rightColsToRemoveMobile
+	]);
+};
+/**
+* Component wrapper for `useSubGridCSS` that applies sub-grid styling.
+*/
+const SubGridContainer = ({ children, className, style: externalStyle, ...subGridArgs }) => {
+	const { className: subGridClassName, style: subGridStyle } = useSubGridCSS(subGridArgs);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _evolve_ui_theme_system_cn.cn)(subGridClassName, className),
+		style: {
+			...subGridStyle,
+			...externalStyle
+		},
+		children
+	});
+};
+SubGridContainer.displayName = "SubGridContainer";
+/**
+* Easy-to-use component that restricts content to a sub-grid with span-12 children.
+*/
+const EasyRestrict = ({ children, className, style: externalStyle, ...rest }) => {
+	const { className: subGridClassName, style: subGridStyle } = useSubGridCSS(rest);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _evolve_ui_theme_system_cn.cn)(subGridClassName, "[&>*]:col-span-12", className),
+		style: {
+			...subGridStyle,
+			...externalStyle
+		},
+		children
+	});
+};
+EasyRestrict.displayName = "EasyRestrict";
+//#endregion
+exports.EasyRestrict = EasyRestrict;
+exports.GridHighlighter = require_gridHighlighter.GridHighlighter;
+exports.PageGrid = PageGrid;
+exports.SubGridContainer = SubGridContainer;
+exports.baseGridClasses = baseGridClasses;
+exports.pageGridClasses = pageGridClasses;
+exports.useSubGridCSS = useSubGridCSS;
+
+//# sourceMappingURL=grid.cjs.map

package/grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.cjs","names":["useGridSize","nodeEnv"],"sources":["../src/grid/pageGrid.tsx","../src/grid/useSubGridCSS.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system/cn';\nimport { type ReactNode } from 'react';\n\ntype PageGridProps = {\n    XL?: boolean;\n    children: ReactNode;\n    className?: string;\n};\n\nexport const PageGrid = ({ children, className, XL }: PageGridProps) => (\n    <div\n        className={cn(\n            'mx-auto grid grid-cols-[repeat(12,1fr)] gap-md px-md',\n            XL ? 'max-w-[1644px]' : 'max-w-[1248px]',\n            'xsMax:mx-sm xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm',\n            'print:px-0',\n            className\n        )}\n    >\n        <div className=\"contents [&>*]:col-span-12 xsMax:[&>*]:col-span-4\">{children}</div>\n    </div>\n);\n\nPageGrid.displayName = 'PageGrid';\n\nexport const baseGridClasses = cn(\n    'grid grid-cols-[repeat(12,1fr)] gap-md',\n    'xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm'\n);\n\nexport const pageGridClasses = cn(\n    baseGridClasses,\n    'mx-auto max-w-[1248px] px-md',\n    'xsMax:mx-sm',\n    'print:px-0',\n    '[&>*]:col-span-12 xsMax:[&>*]:col-span-4'\n);\n","import { cn } from '@evolve.ui/theme-system/cn';\nimport { type CSSProperties, type ReactNode, useMemo } from 'react';\n\nimport { useGridSize } from '../providers/gridSizeProvider';\nimport { nodeEnv } from '../utils/nodeEnv';\n\ntype UseSubGridArgs = {\n    /** Extra left margin in fractional units. */\n    extraLeftMarginFr?: number;\n    /** Extra left margin in gap units. */\n    extraLeftMarginGaps?: number;\n    /** Extra left margin in pixels. */\n    extraLeftMarginPixels?: number;\n    /** Number of columns to remove from the left on desktop. */\n    leftColsToRemove?: number;\n    /** Number of columns to remove from the left on mobile. */\n    leftColsToRemoveMobile?: number;\n    /** Pixels to reduce from the total width. */\n    reduceWidthPixels?: number;\n    /** Number of columns to remove from the right on desktop. */\n    rightColsToRemove?: number;\n    /** Number of columns to remove from the right on mobile. */\n    rightColsToRemoveMobile?: number;\n} & (\n    | {\n          /** Force desktop layout regardless of screen size. */\n          forceDesktop?: true;\n          forceMobile?: false;\n      }\n    | {\n          forceDesktop?: false;\n          /** Force mobile layout regardless of screen size. */\n          forceMobile?: true;\n      }\n    | {\n          forceDesktop?: false;\n          forceMobile?: false;\n      }\n);\n\n/**\n * Generates sub-grid CSS classes and styles for responsive Hammer-style grid layouts.\n */\nexport const useSubGridCSS = ({\n    extraLeftMarginFr = 0,\n    extraLeftMarginGaps = 0,\n    extraLeftMarginPixels = 0,\n    forceDesktop = false,\n    forceMobile = false,\n    leftColsToRemove = 0,\n    leftColsToRemoveMobile = 0,\n    reduceWidthPixels = 0,\n    rightColsToRemove = 0,\n    rightColsToRemoveMobile = 0,\n}: UseSubGridArgs) => {\n    const { columnCount, columnSize, gapSize } = useGridSize();\n\n    // Error checking is separate from calculation to allow for updates to extra margin or window resizing.\n    useMemo(() => {\n        if (nodeEnv !== 'production') {\n            if (\n                leftColsToRemoveMobile &&\n                rightColsToRemoveMobile &&\n                leftColsToRemoveMobile + rightColsToRemoveMobile >= 4\n            ) {\n                throw new Error('leftColsToRemoveMobile and rightColsToRemoveMobile sums above available columns');\n            }\n            if (leftColsToRemoveMobile && leftColsToRemoveMobile >= 4) {\n                throw new Error('leftColsToRemoveMobile is above available columns');\n            }\n            if (rightColsToRemoveMobile && rightColsToRemoveMobile >= 4) {\n                throw new Error('rightColsToRemoveMobile is above available columns');\n            }\n            if (leftColsToRemove && rightColsToRemove && leftColsToRemove + rightColsToRemove >= 12) {\n                throw new Error('leftColsToRemove and rightColsToRemove sums above available columns');\n            }\n            if (leftColsToRemove && leftColsToRemove >= 12) {\n                throw new Error('leftColsToRemove sums above available columns');\n            }\n            if (rightColsToRemove && rightColsToRemove >= 12) {\n                throw new Error('rightColsToRemove sums above available columns');\n            }\n            if (\n                leftColsToRemoveMobile < 0 ||\n                rightColsToRemoveMobile < 0 ||\n                leftColsToRemove < 0 ||\n                rightColsToRemove < 0\n            ) {\n                throw new Error('negative values supplied');\n            }\n        }\n    }, [leftColsToRemove, leftColsToRemoveMobile, rightColsToRemove, rightColsToRemoveMobile]);\n\n    useMemo(() => {\n        if (\n            nodeEnv !== 'production' &&\n            extraLeftMarginFr === 0 &&\n            extraLeftMarginGaps === 0 &&\n            extraLeftMarginPixels === 0 &&\n            leftColsToRemove === 0 &&\n            leftColsToRemoveMobile === 0 &&\n            reduceWidthPixels === 0 &&\n            rightColsToRemove === 0 &&\n            rightColsToRemoveMobile === 0\n        ) {\n            throw new Error('nothing supplied');\n        }\n    }, [\n        extraLeftMarginFr,\n        extraLeftMarginGaps,\n        extraLeftMarginPixels,\n        leftColsToRemove,\n        leftColsToRemoveMobile,\n        reduceWidthPixels,\n        rightColsToRemove,\n        rightColsToRemoveMobile,\n    ]);\n\n    return useMemo(() => {\n        const isMobileGrid = (forceMobile || columnCount === 4) && !forceDesktop;\n        const templateCols = isMobileGrid\n            ? 4 - leftColsToRemoveMobile - rightColsToRemoveMobile\n            : 12 - leftColsToRemove - rightColsToRemove;\n\n        const leftRemove = isMobileGrid ? leftColsToRemoveMobile : leftColsToRemove;\n        const rightRemove = isMobileGrid ? rightColsToRemoveMobile : rightColsToRemove;\n\n        const marginLeft =\n            (columnSize + gapSize) * leftRemove +\n            columnSize * extraLeftMarginFr +\n            gapSize * extraLeftMarginGaps +\n            extraLeftMarginPixels;\n        const marginRight =\n            (columnSize + gapSize) * rightRemove -\n            columnSize * extraLeftMarginFr -\n            gapSize * extraLeftMarginGaps -\n            extraLeftMarginPixels -\n            reduceWidthPixels;\n\n        return {\n            className: 'grid',\n            style: {\n                columnGap: `${gapSize}px`,\n                gridTemplateColumns: `repeat(${templateCols}, 1fr)`,\n                marginLeft: `${marginLeft}px`,\n                marginRight: `${marginRight}px`,\n            },\n        };\n    }, [\n        columnCount,\n        columnSize,\n        extraLeftMarginFr,\n        extraLeftMarginGaps,\n        extraLeftMarginPixels,\n        forceDesktop,\n        forceMobile,\n        gapSize,\n        leftColsToRemove,\n        leftColsToRemoveMobile,\n        reduceWidthPixels,\n        rightColsToRemove,\n        rightColsToRemoveMobile,\n    ]);\n};\n\ntype SubGridContainerProps = {\n    /** Child elements to render within the sub-grid. */\n    children: ReactNode;\n    /** Additional CSS classes. */\n    className?: string;\n    /** Additional inline styles. */\n    style?: CSSProperties;\n} & UseSubGridArgs;\n\n/**\n * Component wrapper for `useSubGridCSS` that applies sub-grid styling.\n */\nexport const SubGridContainer = ({\n    children,\n    className,\n    style: externalStyle,\n    ...subGridArgs\n}: SubGridContainerProps) => {\n    const { className: subGridClassName, style: subGridStyle } = useSubGridCSS(subGridArgs);\n\n    return (\n        <div\n            className={cn(subGridClassName, className)}\n            style={{ ...subGridStyle, ...externalStyle }}\n        >\n            {children}\n        </div>\n    );\n};\n\nSubGridContainer.displayName = 'SubGridContainer';\n\n/**\n * Easy-to-use component that restricts content to a sub-grid with span-12 children.\n */\nexport const EasyRestrict = ({ children, className, style: externalStyle, ...rest }: SubGridContainerProps) => {\n    const { className: subGridClassName, style: subGridStyle } = useSubGridCSS(rest);\n\n    return (\n        <div\n            className={cn(subGridClassName, '[&>*]:col-span-12', className)}\n            style={{ ...subGridStyle, ...externalStyle }}\n        >\n            {children}\n        </div>\n    );\n};\n\nEasyRestrict.displayName = 'EasyRestrict';\n"],"mappings":"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"}

package/grid.d.cts

@@ -0,0 +1,3 @@
+import { t as GridHighlighter } from "./gridHighlighter-BU9PvG5f.cjs";
+import { a as baseGridClasses, i as PageGrid, n as SubGridContainer, o as pageGridClasses, r as useSubGridCSS, t as EasyRestrict } from "./index-BvJOKeoD.cjs";
+export { EasyRestrict, GridHighlighter, PageGrid, SubGridContainer, baseGridClasses, pageGridClasses, useSubGridCSS };

package/grid.d.mts

@@ -0,0 +1,3 @@
+import { t as GridHighlighter } from "./gridHighlighter-BU9PvG5f.mjs";
+import { a as baseGridClasses, i as PageGrid, n as SubGridContainer, o as pageGridClasses, r as useSubGridCSS, t as EasyRestrict } from "./index-BvJOKeoD.mjs";
+export { EasyRestrict, GridHighlighter, PageGrid, SubGridContainer, baseGridClasses, pageGridClasses, useSubGridCSS };

package/grid.mjs

@@ -0,0 +1,118 @@
+'use client';
+import { t as nodeEnv } from "./nodeEnv-B4v61vkJ.mjs";
+import { n as useGridSize, t as GridHighlighter } from "./gridHighlighter-BcGNd3EE.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@evolve.ui/theme-system/cn";
+//#region src/grid/pageGrid.tsx
+const PageGrid = ({ children, className, XL }) => /* @__PURE__ */ jsx("div", {
+	className: cn("mx-auto grid grid-cols-[repeat(12,1fr)] gap-md px-md", XL ? "max-w-[1644px]" : "max-w-[1248px]", "xsMax:mx-sm xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm", "print:px-0", className),
+	children: /* @__PURE__ */ jsx("div", {
+		className: "contents [&>*]:col-span-12 xsMax:[&>*]:col-span-4",
+		children
+	})
+});
+PageGrid.displayName = "PageGrid";
+const baseGridClasses = cn("grid grid-cols-[repeat(12,1fr)] gap-md", "xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm");
+const pageGridClasses = cn(baseGridClasses, "mx-auto max-w-[1248px] px-md", "xsMax:mx-sm", "print:px-0", "[&>*]:col-span-12 xsMax:[&>*]:col-span-4");
+//#endregion
+//#region src/grid/useSubGridCSS.tsx
+/**
+* Generates sub-grid CSS classes and styles for responsive Hammer-style grid layouts.
+*/
+const useSubGridCSS = ({ extraLeftMarginFr = 0, extraLeftMarginGaps = 0, extraLeftMarginPixels = 0, forceDesktop = false, forceMobile = false, leftColsToRemove = 0, leftColsToRemoveMobile = 0, reduceWidthPixels = 0, rightColsToRemove = 0, rightColsToRemoveMobile = 0 }) => {
+	const { columnCount, columnSize, gapSize } = useGridSize();
+	useMemo(() => {
+		if (nodeEnv !== "production") {
+			if (leftColsToRemoveMobile && rightColsToRemoveMobile && leftColsToRemoveMobile + rightColsToRemoveMobile >= 4) throw new Error("leftColsToRemoveMobile and rightColsToRemoveMobile sums above available columns");
+			if (leftColsToRemoveMobile && leftColsToRemoveMobile >= 4) throw new Error("leftColsToRemoveMobile is above available columns");
+			if (rightColsToRemoveMobile && rightColsToRemoveMobile >= 4) throw new Error("rightColsToRemoveMobile is above available columns");
+			if (leftColsToRemove && rightColsToRemove && leftColsToRemove + rightColsToRemove >= 12) throw new Error("leftColsToRemove and rightColsToRemove sums above available columns");
+			if (leftColsToRemove && leftColsToRemove >= 12) throw new Error("leftColsToRemove sums above available columns");
+			if (rightColsToRemove && rightColsToRemove >= 12) throw new Error("rightColsToRemove sums above available columns");
+			if (leftColsToRemoveMobile < 0 || rightColsToRemoveMobile < 0 || leftColsToRemove < 0 || rightColsToRemove < 0) throw new Error("negative values supplied");
+		}
+	}, [
+		leftColsToRemove,
+		leftColsToRemoveMobile,
+		rightColsToRemove,
+		rightColsToRemoveMobile
+	]);
+	useMemo(() => {
+		if (nodeEnv !== "production" && extraLeftMarginFr === 0 && extraLeftMarginGaps === 0 && extraLeftMarginPixels === 0 && leftColsToRemove === 0 && leftColsToRemoveMobile === 0 && reduceWidthPixels === 0 && rightColsToRemove === 0 && rightColsToRemoveMobile === 0) throw new Error("nothing supplied");
+	}, [
+		extraLeftMarginFr,
+		extraLeftMarginGaps,
+		extraLeftMarginPixels,
+		leftColsToRemove,
+		leftColsToRemoveMobile,
+		reduceWidthPixels,
+		rightColsToRemove,
+		rightColsToRemoveMobile
+	]);
+	return useMemo(() => {
+		const isMobileGrid = (forceMobile || columnCount === 4) && !forceDesktop;
+		const templateCols = isMobileGrid ? 4 - leftColsToRemoveMobile - rightColsToRemoveMobile : 12 - leftColsToRemove - rightColsToRemove;
+		const leftRemove = isMobileGrid ? leftColsToRemoveMobile : leftColsToRemove;
+		const rightRemove = isMobileGrid ? rightColsToRemoveMobile : rightColsToRemove;
+		const marginLeft = (columnSize + gapSize) * leftRemove + columnSize * extraLeftMarginFr + gapSize * extraLeftMarginGaps + extraLeftMarginPixels;
+		const marginRight = (columnSize + gapSize) * rightRemove - columnSize * extraLeftMarginFr - gapSize * extraLeftMarginGaps - extraLeftMarginPixels - reduceWidthPixels;
+		return {
+			className: "grid",
+			style: {
+				columnGap: `${gapSize}px`,
+				gridTemplateColumns: `repeat(${templateCols}, 1fr)`,
+				marginLeft: `${marginLeft}px`,
+				marginRight: `${marginRight}px`
+			}
+		};
+	}, [
+		columnCount,
+		columnSize,
+		extraLeftMarginFr,
+		extraLeftMarginGaps,
+		extraLeftMarginPixels,
+		forceDesktop,
+		forceMobile,
+		gapSize,
+		leftColsToRemove,
+		leftColsToRemoveMobile,
+		reduceWidthPixels,
+		rightColsToRemove,
+		rightColsToRemoveMobile
+	]);
+};
+/**
+* Component wrapper for `useSubGridCSS` that applies sub-grid styling.
+*/
+const SubGridContainer = ({ children, className, style: externalStyle, ...subGridArgs }) => {
+	const { className: subGridClassName, style: subGridStyle } = useSubGridCSS(subGridArgs);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(subGridClassName, className),
+		style: {
+			...subGridStyle,
+			...externalStyle
+		},
+		children
+	});
+};
+SubGridContainer.displayName = "SubGridContainer";
+/**
+* Easy-to-use component that restricts content to a sub-grid with span-12 children.
+*/
+const EasyRestrict = ({ children, className, style: externalStyle, ...rest }) => {
+	const { className: subGridClassName, style: subGridStyle } = useSubGridCSS(rest);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(subGridClassName, "[&>*]:col-span-12", className),
+		style: {
+			...subGridStyle,
+			...externalStyle
+		},
+		children
+	});
+};
+EasyRestrict.displayName = "EasyRestrict";
+//#endregion
+export { EasyRestrict, GridHighlighter, PageGrid, SubGridContainer, baseGridClasses, pageGridClasses, useSubGridCSS };
+
+//# sourceMappingURL=grid.mjs.map

package/grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.mjs","names":[],"sources":["../src/grid/pageGrid.tsx","../src/grid/useSubGridCSS.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system/cn';\nimport { type ReactNode } from 'react';\n\ntype PageGridProps = {\n    XL?: boolean;\n    children: ReactNode;\n    className?: string;\n};\n\nexport const PageGrid = ({ children, className, XL }: PageGridProps) => (\n    <div\n        className={cn(\n            'mx-auto grid grid-cols-[repeat(12,1fr)] gap-md px-md',\n            XL ? 'max-w-[1644px]' : 'max-w-[1248px]',\n            'xsMax:mx-sm xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm',\n            'print:px-0',\n            className\n        )}\n    >\n        <div className=\"contents [&>*]:col-span-12 xsMax:[&>*]:col-span-4\">{children}</div>\n    </div>\n);\n\nPageGrid.displayName = 'PageGrid';\n\nexport const baseGridClasses = cn(\n    'grid grid-cols-[repeat(12,1fr)] gap-md',\n    'xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm'\n);\n\nexport const pageGridClasses = cn(\n    baseGridClasses,\n    'mx-auto max-w-[1248px] px-md',\n    'xsMax:mx-sm',\n    'print:px-0',\n    '[&>*]:col-span-12 xsMax:[&>*]:col-span-4'\n);\n","import { cn } from '@evolve.ui/theme-system/cn';\nimport { type CSSProperties, type ReactNode, useMemo } from 'react';\n\nimport { useGridSize } from '../providers/gridSizeProvider';\nimport { nodeEnv } from '../utils/nodeEnv';\n\ntype UseSubGridArgs = {\n    /** Extra left margin in fractional units. */\n    extraLeftMarginFr?: number;\n    /** Extra left margin in gap units. */\n    extraLeftMarginGaps?: number;\n    /** Extra left margin in pixels. */\n    extraLeftMarginPixels?: number;\n    /** Number of columns to remove from the left on desktop. */\n    leftColsToRemove?: number;\n    /** Number of columns to remove from the left on mobile. */\n    leftColsToRemoveMobile?: number;\n    /** Pixels to reduce from the total width. */\n    reduceWidthPixels?: number;\n    /** Number of columns to remove from the right on desktop. */\n    rightColsToRemove?: number;\n    /** Number of columns to remove from the right on mobile. */\n    rightColsToRemoveMobile?: number;\n} & (\n    | {\n          /** Force desktop layout regardless of screen size. */\n          forceDesktop?: true;\n          forceMobile?: false;\n      }\n    | {\n          forceDesktop?: false;\n          /** Force mobile layout regardless of screen size. */\n          forceMobile?: true;\n      }\n    | {\n          forceDesktop?: false;\n          forceMobile?: false;\n      }\n);\n\n/**\n * Generates sub-grid CSS classes and styles for responsive Hammer-style grid layouts.\n */\nexport const useSubGridCSS = ({\n    extraLeftMarginFr = 0,\n    extraLeftMarginGaps = 0,\n    extraLeftMarginPixels = 0,\n    forceDesktop = false,\n    forceMobile = false,\n    leftColsToRemove = 0,\n    leftColsToRemoveMobile = 0,\n    reduceWidthPixels = 0,\n    rightColsToRemove = 0,\n    rightColsToRemoveMobile = 0,\n}: UseSubGridArgs) => {\n    const { columnCount, columnSize, gapSize } = useGridSize();\n\n    // Error checking is separate from calculation to allow for updates to extra margin or window resizing.\n    useMemo(() => {\n        if (nodeEnv !== 'production') {\n            if (\n                leftColsToRemoveMobile &&\n                rightColsToRemoveMobile &&\n                leftColsToRemoveMobile + rightColsToRemoveMobile >= 4\n            ) {\n                throw new Error('leftColsToRemoveMobile and rightColsToRemoveMobile sums above available columns');\n            }\n            if (leftColsToRemoveMobile && leftColsToRemoveMobile >= 4) {\n                throw new Error('leftColsToRemoveMobile is above available columns');\n            }\n            if (rightColsToRemoveMobile && rightColsToRemoveMobile >= 4) {\n                throw new Error('rightColsToRemoveMobile is above available columns');\n            }\n            if (leftColsToRemove && rightColsToRemove && leftColsToRemove + rightColsToRemove >= 12) {\n                throw new Error('leftColsToRemove and rightColsToRemove sums above available columns');\n            }\n            if (leftColsToRemove && leftColsToRemove >= 12) {\n                throw new Error('leftColsToRemove sums above available columns');\n            }\n            if (rightColsToRemove && rightColsToRemove >= 12) {\n                throw new Error('rightColsToRemove sums above available columns');\n            }\n            if (\n                leftColsToRemoveMobile < 0 ||\n                rightColsToRemoveMobile < 0 ||\n                leftColsToRemove < 0 ||\n                rightColsToRemove < 0\n            ) {\n                throw new Error('negative values supplied');\n            }\n        }\n    }, [leftColsToRemove, leftColsToRemoveMobile, rightColsToRemove, rightColsToRemoveMobile]);\n\n    useMemo(() => {\n        if (\n            nodeEnv !== 'production' &&\n            extraLeftMarginFr === 0 &&\n            extraLeftMarginGaps === 0 &&\n            extraLeftMarginPixels === 0 &&\n            leftColsToRemove === 0 &&\n            leftColsToRemoveMobile === 0 &&\n            reduceWidthPixels === 0 &&\n            rightColsToRemove === 0 &&\n            rightColsToRemoveMobile === 0\n        ) {\n            throw new Error('nothing supplied');\n        }\n    }, [\n        extraLeftMarginFr,\n        extraLeftMarginGaps,\n        extraLeftMarginPixels,\n        leftColsToRemove,\n        leftColsToRemoveMobile,\n        reduceWidthPixels,\n        rightColsToRemove,\n        rightColsToRemoveMobile,\n    ]);\n\n    return useMemo(() => {\n        const isMobileGrid = (forceMobile || columnCount === 4) && !forceDesktop;\n        const templateCols = isMobileGrid\n            ? 4 - leftColsToRemoveMobile - rightColsToRemoveMobile\n            : 12 - leftColsToRemove - rightColsToRemove;\n\n        const leftRemove = isMobileGrid ? leftColsToRemoveMobile : leftColsToRemove;\n        const rightRemove = isMobileGrid ? rightColsToRemoveMobile : rightColsToRemove;\n\n        const marginLeft =\n            (columnSize + gapSize) * leftRemove +\n            columnSize * extraLeftMarginFr +\n            gapSize * extraLeftMarginGaps +\n            extraLeftMarginPixels;\n        const marginRight =\n            (columnSize + gapSize) * rightRemove -\n            columnSize * extraLeftMarginFr -\n            gapSize * extraLeftMarginGaps -\n            extraLeftMarginPixels -\n            reduceWidthPixels;\n\n        return {\n            className: 'grid',\n            style: {\n                columnGap: `${gapSize}px`,\n                gridTemplateColumns: `repeat(${templateCols}, 1fr)`,\n                marginLeft: `${marginLeft}px`,\n                marginRight: `${marginRight}px`,\n            },\n        };\n    }, [\n        columnCount,\n        columnSize,\n        extraLeftMarginFr,\n        extraLeftMarginGaps,\n        extraLeftMarginPixels,\n        forceDesktop,\n        forceMobile,\n        gapSize,\n        leftColsToRemove,\n        leftColsToRemoveMobile,\n        reduceWidthPixels,\n        rightColsToRemove,\n        rightColsToRemoveMobile,\n    ]);\n};\n\ntype SubGridContainerProps = {\n    /** Child elements to render within the sub-grid. */\n    children: ReactNode;\n    /** Additional CSS classes. */\n    className?: string;\n    /** Additional inline styles. */\n    style?: CSSProperties;\n} & UseSubGridArgs;\n\n/**\n * Component wrapper for `useSubGridCSS` that applies sub-grid styling.\n */\nexport const SubGridContainer = ({\n    children,\n    className,\n    style: externalStyle,\n    ...subGridArgs\n}: SubGridContainerProps) => {\n    const { className: subGridClassName, style: subGridStyle } = useSubGridCSS(subGridArgs);\n\n    return (\n        <div\n            className={cn(subGridClassName, className)}\n            style={{ ...subGridStyle, ...externalStyle }}\n        >\n            {children}\n        </div>\n    );\n};\n\nSubGridContainer.displayName = 'SubGridContainer';\n\n/**\n * Easy-to-use component that restricts content to a sub-grid with span-12 children.\n */\nexport const EasyRestrict = ({ children, className, style: externalStyle, ...rest }: SubGridContainerProps) => {\n    const { className: subGridClassName, style: subGridStyle } = useSubGridCSS(rest);\n\n    return (\n        <div\n            className={cn(subGridClassName, '[&>*]:col-span-12', className)}\n            style={{ ...subGridStyle, ...externalStyle }}\n        >\n            {children}\n        </div>\n    );\n};\n\nEasyRestrict.displayName = 'EasyRestrict';\n"],"mappings":"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"}

package/gridHighlighter-BU9PvG5f.d.cts

@@ -0,0 +1,29 @@
+//#region src/grid/gridHighlighter.d.ts
+declare global {
+  interface Window {
+    hui?: {
+      enableGridHighlights?: (setting: boolean) => void;
+    };
+  }
+}
+type GridHighlighterProps = {
+  /** Additional CSS classes. */className?: string;
+  /**
+   * Whether to enable the grid highlighter.
+   * Designed for Storybook; in development you can also run `hui.enableGridHighlights(true)` in the console.
+   */
+  forceGridHighlight?: boolean;
+};
+/**
+ * Grid overlay for debugging Hammer-style page grid layouts.
+ */
+declare const GridHighlighter: {
+  ({
+    className,
+    forceGridHighlight
+  }: GridHighlighterProps): import("react/jsx-runtime").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { GridHighlighter as t };
+//# sourceMappingURL=gridHighlighter-BU9PvG5f.d.cts.map

package/gridHighlighter-BU9PvG5f.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridHighlighter-BU9PvG5f.d.cts","names":[],"sources":["../src/grid/gridHighlighter.tsx"],"mappings":";QAMQ,MAAA;EAAA,UACM,MAAA;IACN,GAAA;MACI,oBAAA,IAAwB,OAAA;IAAA;EAAA;AAAA;AAAA,KAK/B,oBAAA;EALO,8BAOR,SAAA;EAPgD;;AAAA;AAAA;EAYhD,kBAAkB;AAAA;;AAAA;AAMtB;cAAa,eAAA;EAAA;;;KAAsD,oBAAA,+BAAoB,GAAA,CAAA,OAAA"}

package/gridHighlighter-BU9PvG5f.d.mts

@@ -0,0 +1,29 @@
+//#region src/grid/gridHighlighter.d.ts
+declare global {
+  interface Window {
+    hui?: {
+      enableGridHighlights?: (setting: boolean) => void;
+    };
+  }
+}
+type GridHighlighterProps = {
+  /** Additional CSS classes. */className?: string;
+  /**
+   * Whether to enable the grid highlighter.
+   * Designed for Storybook; in development you can also run `hui.enableGridHighlights(true)` in the console.
+   */
+  forceGridHighlight?: boolean;
+};
+/**
+ * Grid overlay for debugging Hammer-style page grid layouts.
+ */
+declare const GridHighlighter: {
+  ({
+    className,
+    forceGridHighlight
+  }: GridHighlighterProps): import("react/jsx-runtime").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { GridHighlighter as t };
+//# sourceMappingURL=gridHighlighter-BU9PvG5f.d.mts.map

package/gridHighlighter-BU9PvG5f.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridHighlighter-BU9PvG5f.d.mts","names":[],"sources":["../src/grid/gridHighlighter.tsx"],"mappings":";QAMQ,MAAA;EAAA,UACM,MAAA;IACN,GAAA;MACI,oBAAA,IAAwB,OAAA;IAAA;EAAA;AAAA;AAAA,KAK/B,oBAAA;EALO,8BAOR,SAAA;EAPgD;;AAAA;AAAA;EAYhD,kBAAkB;AAAA;;AAAA;AAMtB;cAAa,eAAA;EAAA;;;KAAsD,oBAAA,+BAAoB,GAAA,CAAA,OAAA"}

package/gridHighlighter-BcGNd3EE.mjs

@@ -0,0 +1,55 @@
+import { t as nodeEnv } from "./nodeEnv-B4v61vkJ.mjs";
+import { i as mobileAtom, l as useWindowIsMobile, p as widthAtom } from "./windowSizeProvider-sYwAqaOy.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { breakpoints } from "@evolve.ui/theme-system/themes/common";
+import { atom, useAtomValue } from "jotai";
+import { cn } from "@evolve.ui/theme-system/cn";
+//#region src/providers/gridSizeProvider.tsx
+const gridSizeAtom = atom((get) => {
+	const width = get(widthAtom);
+	return get(mobileAtom) ? {
+		columnCount: 4,
+		columnSize: (width - 80) / 4,
+		gapSize: 16
+	} : {
+		columnCount: 12,
+		columnSize: (Math.min(width, breakpoints.mdMaxValue) - 312) / 12,
+		gapSize: 24
+	};
+});
+const useGridSize = () => useAtomValue(gridSizeAtom);
+//#endregion
+//#region src/grid/gridHighlighter.tsx
+/**
+* Grid overlay for debugging Hammer-style page grid layouts.
+*/
+const GridHighlighter = ({ className, forceGridHighlight }) => {
+	const [highlightGrid, setGridHighlight] = useState(false);
+	const mobile = useWindowIsMobile();
+	useEffect(() => {
+		if (typeof window !== "undefined" && Boolean(window) && (nodeEnv === "development" || nodeEnv === "test")) {
+			window.hui = window.hui ?? {};
+			window.hui.enableGridHighlights = (setting) => {
+				if (typeof setting === "boolean") setGridHighlight(setting);
+			};
+			return () => {
+				if (typeof window !== "undefined" && window.hui) delete window.hui.enableGridHighlights;
+			};
+		}
+	});
+	if (!highlightGrid && !forceGridHighlight) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mx-auto grid max-w-[1248px] grid-cols-[repeat(12,1fr)] gap-md px-md", "fixed left-0 right-0 top-0 h-full", "pointer-events-none z-[1] bg-transparent", "xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm", "print:px-0", className),
+		"data-testid": "grid-highlighter",
+		children: [...Array(mobile ? 4 : 12).keys()].map((index) => /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none bg-background-critical-dark opacity-15",
+			"data-testid": "grid-highlighter-column"
+		}, index))
+	});
+};
+GridHighlighter.displayName = "GridHighlighter";
+//#endregion
+export { useGridSize as n, GridHighlighter as t };
+
+//# sourceMappingURL=gridHighlighter-BcGNd3EE.mjs.map

package/gridHighlighter-BcGNd3EE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridHighlighter-BcGNd3EE.mjs","names":[],"sources":["../src/providers/gridSizeProvider.tsx","../src/grid/gridHighlighter.tsx"],"sourcesContent":["import { breakpoints } from '@evolve.ui/theme-system/themes/common';\nimport { atom, useAtomValue } from 'jotai';\n\nimport { mobileAtom, widthAtom } from './windowSizeProvider';\n\nconst gridSizeAtom = atom<{\n    columnCount: number;\n    columnSize: number;\n    gapSize: number;\n}>((get) => {\n    const width = get(widthAtom);\n    const mobile = get(mobileAtom);\n\n    return mobile\n        ? { columnCount: 4, columnSize: (width - 16 * 5) / 4, gapSize: 16 }\n        : {\n              columnCount: 12,\n              columnSize: (Math.min(width, breakpoints.mdMaxValue) - 24 * 13) / 12,\n              gapSize: 24,\n          };\n});\n\nexport const useGridSize = () => useAtomValue(gridSizeAtom);\n","import { cn } from '@evolve.ui/theme-system/cn';\nimport { useEffect, useState } from 'react';\n\nimport { useWindowIsMobile } from '../providers/windowSizeProvider';\nimport { nodeEnv } from '../utils/nodeEnv';\n\ndeclare global {\n    interface Window {\n        hui?: {\n            enableGridHighlights?: (setting: boolean) => void;\n        };\n    }\n}\n\ntype GridHighlighterProps = {\n    /** Additional CSS classes. */\n    className?: string;\n    /**\n     * Whether to enable the grid highlighter.\n     * Designed for Storybook; in development you can also run `hui.enableGridHighlights(true)` in the console.\n     */\n    forceGridHighlight?: boolean;\n};\n\n/**\n * Grid overlay for debugging Hammer-style page grid layouts.\n */\nexport const GridHighlighter = ({ className, forceGridHighlight }: GridHighlighterProps) => {\n    const [highlightGrid, setGridHighlight] = useState(false);\n    const mobile = useWindowIsMobile();\n\n    useEffect(() => {\n        if (typeof window !== 'undefined' && Boolean(window) && (nodeEnv === 'development' || nodeEnv === 'test')) {\n            window.hui = window.hui ?? {};\n            window.hui.enableGridHighlights = (setting: boolean) => {\n                if (typeof setting === 'boolean') {\n                    setGridHighlight(setting);\n                }\n            };\n\n            return () => {\n                // Never hurts to be careful with window.\n                if (typeof window !== 'undefined' && window.hui) {\n                    delete window.hui.enableGridHighlights;\n                }\n            };\n        }\n\n        return undefined;\n    });\n\n    if (!highlightGrid && !forceGridHighlight) {\n        return null;\n    }\n\n    return (\n        <div\n            className={cn(\n                // Base grid layout matching PageGrid.\n                'mx-auto grid max-w-[1248px] grid-cols-[repeat(12,1fr)] gap-md px-md',\n                // Fixed positioning for overlay.\n                'fixed left-0 right-0 top-0 h-full',\n                'pointer-events-none z-[1] bg-transparent',\n                // Mobile responsive layout matching PageGrid.\n                'xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm',\n                // Print styles.\n                'print:px-0',\n                className\n            )}\n            data-testid=\"grid-highlighter\"\n        >\n            {[...Array(mobile ? 4 : 12).keys()].map((index) => (\n                <div\n                    className=\"pointer-events-none bg-background-critical-dark opacity-15\"\n                    data-testid=\"grid-highlighter-column\"\n                    key={index}\n                />\n            ))}\n        </div>\n    );\n};\n\nGridHighlighter.displayName = 'GridHighlighter';\n"],"mappings":";;;;;;;;AAKA,MAAM,eAAe,MAIjB,QAAQ;CACR,MAAM,QAAQ,IAAI,SAAS;CAG3B,OAFe,IAAI,UAEP,IACN;EAAE,aAAa;EAAG,aAAa,QAAQ,MAAU;EAAG,SAAS;CAAG,IAChE;EACI,aAAa;EACb,aAAa,KAAK,IAAI,OAAO,YAAY,UAAU,IAAI,OAAW;EAClE,SAAS;CACb;AACV,CAAC;AAED,MAAa,oBAAoB,aAAa,YAAY;;;;;;ACK1D,MAAa,mBAAmB,EAAE,WAAW,yBAA+C;CACxF,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,SAAS,kBAAkB;CAEjC,gBAAgB;EACZ,IAAI,OAAO,WAAW,eAAe,QAAQ,MAAM,MAAM,YAAY,iBAAiB,YAAY,SAAS;GACvG,OAAO,MAAM,OAAO,OAAO,CAAC;GAC5B,OAAO,IAAI,wBAAwB,YAAqB;IACpD,IAAI,OAAO,YAAY,WACnB,iBAAiB,OAAO;GAEhC;GAEA,aAAa;IAET,IAAI,OAAO,WAAW,eAAe,OAAO,KACxC,OAAO,OAAO,IAAI;GAE1B;EACJ;CAGJ,CAAC;CAED,IAAI,CAAC,iBAAiB,CAAC,oBACnB,OAAO;CAGX,OACI,oBAAC,OAAD;EACI,WAAW,GAEP,uEAEA,qCACA,4CAEA,gDAEA,cACA,SACJ;EACA,eAAY;YAEX,CAAC,GAAG,MAAM,SAAS,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,UACrC,oBAAC,OAAD;GACI,WAAU;GACV,eAAY;EAEf,GADQ,KACR,CACJ;CACA,CAAA;AAEb;AAEA,gBAAgB,cAAc"}

package/gridHighlighter-BiSMM7lW.cjs

@@ -0,0 +1,66 @@
+const require_nodeEnv = require("./nodeEnv-BdQ-HyQz.cjs");
+const require_windowSizeProvider = require("./windowSizeProvider-BMaATFiZ.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _evolve_ui_theme_system_themes_common = require("@evolve.ui/theme-system/themes/common");
+let jotai = require("jotai");
+let _evolve_ui_theme_system_cn = require("@evolve.ui/theme-system/cn");
+//#region src/providers/gridSizeProvider.tsx
+const gridSizeAtom = (0, jotai.atom)((get) => {
+	const width = get(require_windowSizeProvider.widthAtom);
+	return get(require_windowSizeProvider.mobileAtom) ? {
+		columnCount: 4,
+		columnSize: (width - 80) / 4,
+		gapSize: 16
+	} : {
+		columnCount: 12,
+		columnSize: (Math.min(width, _evolve_ui_theme_system_themes_common.breakpoints.mdMaxValue) - 312) / 12,
+		gapSize: 24
+	};
+});
+const useGridSize = () => (0, jotai.useAtomValue)(gridSizeAtom);
+//#endregion
+//#region src/grid/gridHighlighter.tsx
+/**
+* Grid overlay for debugging Hammer-style page grid layouts.
+*/
+const GridHighlighter = ({ className, forceGridHighlight }) => {
+	const [highlightGrid, setGridHighlight] = (0, react.useState)(false);
+	const mobile = require_windowSizeProvider.useWindowIsMobile();
+	(0, react.useEffect)(() => {
+		if (typeof window !== "undefined" && Boolean(window) && (require_nodeEnv.nodeEnv === "development" || require_nodeEnv.nodeEnv === "test")) {
+			window.hui = window.hui ?? {};
+			window.hui.enableGridHighlights = (setting) => {
+				if (typeof setting === "boolean") setGridHighlight(setting);
+			};
+			return () => {
+				if (typeof window !== "undefined" && window.hui) delete window.hui.enableGridHighlights;
+			};
+		}
+	});
+	if (!highlightGrid && !forceGridHighlight) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _evolve_ui_theme_system_cn.cn)("mx-auto grid max-w-[1248px] grid-cols-[repeat(12,1fr)] gap-md px-md", "fixed left-0 right-0 top-0 h-full", "pointer-events-none z-[1] bg-transparent", "xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm", "print:px-0", className),
+		"data-testid": "grid-highlighter",
+		children: [...Array(mobile ? 4 : 12).keys()].map((index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "pointer-events-none bg-background-critical-dark opacity-15",
+			"data-testid": "grid-highlighter-column"
+		}, index))
+	});
+};
+GridHighlighter.displayName = "GridHighlighter";
+//#endregion
+Object.defineProperty(exports, "GridHighlighter", {
+	enumerable: true,
+	get: function() {
+		return GridHighlighter;
+	}
+});
+Object.defineProperty(exports, "useGridSize", {
+	enumerable: true,
+	get: function() {
+		return useGridSize;
+	}
+});
+
+//# sourceMappingURL=gridHighlighter-BiSMM7lW.cjs.map

package/gridHighlighter-BiSMM7lW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridHighlighter-BiSMM7lW.cjs","names":["widthAtom","mobileAtom","breakpoints","useWindowIsMobile","nodeEnv"],"sources":["../src/providers/gridSizeProvider.tsx","../src/grid/gridHighlighter.tsx"],"sourcesContent":["import { breakpoints } from '@evolve.ui/theme-system/themes/common';\nimport { atom, useAtomValue } from 'jotai';\n\nimport { mobileAtom, widthAtom } from './windowSizeProvider';\n\nconst gridSizeAtom = atom<{\n    columnCount: number;\n    columnSize: number;\n    gapSize: number;\n}>((get) => {\n    const width = get(widthAtom);\n    const mobile = get(mobileAtom);\n\n    return mobile\n        ? { columnCount: 4, columnSize: (width - 16 * 5) / 4, gapSize: 16 }\n        : {\n              columnCount: 12,\n              columnSize: (Math.min(width, breakpoints.mdMaxValue) - 24 * 13) / 12,\n              gapSize: 24,\n          };\n});\n\nexport const useGridSize = () => useAtomValue(gridSizeAtom);\n","import { cn } from '@evolve.ui/theme-system/cn';\nimport { useEffect, useState } from 'react';\n\nimport { useWindowIsMobile } from '../providers/windowSizeProvider';\nimport { nodeEnv } from '../utils/nodeEnv';\n\ndeclare global {\n    interface Window {\n        hui?: {\n            enableGridHighlights?: (setting: boolean) => void;\n        };\n    }\n}\n\ntype GridHighlighterProps = {\n    /** Additional CSS classes. */\n    className?: string;\n    /**\n     * Whether to enable the grid highlighter.\n     * Designed for Storybook; in development you can also run `hui.enableGridHighlights(true)` in the console.\n     */\n    forceGridHighlight?: boolean;\n};\n\n/**\n * Grid overlay for debugging Hammer-style page grid layouts.\n */\nexport const GridHighlighter = ({ className, forceGridHighlight }: GridHighlighterProps) => {\n    const [highlightGrid, setGridHighlight] = useState(false);\n    const mobile = useWindowIsMobile();\n\n    useEffect(() => {\n        if (typeof window !== 'undefined' && Boolean(window) && (nodeEnv === 'development' || nodeEnv === 'test')) {\n            window.hui = window.hui ?? {};\n            window.hui.enableGridHighlights = (setting: boolean) => {\n                if (typeof setting === 'boolean') {\n                    setGridHighlight(setting);\n                }\n            };\n\n            return () => {\n                // Never hurts to be careful with window.\n                if (typeof window !== 'undefined' && window.hui) {\n                    delete window.hui.enableGridHighlights;\n                }\n            };\n        }\n\n        return undefined;\n    });\n\n    if (!highlightGrid && !forceGridHighlight) {\n        return null;\n    }\n\n    return (\n        <div\n            className={cn(\n                // Base grid layout matching PageGrid.\n                'mx-auto grid max-w-[1248px] grid-cols-[repeat(12,1fr)] gap-md px-md',\n                // Fixed positioning for overlay.\n                'fixed left-0 right-0 top-0 h-full',\n                'pointer-events-none z-[1] bg-transparent',\n                // Mobile responsive layout matching PageGrid.\n                'xsMax:grid-cols-[repeat(4,1fr)] xsMax:gap-sm',\n                // Print styles.\n                'print:px-0',\n                className\n            )}\n            data-testid=\"grid-highlighter\"\n        >\n            {[...Array(mobile ? 4 : 12).keys()].map((index) => (\n                <div\n                    className=\"pointer-events-none bg-background-critical-dark opacity-15\"\n                    data-testid=\"grid-highlighter-column\"\n                    key={index}\n                />\n            ))}\n        </div>\n    );\n};\n\nGridHighlighter.displayName = 'GridHighlighter';\n"],"mappings":";;;;;;;;AAKA,MAAM,gBAAA,GAAA,MAAA,KAAA,EAIF,QAAQ;CACR,MAAM,QAAQ,IAAIA,2BAAAA,SAAS;CAG3B,OAFe,IAAIC,2BAAAA,UAEP,IACN;EAAE,aAAa;EAAG,aAAa,QAAQ,MAAU;EAAG,SAAS;CAAG,IAChE;EACI,aAAa;EACb,aAAa,KAAK,IAAI,OAAOC,sCAAAA,YAAY,UAAU,IAAI,OAAW;EAClE,SAAS;CACb;AACV,CAAC;AAED,MAAa,qBAAA,GAAA,MAAA,aAAA,CAAiC,YAAY;;;;;;ACK1D,MAAa,mBAAmB,EAAE,WAAW,yBAA+C;CACxF,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,SAAA,CAA6B,KAAK;CACxD,MAAM,SAASC,2BAAAA,kBAAkB;CAEjC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,IAAI,OAAO,WAAW,eAAe,QAAQ,MAAM,MAAMC,gBAAAA,YAAY,iBAAiBA,gBAAAA,YAAY,SAAS;GACvG,OAAO,MAAM,OAAO,OAAO,CAAC;GAC5B,OAAO,IAAI,wBAAwB,YAAqB;IACpD,IAAI,OAAO,YAAY,WACnB,iBAAiB,OAAO;GAEhC;GAEA,aAAa;IAET,IAAI,OAAO,WAAW,eAAe,OAAO,KACxC,OAAO,OAAO,IAAI;GAE1B;EACJ;CAGJ,CAAC;CAED,IAAI,CAAC,iBAAiB,CAAC,oBACnB,OAAO;CAGX,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACI,YAAA,GAAA,2BAAA,GAAA,CAEI,uEAEA,qCACA,4CAEA,gDAEA,cACA,SACJ;EACA,eAAY;YAEX,CAAC,GAAG,MAAM,SAAS,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,UACrC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACI,WAAU;GACV,eAAY;EAEf,GADQ,KACR,CACJ;CACA,CAAA;AAEb;AAEA,gBAAgB,cAAc"}

package/hooks/usePrevious.cjs

@@ -0,0 +1,21 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let react = require("react");
+//#region src/hooks/usePrevious.ts
+/**
+* Hook that returns the previous value of the given parameter
+*/
+const usePrevious = (value) => {
+	const ref = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		ref.current = value;
+	});
+	return ref.current;
+};
+//#endregion
+exports.usePrevious = usePrevious;
+
+//# sourceMappingURL=usePrevious.cjs.map

package/hooks/usePrevious.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.cjs","names":[],"sources":["../../src/hooks/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/**\n * Hook that returns the previous value of the given parameter\n */\nexport const usePrevious = <T>(value: T): T | undefined => {\n    const ref = useRef<T | undefined>(undefined);\n\n    useEffect(() => {\n        ref.current = value;\n    });\n\n    return ref.current;\n};\n"],"mappings":";;;;;;;;;AAKA,MAAa,eAAkB,UAA4B;CACvD,MAAM,OAAA,GAAA,MAAA,OAAA,CAA4B,KAAA,CAAS;CAE3C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,IAAI,UAAU;CAClB,CAAC;CAED,OAAO,IAAI;AACf"}

package/hooks/usePrevious.d.cts

@@ -0,0 +1,2 @@
+import { t as usePrevious } from "../usePrevious-DLOWI2sB.cjs";
+export { usePrevious };

package/hooks/usePrevious.d.mts

@@ -0,0 +1,2 @@
+import { t as usePrevious } from "../usePrevious-DLOWI2sB.mjs";
+export { usePrevious };

package/hooks/usePrevious.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useRef } from "react";
+//#region src/hooks/usePrevious.ts
+/**
+* Hook that returns the previous value of the given parameter
+*/
+const usePrevious = (value) => {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+};
+//#endregion
+export { usePrevious };
+
+//# sourceMappingURL=usePrevious.mjs.map

package/hooks/usePrevious.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.mjs","names":[],"sources":["../../src/hooks/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/**\n * Hook that returns the previous value of the given parameter\n */\nexport const usePrevious = <T>(value: T): T | undefined => {\n    const ref = useRef<T | undefined>(undefined);\n\n    useEffect(() => {\n        ref.current = value;\n    });\n\n    return ref.current;\n};\n"],"mappings":";;;;;AAKA,MAAa,eAAkB,UAA4B;CACvD,MAAM,MAAM,OAAsB,KAAA,CAAS;CAE3C,gBAAgB;EACZ,IAAI,UAAU;CAClB,CAAC;CAED,OAAO,IAAI;AACf"}