@animus-ui/core 0.1.1-beta.9 → 0.1.1-e4cdacd2.0

package/dist/index.js

@@ -0,0 +1,1229 @@
+import { isNumber, get, isArray, isObject, isString, isUndefined, identity, mapValues, omit, intersection, merge, pick, isEmpty, set, keys } from 'lodash';
+import styled from '@emotion/styled';
+
+const createScale = () => [];
+
+const percentageOrAbsolute = (coordinate) => {
+    if (coordinate === 0) {
+        return coordinate;
+    }
+    if (coordinate <= 1 && coordinate >= -1) {
+        return `${coordinate * 100}%`;
+    }
+    return `${coordinate}px`;
+};
+const valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
+const size = (value) => {
+    if (isNumber(value)) {
+        return percentageOrAbsolute(value);
+    }
+    if (value.includes('calc')) {
+        return value;
+    }
+    const [match, number, unit] = valueWithUnit.exec(value) || [];
+    if (match === undefined) {
+        return value;
+    }
+    const numericValue = parseFloat(number);
+    return !unit ? percentageOrAbsolute(numericValue) : `${numericValue}${unit}`;
+};
+
+const gridItemMap = {
+    max: 'max-content',
+    min: 'min-content',
+};
+const unitlessNumber = new RegExp(/^[0-9]*$/);
+const isUnitlessNumber = (val) => unitlessNumber.test(val);
+const gridItem = (item) => {
+    const template = isUnitlessNumber(item)
+        ? `${item}fr`
+        : get(gridItemMap, item, item);
+    return `minmax(0, ${template})`;
+};
+const repeatGridItem = (item, count) => {
+    const template = gridItem(item);
+    return count > 1 ? `repeat(${count}, ${template})` : template;
+};
+const parseGridRatio = (val) => {
+    const items = val.split(':');
+    let repeated = ['', 0];
+    let gridStyle = '';
+    for (let i = 0; i < items.length + 1; i += 1) {
+        const delimiter = gridStyle.length > 0 ? ' ' : '';
+        const curr = items[i];
+        if (repeated?.[0] !== curr) {
+            if (repeated[0].length)
+                gridStyle += delimiter + repeatGridItem(...repeated);
+            if (curr)
+                repeated = [curr, 1];
+        }
+        else {
+            repeated[1] += 1;
+        }
+    }
+    return gridStyle;
+};
+const gridItemRatio = (val) => {
+    return isNumber(val) ? repeatGridItem('1', val) : parseGridRatio(val);
+};
+
+const numberToTemplate = (val, template) => (typeof val === 'number' ? template(val) : val);
+const numberToPx = (val) => {
+    return numberToTemplate(val, (pixels) => `${pixels}px`);
+};
+
+const borderShorthand = (val) => {
+    return numberToTemplate(val, (width) => `${width}px solid currentColor`);
+};
+
+const compatTheme = {
+    breakpoints: {
+        xs: 480,
+        sm: 768,
+        md: 1024,
+        lg: 1200,
+        xl: 1440,
+    },
+    spacing: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 96],
+    fontSize: [64, 44, 34, 26, 22, 20, 18, 16, 14],
+    lineHeight: {
+        body: 1.5,
+        heading: 1,
+    },
+    fontWeight: [400, 600, 700],
+    fontFamily: {
+        body: 'Verdana, sans-serif',
+        heading: 'Verdana, Lato, sans-serif',
+        monospace: 'monospace',
+    },
+    radii: [2, 4, 6, 8],
+    borders: [1, 2, 3],
+    colors: {},
+    modes: {},
+    mode: undefined,
+};
+
+const lookupScaleValue = (val, scale, theme) => {
+    if (isArray(scale)) {
+        return val;
+    }
+    if (isObject(scale)) {
+        return get(scale, val);
+    }
+    if (isString(scale)) {
+        const usedScale = get(theme, scale, get(compatTheme, scale));
+        if (!usedScale)
+            return undefined;
+        return isArray(usedScale) ? val : get(usedScale, val);
+    }
+    return undefined;
+};
+
+const createPropertyStyle = (value, props, config) => {
+    const styles = {};
+    const { transform = identity, property, properties = [property], scale, variable, } = config;
+    const alwaysTransform = scale === undefined || isArray(scale);
+    if (isUndefined(value)) {
+        return styles;
+    }
+    let useTransform = false;
+    let intermediateValue;
+    let scaleValue;
+    switch (typeof value) {
+        case 'number':
+        case 'string':
+            scaleValue = lookupScaleValue(value, scale, props?.theme);
+            useTransform = scaleValue !== undefined || alwaysTransform;
+            intermediateValue = scaleValue ?? value;
+            break;
+        case 'function':
+            if (props.theme) {
+                intermediateValue = value(props.theme);
+            }
+            break;
+        default:
+            return styles;
+    }
+    // for each property look up the scale value from theme if passed and apply any
+    // final transforms to the value
+    properties.forEach((property) => {
+        let styleValue = intermediateValue;
+        if (useTransform && !isUndefined(styleValue)) {
+            styleValue = transform(styleValue, property, props);
+        }
+        switch (typeof styleValue) {
+            case 'number':
+            case 'string':
+                return (styles[property] = styleValue);
+            case 'object':
+                return Object.assign(styles, styleValue);
+        }
+    });
+    if (variable) {
+        let styleValue = intermediateValue;
+        if (useTransform && !isUndefined(styleValue)) {
+            styleValue = transform(styleValue, property, props);
+        }
+        if (styleValue && typeof styleValue !== 'object') {
+            styles[variable] = styleValue;
+        }
+    }
+    // return the resulting styles object
+    return styles;
+};
+
+const SHORTHAND_PROPERTIES = [
+    'border',
+    'borderTop',
+    'borderBottom',
+    'borderLeft',
+    'borderRight',
+    'borderWidth',
+    'borderStyle',
+    'borderColor',
+    'background',
+    'flex',
+    'margin',
+    'padding',
+    'transition',
+    'gap',
+    'grid',
+    'gridArea',
+    'gridColumn',
+    'gridRow',
+    'gridTemplate',
+    'overflow',
+    'transition',
+];
+const SORT = {
+    A_BEFORE_B: -1,
+    B_BEFORE_A: 1,
+    EQUAL: 1,
+};
+const compare = (a, b) => {
+    if (a < b)
+        return SORT.A_BEFORE_B;
+    if (b < a)
+        return SORT.B_BEFORE_A;
+    return SORT.EQUAL;
+};
+/**
+ * Orders all properties by the most dependent props
+ * @param config
+ */
+const orderPropNames = (config) => Object.keys(config).sort((a, b) => {
+    const { [a]: aConf, [b]: bConf } = config;
+    const { property: aProp, properties: aProperties = [] } = aConf;
+    const { property: bProp, properties: bProperties = [] } = bConf;
+    const aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp);
+    const bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp);
+    if (aIsShorthand && bIsShorthand) {
+        const aNum = aProperties.length;
+        const bNum = bProperties.length;
+        if (aProp !== bProp) {
+            return compare(SHORTHAND_PROPERTIES.indexOf(aProp), SHORTHAND_PROPERTIES.indexOf(bProp));
+        }
+        if (aProp === bProp) {
+            if (aNum === 0)
+                return SORT.A_BEFORE_B;
+            if (bNum === 0)
+                return SORT.B_BEFORE_A;
+        }
+        return compare(bNum, aNum);
+    }
+    if (aIsShorthand)
+        return SORT.A_BEFORE_B;
+    if (bIsShorthand)
+        return SORT.B_BEFORE_A;
+    return SORT.EQUAL;
+});
+
+const BREAKPOINT_KEYS$1 = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+/**
+ * Destructures the themes breakpoints into an ordered structure to traverse
+ */
+const templateMediaQuery$1 = (breakpoint) => `@media screen and (min-width: ${breakpoint}px)`;
+const createMediaQueries$1 = (breakpoints) => {
+    if (breakpoints === undefined)
+        return null;
+    const { xs, sm, md, lg, xl } = breakpoints ?? {};
+    // Ensure order for mapping
+    return {
+        map: mapValues(breakpoints, templateMediaQuery$1),
+        array: [xs, sm, md, lg, xl].map(templateMediaQuery$1),
+    };
+};
+const isMediaArray$1 = (val) => Array.isArray(val);
+const isMediaMap$1 = (val) => intersection(Object.keys(val), BREAKPOINT_KEYS$1).length > 0;
+const objectParser$1 = (value, props, config, breakpoints) => {
+    const styles = {};
+    const { _, ...rest } = value;
+    // the keyof 'base' is base styles
+    if (_)
+        Object.assign(styles, createPropertyStyle(_, props, config));
+    // Map over remaining keys and merge the corresponding breakpoint styles
+    // for that property.
+    Object.keys(breakpoints).forEach((breakpointKey) => {
+        const bpStyles = rest[breakpointKey];
+        if (typeof bpStyles === 'undefined')
+            return;
+        Object.assign(styles, {
+            [breakpoints[breakpointKey]]: createPropertyStyle(bpStyles, props, config),
+        });
+    });
+    return styles;
+};
+const arrayParser$1 = (value, props, config, breakpoints) => {
+    const styles = {};
+    const [_, ...rest] = value;
+    // the first index is base styles
+    if (_)
+        Object.assign(styles, createPropertyStyle(_, props, config));
+    // Map over each value in the array and merge the corresponding breakpoint styles
+    // for that property.
+    rest.forEach((val, i) => {
+        const breakpointKey = breakpoints[i];
+        if (!breakpointKey || typeof val === 'undefined')
+            return;
+        Object.assign(styles, {
+            [breakpointKey]: createPropertyStyle(val, props, config),
+        });
+    });
+    return styles;
+};
+const orderBreakpoints$1 = (styles, breakpoints) => {
+    const orderedStyles = omit(styles, breakpoints);
+    breakpoints.forEach((bp) => {
+        if (styles[bp]) {
+            orderedStyles[bp] = styles[bp];
+        }
+    });
+    return orderedStyles;
+};
+
+const renderPropValue$1 = (styles, prop, props, property, ctx) => {
+    const value = get(props, prop);
+    switch (typeof value) {
+        case 'string':
+        case 'number':
+        case 'function':
+            return Object.assign(styles, createPropertyStyle(value, props, property));
+        // handle any props configured with the responsive notation
+        case 'object':
+            if (!ctx.mediaQueries) {
+                return;
+            }
+            // If it is an array the order of values is smallest to largest: [_, xs, ...]
+            if (isMediaArray$1(value)) {
+                return merge(styles, arrayParser$1(value, props, property, ctx.mediaQueries.array));
+            }
+            // Check to see if value is an object matching the responsive syntax and generate the styles.
+            if (value && isMediaMap$1(value)) {
+                return merge(styles, objectParser$1(value, props, property, ctx.mediaQueries.map));
+            }
+    }
+};
+function createParser$1(config) {
+    const propNames = orderPropNames(config);
+    const ctx = {
+        mediaQueries: null,
+    };
+    const parser = (props, isCss = false) => {
+        const styles = {};
+        const { theme } = props;
+        // Attempt to cache the breakpoints if we have not yet or if theme has become available.
+        if (ctx.mediaQueries === null) {
+            // Save the breakpoints if we can
+            ctx.mediaQueries = createMediaQueries$1(theme?.breakpoints ?? compatTheme.breakpoints);
+        }
+        if (!isCss) {
+            // Loops over all prop names on the configured config to check for configured styles
+            propNames.forEach((prop) => {
+                const property = config[prop];
+                renderPropValue$1(styles, prop, props, property, ctx);
+            });
+        }
+        else {
+            // Loops over all prop names on the configured config to check for configured styles
+            Object.keys(props).forEach((prop) => {
+                const property = config[prop];
+                if (property) {
+                    renderPropValue$1(styles, prop, props, property, ctx);
+                }
+                else if (prop !== 'theme') {
+                    Object.assign(styles, { [prop]: get(props, prop) });
+                }
+            });
+        }
+        if (ctx.mediaQueries !== null)
+            return orderBreakpoints$1(styles, ctx.mediaQueries.array);
+        return styles;
+    };
+    // return the parser function with the resulting meta information for further composition
+    return Object.assign(parser, { propNames, config });
+}
+
+/* eslint-disable guard-for-in */
+const getSelectors = (base = {}, variants = {}, states = {}, filters) => {
+    const rules = {};
+    Object.entries(base).forEach(([key, styles]) => {
+        if (!filters.includes(key) && isObject(styles)) {
+            set(rules, [key, 'base'], styles);
+        }
+        else {
+            set(rules, ['primary', 'base', key], styles);
+        }
+    });
+    Object.entries(variants).forEach(([key, { variants: variantConfig }]) => {
+        Object.entries(variantConfig).forEach(([option, optionStyles]) => {
+            const optionId = `${key}-${option}`;
+            Object.entries(optionStyles).forEach(([key, styles]) => {
+                if (!filters.includes(key) && isObject(styles)) {
+                    set(rules, [key, optionId], styles);
+                }
+                else {
+                    set(rules, ['primary', optionId, key], styles);
+                }
+            });
+        });
+    });
+    Object.entries(states).forEach(([optionId, optionStyles]) => {
+        Object.entries(optionStyles).forEach(([key, styles]) => {
+            if (!filters.includes(key) && isObject(styles)) {
+                set(rules, [key, optionId], styles);
+            }
+            else {
+                set(rules, ['primary', optionId, key], styles);
+            }
+        });
+    });
+    return rules;
+};
+const createGetActiveStyleIds = (variants, states) => {
+    const vIds = Object.keys(variants);
+    const sIds = Object.keys(states);
+    return (props) => {
+        const activeIds = [];
+        vIds.forEach((id) => {
+            if (props[id]) {
+                activeIds.push(`${id}-${props[id]}`);
+            }
+        });
+        sIds.forEach((id) => {
+            if (props[id]) {
+                activeIds.push(id);
+            }
+        });
+        return activeIds;
+    };
+};
+const extractBreakpointStyles = (styles, medias) => {
+    const unscoped = {};
+    const breakpoint = {};
+    Object.entries(styles).forEach(([rule, value]) => {
+        const target = medias.includes(rule) ? breakpoint : unscoped;
+        target[rule] = value;
+    });
+    return [unscoped, breakpoint];
+};
+const applyOverride = (override = {}, baseResult, breakpointResult, parser, theme, media) => {
+    const [overrideStyles, overrideBreakpointStyles] = extractBreakpointStyles(parser({ ...override, theme }, true), media);
+    for (const rule in overrideStyles) {
+        baseResult[rule] = overrideStyles[rule];
+    }
+    media.forEach((mq) => {
+        const mqOverride = overrideBreakpointStyles[mq];
+        if (!mqOverride || isEmpty(mqOverride))
+            return;
+        if (!breakpointResult[mq]) {
+            breakpointResult[mq] = {};
+        }
+        const mqStyle = breakpointResult[mq];
+        for (const rule in mqOverride) {
+            mqStyle[rule] = mqOverride[rule];
+        }
+    });
+};
+const applyStyle = (resultStyles, config, props, ctx) => {
+    const { base } = config;
+    const { parser, getMediaSelectors, getActiveOverrides } = ctx;
+    const { theme } = props;
+    const overrides = Object.values(pick(config, getActiveOverrides(props)));
+    const media = getMediaSelectors(props);
+    const [styles, breakpointStyles] = extractBreakpointStyles(parser({ ...base, theme }, true), media);
+    for (const rule in styles) {
+        resultStyles[rule] = styles[rule];
+    }
+    overrides.forEach((override) => {
+        applyOverride(override, resultStyles, breakpointStyles, parser, theme, media);
+    });
+    media.forEach((media) => {
+        const bp = breakpointStyles[media];
+        if (!isEmpty(bp)) {
+            resultStyles[media] = bp;
+        }
+    });
+};
+const createStylist = (parser, base = {}, variants = {}, states = {}) => {
+    const selectorGroups = getSelectors(base, variants, states, parser.propNames);
+    const context = {
+        parser,
+        getMediaSelectors: ({ theme }) => {
+            const breakpoints = theme?.breakpoints ?? compatTheme.breakpoints;
+            return ['xs', 'sm', 'md', 'lg', 'xl'].map((key) => breakpoints[key]);
+        },
+        getActiveOverrides: createGetActiveStyleIds(variants, states),
+    };
+    return (props) => {
+        const { vars } = props;
+        const result = { ...vars };
+        Object.entries(selectorGroups).forEach(([selectorId, config = {}]) => {
+            if (selectorId === 'primary') {
+                applyStyle(result, config, props, context);
+            }
+            else {
+                result[selectorId] = {};
+                applyStyle(result[selectorId], config, props, context);
+            }
+        });
+        applyStyle(result, { base: parser(props) }, props, context);
+        return result;
+    };
+};
+
+class AnimusWithAll {
+    propRegistry = {};
+    groupRegistry = {};
+    parser = {};
+    baseStyles = {};
+    statesConfig = {};
+    variants = {};
+    activeGroups = {};
+    custom = {};
+    constructor(props, groups, parser, base, variants, states, activeGroups, custom) {
+        this.propRegistry = props;
+        this.groupRegistry = groups;
+        this.parser = parser;
+        this.baseStyles = base;
+        this.variants = variants;
+        this.statesConfig = states;
+        this.activeGroups = activeGroups;
+        this.custom = custom;
+    }
+    asComponent(component) {
+        const handler = createStylist(createParser$1({ ...this.parser.config, ...this.custom }), this.baseStyles, this.variants, this.statesConfig);
+        return styled(component)(handler);
+    }
+    build() {
+        const handler = createStylist(createParser$1({ ...this.parser.config, ...this.custom }), this.baseStyles, this.variants, this.statesConfig);
+        return handler;
+    }
+}
+class AnimusWithSystem extends AnimusWithAll {
+    constructor(props, groups, parser, base, variants, states, activeGroups) {
+        super(props, groups, parser, base, variants, states, activeGroups, {});
+    }
+    props(config) {
+        return new AnimusWithAll(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, this.statesConfig, this.activeGroups, config);
+    }
+}
+class AnimusWithStates extends AnimusWithSystem {
+    constructor(props, groups, parser, base, variants, states) {
+        super(props, groups, parser, base, variants, states, {});
+    }
+    groups(config) {
+        return new AnimusWithSystem(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, this.statesConfig, config);
+    }
+}
+class AnimusWithVariants extends AnimusWithStates {
+    constructor(props, groups, parser, base, variants) {
+        super(props, groups, parser, base, variants, {});
+    }
+    states(config) {
+        return new AnimusWithStates(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, config);
+    }
+    variant(options) {
+        const prop = options.prop || 'variant';
+        return new AnimusWithVariants(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, merge(this.variants, { [prop]: options }));
+    }
+}
+class AnimusWithBase extends AnimusWithVariants {
+    constructor(props, groups, parser, base) {
+        super(props, groups, parser, base, {});
+    }
+    variant(options) {
+        const prop = options.prop || 'variant';
+        return new AnimusWithVariants(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, merge(this.variants, { [prop]: options }));
+    }
+}
+class Animus extends AnimusWithBase {
+    constructor(props, groups) {
+        super(props, groups, createParser$1(props), {});
+    }
+    styles(config) {
+        return new AnimusWithBase(this.propRegistry, this.groupRegistry, this.parser, config);
+    }
+}
+
+class AnimusConfig {
+    #props = {};
+    #groups = {};
+    constructor(config, groups) {
+        this.#props = config || {};
+        this.#groups = groups || {};
+    }
+    addGroup(name, config) {
+        const newGroup = {
+            [name]: Object.keys(config),
+        };
+        return new AnimusConfig({ ...this.#props, ...config }, { ...this.#groups, ...newGroup });
+    }
+    build() {
+        const props = this.#props;
+        const groups = this.#groups;
+        return new Animus(props, groups);
+    }
+}
+
+const createAnimus = () => new AnimusConfig();
+
+const color = {
+    color: { property: 'color', scale: 'colors' },
+    textColor: { property: 'color', scale: 'colors' },
+    bg: { property: 'backgroundColor', scale: 'colors' },
+    borderColor: { property: 'borderColor', scale: 'colors' },
+    borderColorX: {
+        property: 'borderColor',
+        properties: ['borderLeftColor', 'borderRightColor'],
+        scale: 'colors',
+    },
+    borderColorY: {
+        property: 'borderColor',
+        properties: ['borderTopColor', 'borderBottomColor'],
+        scale: 'colors',
+    },
+    borderColorLeft: { property: 'borderLeftColor', scale: 'colors' },
+    borderColorRight: { property: 'borderRightColor', scale: 'colors' },
+    borderColorTop: { property: 'borderTopColor', scale: 'colors' },
+    borderColorBottom: { property: 'borderBottomColor', scale: 'colors' },
+};
+const border = {
+    border: {
+        property: 'border',
+        scale: 'borders',
+        transform: borderShorthand,
+    },
+    borderX: {
+        property: 'border',
+        properties: ['borderLeft', 'borderRight'],
+        scale: 'borders',
+        transform: borderShorthand,
+    },
+    borderY: {
+        property: 'border',
+        properties: ['borderTop', 'borderBottom'],
+        scale: 'borders',
+        transform: borderShorthand,
+    },
+    borderTop: {
+        property: 'borderTop',
+        scale: 'borders',
+        transform: borderShorthand,
+    },
+    borderRight: {
+        property: 'borderRight',
+        scale: 'borders',
+        transform: borderShorthand,
+    },
+    borderBottom: {
+        property: 'borderBottom',
+        scale: 'borders',
+        transform: borderShorthand,
+    },
+    borderLeft: {
+        property: 'borderLeft',
+        scale: 'borders',
+        transform: borderShorthand,
+    },
+    // Width
+    borderWidth: { property: 'borderWidth' },
+    borderWidthX: {
+        property: 'borderWidth',
+        properties: ['borderLeftWidth', 'borderRightWidth'],
+    },
+    borderWidthY: {
+        property: 'borderWidth',
+        properties: ['borderTopWidth', 'borderBottomWidth'],
+    },
+    borderWidthLeft: { property: 'borderLeftWidth' },
+    borderWidthRight: { property: 'borderRightWidth' },
+    borderWidthTop: { property: 'borderTopWidth' },
+    borderWidthBottom: { property: 'borderBottomWidth' },
+    // Radius
+    borderRadius: {
+        property: 'borderRadius',
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    borderRadiusLeft: {
+        property: 'borderRadius',
+        properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    borderRadiusTop: {
+        property: 'borderRadius',
+        properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    borderRadiusBottom: {
+        property: 'borderRadius',
+        properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    borderRadiusRight: {
+        property: 'borderRadius',
+        properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    borderRadiusTopLeft: {
+        property: 'borderTopLeftRadius',
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    borderRadiusTopRight: {
+        property: 'borderTopRightRadius',
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    borderRadiusBottomRight: {
+        property: 'borderBottomRightRadius',
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    borderRadiusBottomLeft: {
+        property: 'borderBottomLeftRadius',
+        scale: 'radii',
+        transform: numberToPx,
+    },
+    // Style
+    borderStyle: { property: 'borderStyle' },
+    borderStyleX: {
+        property: 'borderStyle',
+        properties: ['borderLeftStyle', 'borderRightStyle'],
+    },
+    borderStyleY: {
+        property: 'borderStyle',
+        properties: ['borderTopStyle', 'borderBottomStyle'],
+    },
+    borderStyleLeft: { property: 'borderLeftStyle' },
+    borderStyleRight: { property: 'borderRightStyle' },
+    borderStyleTop: { property: 'borderTopStyle' },
+    borderStyleBottom: { property: 'borderBottomStyle' },
+};
+const gaps = {
+    gap: { property: 'gap', scale: 'spacing' },
+    rowGap: { property: 'rowGap', scale: 'spacing' },
+    columnGap: { property: 'columnGap', scale: 'spacing' },
+};
+const selfAlignments = {
+    justifySelf: { property: 'justifySelf' },
+    alignSelf: { property: 'alignSelf' },
+    gridArea: { property: 'gridArea' },
+    area: { property: 'gridArea' },
+};
+const alignments = {
+    justifyContent: { property: 'justifyContent' },
+    justifyItems: { property: 'justifyItems' },
+    alignItems: { property: 'alignItems' },
+    alignContent: { property: 'alignContent' },
+    ...selfAlignments,
+};
+const flexItems = {
+    flexBasis: { property: 'flexBasis' },
+    flexShrink: { property: 'flexShrink' },
+    flexGrow: { property: 'flexGrow' },
+    order: { property: 'order' },
+};
+const flex = {
+    flexDirection: { property: 'flexDirection' },
+    flexWrap: { property: 'flexWrap' },
+    flex: { property: 'flex' },
+    ...alignments,
+    ...flexItems,
+    ...gaps,
+};
+const gridItems = {
+    gridColumn: { property: 'gridColumn' },
+    gridRow: { property: 'gridRow' },
+    gridColumnStart: { property: 'gridColumnStart' },
+    gridRowStart: { property: 'gridRowStart' },
+    gridColumnEnd: { property: 'gridColumnEnd' },
+    gridRowEnd: { property: 'gridRowEnd' },
+};
+const grid = {
+    gridAutoColumns: { property: 'gridAutoColumns' },
+    gridAutoRows: { property: 'gridAutoRows' },
+    gridTemplateColumns: { property: 'gridTemplateColumns' },
+    gridTemplateRows: { property: 'gridTemplateRows' },
+    gridTemplateAreas: { property: 'gridTemplateAreas' },
+    gridAutoFlow: { property: 'gridAutoFlow' },
+    flow: {
+        property: 'gridAutoFlow',
+        scale: createScale(),
+    },
+    cols: {
+        property: 'gridTemplateColumns',
+        transform: gridItemRatio,
+        scale: createScale(),
+    },
+    rows: {
+        property: 'gridTemplateRows',
+        transform: gridItemRatio,
+        scale: createScale(),
+    },
+    autoRows: {
+        property: 'gridAutoRows',
+        transform: gridItem,
+    },
+    autoCols: {
+        property: 'gridAutoColumns',
+        transform: gridItem,
+    },
+    alignAll: {
+        property: 'justifyContent',
+        properties: ['justifyContent', 'alignItems'],
+    },
+    ...alignments,
+    ...gridItems,
+    ...gaps,
+};
+const background = {
+    background: { property: 'background' },
+    backgroundImage: { property: 'backgroundImage' },
+    backgroundSize: { property: 'backgroundSize' },
+    backgroundRepeat: { property: 'backgroundRepeat' },
+    backgroundPosition: { property: 'backgroundPosition' },
+};
+const positioning = {
+    position: { property: 'position' },
+    inset: {
+        property: 'inset',
+        properties: ['top', 'right', 'bottom', 'left'],
+        transform: size,
+    },
+    top: { property: 'top', transform: size },
+    right: { property: 'right', transform: size },
+    bottom: { property: 'bottom', transform: size },
+    left: { property: 'left', transform: size },
+    zIndex: { property: 'zIndex' },
+    opacity: { property: 'opacity' },
+};
+const shadows = {
+    boxShadow: { property: 'boxShadow' },
+    textShadow: { property: 'textShadow' },
+};
+const layout = {
+    display: { property: 'display' },
+    overflow: { property: 'overflow' },
+    overflowX: { property: 'overflowX' },
+    overflowY: { property: 'overflowY' },
+    size: {
+        property: 'width',
+        properties: ['width', 'height'],
+        transform: size,
+    },
+    width: {
+        property: 'width',
+        transform: size,
+    },
+    minWidth: { property: 'minWidth', transform: size },
+    maxWidth: { property: 'maxWidth', transform: size },
+    height: { property: 'height', transform: size },
+    minHeight: {
+        property: 'minHeight',
+        transform: size,
+    },
+    maxHeight: {
+        property: 'maxHeight',
+        transform: size,
+    },
+    verticalAlign: { property: 'verticalAlign' },
+    ...selfAlignments,
+    ...gridItems,
+    ...flexItems,
+};
+const typography = {
+    fontFamily: { property: 'fontFamily', scale: 'fontFamily' },
+    fontWeight: {
+        property: 'fontWeight',
+        scale: 'fontWeight',
+    },
+    lineHeight: {
+        property: 'lineHeight',
+        scale: 'lineHeight',
+        lineHeight: 'lineHeight',
+    },
+    fontSize: {
+        property: 'fontSize',
+        scale: 'fontSize',
+    },
+    letterSpacing: { property: 'letterSpacing' },
+    textAlign: { property: 'textAlign' },
+    fontStyle: { property: 'fontStyle' },
+    textDecoration: { property: 'textDecoration' },
+    textTransform: { property: 'textTransform' },
+    whiteSpace: { property: 'whiteSpace' },
+};
+const margin = {
+    m: { property: 'margin', scale: 'spacing' },
+    mx: {
+        property: 'margin',
+        properties: ['marginLeft', 'marginRight'],
+        scale: 'spacing',
+    },
+    my: {
+        property: 'margin',
+        properties: ['marginTop', 'marginBottom'],
+        scale: 'spacing',
+    },
+    mt: { property: 'marginTop', scale: 'spacing' },
+    mb: { property: 'marginBottom', scale: 'spacing' },
+    mr: { property: 'marginRight', scale: 'spacing' },
+    ml: { property: 'marginLeft', scale: 'spacing' },
+};
+const padding = {
+    p: { property: 'padding', scale: 'spacing' },
+    px: {
+        property: 'padding',
+        properties: ['paddingLeft', 'paddingRight'],
+        scale: 'spacing',
+    },
+    py: {
+        property: 'padding',
+        properties: ['paddingTop', 'paddingBottom'],
+        scale: 'spacing',
+    },
+    pt: { property: 'paddingTop', scale: 'spacing' },
+    pb: { property: 'paddingBottom', scale: 'spacing' },
+    pr: { property: 'paddingRight', scale: 'spacing' },
+    pl: { property: 'paddingLeft', scale: 'spacing' },
+};
+const space = {
+    ...margin,
+    ...padding,
+};
+const mode = {
+    mode: { property: 'none', scale: 'mode' },
+};
+const vars = {
+    vars: { property: 'variables' },
+};
+const config = createAnimus()
+    .addGroup('flex', flex)
+    .addGroup('grid', grid)
+    .addGroup('mode', mode)
+    .addGroup('vars', vars)
+    .addGroup('space', space)
+    .addGroup('color', color)
+    .addGroup('layout', layout)
+    .addGroup('borders', border)
+    .addGroup('shadows', shadows)
+    .addGroup('background', background)
+    .addGroup('typography', typography)
+    .addGroup('positioning', positioning);
+config.build();
+
+const getStylePropNames = (props, filteredKeys) => pick(props, keys(props).filter((key) => !filteredKeys.includes(key)));
+
+const BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+/**
+ * Destructures the themes breakpoints into an ordered structure to traverse
+ */
+const templateMediaQuery = (breakpoint) => `@media screen and (min-width: ${breakpoint}px)`;
+const createMediaQueries = (breakpoints) => {
+    if (breakpoints === undefined)
+        return null;
+    const { xs, sm, md, lg, xl } = breakpoints ?? {};
+    // Ensure order for mapping
+    return {
+        map: mapValues(breakpoints, templateMediaQuery),
+        array: [xs, sm, md, lg, xl].map(templateMediaQuery),
+    };
+};
+const isMediaArray = (val) => Array.isArray(val);
+const isMediaMap = (val) => intersection(Object.keys(val), BREAKPOINT_KEYS).length > 0;
+const objectParser = (value, props, config, breakpoints) => {
+    const styles = {};
+    const { styleFn, prop } = config;
+    const { _, ...rest } = value;
+    // the keyof 'base' is base styles
+    if (_)
+        Object.assign(styles, styleFn(_, prop, props));
+    // Map over remaining keys and merge the corresponding breakpoint styles
+    // for that property.
+    Object.keys(breakpoints).forEach((breakpointKey) => {
+        const bpStyles = rest[breakpointKey];
+        if (typeof bpStyles === 'undefined')
+            return;
+        Object.assign(styles, {
+            [breakpoints[breakpointKey]]: styleFn(bpStyles, prop, props),
+        });
+    });
+    return styles;
+};
+const arrayParser = (value, props, config, breakpoints) => {
+    const styles = {};
+    const { styleFn, prop } = config;
+    const [_, ...rest] = value;
+    // the first index is base styles
+    if (_)
+        Object.assign(styles, styleFn(_, prop, props));
+    // Map over each value in the array and merge the corresponding breakpoint styles
+    // for that property.
+    rest.forEach((val, i) => {
+        const breakpointKey = breakpoints[i];
+        if (!breakpointKey || typeof val === 'undefined')
+            return;
+        Object.assign(styles, {
+            [breakpointKey]: styleFn(val, prop, props),
+        });
+    });
+    return styles;
+};
+const orderBreakpoints = (styles, breakpoints) => {
+    const orderedStyles = omit(styles, breakpoints);
+    breakpoints.forEach((bp) => {
+        if (styles[bp]) {
+            orderedStyles[bp] = styles[bp];
+        }
+    });
+    return orderedStyles;
+};
+
+const renderPropValue = (styles, prop, props, property, ctx) => {
+    const value = get(props, prop);
+    switch (typeof value) {
+        case 'string':
+        case 'number':
+        case 'function':
+            return Object.assign(styles, property.styleFn(value, prop, props));
+        // handle any props configured with the responsive notation
+        case 'object':
+            if (!ctx.mediaQueries) {
+                return;
+            }
+            // If it is an array the order of values is smallest to largest: [_, xs, ...]
+            if (isMediaArray(value)) {
+                return merge(styles, arrayParser(value, props, property, ctx.mediaQueries.array));
+            }
+            // Check to see if value is an object matching the responsive syntax and generate the styles.
+            if (value && isMediaMap(value)) {
+                return merge(styles, objectParser(value, props, property, ctx.mediaQueries.map));
+            }
+    }
+};
+function createParser(config) {
+    const propNames = orderPropNames(config);
+    const ctx = {
+        mediaQueries: null,
+    };
+    const parser = (props, isCss = false) => {
+        const styles = {};
+        const { theme } = props;
+        // Attempt to cache the breakpoints if we have not yet or if theme has become available.
+        if (ctx.mediaQueries === null) {
+            // Save the breakpoints if we can
+            ctx.mediaQueries = createMediaQueries(theme?.breakpoints ?? compatTheme.breakpoints);
+        }
+        if (!isCss) {
+            // Loops over all prop names on the configured config to check for configured styles
+            propNames.forEach((prop) => {
+                const property = config[prop];
+                renderPropValue(styles, prop, props, property, ctx);
+            });
+        }
+        else {
+            // Loops over all prop names on the configured config to check for configured styles
+            Object.keys(props).forEach((prop) => {
+                const property = config[prop];
+                if (property) {
+                    renderPropValue(styles, prop, props, property, ctx);
+                }
+                else if (prop !== 'theme') {
+                    Object.assign(styles, { [prop]: get(props, prop) });
+                }
+            });
+        }
+        if (ctx.mediaQueries !== null)
+            return orderBreakpoints(styles, ctx.mediaQueries.array);
+        return styles;
+    };
+    // return the parser function with the resulting meta information for further composition
+    return Object.assign(parser, { propNames, config });
+}
+
+function createTransform(prop, config) {
+    const { transform = identity, property, properties = [property], scale, variable, } = config;
+    const alwaysTransform = scale === undefined || isArray(scale);
+    return {
+        ...config,
+        prop,
+        styleFn: (value, prop, props) => {
+            const styles = {};
+            if (isUndefined(value)) {
+                return styles;
+            }
+            let useTransform = false;
+            let intermediateValue;
+            let scaleValue;
+            switch (typeof value) {
+                case 'number':
+                case 'string':
+                    scaleValue = lookupScaleValue(value, scale, props.theme);
+                    useTransform = scaleValue !== undefined || alwaysTransform;
+                    intermediateValue = scaleValue ?? value;
+                    break;
+                case 'function':
+                    if (props.theme) {
+                        intermediateValue = value(props.theme);
+                    }
+                    break;
+                default:
+                    return styles;
+            }
+            // for each property look up the scale value from theme if passed and apply any
+            // final transforms to the value
+            properties.forEach((property) => {
+                let styleValue = intermediateValue;
+                if (useTransform && !isUndefined(styleValue)) {
+                    styleValue = transform(styleValue, property, props);
+                }
+                switch (typeof styleValue) {
+                    case 'number':
+                    case 'string':
+                        return (styles[property] = styleValue);
+                    case 'object':
+                        return Object.assign(styles, styleValue);
+                }
+            });
+            if (variable) {
+                let styleValue = intermediateValue;
+                if (useTransform && !isUndefined(styleValue)) {
+                    styleValue = transform(styleValue, property, props);
+                }
+                if (styleValue && typeof styleValue !== 'object') {
+                    styles[variable] = styleValue;
+                }
+            }
+            // return the resulting styles object
+            return styles;
+        },
+    };
+}
+
+function create(config) {
+    // Create a transform function for each of the props
+    const transforms = {};
+    for (const prop in config) {
+        if (typeof prop === 'string') {
+            transforms[prop] = createTransform(prop, config[prop]);
+        }
+    }
+    // Create a parser that handles all the props within the config
+    return createParser(transforms);
+}
+
+function createCss(config) {
+    const parser = create(config);
+    const filteredProps = parser.propNames;
+    return (cssProps) => {
+        let cache;
+        const allKeys = Object.keys(cssProps);
+        /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
+        const selectors = allKeys.filter((key) => !filteredProps.includes(key) && isObject(cssProps[key]));
+        /** Static CSS Properties get extracted if they match neither syntax */
+        const staticCss = getStylePropNames(cssProps, [
+            'theme',
+            ...selectors,
+            ...filteredProps,
+        ]);
+        return ({ theme }) => {
+            if (cache)
+                return cache;
+            const css = parser({ ...cssProps, theme });
+            selectors.forEach((selector) => {
+                const selectorConfig = cssProps[selector] ?? {};
+                css[selector] = {
+                    ...getStylePropNames(selectorConfig, filteredProps),
+                    ...parser({ ...selectorConfig, theme }),
+                };
+            });
+            /** Merge the static and generated css and save it to the cache */
+            cache = {
+                ...staticCss,
+                ...css,
+            };
+            return cache;
+        };
+    };
+}
+
+function createVariant(config) {
+    const css = createCss(config);
+    return ({ prop = 'variant', defaultVariant, base = {}, variants }) => {
+        const baseFn = css(base);
+        const variantFns = {};
+        Object.keys(variants).forEach((key) => {
+            const variantKey = key;
+            const cssProps = variants[variantKey];
+            variantFns[variantKey] = css(cssProps);
+        });
+        return (props) => {
+            const { [prop]: selected = defaultVariant } = props;
+            const styles = {};
+            if (!selected)
+                return styles;
+            return merge(styles, baseFn(props), variantFns?.[selected]?.(props));
+        };
+    };
+}
+
+function compose(...parsers) {
+    return createParser(parsers.reduce((carry, parser) => ({ ...carry, ...parser.config }), {}));
+}
+
+function createStates(config) {
+    const css = createCss(config);
+    return (states) => {
+        const orderedStates = Object.keys(states);
+        const stateFns = {};
+        orderedStates.forEach((key) => {
+            const stateKey = key;
+            const cssProps = states[stateKey];
+            stateFns[stateKey] = css(cssProps);
+        });
+        return (props) => {
+            const styles = {};
+            orderedStates.forEach((state) => {
+                merge(styles, props[state] && stateFns[state](props));
+            });
+            return styles;
+        };
+    };
+}
+
+const animusProps = {
+    compose,
+    create,
+    createCss,
+    createVariant,
+    createStates,
+};
+
+const animus = config.build();
+
+export { AnimusConfig, animus, animusProps, borderShorthand, compatTheme, config, createAnimus, createScale, gridItem, gridItemRatio, numberToPx, numberToTemplate, parseGridRatio, percentageOrAbsolute, repeatGridItem, size };