indoqa-react-fela/dist/indoqa-react-fela.es.js

This project components to use [Fela](https://fela.js.org) in React projects:

import { createRenderer } from 'fela';
import { FelaComponent, createComponentWithProxy, RendererProvider, RendererContext } from 'react-fela';
import React__default, { createElement, Component, createContext } from 'react';

var typeScaleFactor = 1.333;
var typeScaleBase = 14;
var standardFont = 'sans-serif';
var typeScale = function (level) { return typeScaleBase + (typeScaleFactor * level); };
var baseTheme = {
    fontSizes: {
        text: typeScale(0),
        big: typeScale(1),
        veryBig: typeScale(2),
        small: typeScale(-1),
        verySmall: typeScale(-2),
    },
    fonts: {
        text: standardFont,
    },
    colors: {
        text: '#000000',
    },
    spacing: {
        space0: 0,
        space1: '0.5rem',
        space2: '1rem',
        space3: '2rem',
        space4: '4rem',
    },
    layout: {},
};

var isMergeableObject = function isMergeableObject(value) {
	return isNonNullObject(value)
		&& !isSpecial(value)
};
function isNonNullObject(value) {
	return !!value && typeof value === 'object'
}
function isSpecial(value) {
	var stringValue = Object.prototype.toString.call(value);
	return stringValue === '[object RegExp]'
		|| stringValue === '[object Date]'
		|| isReactElement(value)
}
var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
function isReactElement(value) {
	return value.$$typeof === REACT_ELEMENT_TYPE
}
function emptyTarget(val) {
	return Array.isArray(val) ? [] : {}
}
function cloneUnlessOtherwiseSpecified(value, options) {
	return (options.clone !== false && options.isMergeableObject(value))
		? deepmerge(emptyTarget(value), value, options)
		: value
}
function defaultArrayMerge(target, source, options) {
	return target.concat(source).map(function(element) {
		return cloneUnlessOtherwiseSpecified(element, options)
	})
}
function mergeObject(target, source, options) {
	var destination = {};
	if (options.isMergeableObject(target)) {
		Object.keys(target).forEach(function(key) {
			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
		});
	}
	Object.keys(source).forEach(function(key) {
		if (!options.isMergeableObject(source[key]) || !target[key]) {
			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
		} else {
			destination[key] = deepmerge(target[key], source[key], options);
		}
	});
	return destination
}
function deepmerge(target, source, options) {
	options = options || {};
	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
	options.isMergeableObject = options.isMergeableObject || isMergeableObject;
	var sourceIsArray = Array.isArray(source);
	var targetIsArray = Array.isArray(target);
	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
	if (!sourceAndTargetTypesMatch) {
		return cloneUnlessOtherwiseSpecified(source, options)
	} else if (sourceIsArray) {
		return options.arrayMerge(target, source, options)
	} else {
		return mergeObject(target, source, options)
	}
}
deepmerge.all = function deepmergeAll(array, options) {
	if (!Array.isArray(array)) {
		throw new Error('first argument should be an array')
	}
	return array.reduce(function(prev, next) {
		return deepmerge(prev, next, options)
	}, {})
};
var deepmerge_1 = deepmerge;

function buildTheme(customTheme) {
    return deepmerge_1(baseTheme, customTheme);
}

var resetCssStyles = "\n  /* http://meyerweb.com/eric/tools/css/reset/ \n     v2.0 | 20110126\n     License: none (public domain)\n  */\n\n  html, body, div, span, applet, object, iframe,\n  h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n  a, abbr, acronym, address, big, cite, code,\n  del, dfn, em, img, ins, kbd, q, s, samp,\n  small, strike, strong, sub, sup, tt, var,\n  b, u, i, center,\n  dl, dt, dd, ol, ul, li,\n  fieldset, form, label, legend,\n  table, caption, tbody, tfoot, thead, tr, th, td,\n  article, aside, canvas, details, embed, \n  figure, figcaption, footer, header, hgroup, \n  menu, nav, output, ruby, section, summary,\n  time, mark, audio, video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-size: 100%;\n    font: inherit;\n    vertical-align: baseline;\n  }\n  /* HTML5 display-role reset for older browsers */\n  article, aside, details, figcaption, figure, \n  footer, header, hgroup, menu, nav, section {\n    display: block;\n  }\n  body {\n    line-height: 1;\n  }\n  ol, ul {\n    list-style: none;\n  }\n  blockquote, q {\n    quotes: none;\n  }\n  blockquote:before, blockquote:after,\n  q:before, q:after {\n    content: '';\n    content: none;\n  }\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n";

var DEFAULT_CONFIG = {
    plugins: [],
};
var createRenderer$1 = function (_a) {
    var _b = _a.init, init = _b === void 0 ? function () { return ({}); } : _b, _c = _a.config, config = _c === void 0 ? DEFAULT_CONFIG : _c, _d = _a.resetCss, resetCss = _d === void 0 ? true : _d;
    var felaRenderer = createRenderer(config);
    if (resetCss) {
        felaRenderer.renderStatic(resetCssStyles);
    }
    init(felaRenderer);
    return felaRenderer;
};

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var extendStatics = function(d, b) {
    extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return extendStatics(d, b);
};
function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
    __assign = Object.assign || function __assign(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
function __rest(s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
}

var THEME_NOT_AVAILABLE_ERR_MSG = 'There is no theme available or one of its properties is missing. ' +
    'Check if the Fela ThemeProvider is configured correctly.';
var createBoxModelCSSProps = function (_a) {
    var inline = _a.inline, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight;
    return ({
        display: (inline) ? 'inline' : 'block',
        width: (fullWidth) ? '100%' : width || 'auto',
        height: (fullHeight) ? '100%' : height || 'auto',
    });
};
var createFlexChildCSSProps = function (_a) {
    var grow = _a.grow, shrink = _a.shrink, basis = _a.basis, order = _a.order, align = _a.align;
    var styles = {
        flexGrow: grow || 0,
        flexShrink: shrink || 1,
        flexBasis: basis || 'auto',
    };
    if (order) {
        Object.assign(styles, { order: order });
    }
    if (align) {
        Object.assign(styles, { alignSelf: align });
    }
    return styles;
};
var createFontCSSProps = function (_a) {
    var theme = _a.theme, font = _a.font, fontSize = _a.fontSize, color = _a.color, bold = _a.bold, ellipsis = _a.ellipsis;
    if (theme === undefined || theme.fonts === undefined || theme.fontSizes === undefined || theme.colors === undefined) {
        throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
    }
    var styles = {
        fontFamily: (font) ? theme.fonts[font] : theme.fonts.text,
        fontSize: (fontSize) ? theme.fontSizes[fontSize] : theme.fontSizes.text,
        color: (color) ? theme.colors[color] : theme.colors.text,
        fontWeight: (bold) ? 700 : 400,
    };
    if (ellipsis) {
        var ellipsisStyles = {
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
        };
        Object.assign(styles, ellipsisStyles);
    }
    return styles;
};
var createMarginCSSProps = function (_a) {
    var theme = _a.theme, m = _a.m, mt = _a.mt, mb = _a.mb, ml = _a.ml, mr = _a.mr, mx = _a.mx, my = _a.my;
    if (theme === undefined) {
        throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
    }
    var styles = {};
    if (m) {
        Object.assign(styles, { margin: spacing(theme, m) });
    }
    if (mx) {
        Object.assign(styles, { marginLeft: spacing(theme, mx) });
        Object.assign(styles, { marginRight: spacing(theme, mx) });
    }
    if (my) {
        Object.assign(styles, { marginTop: spacing(theme, my) });
        Object.assign(styles, { marginBottom: spacing(theme, my) });
    }
    if (mt) {
        Object.assign(styles, { marginTop: spacing(theme, mt) });
    }
    if (mb) {
        Object.assign(styles, { marginBottom: spacing(theme, mb) });
    }
    if (ml) {
        Object.assign(styles, { marginLeft: spacing(theme, ml) });
    }
    if (mr) {
        Object.assign(styles, { marginRight: spacing(theme, mr) });
    }
    return styles;
};
var createPaddingCSSProps = function (_a) {
    var theme = _a.theme, p = _a.p, pt = _a.pt, pb = _a.pb, pl = _a.pl, pr = _a.pr, px = _a.px, py = _a.py;
    if (theme === undefined) {
        throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
    }
    var styles = {};
    if (p) {
        Object.assign(styles, { padding: spacing(theme, p) });
    }
    if (px) {
        Object.assign(styles, { paddingLeft: spacing(theme, px) });
        Object.assign(styles, { paddingRight: spacing(theme, px) });
    }
    if (py) {
        Object.assign(styles, { paddingTop: spacing(theme, py) });
        Object.assign(styles, { paddingBottom: spacing(theme, py) });
    }
    if (pt) {
        Object.assign(styles, { paddingTop: spacing(theme, pt) });
    }
    if (pb) {
        Object.assign(styles, { paddingBottom: spacing(theme, pb) });
    }
    if (pl) {
        Object.assign(styles, { paddingLeft: spacing(theme, pl) });
    }
    if (pr) {
        Object.assign(styles, { paddingRight: spacing(theme, pr) });
    }
    return styles;
};
var createStylingCSSProps = function (_a) {
    var theme = _a.theme, bg = _a.bg;
    if (theme === undefined || theme.colors === undefined) {
        throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
    }
    if (bg === undefined) {
        return {};
    }
    if (bg in theme.colors) {
        return ({
            backgroundColor: (bg) ? theme.colors[bg] : 'transparent',
        });
    }
    if (process.env.NODE_ENV !== 'production') {
        console.warn("The bg color " + bg + " is not available in theme.colors.");
    }
    return {};
};
var knownProps = [
    'inline', 'width', 'height', 'fullWidth', 'fullHeight',
    'grow', 'shrink', 'basis', 'order', 'align',
    'direction', 'nowrap', 'center', 'justifyContent', 'alignItems', 'stretch',
    'font', 'fontSize', 'color', 'bold', 'ellipsis',
    'm', 'mt', 'mb', 'ml', 'mr', 'mx', 'my',
    'p', 'pt', 'pb', 'pl', 'pr', 'px', 'py',
    'bg',
    'theme',
];
function filterProps(props) {
    return Object
        .keys(props)
        .filter(function (key) { return !knownProps.includes(key); })
        .reduce(function (obj, key) {
        obj[key] = props[key];
        return obj;
    }, {});
}
function mergeThemedStyles(componentStyle, passedStyle) {
    if (!passedStyle) {
        return componentStyle;
    }
    if (passedStyle instanceof Array) {
        return [componentStyle].concat(passedStyle);
    }
    return [componentStyle, passedStyle];
}
var spacing = function (theme, propValue) {
    if (!propValue) {
        throw new Error('A spacing value must not be null.');
    }
    if (theme === undefined || theme.spacing === undefined) {
        throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
    }
    switch (propValue) {
        case 1:
            return theme.spacing.space1;
        case 2:
            return theme.spacing.space2;
        case 3:
            return theme.spacing.space3;
        case 4:
            return theme.spacing.space4;
        default:
            return theme.spacing.space0;
    }
};

var createBoxCSSStyles = function (props) { return (__assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createStylingCSSProps(props), createFontCSSProps(props))); };
var themedBoxStyles = function (props) { return (__assign({}, createBoxCSSStyles(props))); };
var Box = (function (_super) {
    __extends(Box, _super);
    function Box() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Box.prototype.render = function () {
        var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
        var styles = mergeThemedStyles(themedBoxStyles, style);
        return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
            var className = _a.className;
            return (createElement("div", __assign({ className: className }, filterProps(rest)), children));
        }));
    };
    return Box;
}(Component));

