braid-design-system
Version:
Themeable design system for the SEEK Group
24 lines (23 loc) • 882 B
JavaScript
import clsx from "clsx";
import { optimizeResponsiveArray } from "./optimizeResponsiveArray.mjs";
import { normalizeResponsiveValue } from "../css/atoms/sprinkles.css.mjs";
const resolveResponsiveProp = (value, mobileAtoms, tabletAtoms, desktopAtoms, wideAtoms) => {
if (typeof value === "string" || typeof value === "number") {
return mobileAtoms[value];
}
const normalized = normalizeResponsiveValue(value);
const [mobile, tablet, desktop, wide] = optimizeResponsiveArray([
normalized.mobile ?? null,
normalized.tablet ?? null,
normalized.desktop ?? null,
normalized.wide ?? null
]);
const mobileAtom = mobileAtoms[mobile];
const tabletAtom = tabletAtoms[tablet];
const desktopAtom = desktopAtoms[desktop];
const wideAtom = wideAtoms[wide];
return clsx(mobileAtom, tabletAtom, desktopAtom, wideAtom);
};
export {
resolveResponsiveProp
};