var extendBox = function (styles) { return createComponentWithProxy(styles, Box); };

var IndoqaFela = (function (_super) {
    __extends(IndoqaFela, _super);
    function IndoqaFela() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    IndoqaFela.prototype.render = function () {
        return (React__default.createElement(RendererProvider, { renderer: this.props.renderer }, this.props.children));
    };
    return IndoqaFela;
}(React__default.Component));

function withRenderer(Component$$1) {
    return function BoundComponent(props) {
        return (createElement(RendererContext.Consumer, null, function (value) { return createElement(Component$$1, __assign({ renderer: value }, props)); }));
    };
}

var align = function (center, stretch, value) {
    if (center) {
        return 'center';
    }
    if (value) {
        return value;
    }
    return (stretch) ? 'stretch' : 'flex-start';
};
var createFlexContainerCSSStyle = function (_a) {
    var inline = _a.inline, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, nowrap = _a.nowrap, center = _a.center, justifyContent = _a.justifyContent, alignItems = _a.alignItems, stretch = _a.stretch;
    return ({
        display: (inline) ? 'inline-flex' : 'flex',
        flexDirection: direction,
        flexWrap: (nowrap) ? 'nowrap' : 'wrap',
        justifyContent: align(center, stretch, justifyContent),
        alignItems: align(center, stretch, alignItems),
    });
};
var themedFlexStyles = function (props) { return (__assign({}, createBoxCSSStyles(props), createFlexContainerCSSStyle(props))); };
var Flex = (function (_super) {
    __extends(Flex, _super);
    function Flex() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Flex.prototype.render = function () {
        var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
        var styles = mergeThemedStyles(themedFlexStyles, style);
        return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
            var className = _a.className;
            return (createElement("div", __assign({ className: className }, filterProps(rest)), children));
        }));
    };
    return Flex;
}(Component));

var themedTextStyle = function (props) { return (__assign({ display: 'inline-block' }, createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createFontCSSProps(props))); };
var Text = (function (_super) {
    __extends(Text, _super);
    function Text() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Text.prototype.render = function () {
        var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
        var styles = mergeThemedStyles(themedTextStyle, style);
        return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
            var className = _a.className;
            return (createElement("span", __assign({ className: className }, filterProps(rest)), children));
        }));
    };
    return Text;
}(Component));

var GridContext = createContext({
    spacing: 0,
});

var GridContainer = (function (_super) {
    __extends(GridContainer, _super);
    function GridContainer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    GridContainer.prototype.render = function () {
        var gridStyle = function (_a) {
            var maxWidth = _a.maxWidth, center = _a.center, otherProps = __rest(_a, ["maxWidth", "center"]);
            return (__assign({ margin: center ? 'auto' : 0 }, createBoxModelCSSProps(otherProps), createMarginCSSProps(otherProps), createPaddingCSSProps(otherProps), createFlexChildCSSProps(otherProps), createStylingCSSProps(otherProps), { boxSizing: 'border-box', maxWidth: maxWidth }));
        };
        var _a = this.props, children = _a.children, style = _a.style, center = _a.center, otherProps = __rest(_a, ["children", "style", "center"]);
        if (process.env.NODE_ENV !== 'production') {
            if (center && (otherProps.mx || otherProps.ml || otherProps.mr)) {
                console.warn('The Grid property center is set to true and one of the properties mx, ml or mr is set. ' +
                    'This might lead to unexpected behaviour.');
            }
        }
        var styles = mergeThemedStyles(gridStyle, style);
        return (createElement(FelaComponent, __assign({ style: styles, center: center }, otherProps), children));
    };
    return GridContainer;
}(Component));
var Grid = (function (_super) {
    __extends(Grid, _super);
    function Grid() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Grid.prototype.render = function () {
        var _a = this.props, spacing = _a.spacing, otherProps = __rest(_a, ["spacing"]);
        return (createElement(GridContainer, __assign({}, otherProps),
            createElement(GridContext.Provider, { value: { spacing: spacing } }, this.props.children)));
    };
    Grid.defaultProps = {
        maxWidth: 'auto',
        center: false,
        spacing: 0,
    };
    return Grid;
}(Component));

var RowContainer = (function (_super) {
    __extends(RowContainer, _super);
    function RowContainer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    RowContainer.prototype.render = function () {
        var rowStyle = function (_a) {
            var style = _a.style, minHeight = _a.minHeight, spacing = _a.spacing, height = _a.height, otherProps = __rest(_a, ["style", "minHeight", "spacing", "height"]);
            return (__assign({}, createPaddingCSSProps(otherProps), createStylingCSSProps(otherProps), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', alignItems: 'stretch', width: '100%', minHeight: minHeight, ':first-child': {
                    marginTop: "-" + spacing,
                }, '@media (min-width: 768px)': {
                    flexWrap: 'nowrap',
                    height: height,
                } }));
        };
        var _a = this.props, children = _a.children, style = _a.style, otherProps = __rest(_a, ["children", "style"]);
        var styles = mergeThemedStyles(rowStyle, style);
        return (createElement(FelaComponent, __assign({ style: styles }, otherProps), children));
    };
    return RowContainer;
}(Component));
var Row = (function (_super) {
    __extends(Row, _super);
    function Row() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Row.prototype.render = function () {
        var _this = this;
        return (createElement(GridContext.Consumer, null, function (_a) {
            var spacing = _a.spacing;
            return (createElement(RowContainer, __assign({ spacing: spacing }, _this.props), _this.props.children));
        }));
    };
    Row.defaultProps = {
        height: 'auto',
        minHeight: 'auto',
    };
    return Row;
}(Component));

var DEFAULT_WIDTH = '0%';
var isDefaultWidth = function (width) {
    return !width || width === DEFAULT_WIDTH || width === 0 || width === '0';
};
var addUnitIfNeeded = function (value, propertyUnit) {
    var valueType = typeof value;
    if ((valueType === 'number' || (valueType === 'string' && !isNaN(value))) && value !== 0) {
        return "" + value + propertyUnit;
    }
    return "" + value;
};
var calcBasis = function (spacing, size, width) {
    if (width && !isDefaultWidth(width)) {
        return addUnitIfNeeded(width, 'px');
    }
    if (!size) {
        return 'auto';
    }
    return "calc(" + addUnitIfNeeded(spacing, 'px') + " * " + (size - 1) + ")";
};
var PanelContainer = (function (_super) {
    __extends(PanelContainer, _super);
    function PanelContainer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PanelContainer.prototype.render = function () {
        var panelStyle = function (_a) {
            var width = _a.width, size = _a.size, spacing = _a.spacing, otherProps = __rest(_a, ["width", "size", "spacing"]);
            return (__assign({}, createPaddingCSSProps(otherProps), createFontCSSProps(otherProps), createStylingCSSProps(otherProps), createFlexContainerCSSStyle(otherProps), { flexGrow: 1, flexShrink: 0, width: '100%', height: 'auto', overflow: 'hidden', marginTop: spacing, '@media (min-width: 768px)': {
                    width: 'auto',
                    flex: (isDefaultWidth(width) ? size : 0) + " 0 " + calcBasis(spacing, size, width),
                    ':not(:last-child)': {
                        paddingRight: spacing,
                    },
                } }));
        };
        var _a = this.props, style = _a.style, children = _a.children, otherProps = __rest(_a, ["style", "children"]);
        var styles = mergeThemedStyles(panelStyle, style);
        return (createElement(FelaComponent, __assign({ style: styles }, otherProps), children));
    };
    return PanelContainer;
}(Component));
var Panel = (function (_super) {
    __extends(Panel, _super);
    function Panel() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Panel.prototype.render = function () {
        var _this = this;
        return (createElement(GridContext.Consumer, null, function (_a) {
            var spacing = _a.spacing;
            return (createElement(PanelContainer, __assign({ spacing: spacing }, _this.props), _this.props.children));
        }));
    };
    Panel.defaultProps = {
        size: 1,
        width: DEFAULT_WIDTH,
    };
    return Panel;
}(Component));

export { typeScale, baseTheme, buildTheme, createRenderer$1 as createRenderer, extendBox, IndoqaFela, withRenderer, createBoxModelCSSProps, createFlexChildCSSProps, createFontCSSProps, createMarginCSSProps, createPaddingCSSProps, createStylingCSSProps, filterProps, mergeThemedStyles, createBoxCSSStyles, Box, createFlexContainerCSSStyle, Flex, Text, Grid, Row, Panel };