New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

glamorous

Package Overview
Dependencies
Maintainers
1
Versions
96
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

glamorous - npm Package Compare versions

Comparing version 4.0.0-beta.1 to 4.0.0

126

dist/glamorous.cjs.js

@@ -494,3 +494,3 @@ 'use strict';

// subscribe to future theme changes
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setTheme);
}

@@ -502,3 +502,3 @@ }

// cleanup subscription
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -516,3 +516,3 @@ }, {

// eslint-disable-next-line babel/new-cap
return ComponentToTheme(_extends({}, this.props, this.state), this.context);
return ComponentToTheme.call(this, _extends({}, this.props, this.state), this.context);
}

@@ -556,22 +556,37 @@ }

var listeners = {};
var id = 0;
var id = 1;
var _state = initialState;
var getState = function () { return _state; };
function getState () {
return _state
}
var setState = function (state) {
function setState (state) {
_state = state;
Object.keys(listeners).forEach(function (id) { return listeners[id](_state); });
};
var keys = Object.keys(listeners);
var i = 0;
var len = keys.length;
for (; i < len; i++) {
// if a listener gets unsubscribed during setState we just skip it
if (listeners[keys[i]]) { listeners[keys[i]](state); }
}
}
var subscribe = function (listener) {
// subscribe to changes and return the subscriptionId
function subscribe (listener) {
if (typeof listener !== 'function') {
throw new Error('listener must be a function.')
}
var currentId = id;
listeners[currentId] = listener;
id += 1;
return function unsubscribe () {
delete listeners[currentId];
}
};
return currentId
}
return { getState: getState, setState: setState, subscribe: subscribe }
// remove subscription by removing the listener function
function unsubscribe (id) {
listeners[id] = undefined;
}
return { getState: getState, setState: setState, subscribe: subscribe, unsubscribe: unsubscribe }
}

@@ -626,3 +641,3 @@

if (this.context[CHANNEL]) {
this.unsubscribe = this.context[CHANNEL].subscribe(this.setOuterTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setOuterTheme);
}

@@ -649,3 +664,3 @@ }

value: function componentWillUnmount() {
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -821,6 +836,10 @@ }, {

*/
var GlamorousComponent = withTheme(function (props, context) {
var GlamorousComponent = withTheme(function GlamorousInnerComponent(props, context) {
props = getPropsToApply(GlamorousComponent.propsToApply, {}, props, context);
var updateClassName = shouldUpdate(props, context);
var updateClassName = shouldUpdate(props, context, this.previous);
if (shouldClassNameUpdate) {
this.previous = { props: props, context: context };
}
var _splitProps = splitProps(props, GlamorousComponent),

@@ -834,3 +853,3 @@ toForward = _splitProps.toForward,

GlamorousComponent.className = updateClassName ? getGlamorClassName$1({
this.className = updateClassName ? getGlamorClassName$1({
styles: GlamorousComponent.styles,

@@ -842,3 +861,3 @@ props: props,

displayName: GlamorousComponent.displayName
}) : GlamorousComponent.className;
}) : this.className;

@@ -848,3 +867,3 @@ return React__default.createElement(GlamorousComponent.comp, _extends({

}, toForward, {
className: GlamorousComponent.className
className: this.className
}));

@@ -876,3 +895,3 @@ }, { noWarn: true, createElement: false });

function shouldUpdate(props, context) {
function shouldUpdate(props, context, previous) {
// exiting early so components which do not use this

@@ -885,8 +904,8 @@ // optimization are not penalized by hanging onto

var update = true;
if (GlamorousComponent.previous) {
if (!shouldClassNameUpdate(props, GlamorousComponent.previous.props, context, GlamorousComponent.previous.context)) {
if (previous) {
if (!shouldClassNameUpdate(previous.props, props, previous.context, context)) {
update = false;
}
}
GlamorousComponent.previous = { props: props, context: context };
return update;

@@ -905,3 +924,2 @@ }

isGlamorousComponent: true,
previous: null,
propsAreCssOverrides: propsAreCssOverrides,

@@ -988,3 +1006,3 @@ withProps: withProps

var index$1 = function memoize (fn, options) {
function memoize (fn, options) {
var cache = options && options.cache

@@ -1006,3 +1024,3 @@ ? options.cache

})
};
}

@@ -1042,13 +1060,45 @@ //

function assemble (fn, context, strategy, cache, serialize) {
return strategy.bind(
context,
fn,
cache,
serialize
)
}
function strategyDefault (fn, options) {
var memoized = fn.length === 1 ? monadic : variadic;
var strategy = fn.length === 1 ? monadic : variadic;
memoized = memoized.bind(
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
)
}
function strategyVariadic (fn, options) {
var strategy = variadic;
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
);
)
}
return memoized
function strategyMonadic (fn, options) {
var strategy = monadic;
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
)
}

@@ -1090,2 +1140,14 @@

//
// API
//
var index$1 = memoize;
var strategies = {
variadic: strategyVariadic,
monadic: strategyMonadic
};
index$1.strategies = strategies;
function unwrapExports (x) {

@@ -1092,0 +1154,0 @@ return x && x.__esModule ? x['default'] : x;

29

dist/glamorous.cjs.tiny.js

@@ -233,3 +233,3 @@ 'use strict';

// subscribe to future theme changes
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setTheme);
}

@@ -241,3 +241,3 @@ }

// cleanup subscription
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -255,3 +255,3 @@ }, {

// eslint-disable-next-line babel/new-cap
return ComponentToTheme(_extends({}, this.props, this.state), this.context);
return ComponentToTheme.call(this, _extends({}, this.props, this.state), this.context);
}

@@ -444,6 +444,10 @@ }

*/
var GlamorousComponent = withTheme(function (props, context) {
var GlamorousComponent = withTheme(function GlamorousInnerComponent(props, context) {
props = getPropsToApply(GlamorousComponent.propsToApply, {}, props, context);
var updateClassName = shouldUpdate(props, context);
var updateClassName = shouldUpdate(props, context, this.previous);
if (shouldClassNameUpdate) {
this.previous = { props: props, context: context };
}
var _splitProps = splitProps(props, GlamorousComponent),

@@ -457,3 +461,3 @@ toForward = _splitProps.toForward,

GlamorousComponent.className = updateClassName ? getGlamorClassName$1({
this.className = updateClassName ? getGlamorClassName$1({
styles: GlamorousComponent.styles,

@@ -465,3 +469,3 @@ props: props,

displayName: GlamorousComponent.displayName
}) : GlamorousComponent.className;
}) : this.className;

@@ -471,3 +475,3 @@ return React__default.createElement(GlamorousComponent.comp, _extends({

}, toForward, {
className: GlamorousComponent.className
className: this.className
}));

@@ -499,3 +503,3 @@ }, { noWarn: true, createElement: false });

function shouldUpdate(props, context) {
function shouldUpdate(props, context, previous) {
// exiting early so components which do not use this

@@ -508,8 +512,8 @@ // optimization are not penalized by hanging onto

var update = true;
if (GlamorousComponent.previous) {
if (!shouldClassNameUpdate(props, GlamorousComponent.previous.props, context, GlamorousComponent.previous.context)) {
if (previous) {
if (!shouldClassNameUpdate(previous.props, props, previous.context, context)) {
update = false;
}
}
GlamorousComponent.previous = { props: props, context: context };
return update;

@@ -528,3 +532,2 @@ }

isGlamorousComponent: true,
previous: null,
propsAreCssOverrides: propsAreCssOverrides,

@@ -531,0 +534,0 @@ withProps: withProps

126

dist/glamorous.es.js

@@ -489,3 +489,3 @@ import React, { Component } from 'react';

// subscribe to future theme changes
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setTheme);
}

@@ -497,3 +497,3 @@ }

// cleanup subscription
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -511,3 +511,3 @@ }, {

// eslint-disable-next-line babel/new-cap
return ComponentToTheme(_extends({}, this.props, this.state), this.context);
return ComponentToTheme.call(this, _extends({}, this.props, this.state), this.context);
}

@@ -551,22 +551,37 @@ }

var listeners = {};
var id = 0;
var id = 1;
var _state = initialState;
var getState = function () { return _state; };
function getState () {
return _state
}
var setState = function (state) {
function setState (state) {
_state = state;
Object.keys(listeners).forEach(function (id) { return listeners[id](_state); });
};
var keys = Object.keys(listeners);
var i = 0;
var len = keys.length;
for (; i < len; i++) {
// if a listener gets unsubscribed during setState we just skip it
if (listeners[keys[i]]) { listeners[keys[i]](state); }
}
}
var subscribe = function (listener) {
// subscribe to changes and return the subscriptionId
function subscribe (listener) {
if (typeof listener !== 'function') {
throw new Error('listener must be a function.')
}
var currentId = id;
listeners[currentId] = listener;
id += 1;
return function unsubscribe () {
delete listeners[currentId];
}
};
return currentId
}
return { getState: getState, setState: setState, subscribe: subscribe }
// remove subscription by removing the listener function
function unsubscribe (id) {
listeners[id] = undefined;
}
return { getState: getState, setState: setState, subscribe: subscribe, unsubscribe: unsubscribe }
}

@@ -621,3 +636,3 @@

if (this.context[CHANNEL]) {
this.unsubscribe = this.context[CHANNEL].subscribe(this.setOuterTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setOuterTheme);
}

@@ -644,3 +659,3 @@ }

value: function componentWillUnmount() {
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -816,6 +831,10 @@ }, {

*/
var GlamorousComponent = withTheme(function (props, context) {
var GlamorousComponent = withTheme(function GlamorousInnerComponent(props, context) {
props = getPropsToApply(GlamorousComponent.propsToApply, {}, props, context);
var updateClassName = shouldUpdate(props, context);
var updateClassName = shouldUpdate(props, context, this.previous);
if (shouldClassNameUpdate) {
this.previous = { props: props, context: context };
}
var _splitProps = splitProps(props, GlamorousComponent),

@@ -829,3 +848,3 @@ toForward = _splitProps.toForward,

GlamorousComponent.className = updateClassName ? getGlamorClassName$1({
this.className = updateClassName ? getGlamorClassName$1({
styles: GlamorousComponent.styles,

@@ -837,3 +856,3 @@ props: props,

displayName: GlamorousComponent.displayName
}) : GlamorousComponent.className;
}) : this.className;

@@ -843,3 +862,3 @@ return React.createElement(GlamorousComponent.comp, _extends({

}, toForward, {
className: GlamorousComponent.className
className: this.className
}));

@@ -871,3 +890,3 @@ }, { noWarn: true, createElement: false });

function shouldUpdate(props, context) {
function shouldUpdate(props, context, previous) {
// exiting early so components which do not use this

@@ -880,8 +899,8 @@ // optimization are not penalized by hanging onto

var update = true;
if (GlamorousComponent.previous) {
if (!shouldClassNameUpdate(props, GlamorousComponent.previous.props, context, GlamorousComponent.previous.context)) {
if (previous) {
if (!shouldClassNameUpdate(previous.props, props, previous.context, context)) {
update = false;
}
}
GlamorousComponent.previous = { props: props, context: context };
return update;

@@ -900,3 +919,2 @@ }

isGlamorousComponent: true,
previous: null,
propsAreCssOverrides: propsAreCssOverrides,

@@ -983,3 +1001,3 @@ withProps: withProps

var index$1 = function memoize (fn, options) {
function memoize (fn, options) {
var cache = options && options.cache

@@ -1001,3 +1019,3 @@ ? options.cache

})
};
}

@@ -1037,13 +1055,45 @@ //

function assemble (fn, context, strategy, cache, serialize) {
return strategy.bind(
context,
fn,
cache,
serialize
)
}
function strategyDefault (fn, options) {
var memoized = fn.length === 1 ? monadic : variadic;
var strategy = fn.length === 1 ? monadic : variadic;
memoized = memoized.bind(
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
)
}
function strategyVariadic (fn, options) {
var strategy = variadic;
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
);
)
}
return memoized
function strategyMonadic (fn, options) {
var strategy = monadic;
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
)
}

@@ -1085,2 +1135,14 @@

//
// API
//
var index$1 = memoize;
var strategies = {
variadic: strategyVariadic,
monadic: strategyMonadic
};
index$1.strategies = strategies;
function unwrapExports (x) {

@@ -1087,0 +1149,0 @@ return x && x.__esModule ? x['default'] : x;

29

dist/glamorous.es.tiny.js

@@ -228,3 +228,3 @@ import React, { Component } from 'react';

// subscribe to future theme changes
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setTheme);
}

@@ -236,3 +236,3 @@ }

// cleanup subscription
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -250,3 +250,3 @@ }, {

// eslint-disable-next-line babel/new-cap
return ComponentToTheme(_extends({}, this.props, this.state), this.context);
return ComponentToTheme.call(this, _extends({}, this.props, this.state), this.context);
}

@@ -439,6 +439,10 @@ }

*/
var GlamorousComponent = withTheme(function (props, context) {
var GlamorousComponent = withTheme(function GlamorousInnerComponent(props, context) {
props = getPropsToApply(GlamorousComponent.propsToApply, {}, props, context);
var updateClassName = shouldUpdate(props, context);
var updateClassName = shouldUpdate(props, context, this.previous);
if (shouldClassNameUpdate) {
this.previous = { props: props, context: context };
}
var _splitProps = splitProps(props, GlamorousComponent),

@@ -452,3 +456,3 @@ toForward = _splitProps.toForward,

GlamorousComponent.className = updateClassName ? getGlamorClassName$1({
this.className = updateClassName ? getGlamorClassName$1({
styles: GlamorousComponent.styles,

@@ -460,3 +464,3 @@ props: props,

displayName: GlamorousComponent.displayName
}) : GlamorousComponent.className;
}) : this.className;

@@ -466,3 +470,3 @@ return React.createElement(GlamorousComponent.comp, _extends({

}, toForward, {
className: GlamorousComponent.className
className: this.className
}));

@@ -494,3 +498,3 @@ }, { noWarn: true, createElement: false });

function shouldUpdate(props, context) {
function shouldUpdate(props, context, previous) {
// exiting early so components which do not use this

@@ -503,8 +507,8 @@ // optimization are not penalized by hanging onto

var update = true;
if (GlamorousComponent.previous) {
if (!shouldClassNameUpdate(props, GlamorousComponent.previous.props, context, GlamorousComponent.previous.context)) {
if (previous) {
if (!shouldClassNameUpdate(previous.props, props, previous.context, context)) {
update = false;
}
}
GlamorousComponent.previous = { props: props, context: context };
return update;

@@ -523,3 +527,2 @@ }

isGlamorousComponent: true,
previous: null,
propsAreCssOverrides: propsAreCssOverrides,

@@ -526,0 +529,0 @@ withProps: withProps

126

dist/glamorous.umd.js

@@ -494,3 +494,3 @@ (function (global, factory) {

// subscribe to future theme changes
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setTheme);
}

@@ -502,3 +502,3 @@ }

// cleanup subscription
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -516,3 +516,3 @@ }, {

// eslint-disable-next-line babel/new-cap
return ComponentToTheme(_extends({}, this.props, this.state), this.context);
return ComponentToTheme.call(this, _extends({}, this.props, this.state), this.context);
}

@@ -556,22 +556,37 @@ }

var listeners = {};
var id = 0;
var id = 1;
var _state = initialState;
var getState = function () { return _state; };
function getState () {
return _state
}
var setState = function (state) {
function setState (state) {
_state = state;
Object.keys(listeners).forEach(function (id) { return listeners[id](_state); });
};
var keys = Object.keys(listeners);
var i = 0;
var len = keys.length;
for (; i < len; i++) {
// if a listener gets unsubscribed during setState we just skip it
if (listeners[keys[i]]) { listeners[keys[i]](state); }
}
}
var subscribe = function (listener) {
// subscribe to changes and return the subscriptionId
function subscribe (listener) {
if (typeof listener !== 'function') {
throw new Error('listener must be a function.')
}
var currentId = id;
listeners[currentId] = listener;
id += 1;
return function unsubscribe () {
delete listeners[currentId];
}
};
return currentId
}
return { getState: getState, setState: setState, subscribe: subscribe }
// remove subscription by removing the listener function
function unsubscribe (id) {
listeners[id] = undefined;
}
return { getState: getState, setState: setState, subscribe: subscribe, unsubscribe: unsubscribe }
}

@@ -626,3 +641,3 @@

if (this.context[CHANNEL]) {
this.unsubscribe = this.context[CHANNEL].subscribe(this.setOuterTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setOuterTheme);
}

@@ -649,3 +664,3 @@ }

value: function componentWillUnmount() {
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -821,6 +836,10 @@ }, {

*/
var GlamorousComponent = withTheme(function (props, context) {
var GlamorousComponent = withTheme(function GlamorousInnerComponent(props, context) {
props = getPropsToApply(GlamorousComponent.propsToApply, {}, props, context);
var updateClassName = shouldUpdate(props, context);
var updateClassName = shouldUpdate(props, context, this.previous);
if (shouldClassNameUpdate) {
this.previous = { props: props, context: context };
}
var _splitProps = splitProps(props, GlamorousComponent),

@@ -834,3 +853,3 @@ toForward = _splitProps.toForward,

GlamorousComponent.className = updateClassName ? getGlamorClassName$1({
this.className = updateClassName ? getGlamorClassName$1({
styles: GlamorousComponent.styles,

@@ -842,3 +861,3 @@ props: props,

displayName: GlamorousComponent.displayName
}) : GlamorousComponent.className;
}) : this.className;

@@ -848,3 +867,3 @@ return React__default.createElement(GlamorousComponent.comp, _extends({

}, toForward, {
className: GlamorousComponent.className
className: this.className
}));

@@ -876,3 +895,3 @@ }, { noWarn: true, createElement: false });

function shouldUpdate(props, context) {
function shouldUpdate(props, context, previous) {
// exiting early so components which do not use this

@@ -885,8 +904,8 @@ // optimization are not penalized by hanging onto

var update = true;
if (GlamorousComponent.previous) {
if (!shouldClassNameUpdate(props, GlamorousComponent.previous.props, context, GlamorousComponent.previous.context)) {
if (previous) {
if (!shouldClassNameUpdate(previous.props, props, previous.context, context)) {
update = false;
}
}
GlamorousComponent.previous = { props: props, context: context };
return update;

@@ -905,3 +924,2 @@ }

isGlamorousComponent: true,
previous: null,
propsAreCssOverrides: propsAreCssOverrides,

@@ -988,3 +1006,3 @@ withProps: withProps

var index$1 = function memoize (fn, options) {
function memoize (fn, options) {
var cache = options && options.cache

@@ -1006,3 +1024,3 @@ ? options.cache

})
};
}

@@ -1042,13 +1060,45 @@ //

function assemble (fn, context, strategy, cache, serialize) {
return strategy.bind(
context,
fn,
cache,
serialize
)
}
function strategyDefault (fn, options) {
var memoized = fn.length === 1 ? monadic : variadic;
var strategy = fn.length === 1 ? monadic : variadic;
memoized = memoized.bind(
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
)
}
function strategyVariadic (fn, options) {
var strategy = variadic;
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
);
)
}
return memoized
function strategyMonadic (fn, options) {
var strategy = monadic;
return assemble(
fn,
this,
strategy,
options.cache.create(),
options.serializer
)
}

@@ -1090,2 +1140,14 @@

//
// API
//
var index$1 = memoize;
var strategies = {
variadic: strategyVariadic,
monadic: strategyMonadic
};
index$1.strategies = strategies;
function unwrapExports (x) {

@@ -1092,0 +1154,0 @@ return x && x.__esModule ? x['default'] : x;

2

dist/glamorous.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("glamor")):"function"==typeof define&&define.amd?define(["react","glamor"],t):e.glamorous=t(e.React,e.Glamor)}(this,function(e,t){"use strict";function r(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=r.noWarn,o=void 0!==n&&n,a=r.createElement,i=void 0===a||a,s=function(e){function r(){var e,t,n,a;w(this,r);for(var i=arguments.length,s=Array(i),l=0;l<i;l++)s[l]=arguments[l];return t=n=D(this,(e=r.__proto__||Object.getPrototypeOf(r)).call.apply(e,[this].concat(s))),n.warned=o,n.state={theme:{}},n.setTheme=function(e){return n.setState({theme:e})},a=t,D(n,a)}return A(r,e),T(r,[{key:"componentWillMount",value:function(){this.context[x];var e=this.props.theme;this.context[x]?this.setTheme(e||this.context[x].getState()):this.setTheme(e||{})}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.setTheme(e.theme)}},{key:"componentDidMount",value:function(){this.context[x]&&!this.props.theme&&(this.unsubscribe=this.context[x].subscribe(this.setTheme))}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){return i?v.createElement(t,P({},this.props,this.state)):t(P({},this.props,this.state),this.context)}}]),r}(e.Component);s.propTypes={theme:O.object};var l=S({},x,O.object),u=null;return Object.defineProperty(s,"contextTypes",{enumerable:!0,configurable:!0,set:function(e){u=e},get:function(){return u?P({},l,u):l}}),s}function n(e){var t={},r=0,n=e;return{getState:function(){return n},setState:function(e){n=e,Object.keys(t).forEach(function(e){return t[e](n)})},subscribe:function(e){var n=r;return t[n]=e,r+=1,function(){delete t[n]}}}}function o(e){var t=[],r=[];return e.toString().split(" ").forEach(function(e){if(0===e.indexOf("css-")){var n=a(e);r.push(n)}else t.push(e)}),{glamorlessClassName:t,glamorStyles:r}}function a(e){return S({},"data-"+e,"")}function i(e){var r=e.styles,n=e.props,o=e.cssOverrides,a=e.cssProp,i=e.context,l=(e.displayName,s([].concat(E(r),[n.className,o,a]),n,i)),u=l.mappedArgs,p=l.nonGlamorClassNames;return(t.css.apply(void 0,[null].concat(E(u))).toString()+" "+p.join(" ").trim()).trim()}function s(e,t,r){for(var n=void 0,a=[],i=[],l=0;l<e.length;l++)if("function"==typeof(n=e[l])){var u=n(t,r);if("string"==typeof u){var p=o(u),c=p.glamorStyles,d=p.glamorlessClassName;a.push.apply(a,E(c)),i.push.apply(i,E(d))}else a.push(u)}else if("string"==typeof n){var f=o(n),h=f.glamorStyles,m=f.glamorlessClassName;a.push.apply(a,E(h)),i.push.apply(i,E(m))}else if(Array.isArray(n)){var g=s(n,t,r);a.push.apply(a,E(g.mappedArgs)),i.push.apply(i,E(g.nonGlamorClassNames))}else a.push(n);return{mappedArgs:a,nonGlamorClassNames:i}}function l(e,t,r,n){return e.forEach(function(e){return"function"==typeof e?Object.assign(t,e(Object.assign({},t,r),n)):Array.isArray(e)?Object.assign(t,l(e,t,r,n)):Object.assign(t,e)}),Object.assign(t,r)}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return Array.isArray(e)?e:[e]}function p(e,t){return e?e.concat(t):t}function c(e){return"string"==typeof e?e:e.displayName||e.name||"unknown"}function d(e){return null==e||"function"!=typeof e&&"object"!=typeof e}function f(e,t,r,n){var o=d(n)?n:r(n);if(!t.has(o)){var a=e.call(this,n);return t.set(o,a),a}return t.get(o)}function h(e,t,r){var n=Array.prototype.slice.call(arguments,3),o=r(n);if(!t.has(o)){var a=e.apply(this,n);return t.set(o,a),a}return t.get(o)}function m(e,t){var r=1===e.length?f:h;return r=r.bind(this,e,t.cache.create(),t.serializer)}function g(){return JSON.stringify(arguments)}function y(){this.cache=Object.create(null)}function b(e){return e.slice(0,1).toUpperCase()+e.slice(1)}var v="default"in e?e.default:e,C=["a","altGlyph","altGlyphDef","altGlyphItem","animate","animateColor","animateMotion","animateTransform","animation","audio","canvas","circle","clipPath","color-profile","cursor","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","font","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignObject","g","glyph","glyphRef","handler","hatch","hatchpath","hkern","iframe","image","line","linearGradient","listener","marker","mask","mesh","meshgradient","meshpatch","meshrow","metadata","missing-glyph","mpath","path","pattern","polygon","polyline","prefetch","radialGradient","rect","script","set","solidColor","solidcolor","stop","style","svg","switch","symbol","tbreak","text","textArea","textPath","title","tref","tspan","unknown","use","video","view","vkern"],k=["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","bgsound","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","command","content","data","datalist","dd","del","details","dfn","dialog","dir","div","dl","dt","element","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","image","img","input","ins","isindex","kbd","keygen","label","legend","li","link","listing","main","map","mark","marquee","math","menu","menuitem","meta","meter","multicol","nav","nextid","nobr","noembed","noframes","noscript","object","ol","optgroup","option","output","p","param","picture","plaintext","pre","progress","q","rb","rbc","rp","rt","rtc","ruby","s","samp","script","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr","xmp"].concat(C).filter(function(e,t,r){return r.indexOf(e)===t}),x="__glamorous__",O=void 0;if(parseFloat(v.version.slice(0,4))>=15.5)try{O=require("prop-types")}catch(e){}O=O||v.PropTypes;var w=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},T=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),S=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},P=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},A=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},M=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},D=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},E=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)},F=function(e){function t(){var e,r,o,a;w(this,t);for(var i=arguments.length,s=Array(i),l=0;l<i;l++)s[l]=arguments[l];return r=o=D(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o.broadcast=n(o.props.theme),o.setOuterTheme=function(e){o.outerTheme=e},a=r,D(o,a)}return A(t,e),T(t,[{key:"getTheme",value:function(e){var t=e||this.props.theme;return P({},this.outerTheme,t)}},{key:"getChildContext",value:function(){return S({},x,this.broadcast)}},{key:"componentDidMount",value:function(){this.context[x]&&(this.unsubscribe=this.context[x].subscribe(this.setOuterTheme))}},{key:"componentWillMount",value:function(){this.context[x]&&(this.setOuterTheme(this.context[x].getState()),this.broadcast.setState(this.getTheme()))}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.broadcast.setState(this.getTheme(e.theme))}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){return this.props.children?v.Children.only(this.props.children):null}}]),t}(e.Component);F.childContextTypes=S({},x,O.object.isRequired),F.contextTypes=S({},x,O.object),F.propTypes={theme:O.object.isRequired,children:O.node};y.prototype.has=function(e){return e in this.cache},y.prototype.get=function(e){return this.cache[e]},y.prototype.set=function(e,t){this.cache[e]=t};var j={create:function(){return new y}},L=["coords","download","href","name","rel","shape","target","type"],R=["title"],N=["alt","height","name","width"],z=["alt","coords","download","href","rel","shape","target","type"],q=["controls","loop","muted","preload","src"],U=["href","target"],G=["size"],_=["dir"],I=["cite"],W=["disabled","form","name","type","value"],B=["height","width"],H=["span","width"],V=["span","width"],K=["value"],X=["cite"],Y=["open"],Z=["title"],J=["open"],$=["height","src","type","width"],Q=["disabled","form","name"],ee=["size"],te=["accept","action","method","name","target"],re=["name","scrolling","src"],ne=["cols","rows"],oe=["profile"],ae=["size","width"],ie=["manifest"],se=["height","name","sandbox","scrolling","src","width"],le=["alt","height","name","sizes","src","width"],ue=["accept","alt","autoCapitalize","autoCorrect","autoSave","checked","defaultChecked","defaultValue","disabled","form","height","list","max","min","multiple","name","onChange","pattern","placeholder","required","results","size","src","step","title","type","value","width"],pe=["cite"],ce=["challenge","disabled","form","name"],de=["form"],fe=["type","value"],he=["color","href","integrity","media","nonce","rel","scope","sizes","target","title","type"],me=["name"],ge=["content","name"],ye=["high","low","max","min","optimum","value"],be=["data","form","height","name","type","width"],ve=["reversed","start","type"],Ce=["disabled","label"],ke=["disabled","label","selected","value"],xe=["form","name"],Oe=["name","type","value"],we=["width"],Te=["max","value"],Se=["cite"],Pe=["async","defer","integrity","nonce","src","type"],Ae=["defaultValue","disabled","form","multiple","name","onChange","required","size","value"],Me=["name"],De=["media","sizes","src","type"],Ee=["media","nonce","title","type"],Fe=["summary","width"],je=["headers","height","scope","width"],Le=["autoCapitalize","autoCorrect","cols","defaultValue","disabled","form","name","onChange","placeholder","required","rows","value","wrap"],Re=["headers","height","scope","width"],Ne=["default","kind","label","src"],ze=["type"],qe=["controls","height","loop","muted","poster","preload","src","width"],Ue=["accentHeight","accumulate","additive","alignmentBaseline","allowReorder","alphabetic","amplitude","arabicForm","ascent","attributeName","attributeType","autoReverse","azimuth","baseFrequency","baseProfile","baselineShift","bbox","begin","bias","by","calcMode","capHeight","clip","clipPath","clipPathUnits","clipRule","color","colorInterpolation","colorInterpolationFilters","colorProfile","colorRendering","contentScriptType","contentStyleType","cursor","cx","cy","d","decelerate","descent","diffuseConstant","direction","display","divisor","dominantBaseline","dur","dx","dy","edgeMode","elevation","enableBackground","end","exponent","externalResourcesRequired","fill","fillOpacity","fillRule","filter","filterRes","filterUnits","floodColor","floodOpacity","focusable","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","format","from","fx","fy","g1","g2","glyphName","glyphOrientationHorizontal","glyphOrientationVertical","glyphRef","gradientTransform","gradientUnits","hanging","height","horizAdvX","horizOriginX","ideographic","imageRendering","in","in2","intercept","k","k1","k2","k3","k4","kernelMatrix","kernelUnitLength","kerning","keyPoints","keySplines","keyTimes","lengthAdjust","letterSpacing","lightingColor","limitingConeAngle","local","markerEnd","markerHeight","markerMid","markerStart","markerUnits","markerWidth","mask","maskContentUnits","maskUnits","mathematical","mode","numOctaves","offset","opacity","operator","order","orient","orientation","origin","overflow","overlinePosition","overlineThickness","paintOrder","panose1","pathLength","patternContentUnits","patternTransform","patternUnits","pointerEvents","points","pointsAtX","pointsAtY","pointsAtZ","preserveAlpha","preserveAspectRatio","primitiveUnits","r","radius","refX","refY","renderingIntent","repeatCount","repeatDur","requiredExtensions","requiredFeatures","restart","result","rotate","rx","ry","scale","seed","shapeRendering","slope","spacing","specularConstant","specularExponent","speed","spreadMethod","startOffset","stdDeviation","stemh","stemv","stitchTiles","stopColor","stopOpacity","strikethroughPosition","strikethroughThickness","string","stroke","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","surfaceScale","systemLanguage","tableValues","targetX","targetY","textAnchor","textDecoration","textLength","textRendering","to","transform","u1","u2","underlinePosition","underlineThickness","unicode","unicodeBidi","unicodeRange","unitsPerEm","vAlphabetic","vHanging","vIdeographic","vMathematical","values","vectorEffect","version","vertAdvY","vertOriginX","vertOriginY","viewBox","viewTarget","visibility","width","widths","wordSpacing","writingMode","x","x1","x2","xChannelSelector","xHeight","xlinkActuate","xlinkArcrole","xlinkHref","xlinkRole","xlinkShow","xlinkTitle","xlinkType","xmlBase","xmlLang","xmlSpace","xmlns","xmlnsXlink","y","y1","y2","yChannelSelector","z","zoomAndPan"],Ge={html:["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","math","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rb","rp","rt","rtc","ruby","s","samp","script","section","select","slot","small","source","span","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr"],svg:["a","altGlyph","altGlyphDef","altGlyphItem","animate","animateColor","animateMotion","animateTransform","circle","clipPath","color-profile","cursor","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","font","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignObject","g","glyph","glyphRef","hkern","image","line","linearGradient","marker","mask","metadata","missing-glyph","mpath","path","pattern","polygon","polyline","radialGradient","rect","script","set","stop","style","svg","switch","symbol","text","textPath","title","tref","tspan","use","view","vkern"]},_e={a:L,abbr:R,applet:N,area:z,audio:q,base:U,basefont:G,bdo:_,blockquote:I,button:W,canvas:B,col:H,colgroup:V,data:K,del:X,details:Y,dfn:Z,dialog:J,embed:$,fieldset:Q,font:ee,form:te,frame:re,frameset:ne,head:oe,hr:ae,html:ie,iframe:se,img:le,input:ue,ins:pe,keygen:ce,label:de,li:fe,link:he,map:me,meta:ge,meter:ye,object:be,ol:ve,optgroup:Ce,option:ke,output:xe,param:Oe,pre:we,progress:Te,q:Se,script:Pe,select:Ae,slot:Me,source:De,style:Ee,table:Fe,td:je,textarea:Le,th:Re,track:Ne,ul:ze,video:qe,svg:Ue,elements:Ge,"*":["about","acceptCharset","accessKey","allowFullScreen","allowTransparency","autoComplete","autoFocus","autoPlay","capture","cellPadding","cellSpacing","charSet","classID","className","colSpan","contentEditable","contextMenu","crossOrigin","dangerouslySetInnerHTML","datatype","dateTime","dir","draggable","encType","formAction","formEncType","formMethod","formNoValidate","formTarget","frameBorder","hidden","hrefLang","htmlFor","httpEquiv","icon","id","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","keyParams","keyType","lang","marginHeight","marginWidth","maxLength","mediaGroup","minLength","noValidate","prefix","property","radioGroup","readOnly","resource","role","rowSpan","scoped","seamless","security","spellCheck","srcDoc","srcLang","srcSet","style","suppressContentEditableWarning","tabIndex","title","typeof","unselectable","useMap","vocab","wmode"]},Ie=Object.freeze({a:L,abbr:R,applet:N,area:z,audio:q,base:U,basefont:G,bdo:_,blockquote:I,button:W,canvas:B,col:H,colgroup:V,data:K,del:X,details:Y,dfn:Z,dialog:J,embed:$,fieldset:Q,font:ee,form:te,frame:re,frameset:ne,head:oe,hr:ae,html:ie,iframe:se,img:le,input:ue,ins:pe,keygen:ce,label:de,li:fe,link:he,map:me,meta:ge,meter:ye,object:be,ol:ve,optgroup:Ce,option:ke,output:xe,param:Oe,pre:we,progress:Te,q:Se,script:Pe,select:Ae,slot:Me,source:De,style:Ee,table:Fe,td:je,textarea:Le,th:Re,track:Ne,ul:ze,video:qe,svg:Ue,elements:Ge,default:_e}),We=Ie&&_e||Ie,Be=function(e){return e&&e.__esModule?e.default:e}(function(e,t){return t={exports:{}},e(t,t.exports),t.exports}(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=We,e.exports=We})),He=["children","dangerouslySetInnerHTML","key","ref","autoFocus","defaultValue","valueLink","defaultChecked","checkedLink","innerHTML","suppressContentEditableWarning","onFocusIn","onFocusOut","className","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onKeyDown","onKeyPress","onKeyUp","onFocus","onBlur","onChange","onInput","onSubmit","onClick","onContextMenu","onDoubleClick","onDrag","onDragEnd","onDragEnter","onDragExit","onDragLeave","onDragOver","onDragStart","onDrop","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onSelect","onTouchCancel","onTouchEnd","onTouchMove","onTouchStart","onScroll","onWheel","onAbort","onCanPlay","onCanPlayThrough","onDurationChange","onEmptied","onEncrypted","onEnded","onError","onLoadedData","onLoadedMetadata","onLoadStart","onPause","onPlay","onPlaying","onProgress","onRateChange","onSeeked","onSeeking","onStalled","onSuspend","onTimeUpdate","onVolumeChange","onWaiting","onLoad","onAnimationStart","onAnimationEnd","onAnimationIteration","onTransitionEnd","onCopyCapture","onCutCapture","onPasteCapture","onCompositionEndCapture","onCompositionStartCapture","onCompositionUpdateCapture","onKeyDownCapture","onKeyPressCapture","onKeyUpCapture","onFocusCapture","onBlurCapture","onChangeCapture","onInputCapture","onSubmitCapture","onClickCapture","onContextMenuCapture","onDoubleClickCapture","onDragCapture","onDragEndCapture","onDragEnterCapture","onDragExitCapture","onDragLeaveCapture","onDragOverCapture","onDragStartCapture","onDropCapture","onMouseDownCapture","onMouseEnterCapture","onMouseLeaveCapture","onMouseMoveCapture","onMouseOutCapture","onMouseOverCapture","onMouseUpCapture","onSelectCapture","onTouchCancelCapture","onTouchEndCapture","onTouchMoveCapture","onTouchStartCapture","onScrollCapture","onWheelCapture","onAbortCapture","onCanPlayCapture","onCanPlayThroughCapture","onDurationChangeCapture","onEmptiedCapture","onEncryptedCapture","onEndedCapture","onErrorCapture","onLoadedDataCapture","onLoadedMetadataCapture","onLoadStartCapture","onPauseCapture","onPlayCapture","onPlayingCapture","onProgressCapture","onRateChangeCapture","onSeekedCapture","onSeekingCapture","onStalledCapture","onSuspendCapture","onTimeUpdateCapture","onVolumeChangeCapture","onWaitingCapture","onLoadCapture","onAnimationStartCapture","onAnimationEndCapture","onAnimationIterationCapture","onTransitionEndCapture"],Ve=Be["*"],Ke=Be.elements.svg,Xe=Be.elements.html,Ye=["color","height","width"],Ze=RegExp.prototype.test.bind(new RegExp("^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$")),Je=function(e){return"svg"===e||-1===Xe.indexOf(e)&&-1!==Ke.indexOf(e)},$e=function(e,t){var r=void 0;return r=Je(t)?Be.svg:Be[t]||[],-1!==Ve.indexOf(e)||-1!==r.indexOf(e)},Qe=function(e){return-1!==Ye.indexOf(e)},et=function(e){return-1!==He.indexOf(e)},tt=function(e,t){var r=t&&t.cache?t.cache:j,n=t&&t.serializer?t.serializer:g;return(t&&t.strategy?t.strategy:m)(e,{cache:r,serializer:n})}(function(e,t){return"string"!=typeof e||($e(t,e)||et(t)||Ze(t.toLowerCase()))&&(!Qe(t)||Je(e))}),rt=function(e){function t(o){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},s=a.rootEl,u=a.displayName,p=a.shouldClassNameUpdate,c=a.forwardProps,d=void 0===c?[]:c,f=a.propsAreCssOverrides,h=void 0===f?o.propsAreCssOverrides:f,m=a.withProps;return function(){function a(e,t){if(!p)return!0;var r=!0;return y.previous&&(p(e,y.previous.props,t,y.previous.context)||(r=!1)),y.previous={props:e,context:t},r}for(var c=arguments.length,f=Array(c),g=0;g<c;g++)f[g]=arguments[g];var y=r(function(t,r){var n=a(t=l(y.propsToApply,{},t,r),r),o=e(t,y),s=o.toForward,u=o.cssOverrides,p=o.cssProp;return y.className=n?i({styles:y.styles,props:t,cssOverrides:u,cssProp:p,context:r,displayName:y.displayName}):y.className,v.createElement(y.comp,P({ref:t.innerRef},s,{className:y.className}))},{noWarn:!0,createElement:!1});return y.propTypes={className:O.string,cssOverrides:O.object,innerRef:O.func,glam:O.object},Object.assign(y,n({comp:o,styles:f,rootEl:s,forwardProps:d,displayName:u,propsToApply:m}),{withComponent:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t(e,P({forwardProps:y.forwardProps},r))(y.styles)},isGlamorousComponent:!0,previous:null,propsAreCssOverrides:h,withProps:function(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];return t(y,{withProps:r})()}}),y}}function n(e){var t=e.comp,r=e.styles,n=e.rootEl,o=e.forwardProps,a=e.displayName,i=e.propsToApply,s=t.comp?t.comp:t,l=t.propsToApply?[].concat(E(t.propsToApply),E(u(i))):u(i);return{styles:p(t.styles,r),comp:s,rootEl:n||s,forwardProps:p(t.forwardProps,o),displayName:a||"glamorous("+c(t)+")",propsToApply:l}}return t}(function(e,t){var r=t.propsAreCssOverrides,n=t.rootEl,o=t.forwardProps,a=e.css,i=(e.theme,e.className,e.innerRef,e.glam,M(e,["css","theme","className","innerRef","glam"])),s={toForward:{},cssProp:a,cssOverrides:{}};return r||"string"==typeof n?Object.keys(i).reduce(function(e,t){return-1!==o.indexOf(t)||tt(n,t)?e.toForward[t]=i[t]:r&&(e.cssOverrides[t]=i[t]),e},s):(s.toForward=i,s)});Object.assign(rt,k.reduce(function(e,t){return e[t]=rt(t),e},{})),Object.assign(rt,k.reduce(function(e,t){var r=b(t);return e[r]=rt[t](),e[r].displayName="glamorous."+r,e[r].propsAreCssOverrides=!0,e},{})),rt.default=rt;var nt=Object.freeze({default:rt,ThemeProvider:F,withTheme:r}),ot=rt;return Object.assign(ot,Object.keys(nt).reduce(function(e,t){return"default"!==t&&(e[t]=nt[t]),e},{})),ot});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("glamor")):"function"==typeof define&&define.amd?define(["react","glamor"],t):e.glamorous=t(e.React,e.Glamor)}(this,function(e,t){"use strict";function r(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=r.noWarn,o=void 0!==n&&n,a=r.createElement,i=void 0===a||a,s=function(e){function r(){var e,t,n,a;T(this,r);for(var i=arguments.length,s=Array(i),l=0;l<i;l++)s[l]=arguments[l];return t=n=E(this,(e=r.__proto__||Object.getPrototypeOf(r)).call.apply(e,[this].concat(s))),n.warned=o,n.state={theme:{}},n.setTheme=function(e){return n.setState({theme:e})},a=t,E(n,a)}return M(r,e),S(r,[{key:"componentWillMount",value:function(){this.context[w];var e=this.props.theme;this.context[w]?this.setTheme(e||this.context[w].getState()):this.setTheme(e||{})}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.setTheme(e.theme)}},{key:"componentDidMount",value:function(){this.context[w]&&!this.props.theme&&(this.subscriptionId=this.context[w].subscribe(this.setTheme))}},{key:"componentWillUnmount",value:function(){this.subscriptionId&&this.context[w].unsubscribe(this.subscriptionId)}},{key:"render",value:function(){return i?C.createElement(t,A({},this.props,this.state)):t.call(this,A({},this.props,this.state),this.context)}}]),r}(e.Component);s.propTypes={theme:O.object};var l=P({},w,O.object),u=null;return Object.defineProperty(s,"contextTypes",{enumerable:!0,configurable:!0,set:function(e){u=e},get:function(){return u?A({},l,u):l}}),s}function n(e){var t={},r=1,n=e;return{getState:function(){return n},setState:function(e){n=e;for(var r=Object.keys(t),o=0,a=r.length;o<a;o++)t[r[o]]&&t[r[o]](e)},subscribe:function(e){if("function"!=typeof e)throw new Error("listener must be a function.");var n=r;return t[n]=e,r+=1,n},unsubscribe:function(e){t[e]=void 0}}}function o(e){var t=[],r=[];return e.toString().split(" ").forEach(function(e){if(0===e.indexOf("css-")){var n=a(e);r.push(n)}else t.push(e)}),{glamorlessClassName:t,glamorStyles:r}}function a(e){return P({},"data-"+e,"")}function i(e){var r=e.styles,n=e.props,o=e.cssOverrides,a=e.cssProp,i=e.context,l=(e.displayName,s([].concat(F(r),[n.className,o,a]),n,i)),u=l.mappedArgs,p=l.nonGlamorClassNames;return(t.css.apply(void 0,[null].concat(F(u))).toString()+" "+p.join(" ").trim()).trim()}function s(e,t,r){for(var n=void 0,a=[],i=[],l=0;l<e.length;l++)if("function"==typeof(n=e[l])){var u=n(t,r);if("string"==typeof u){var p=o(u),c=p.glamorStyles,d=p.glamorlessClassName;a.push.apply(a,F(c)),i.push.apply(i,F(d))}else a.push(u)}else if("string"==typeof n){var f=o(n),h=f.glamorStyles,m=f.glamorlessClassName;a.push.apply(a,F(h)),i.push.apply(i,F(m))}else if(Array.isArray(n)){var g=s(n,t,r);a.push.apply(a,F(g.mappedArgs)),i.push.apply(i,F(g.nonGlamorClassNames))}else a.push(n);return{mappedArgs:a,nonGlamorClassNames:i}}function l(e,t,r,n){return e.forEach(function(e){return"function"==typeof e?Object.assign(t,e(Object.assign({},t,r),n)):Array.isArray(e)?Object.assign(t,l(e,t,r,n)):Object.assign(t,e)}),Object.assign(t,r)}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return Array.isArray(e)?e:[e]}function p(e,t){return e?e.concat(t):t}function c(e){return"string"==typeof e?e:e.displayName||e.name||"unknown"}function d(e){return null==e||"function"!=typeof e&&"object"!=typeof e}function f(e,t,r,n){var o=d(n)?n:r(n);if(!t.has(o)){var a=e.call(this,n);return t.set(o,a),a}return t.get(o)}function h(e,t,r){var n=Array.prototype.slice.call(arguments,3),o=r(n);if(!t.has(o)){var a=e.apply(this,n);return t.set(o,a),a}return t.get(o)}function m(e,t,r,n,o){return r.bind(t,e,n,o)}function g(e,t){return m(e,this,1===e.length?f:h,t.cache.create(),t.serializer)}function y(){return JSON.stringify(arguments)}function b(){this.cache=Object.create(null)}function v(e){return e.slice(0,1).toUpperCase()+e.slice(1)}var C="default"in e?e.default:e,k=["a","altGlyph","altGlyphDef","altGlyphItem","animate","animateColor","animateMotion","animateTransform","animation","audio","canvas","circle","clipPath","color-profile","cursor","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","font","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignObject","g","glyph","glyphRef","handler","hatch","hatchpath","hkern","iframe","image","line","linearGradient","listener","marker","mask","mesh","meshgradient","meshpatch","meshrow","metadata","missing-glyph","mpath","path","pattern","polygon","polyline","prefetch","radialGradient","rect","script","set","solidColor","solidcolor","stop","style","svg","switch","symbol","tbreak","text","textArea","textPath","title","tref","tspan","unknown","use","video","view","vkern"],x=["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","bgsound","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","command","content","data","datalist","dd","del","details","dfn","dialog","dir","div","dl","dt","element","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","image","img","input","ins","isindex","kbd","keygen","label","legend","li","link","listing","main","map","mark","marquee","math","menu","menuitem","meta","meter","multicol","nav","nextid","nobr","noembed","noframes","noscript","object","ol","optgroup","option","output","p","param","picture","plaintext","pre","progress","q","rb","rbc","rp","rt","rtc","ruby","s","samp","script","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr","xmp"].concat(k).filter(function(e,t,r){return r.indexOf(e)===t}),w="__glamorous__",O=void 0;if(parseFloat(C.version.slice(0,4))>=15.5)try{O=require("prop-types")}catch(e){}O=O||C.PropTypes;var T=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},S=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),P=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},A=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},M=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},D=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},E=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},F=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)},j=function(e){function t(){var e,r,o,a;T(this,t);for(var i=arguments.length,s=Array(i),l=0;l<i;l++)s[l]=arguments[l];return r=o=E(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o.broadcast=n(o.props.theme),o.setOuterTheme=function(e){o.outerTheme=e},a=r,E(o,a)}return M(t,e),S(t,[{key:"getTheme",value:function(e){var t=e||this.props.theme;return A({},this.outerTheme,t)}},{key:"getChildContext",value:function(){return P({},w,this.broadcast)}},{key:"componentDidMount",value:function(){this.context[w]&&(this.subscriptionId=this.context[w].subscribe(this.setOuterTheme))}},{key:"componentWillMount",value:function(){this.context[w]&&(this.setOuterTheme(this.context[w].getState()),this.broadcast.setState(this.getTheme()))}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.broadcast.setState(this.getTheme(e.theme))}},{key:"componentWillUnmount",value:function(){this.subscriptionId&&this.context[w].unsubscribe(this.subscriptionId)}},{key:"render",value:function(){return this.props.children?C.Children.only(this.props.children):null}}]),t}(e.Component);j.childContextTypes=P({},w,O.object.isRequired),j.contextTypes=P({},w,O.object),j.propTypes={theme:O.object.isRequired,children:O.node},b.prototype.has=function(e){return e in this.cache},b.prototype.get=function(e){return this.cache[e]},b.prototype.set=function(e,t){this.cache[e]=t};var L={create:function(){return new b}},R=function(e,t){var r=t&&t.cache?t.cache:L,n=t&&t.serializer?t.serializer:y;return(t&&t.strategy?t.strategy:g)(e,{cache:r,serializer:n})},N={variadic:function(e,t){return m(e,this,h,t.cache.create(),t.serializer)},monadic:function(e,t){return m(e,this,f,t.cache.create(),t.serializer)}};R.strategies=N;var z=["coords","download","href","name","rel","shape","target","type"],I=["title"],q=["alt","height","name","width"],U=["alt","coords","download","href","rel","shape","target","type"],G=["controls","loop","muted","preload","src"],_=["href","target"],W=["size"],B=["dir"],H=["cite"],V=["disabled","form","name","type","value"],K=["height","width"],X=["span","width"],Y=["span","width"],Z=["value"],J=["cite"],$=["open"],Q=["title"],ee=["open"],te=["height","src","type","width"],re=["disabled","form","name"],ne=["size"],oe=["accept","action","method","name","target"],ae=["name","scrolling","src"],ie=["cols","rows"],se=["profile"],le=["size","width"],ue=["manifest"],pe=["height","name","sandbox","scrolling","src","width"],ce=["alt","height","name","sizes","src","width"],de=["accept","alt","autoCapitalize","autoCorrect","autoSave","checked","defaultChecked","defaultValue","disabled","form","height","list","max","min","multiple","name","onChange","pattern","placeholder","required","results","size","src","step","title","type","value","width"],fe=["cite"],he=["challenge","disabled","form","name"],me=["form"],ge=["type","value"],ye=["color","href","integrity","media","nonce","rel","scope","sizes","target","title","type"],be=["name"],ve=["content","name"],Ce=["high","low","max","min","optimum","value"],ke=["data","form","height","name","type","width"],xe=["reversed","start","type"],we=["disabled","label"],Oe=["disabled","label","selected","value"],Te=["form","name"],Se=["name","type","value"],Pe=["width"],Ae=["max","value"],Me=["cite"],De=["async","defer","integrity","nonce","src","type"],Ee=["defaultValue","disabled","form","multiple","name","onChange","required","size","value"],Fe=["name"],je=["media","sizes","src","type"],Le=["media","nonce","title","type"],Re=["summary","width"],Ne=["headers","height","scope","width"],ze=["autoCapitalize","autoCorrect","cols","defaultValue","disabled","form","name","onChange","placeholder","required","rows","value","wrap"],Ie=["headers","height","scope","width"],qe=["default","kind","label","src"],Ue=["type"],Ge=["controls","height","loop","muted","poster","preload","src","width"],_e=["accentHeight","accumulate","additive","alignmentBaseline","allowReorder","alphabetic","amplitude","arabicForm","ascent","attributeName","attributeType","autoReverse","azimuth","baseFrequency","baseProfile","baselineShift","bbox","begin","bias","by","calcMode","capHeight","clip","clipPath","clipPathUnits","clipRule","color","colorInterpolation","colorInterpolationFilters","colorProfile","colorRendering","contentScriptType","contentStyleType","cursor","cx","cy","d","decelerate","descent","diffuseConstant","direction","display","divisor","dominantBaseline","dur","dx","dy","edgeMode","elevation","enableBackground","end","exponent","externalResourcesRequired","fill","fillOpacity","fillRule","filter","filterRes","filterUnits","floodColor","floodOpacity","focusable","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","format","from","fx","fy","g1","g2","glyphName","glyphOrientationHorizontal","glyphOrientationVertical","glyphRef","gradientTransform","gradientUnits","hanging","height","horizAdvX","horizOriginX","ideographic","imageRendering","in","in2","intercept","k","k1","k2","k3","k4","kernelMatrix","kernelUnitLength","kerning","keyPoints","keySplines","keyTimes","lengthAdjust","letterSpacing","lightingColor","limitingConeAngle","local","markerEnd","markerHeight","markerMid","markerStart","markerUnits","markerWidth","mask","maskContentUnits","maskUnits","mathematical","mode","numOctaves","offset","opacity","operator","order","orient","orientation","origin","overflow","overlinePosition","overlineThickness","paintOrder","panose1","pathLength","patternContentUnits","patternTransform","patternUnits","pointerEvents","points","pointsAtX","pointsAtY","pointsAtZ","preserveAlpha","preserveAspectRatio","primitiveUnits","r","radius","refX","refY","renderingIntent","repeatCount","repeatDur","requiredExtensions","requiredFeatures","restart","result","rotate","rx","ry","scale","seed","shapeRendering","slope","spacing","specularConstant","specularExponent","speed","spreadMethod","startOffset","stdDeviation","stemh","stemv","stitchTiles","stopColor","stopOpacity","strikethroughPosition","strikethroughThickness","string","stroke","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","surfaceScale","systemLanguage","tableValues","targetX","targetY","textAnchor","textDecoration","textLength","textRendering","to","transform","u1","u2","underlinePosition","underlineThickness","unicode","unicodeBidi","unicodeRange","unitsPerEm","vAlphabetic","vHanging","vIdeographic","vMathematical","values","vectorEffect","version","vertAdvY","vertOriginX","vertOriginY","viewBox","viewTarget","visibility","width","widths","wordSpacing","writingMode","x","x1","x2","xChannelSelector","xHeight","xlinkActuate","xlinkArcrole","xlinkHref","xlinkRole","xlinkShow","xlinkTitle","xlinkType","xmlBase","xmlLang","xmlSpace","xmlns","xmlnsXlink","y","y1","y2","yChannelSelector","z","zoomAndPan"],We={html:["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","math","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rb","rp","rt","rtc","ruby","s","samp","script","section","select","slot","small","source","span","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr"],svg:["a","altGlyph","altGlyphDef","altGlyphItem","animate","animateColor","animateMotion","animateTransform","circle","clipPath","color-profile","cursor","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","font","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignObject","g","glyph","glyphRef","hkern","image","line","linearGradient","marker","mask","metadata","missing-glyph","mpath","path","pattern","polygon","polyline","radialGradient","rect","script","set","stop","style","svg","switch","symbol","text","textPath","title","tref","tspan","use","view","vkern"]},Be={a:z,abbr:I,applet:q,area:U,audio:G,base:_,basefont:W,bdo:B,blockquote:H,button:V,canvas:K,col:X,colgroup:Y,data:Z,del:J,details:$,dfn:Q,dialog:ee,embed:te,fieldset:re,font:ne,form:oe,frame:ae,frameset:ie,head:se,hr:le,html:ue,iframe:pe,img:ce,input:de,ins:fe,keygen:he,label:me,li:ge,link:ye,map:be,meta:ve,meter:Ce,object:ke,ol:xe,optgroup:we,option:Oe,output:Te,param:Se,pre:Pe,progress:Ae,q:Me,script:De,select:Ee,slot:Fe,source:je,style:Le,table:Re,td:Ne,textarea:ze,th:Ie,track:qe,ul:Ue,video:Ge,svg:_e,elements:We,"*":["about","acceptCharset","accessKey","allowFullScreen","allowTransparency","autoComplete","autoFocus","autoPlay","capture","cellPadding","cellSpacing","charSet","classID","className","colSpan","contentEditable","contextMenu","crossOrigin","dangerouslySetInnerHTML","datatype","dateTime","dir","draggable","encType","formAction","formEncType","formMethod","formNoValidate","formTarget","frameBorder","hidden","hrefLang","htmlFor","httpEquiv","icon","id","inlist","inputMode","is","itemID","itemProp","itemRef","itemScope","itemType","keyParams","keyType","lang","marginHeight","marginWidth","maxLength","mediaGroup","minLength","noValidate","prefix","property","radioGroup","readOnly","resource","role","rowSpan","scoped","seamless","security","spellCheck","srcDoc","srcLang","srcSet","style","suppressContentEditableWarning","tabIndex","title","typeof","unselectable","useMap","vocab","wmode"]},He=Object.freeze({a:z,abbr:I,applet:q,area:U,audio:G,base:_,basefont:W,bdo:B,blockquote:H,button:V,canvas:K,col:X,colgroup:Y,data:Z,del:J,details:$,dfn:Q,dialog:ee,embed:te,fieldset:re,font:ne,form:oe,frame:ae,frameset:ie,head:se,hr:le,html:ue,iframe:pe,img:ce,input:de,ins:fe,keygen:he,label:me,li:ge,link:ye,map:be,meta:ve,meter:Ce,object:ke,ol:xe,optgroup:we,option:Oe,output:Te,param:Se,pre:Pe,progress:Ae,q:Me,script:De,select:Ee,slot:Fe,source:je,style:Le,table:Re,td:Ne,textarea:ze,th:Ie,track:qe,ul:Ue,video:Ge,svg:_e,elements:We,default:Be}),Ve=He&&Be||He,Ke=function(e){return e&&e.__esModule?e.default:e}(function(e,t){return t={exports:{}},e(t,t.exports),t.exports}(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=Ve,e.exports=Ve})),Xe=["children","dangerouslySetInnerHTML","key","ref","autoFocus","defaultValue","valueLink","defaultChecked","checkedLink","innerHTML","suppressContentEditableWarning","onFocusIn","onFocusOut","className","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onKeyDown","onKeyPress","onKeyUp","onFocus","onBlur","onChange","onInput","onSubmit","onClick","onContextMenu","onDoubleClick","onDrag","onDragEnd","onDragEnter","onDragExit","onDragLeave","onDragOver","onDragStart","onDrop","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onSelect","onTouchCancel","onTouchEnd","onTouchMove","onTouchStart","onScroll","onWheel","onAbort","onCanPlay","onCanPlayThrough","onDurationChange","onEmptied","onEncrypted","onEnded","onError","onLoadedData","onLoadedMetadata","onLoadStart","onPause","onPlay","onPlaying","onProgress","onRateChange","onSeeked","onSeeking","onStalled","onSuspend","onTimeUpdate","onVolumeChange","onWaiting","onLoad","onAnimationStart","onAnimationEnd","onAnimationIteration","onTransitionEnd","onCopyCapture","onCutCapture","onPasteCapture","onCompositionEndCapture","onCompositionStartCapture","onCompositionUpdateCapture","onKeyDownCapture","onKeyPressCapture","onKeyUpCapture","onFocusCapture","onBlurCapture","onChangeCapture","onInputCapture","onSubmitCapture","onClickCapture","onContextMenuCapture","onDoubleClickCapture","onDragCapture","onDragEndCapture","onDragEnterCapture","onDragExitCapture","onDragLeaveCapture","onDragOverCapture","onDragStartCapture","onDropCapture","onMouseDownCapture","onMouseEnterCapture","onMouseLeaveCapture","onMouseMoveCapture","onMouseOutCapture","onMouseOverCapture","onMouseUpCapture","onSelectCapture","onTouchCancelCapture","onTouchEndCapture","onTouchMoveCapture","onTouchStartCapture","onScrollCapture","onWheelCapture","onAbortCapture","onCanPlayCapture","onCanPlayThroughCapture","onDurationChangeCapture","onEmptiedCapture","onEncryptedCapture","onEndedCapture","onErrorCapture","onLoadedDataCapture","onLoadedMetadataCapture","onLoadStartCapture","onPauseCapture","onPlayCapture","onPlayingCapture","onProgressCapture","onRateChangeCapture","onSeekedCapture","onSeekingCapture","onStalledCapture","onSuspendCapture","onTimeUpdateCapture","onVolumeChangeCapture","onWaitingCapture","onLoadCapture","onAnimationStartCapture","onAnimationEndCapture","onAnimationIterationCapture","onTransitionEndCapture"],Ye=Ke["*"],Ze=Ke.elements.svg,Je=Ke.elements.html,$e=["color","height","width"],Qe=RegExp.prototype.test.bind(new RegExp("^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$")),et=function(e){return"svg"===e||-1===Je.indexOf(e)&&-1!==Ze.indexOf(e)},tt=function(e,t){var r=void 0;return r=et(t)?Ke.svg:Ke[t]||[],-1!==Ye.indexOf(e)||-1!==r.indexOf(e)},rt=function(e){return-1!==$e.indexOf(e)},nt=function(e){return-1!==Xe.indexOf(e)},ot=R(function(e,t){return"string"!=typeof e||(tt(t,e)||nt(t)||Qe(t.toLowerCase()))&&(!rt(t)||et(e))}),at=function(e){function t(o){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},s=a.rootEl,u=a.displayName,p=a.shouldClassNameUpdate,c=a.forwardProps,d=void 0===c?[]:c,f=a.propsAreCssOverrides,h=void 0===f?o.propsAreCssOverrides:f,m=a.withProps;return function(){function a(e,t,r){if(!p)return!0;var n=!0;return r&&(p(r.props,e,r.context,t)||(n=!1)),n}for(var c=arguments.length,f=Array(c),g=0;g<c;g++)f[g]=arguments[g];var y=r(function(t,r){var n=a(t=l(y.propsToApply,{},t,r),r,this.previous);p&&(this.previous={props:t,context:r});var o=e(t,y),s=o.toForward,u=o.cssOverrides,c=o.cssProp;return this.className=n?i({styles:y.styles,props:t,cssOverrides:u,cssProp:c,context:r,displayName:y.displayName}):this.className,C.createElement(y.comp,A({ref:t.innerRef},s,{className:this.className}))},{noWarn:!0,createElement:!1});return y.propTypes={className:O.string,cssOverrides:O.object,innerRef:O.func,glam:O.object},Object.assign(y,n({comp:o,styles:f,rootEl:s,forwardProps:d,displayName:u,propsToApply:m}),{withComponent:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t(e,A({forwardProps:y.forwardProps},r))(y.styles)},isGlamorousComponent:!0,propsAreCssOverrides:h,withProps:function(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];return t(y,{withProps:r})()}}),y}}function n(e){var t=e.comp,r=e.styles,n=e.rootEl,o=e.forwardProps,a=e.displayName,i=e.propsToApply,s=t.comp?t.comp:t,l=t.propsToApply?[].concat(F(t.propsToApply),F(u(i))):u(i);return{styles:p(t.styles,r),comp:s,rootEl:n||s,forwardProps:p(t.forwardProps,o),displayName:a||"glamorous("+c(t)+")",propsToApply:l}}return t}(function(e,t){var r=t.propsAreCssOverrides,n=t.rootEl,o=t.forwardProps,a=e.css,i=(e.theme,e.className,e.innerRef,e.glam,D(e,["css","theme","className","innerRef","glam"])),s={toForward:{},cssProp:a,cssOverrides:{}};return r||"string"==typeof n?Object.keys(i).reduce(function(e,t){return-1!==o.indexOf(t)||ot(n,t)?e.toForward[t]=i[t]:r&&(e.cssOverrides[t]=i[t]),e},s):(s.toForward=i,s)});Object.assign(at,x.reduce(function(e,t){return e[t]=at(t),e},{})),Object.assign(at,x.reduce(function(e,t){var r=v(t);return e[r]=at[t](),e[r].displayName="glamorous."+r,e[r].propsAreCssOverrides=!0,e},{})),at.default=at;var it=Object.freeze({default:at,ThemeProvider:j,withTheme:r}),st=at;return Object.assign(st,Object.keys(it).reduce(function(e,t){return"default"!==t&&(e[t]=it[t]),e},{})),st});
//# sourceMappingURL=glamorous.umd.min.js.map

29

dist/glamorous.umd.tiny.js

@@ -233,3 +233,3 @@ (function (global, factory) {

// subscribe to future theme changes
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme);
this.subscriptionId = this.context[CHANNEL].subscribe(this.setTheme);
}

@@ -241,3 +241,3 @@ }

// cleanup subscription
this.unsubscribe && this.unsubscribe();
this.subscriptionId && this.context[CHANNEL].unsubscribe(this.subscriptionId);
}

@@ -255,3 +255,3 @@ }, {

// eslint-disable-next-line babel/new-cap
return ComponentToTheme(_extends({}, this.props, this.state), this.context);
return ComponentToTheme.call(this, _extends({}, this.props, this.state), this.context);
}

@@ -444,6 +444,10 @@ }

*/
var GlamorousComponent = withTheme(function (props, context) {
var GlamorousComponent = withTheme(function GlamorousInnerComponent(props, context) {
props = getPropsToApply(GlamorousComponent.propsToApply, {}, props, context);
var updateClassName = shouldUpdate(props, context);
var updateClassName = shouldUpdate(props, context, this.previous);
if (shouldClassNameUpdate) {
this.previous = { props: props, context: context };
}
var _splitProps = splitProps(props, GlamorousComponent),

@@ -457,3 +461,3 @@ toForward = _splitProps.toForward,

GlamorousComponent.className = updateClassName ? getGlamorClassName$1({
this.className = updateClassName ? getGlamorClassName$1({
styles: GlamorousComponent.styles,

@@ -465,3 +469,3 @@ props: props,

displayName: GlamorousComponent.displayName
}) : GlamorousComponent.className;
}) : this.className;

@@ -471,3 +475,3 @@ return React__default.createElement(GlamorousComponent.comp, _extends({

}, toForward, {
className: GlamorousComponent.className
className: this.className
}));

@@ -499,3 +503,3 @@ }, { noWarn: true, createElement: false });

function shouldUpdate(props, context) {
function shouldUpdate(props, context, previous) {
// exiting early so components which do not use this

@@ -508,8 +512,8 @@ // optimization are not penalized by hanging onto

var update = true;
if (GlamorousComponent.previous) {
if (!shouldClassNameUpdate(props, GlamorousComponent.previous.props, context, GlamorousComponent.previous.context)) {
if (previous) {
if (!shouldClassNameUpdate(previous.props, props, previous.context, context)) {
update = false;
}
}
GlamorousComponent.previous = { props: props, context: context };
return update;

@@ -528,3 +532,2 @@ }

isGlamorousComponent: true,
previous: null,
propsAreCssOverrides: propsAreCssOverrides,

@@ -531,0 +534,0 @@ withProps: withProps

2

dist/glamorous.umd.tiny.min.js

@@ -1,2 +0,2 @@

!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("react"),require("glamor")):"function"==typeof define&&define.amd?define(["react","glamor"],r):e.glamorous=r(e.React,e.Glamor)}(this,function(e,r){"use strict";function t(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t.noWarn,n=void 0!==o&&o,s=t.createElement,a=void 0===s||s,i=function(e){function t(){var e,r,o,s;y(this,t);for(var a=arguments.length,i=Array(a),p=0;p<a;p++)i[p]=arguments[p];return r=o=O(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(i))),o.warned=n,o.state={theme:{}},o.setTheme=function(e){return o.setState({theme:e})},s=r,O(o,s)}return g(t,e),h(t,[{key:"componentWillMount",value:function(){this.context[m];var e=this.props.theme;this.context[m]?this.setTheme(e||this.context[m].getState()):this.setTheme(e||{})}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.setTheme(e.theme)}},{key:"componentDidMount",value:function(){this.context[m]&&!this.props.theme&&(this.unsubscribe=this.context[m].subscribe(this.setTheme))}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){return a?u.createElement(r,d({},this.props,this.state)):r(d({},this.props,this.state),this.context)}}]),t}(e.Component);i.propTypes={theme:f.object};var p=v({},m,f.object),c=null;return Object.defineProperty(i,"contextTypes",{enumerable:!0,configurable:!0,set:function(e){c=e},get:function(){return c?d({},p,c):p}}),i}function o(e){var r=[],t=[];return e.toString().split(" ").forEach(function(e){if(0===e.indexOf("css-")){var o=n(e);t.push(o)}else r.push(e)}),{glamorlessClassName:r,glamorStyles:t}}function n(e){return v({},"data-"+e,"")}function s(e){var t=e.styles,o=e.props,n=e.cssOverrides,s=e.cssProp,i=e.context,p=(e.displayName,a([].concat(w(t),[o.className,n,s]),o,i)),c=p.mappedArgs,l=p.nonGlamorClassNames;return(r.css.apply(void 0,[null].concat(w(c))).toString()+" "+l.join(" ").trim()).trim()}function a(e,r,t){for(var n=void 0,s=[],i=[],p=0;p<e.length;p++)if("function"==typeof(n=e[p])){var c=n(r,t);if("string"==typeof c){var l=o(c),u=l.glamorStyles,f=l.glamorlessClassName;s.push.apply(s,w(u)),i.push.apply(i,w(f))}else s.push(c)}else if("string"==typeof n){var m=o(n),y=m.glamorStyles,h=m.glamorlessClassName;s.push.apply(s,w(y)),i.push.apply(i,w(h))}else if(Array.isArray(n)){var v=a(n,r,t);s.push.apply(s,w(v.mappedArgs)),i.push.apply(i,w(v.nonGlamorClassNames))}else s.push(n);return{mappedArgs:s,nonGlamorClassNames:i}}function i(e,r,t,o){return e.forEach(function(e){return"function"==typeof e?Object.assign(r,e(Object.assign({},r,t),o)):Array.isArray(e)?Object.assign(r,i(e,r,t,o)):Object.assign(r,e)}),Object.assign(r,t)}function p(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return Array.isArray(e)?e:[e]}function c(e,r){return e?e.concat(r):r}function l(e){return"string"==typeof e?e:e.displayName||e.name||"unknown"}var u="default"in e?e.default:e,f=void 0;if(parseFloat(u.version.slice(0,4))>=15.5)try{f=require("prop-types")}catch(e){}f=f||u.PropTypes;var m="__glamorous__",y=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},h=function(){function e(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(r,t,o){return t&&e(r.prototype,t),o&&e(r,o),r}}(),v=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},g=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},b=function(e,r){var t={};for(var o in e)r.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},O=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},w=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)};return function(e){function r(n){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},p=a.rootEl,c=a.displayName,l=a.shouldClassNameUpdate,m=a.forwardProps,y=void 0===m?[]:m,h=a.propsAreCssOverrides,v=void 0===h?n.propsAreCssOverrides:h,g=a.withProps;return function(){function a(e,r){if(!l)return!0;var t=!0;return O.previous&&(l(e,O.previous.props,r,O.previous.context)||(t=!1)),O.previous={props:e,context:r},t}for(var m=arguments.length,h=Array(m),b=0;b<m;b++)h[b]=arguments[b];var O=t(function(r,t){var o=a(r=i(O.propsToApply,{},r,t),t),n=e(r,O),p=n.toForward,c=n.cssOverrides,l=n.cssProp;return O.className=o?s({styles:O.styles,props:r,cssOverrides:c,cssProp:l,context:t,displayName:O.displayName}):O.className,u.createElement(O.comp,d({ref:r.innerRef},p,{className:O.className}))},{noWarn:!0,createElement:!1});return O.propTypes={className:f.string,cssOverrides:f.object,innerRef:f.func,glam:f.object},Object.assign(O,o({comp:n,styles:h,rootEl:p,forwardProps:y,displayName:c,propsToApply:g}),{withComponent:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return r(e,d({forwardProps:O.forwardProps},t))(O.styles)},isGlamorousComponent:!0,previous:null,propsAreCssOverrides:v,withProps:function(){for(var e=arguments.length,t=Array(e),o=0;o<e;o++)t[o]=arguments[o];return r(O,{withProps:t})()}}),O}}function o(e){var r=e.comp,t=e.styles,o=e.rootEl,n=e.forwardProps,s=e.displayName,a=e.propsToApply,i=r.comp?r.comp:r,u=r.propsToApply?[].concat(w(r.propsToApply),w(p(a))):p(a);return{styles:c(r.styles,t),comp:i,rootEl:o||i,forwardProps:c(r.forwardProps,n),displayName:s||"glamorous("+l(r)+")",propsToApply:u}}return r}(function(e){var r=e.css;e.theme,e.className,e.innerRef,e.glam;return{toForward:b(e,["css","theme","className","innerRef","glam"]),cssProp:r}})});
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("react"),require("glamor")):"function"==typeof define&&define.amd?define(["react","glamor"],r):e.glamorous=r(e.React,e.Glamor)}(this,function(e,r){"use strict";function t(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t.noWarn,n=void 0!==o&&o,s=t.createElement,a=void 0===s||s,i=function(e){function t(){var e,r,o,s;h(this,t);for(var a=arguments.length,i=Array(a),p=0;p<a;p++)i[p]=arguments[p];return r=o=O(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(i))),o.warned=n,o.state={theme:{}},o.setTheme=function(e){return o.setState({theme:e})},s=r,O(o,s)}return g(t,e),y(t,[{key:"componentWillMount",value:function(){this.context[m];var e=this.props.theme;this.context[m]?this.setTheme(e||this.context[m].getState()):this.setTheme(e||{})}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.setTheme(e.theme)}},{key:"componentDidMount",value:function(){this.context[m]&&!this.props.theme&&(this.subscriptionId=this.context[m].subscribe(this.setTheme))}},{key:"componentWillUnmount",value:function(){this.subscriptionId&&this.context[m].unsubscribe(this.subscriptionId)}},{key:"render",value:function(){return a?u.createElement(r,v({},this.props,this.state)):r.call(this,v({},this.props,this.state),this.context)}}]),t}(e.Component);i.propTypes={theme:f.object};var p=d({},m,f.object),c=null;return Object.defineProperty(i,"contextTypes",{enumerable:!0,configurable:!0,set:function(e){c=e},get:function(){return c?v({},p,c):p}}),i}function o(e){var r=[],t=[];return e.toString().split(" ").forEach(function(e){if(0===e.indexOf("css-")){var o=n(e);t.push(o)}else r.push(e)}),{glamorlessClassName:r,glamorStyles:t}}function n(e){return d({},"data-"+e,"")}function s(e){var t=e.styles,o=e.props,n=e.cssOverrides,s=e.cssProp,i=e.context,p=(e.displayName,a([].concat(w(t),[o.className,n,s]),o,i)),c=p.mappedArgs,l=p.nonGlamorClassNames;return(r.css.apply(void 0,[null].concat(w(c))).toString()+" "+l.join(" ").trim()).trim()}function a(e,r,t){for(var n=void 0,s=[],i=[],p=0;p<e.length;p++)if("function"==typeof(n=e[p])){var c=n(r,t);if("string"==typeof c){var l=o(c),u=l.glamorStyles,f=l.glamorlessClassName;s.push.apply(s,w(u)),i.push.apply(i,w(f))}else s.push(c)}else if("string"==typeof n){var m=o(n),h=m.glamorStyles,y=m.glamorlessClassName;s.push.apply(s,w(h)),i.push.apply(i,w(y))}else if(Array.isArray(n)){var d=a(n,r,t);s.push.apply(s,w(d.mappedArgs)),i.push.apply(i,w(d.nonGlamorClassNames))}else s.push(n);return{mappedArgs:s,nonGlamorClassNames:i}}function i(e,r,t,o){return e.forEach(function(e){return"function"==typeof e?Object.assign(r,e(Object.assign({},r,t),o)):Array.isArray(e)?Object.assign(r,i(e,r,t,o)):Object.assign(r,e)}),Object.assign(r,t)}function p(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return Array.isArray(e)?e:[e]}function c(e,r){return e?e.concat(r):r}function l(e){return"string"==typeof e?e:e.displayName||e.name||"unknown"}var u="default"in e?e.default:e,f=void 0;if(parseFloat(u.version.slice(0,4))>=15.5)try{f=require("prop-types")}catch(e){}f=f||u.PropTypes;var m="__glamorous__",h=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},y=function(){function e(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(r,t,o){return t&&e(r.prototype,t),o&&e(r,o),r}}(),d=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},v=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},g=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},b=function(e,r){var t={};for(var o in e)r.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},O=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},w=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)};return function(e){function r(n){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},p=a.rootEl,c=a.displayName,l=a.shouldClassNameUpdate,m=a.forwardProps,h=void 0===m?[]:m,y=a.propsAreCssOverrides,d=void 0===y?n.propsAreCssOverrides:y,g=a.withProps;return function(){function a(e,r,t){if(!l)return!0;var o=!0;return t&&(l(t.props,e,t.context,r)||(o=!1)),o}for(var m=arguments.length,y=Array(m),b=0;b<m;b++)y[b]=arguments[b];var O=t(function(r,t){var o=a(r=i(O.propsToApply,{},r,t),t,this.previous);l&&(this.previous={props:r,context:t});var n=e(r,O),p=n.toForward,c=n.cssOverrides,f=n.cssProp;return this.className=o?s({styles:O.styles,props:r,cssOverrides:c,cssProp:f,context:t,displayName:O.displayName}):this.className,u.createElement(O.comp,v({ref:r.innerRef},p,{className:this.className}))},{noWarn:!0,createElement:!1});return O.propTypes={className:f.string,cssOverrides:f.object,innerRef:f.func,glam:f.object},Object.assign(O,o({comp:n,styles:y,rootEl:p,forwardProps:h,displayName:c,propsToApply:g}),{withComponent:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return r(e,v({forwardProps:O.forwardProps},t))(O.styles)},isGlamorousComponent:!0,propsAreCssOverrides:d,withProps:function(){for(var e=arguments.length,t=Array(e),o=0;o<e;o++)t[o]=arguments[o];return r(O,{withProps:t})()}}),O}}function o(e){var r=e.comp,t=e.styles,o=e.rootEl,n=e.forwardProps,s=e.displayName,a=e.propsToApply,i=r.comp?r.comp:r,u=r.propsToApply?[].concat(w(r.propsToApply),w(p(a))):p(a);return{styles:c(r.styles,t),comp:i,rootEl:o||i,forwardProps:c(r.forwardProps,n),displayName:s||"glamorous("+l(r)+")",propsToApply:u}}return r}(function(e){var r=e.css;e.theme,e.className,e.innerRef,e.glam;return{toForward:b(e,["css","theme","className","innerRef","glam"]),cssProp:r}})});
//# sourceMappingURL=glamorous.umd.tiny.min.js.map

28

package.json
{
"name": "glamorous",
"version": "4.0.0-beta.1",
"version": "4.0.0",
"description": "React component styling solved",

@@ -11,3 +11,2 @@ "main": "dist/glamorous.cjs.js",

"start": "nps",
"doctoc": "doctoc --maxlevel 3 --title \"**Table of Contents**\"",
"test": "nps test",

@@ -17,3 +16,6 @@ "test:ts": "(tsc -p ./tsconfig.json && rimraf test-ts) || rimraf test-ts",

},
"files": ["dist", "typings"],
"files": [
"dist",
"typings"
],
"keywords": [

@@ -31,3 +33,3 @@ "react",

"dependencies": {
"brcast": "^2.0.0",
"brcast": "^3.0.0",
"fast-memoize": "^2.2.7",

@@ -54,3 +56,2 @@ "html-tag-names": "^1.1.1",

"common-tags": "^1.4.0",
"doctoc": "^1.3.0",
"enzyme": "^2.8.2",

@@ -101,4 +102,6 @@ "enzyme-to-json": "^1.5.1",

"lint-staged": {
"*.+(js|json)": ["prettier-eslint --write", "git add"],
"README.md": ["npm run doctoc", "git add"]
"*.+(js|json)": [
"prettier-eslint --write",
"git add"
]
},

@@ -115,4 +118,9 @@ "jest": {

},
"snapshotSerializers": ["enzyme-to-json/serializer", "jest-glamor-react"],
"roots": ["src"]
"snapshotSerializers": [
"enzyme-to-json/serializer",
"jest-glamor-react"
],
"roots": [
"src"
]
},

@@ -141,2 +149,2 @@ "repository": {

]
}
}

1107

README.md

@@ -14,11 +14,9 @@ <h1 align="center">

[![version][version-badge]][package]
[![downloads][downloads-badge]][npm-stat]
[![downloads][downloads-badge]][npmcharts]
[![MIT License][license-badge]][LICENSE]
[![All Contributors](https://img.shields.io/badge/all_contributors-46-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-47-orange.svg?style=flat-square)](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]
[![Roadmap][roadmap-badge]][roadmap]
[![Examples][examples-badge]][examples]

@@ -32,1043 +30,23 @@ [![gzip size][gzip-badge]][unpkg-dist]

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents**
## Documentation
- [The problem](#the-problem)
- [This solution](#this-solution)
- [Installation](#installation)
- [React Native](#react-native)
- [Typescript](#typescript)
- [Video Intro :tv:](#video-intro-tv)
- [Terms and concepts](#terms-and-concepts)
- [glamorous](#glamorous)
- [glamorous API](#glamorous-api)
- [Theming](#theming)
- [Context](#context)
- [Size](#size)
- [Server Side Rendering (SSR)](#server-side-rendering-ssr)
- [Example Style Objects](#example-style-objects)
- [Related projects](#related-projects)
- [Users](#users)
- [Inspiration](#inspiration)
- [Other Solutions](#other-solutions)
- [Support](#support)
- [Got Questions?](#got-questions)
- [Swag 👕](#swag-)
- [Contributors](#contributors)
- [LICENSE](#license)
You will find [tutorials](https://glamorous.rocks/getting-started/),
[examples](https://glamorous.rocks/examples/),
[API documentation](https://glamorous.rocks/api), and more at the glamorous
website:
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<h3 align="center">
<a href="https://glamorous.rocks">glamorous.rocks</a>
</h3>
## The problem
You like CSS in JS, but you don't like having to create entire component
functions just for styling purposes. You don't want to give a name to something
that's purely style-related. And it's just kind of annoying to do the
style-creating, `className` assigning, and props-forwarding song and dance.
For example, this is what you have to do with raw `glamor` (or `aphrodite` or
similar for that matter):
```jsx
const styles = glamor.css({
fontSize: 20,
textAlign: 'center',
})
function MyStyledDiv({className = '', ...rest}) {
return (
<div
className={`${styles} ${className}`}
{...rest}
/>
)
}
```
## This solution
With `glamorous`, that example above looks as simple as this:
```javascript
const MyStyledDiv = glamorous.div({
fontSize: 20,
textAlign: 'center',
})
```
In fact, it's even better, because there are a bunch of features that make
composing these components together really nice!
Oh, and what if you didn't care to give `MyStyledDiv` a name? If you just want
a div that's styled using glamor? You can do that too:
```jsx
const { Div } = glamorous
function App() {
return (
<Div
fontSize={20}
textAlign="center"
>
Hello world!
</Div>
)
}
```
> Try this out in your browser [here](https://codesandbox.io/s/mDLZ1oKn)!
So that's the basics of this solution... Let's get to the details!
## Installation
This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's `dependencies`:
```
npm install --save glamorous
```
This also depends on `react` and `glamor` so you'll need those in your project
as well (if you don't already have them):
```
npm install --save react glamor
```
> NOTE: If you're using React v15.5 or greater, you'll also need to have
> `prop-types` installed: `npm install --save prop-types`
You can then use one of the module formats:
- `main`: `dist/glamorous.cjs.js` - exports itself as a CommonJS module
- `global`: `dist/glamorous.umd.js` and `dist/glamorous.umd.min.js` - exports
itself as a [umd][umd] module which is consumable in several environments, the
most notable as a global.
- `jsnext:main` and `module`: `dist/glamorous.es.js` - exports itself using the
ES modules specification, you'll need to configure webpack to make use of this
file do this using the [resolve.mainFields][mainFields] property.
The most common use-case is consuming this module via CommonJS:
```javascript
const glamorous = require('glamorous')
const {ThemeProvider} = glamorous
// etc.
```
If you're transpiling (and/or using the `jsnext:main`):
```javascript
import glamorous, {ThemeProvider} from 'glamorous'
// you can also import specific Glamorous Components (see section below on "Built-in" components)
import {Div, H2} from 'glamorous'
// tags with the same name as built-in JavaScript objects are importable with a Tag suffix
// and tag names that contain dashes are transformed to CamelCase
import {MapTag, ColorProfile} from 'glamorous'
```
If you want to use the global:
```html
<!-- Load dependencies -->
<script src="https://unpkg.com/react/dist/react.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/glamor/umd/index.js"></script>
<!-- load library -->
<script src="https://unpkg.com/glamorous/dist/glamorous.umd.js"></script>
<script>
// Use window.glamorous here...
const glamorous = window.glamorous
const {ThemeProvider} = glamorous
</script>
```
### React Native
`glamorous` offers a version for React Native projects called `glamorous-native`.
```js
npm install glamorous-native --save
```
You can learn more at the [glamorous-native project][glamorous-native].
### Typescript
`glamorous` includes typescript definition files.
For usage notes and known issues see [other/TYPESCRIPT_USAGE.md][typescript-usage].
## Video Intro :tv:
<a href="https://youtu.be/lmrQTpJ_3PM" title="glamorous walkthrough">
<img src="https://github.com/paypal/glamorous/raw/master/other/glamorous-walkthrough.png" alt="Video Screenshot" title="Video Screenshot" width="700" />
</a>
## Terms and concepts
### glamorous
The `glamorous` function is the main (only) export. It allows you to create
glamorous components that render the styles to the component you give it. This
is done by forwarding a `className` prop to the component you tell it to render.
But before we get into how you wrap custom components, let's talk about the
built-in DOM components.
#### built-in DOM component factories
For every DOM element, there is an associated `glamorous` component factory
attached to the `glamorous` function. As above, you can access these factories
like so: `glamorous.div`, `glamorous.a`, `glamorous.article`, etc.
```jsx
const MyStyledSection = glamorous.section({ margin: 1 })
<MyStyledSection>content</MyStyledSection>
// rendered output: <section class="<glamor-generated-class>">content</section>
// styles applied: {margin: 1}
```
#### glamorousComponentFactory
Whether you create one yourself or use one of the built-in ones mentioned above,
each `glamorousComponentFactory` allows you to invoke it with styles and it
returns you a new component which will have those styles applied when it's
rendered. This is accomplished by generating a `className` for the styles you
give and forwarding that `className` onto the rendered element. So if you're
wrapping a component you intend to style, you'll need to make sure you accept
the `className` as a prop and apply it to where you want the styles applied in
your custom component (normally the root element).
```jsx
const UnstyledComp = ({ className, children }) => <div className={`${className} other-class`}>{children}</div>
const MyStyledComp = glamorous(UnstyledComp)({ margin: 1 })
<MyStyledComp>content</MyStyledComp>
// rendered output: <div class="<glamor-generated-class> other-class">content</div>
// styles applied:
// <glamor-generated-class> {
// margin: 1px;
// }
```
##### ...styles
The `glamorousComponentFactory` accepts any number of style object arguments.
These can be style objects or functions which are invoked with `props` on every
render and return style objects. To learn more about what these style objects
can look like, please take a look at the [`glamor`][glamor] documentation.
```jsx
const MyStyledDiv = glamorous.div(
{
margin: 1,
},
(props) => ({
padding: props.noPadding ? 0 : 4,
})
)
<MyStyledDiv /> // styles applied: { margin: 1px; padding: 4px; }
<MyStyledDiv noPadding /> // styles applied: { margin: 1px; padding: 0; }
```
> Tip: glamorous simply takes these style objects and forwards them to `glamor`.
> `glamor` will then merge those together in a way you would expect. One neat
> thing you can do is specify an array of style objects and `glamor` will treat
> that exactly the same. It's really expressive! See the [examples][examples]
> for an example of how this works.
You can also specify other classes you'd like applied to the component as well.
If these classes are generated by glamor, then their styles will be merged with
the glamor style's, otherwise the class name will simply be forwarded. For
example:
```jsx
const className1 = glamor.css({paddingTop: 1, paddingRight: 1}).toString()
const styles2 = {paddingRight: 2, paddingBottom: 2}
const className3 = glamor.css({paddingBottom: 3, paddingLeft: 3}).toString()
const styles4 = {paddingLeft: 4}
const styles5 = props => (props.active ? 'active' : 'not-active')
const MyStyledDiv = glamorous.div(
className1,
styles2,
className3,
styles4,
styles5,
'extra-thing',
)
<MyStyledDiv /> // styles applied: { padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px } + 'not-active' and anything coming from `extra-thing`.
```
#### GlamorousComponent
The `GlamorousComponent` is what is returned from the `glamorousComponentFactory`.
Its job is to get all the styles together, get a `className` (from [`glamor`][glamor])
and forward that on to your component.
##### supported props
By default `GlamorousComponent` supports three props: `className`, `css` and `theme`
which are used to override the styles of the component in different scenarios. For a
more detailed explanation see [Overriding component styles](#overriding-component-styles) and [Theming](#theming) sections below.
##### `innerRef`
This is a function and if provided, will be called with the inner element's
reference.
```jsx
const MyDiv = glamorous.div({ padding: 20 })
// You can get a reference to the inner element with the `innerRef` prop
class MyComponent extends React.Component {
render () {
return (
<MyDiv innerRef={c => this._divRef = c} />
)
}
}
```
##### other props
Only props that are safe to forward to the specific `element` (ie. that will
ultimately be rendered) will be forwarded. So this is totally legit:
```jsx
<MyStyledDiv size="big" />
```
A use case for doing something like this would be for dynamic styles:
```javascript
const staticStyles = {color: 'green'}
const dynamicStyles = props => ({fontSize: props.size === 'big' ? 32 : 24})
const MyDynamicallyStyledDiv = glamorous.div(staticStyles, dynamicStyles)
```
> The exception to this prop forwarding is the pre-created `GlamorousComponent`s
> (see below).
#### built-in GlamorousComponents
Often you want to style something without actually giving it a name (because
naming things is hard). So glamorous also exposes a pre-created
`GlamorousComponent` for each DOM node type which makes this reasonable to do:
```jsx
const { Div, Span, A, Img } = glamorous
function MyUserInterface({name, tagline, imageUrl, homepage, size}) {
const nameSize = size
const taglineSize = size * 0.5
return (
<Div display="flex" flexDirection="column" justifyContent="center">
<A href={homepage} textDecoration="underline" color="#336479">
<Img borderRadius="50%" height={180} src={imageUrl} />
<Div fontSize={nameSize} fontWeight="bold">{name}</Div>
</A>
<Span fontSize={taglineSize} color="#767676">
{tagline}
</Span>
</Div>
)
}
```
> Try this out in your browser [here](https://codesandbox.io/s/wmRo8OKDm)!
Having to name all of that stuff could be tedious, so having these pre-built
components is handy. The other handy bit here is that the props _are_ the styles
for these components. Notice that glamorous can distinguish between props that
are for styling and those that are have semantic meaning (like with the `Img`
and `A` components which make use of `src` and `href` props).
The `css` prop can be used to provide styles as an object.
```jsx harmony
import glamorous, {withTheme} from 'glamorous'
const { Div, Span } = glamorous
const predefinedStyle = {
color: '#767676',
fontSize: 18,
}
const MyUserInterface = withTheme(function ({tagline, theme}) {
return (
<Div
css={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
[theme.mq.tablet]: {
flexDirection: 'row'
}
}}
>
<Span css={predefinedStyle}>
{tagline}
</Span>
</Div>
)
})
```
One other tip... This totally works:
```jsx
<glamorous.Div color="blue">
JSX is pretty wild!
</glamorous.Div>
```
#### Overriding component styles
The most common scenario for using props is to override the style of an
existing component (generated by `glamorous` or not). That can be achieved
by using the props `className`, `css` and `theme` or simply component
composition with the `glamorous()` function.
If you're interested in knowing more about using the `theme` prop, see the
[Theming](#theming) section instead for a more detailed explanation. In this
section we'll explain how to use `className`, `css` and composition to override
the styles of a component.
Let's see how that can be done in the examples below.
> Try this out in your browser [here](https://codesandbox.io/s/Kro5369wG)!
We'll use this as our `GlamorousComponent`:
```javascript
const MyStyledDiv = glamorous.div({margin: 1, fontSize: 1, padding: 1})
```
##### using `className`
For each `className` you provide, the `GlamorousComponent` will check to see
whether it is a [`glamor`][glamor] generated `className` (can be from raw glamor
or from `glamorous`, doesn't matter). If it is, it will get the original styles
that were used to generate that `className` and merge those with the styles for
the element that's rendered in a way that the provided `className`'s styles win
in the event of a conflict.
If the `className` is not generated by `glamor`, then it will simply be
forwarded along with the `GlamorousComponent`-generated `className`.
```jsx
const myCustomGlamorStyles = glamor.css({fontSize: 2})
<MyStyledDiv className={`${myCustomGlamorStyles} custom-class`} />
// styles applied:
// {margin: 1, fontSize: 2, padding: 1}
// as well as any styles custom-class applies
```
##### using `css`
This can be the same type as any of the styles provided
(as in `glamorous.div(...styles)`). If specified, it will be merged with this
component's styles and take highest priority over the component's predefined
styles.
```jsx
const myCustomGlamorStyles = glamor.css({fontSize: 2, padding: 2})
<MyStyledDiv
className={`${myCustomGlamorStyles} custom-class`}
css={{padding: 3}}
/>
// styles applied:
// { margin: 1px; fontSize: 2px; padding: 3px }
// as well as any styles custom-class applies
```
##### using `glamorous()` composition
If we just want to extend the styles of an existing component it can be done
by using the `glamorous()` function.
```jsx
const MyComposedStyledDiv = glamorous(MyStyledDiv)({fontSize: 4, padding: 4})
<MyComposedStyledDiv />
// styles applied:
// { margin: 1px; fontSize: 4px; padding: 4px; }
```
In fact, the built-in DOM component factories provided are just an abstraction
of this function, so `glamorous.div` could be written as `glamorous('div')` instead.
### glamorous API
The `glamorous` function allows you to create your own
`glamorousComponentFactory` (see [above](#glamorouscomponentfactory)) for any
component you have. For [example](https://codesandbox.io/s/g5kDAyB9):
```jsx
const MyComponent = props => <div {...props} />
const myGlamorousComponentFactory = glamorous(MyComponent)
const MyGlamorousComponent = myGlamorousComponentFactory({/* styles */})
<MyGlamorousComponent id="i-am-forwarded-to-the-div" />
```
You can also provide a few options to help glamorous know how to handle your
component:
#### displayName
The `displayName` of a React component is used by React in the
[React DevTools][react-devtools] and is really handy for debugging React
applications. Glamorous will do its best to give a good `displayName` for your
component, but, for the example above, the best it can do is:
`glamorous(MyComponent)`. If you want to specify a `displayName`, you can do
so with this property. For [example](https://codesandbox.io/s/P3Lyw5j2):
```jsx
const MyComponent = props => <div {...props} />
const myGlamorousComponentFactory = glamorous(
MyComponent,
{displayName: 'MyGlamorousComponent'}
)
```
> Note: the `displayName` can also included in the className that your
> components are given which makes the development experience a bit nicer.
> To enable this see the section about `config`.
> This will likely be enabled by default in the next major change.
And now all components created by the `myGlamorousComponentFactory` will have
the `displayName` of `MyGlamorousComponent`.
There is also a [babel plugin][babel-displayname] that can monkey-patch the `displayName` onto
the components that you create from your component factory.
#### rootEl
React has an [Unknown Prop Warning][unknown-prop-warning] that it logs when you
pass spurious props to DOM elements: (i.e. `<div big={true} />`). Because you
can style your components using props, glamorous needs to filter out the props
you pass so it doesn't forward these on to the underlying DOM element. However,
if you create your own factory using a custom component, glamorous will just
forward all the props (because the component may actually need them and
glamorous has no way of knowing). But in some cases, the component may be
spreading all of the props onto the root element that it renders. For these
cases, you can tell glamorous which element is being rendered and glamorous will
apply the same logic for which props to forward that it does for the built-in
factories. For [example](https://codesandbox.io/s/P18oV4kD2):
```jsx
const MyComponent = props => <div {...props} />
const myGlamorousComponentFactory = glamorous(
MyComponent,
{rootEl: 'div'}
)
const MyGlamorousComponent = myGlamorousComponentFactory(props => ({
fontSize: props.big ? 36 : 24,
}))
<MyGlamorousComponent big={true} id="room423" />
// this will render:
// <div id="room423" />
// with {fontSize: 36}
// `big` is not forwarded to MyComponent because the `rootEl` is a `div` and `big`
// is not a valid attribute for a `div` however `id` will be forwarded because
// `id` is a valid prop
```
#### forwardProps
There are some cases where you're making a `glamorousComponentFactory` out of
a custom component that spreads _some_ of the properties across an underlying
DOM element, but not all of them. In this case you should use `rootEl` to
forward only the right props to be spread on the DOM element, but you can also
use `forwardProps` to specify extra props that should be forwarded. For
[example](https://codesandbox.io/s/GZEo8jOyy):
```jsx
const MyComponent = ({shouldRender, ...rest}) => (
shouldRender ? <div {...rest} /> : null
)
const MyStyledComponent = glamorous(MyComponent, {
forwardProps: ['shouldRender'],
rootEl: 'div',
})(props => ({
fontSize: props.big ? 36 : 24,
}))
<MyStyledComponent shouldRender={true} big={false} id="hello" />
// this will render:
// <div id="hello" />
// with {fontSize: 24}
// `shouldRender` will be forwarded to `MyComponent` because it is included in
// `forwardProps`. `big` will not be forwarded to `MyComponent` because `rootEl`
// is a `div` and that's not a valid prop for a `div`, but it will be used in
// the styles object function that determines the `fontSize`. Finally `id` will
// be forwarded to `MyComponent` because it is a valid prop for a `div`.
```
#### shouldClassNameUpdate
Most of the time, glamor is super fast, but in some scenarios it may be nice to
prevent glamor from computing your styles when you know the class name should
not change. In these cases, you can implement `shouldClassNameUpdate`. For
example:
```jsx
const pureDivFactory = glamorous('div', {
shouldClassNameUpdate(props, previousProps, context, previousContext) {
// return `true` to update the classname and
// `false` to skip updating the class name
return true
},
})
const Div = pureDivFactory({marginLeft: 1})
render(<Div css={{marginLeft: 2}} />)
// this will render:
// <div />
// with {marginLeft: 2}
```
Note that this is _not_ the same as `shouldComponentUpdate`. Your component will
still be rerendered. `shouldClassNameUpdate` is only for allowing you to opt-out
of generating the `className` unnecessarily.
#### propsAreCssOverrides
This allows you to use props as CSS. You always have the `css` prop, but
sometimes it's really nice to use just the props as CSS.
```javascript
const MyDiv = glamorous('div', {propsAreCssOverrides: true})({
margin: 1,
fontSize: 1,
})
render(<MyDiv margin={2} css={{':hover': {fontWeight: 'bold'}}} />)
// renders <div /> with margin: 2, fontSize: 1, and fontWeight: bold on hover
```
> You can also compose the built-in components: `glamorous(glamorous.Div)(/* styles */)`
#### withComponent
In some cases you might want to just copy the styles of an already created
glamorous component with a different tag altogether, `withComponent` function
comes in handy then. For example:
```jsx
const Button = glamorous.button({
display: 'inline-block',
color: 'red',
fontSize: '16px',
margin: '16px',
padding: '8px 16px',
border: '1px solid red',
borderRadius: '4px',
});
// We're replacing the <button> tag with an <a> tag, but reuse all the same styles
const Link = Button.withComponent('a')
<Button>Normal Button</Button>
<Link>Normal Link</Link>
// this will render:
// <button>Normal Button</button>
// <a>Normal Link</a>
// both with the same styles
```
> Note: to override styles, you can do the same thing you do with a regular
> component (`css` prop, wrap it in `glamorous()`, or regular `className` prop).
#### withProps
Sometimes it can be useful to apply props by default for a component. The
simplest way to do this is by simply setting the `defaultProps` value on the
glamorousComponent. But if you want a little more power and composition, then
the `withProps` APIs can help.
> These APIs are highly composable, it would be hard to show you all the
> examples of how this composes together. Just know that it behaves as you might
> expect.
```javascript
// when creating a glamorousComponentFactory
const bigDivFactory = glamorous('div', {withProps: {big: true}})
const BigDiv = bigDivFactory(({big}) => ({fontSize: big ? 20 : 10}))
render(<BigDiv />) // renders with fontSize: 20
render(<BigDiv big={false} />) // renders with fontSize: 10
// applying props to an existing component
const MyDiv = glamorous.div(({small}) => ({fontSize: small ? 10 : 20}))
const SmallDiv = MyDiv.withProps({small: true})
render(<SmallDiv />) // renders with fontSize: 20
```
Based on those examples, there are three places you can apply props to a
glamorous component. How these props are composed together applies in this order
(where later has more precedence):
1. Creating a `glamorousComponentFactory`
2. Directly on a `glamorousComponent` with the `.withProps` function
3. When rendering a component (just like applying props to a regular components)
In addition to this, you can also have dynamic props. And these props don't have
to be used for glamorous styling, any valid props will be forwarded to the
element:
```javascript
const BoldDiv = glamorous
.div(({bold}) => ({fontWeight: bold ? 'bold' : 'normal'}))
.withProps(({bold}) => ({className: bold ? 'bold-element' : 'normal-element'}))
render(<BoldDiv />) // renders <div class="bold-element" /> with fontWeight: bold
render(<BoldDiv bold={false} />) // renders <div class="normal-element" /> with fontWeight: normal
```
The `.withProps` API can also accept any number of arguments. They are called
with `(accumulatedProps, context)`. `accumulatedProps` refers to the props that
are known so far in the accumulation of the props which makes this API highly
composable. Finally, the `withProps` APIs can also accept arrays of
objects/functions. You can pretty much do anything you want with this API.
> NOTE: This is a shallow merge (uses `Object.assign`)
### Theming
`glamorous` fully supports theming using a special `<ThemeProvider>` component.
It provides the `theme` to all glamorous components down the tree.
> Try this out in your browser [here](https://codesandbox.io/s/o2yq9MkQk)!
```jsx
import glamorous, {ThemeProvider} from 'glamorous'
// our main theme object
const theme = {
main: {color: 'red'}
}
// our secondary theme object
const secondaryTheme = {
main: {color: 'blue'}
}
// a themed <Title> component
const Title = glamorous.h1({
fontSize: '10px'
}, ({theme}) => ({
color: theme.main.color
}))
// use <ThemeProvider> to pass theme down the tree
<ThemeProvider theme={theme}>
<Title>Hello!</Title>
</ThemeProvider>
// it is possible to nest themes
// inner themes will be merged with outers
<ThemeProvider theme={theme}>
<div>
<Title>Hello!</Title>
<ThemeProvider theme={secondaryTheme}>
{/* this will be blue */}
<Title>Hello from here!</Title>
</ThemeProvider>
</div>
</ThemeProvider>
// to override a theme, just pass a theme prop to a glamorous component
// the component will ignore any surrounding theme, applying the one passed directly via props
<ThemeProvider theme={theme}>
{/* this will be yellow */}
<Title theme={{main: {color: 'yellow'}}}>Hello!</Title>
</ThemeProvider>
```
`glamorous` also exports a `withTheme` higher order component (HOC) so you can access your theme in any component!
> Try this out in your browser [here](https://codesandbox.io/s/qYmJjE4jy)!
```jsx
import glamorous, {ThemeProvider, withTheme} from 'glamorous'
// our main theme object
const theme = {
main: {color: 'red'}
}
// a themed <Title> component
const Title = glamorous.h1({
fontSize: '10px'
}, ({theme}) => ({
color: theme.main.color
}))
// normal component that takes a theme prop
const SubTitle = ({children, theme: {color}}) => (
<h3 style={{color}}>{children}</h3>
)
// extended component with theme prop
const ThemedSubTitle = withTheme(SubTitle)
<ThemeProvider theme={theme}>
<Title>Hello!</Title>
<ThemedSubTitle>from withTheme!</ThemedSubTitle>
</ThemeProvider>
```
Or if you prefer decorator syntax:
```jsx
import React, {Component} from 'react'
import glamorous, {ThemeProvider, withTheme} from 'glamorous'
// our main theme object
const theme = {
main: {color: 'red'}
}
// a themed <Title> component
const Title = glamorous.h1({
fontSize: '10px'
}, ({theme}) => ({
color: theme.main.color
}))
// extended component with theme prop
@withTheme
class SubTitle extends Component {
render() {
const {children, theme: {main: {color}}} = this.props
return <h3 style={{color}}>{children}</h3>
}
}
<ThemeProvider theme={theme}>
<Title>Hello!</Title>
<SubTitle>from withTheme!</SubTitle>
</ThemeProvider>
```
> `withTheme` expects a `ThemeProvider` further up the render tree and will warn in `development` if one is not found!
### Context
[context](https://facebook.github.io/react/docs/context.html) is an unstable
API and it's not recommended to use it directly. However, if you need to use it
for some reason, here's an example of how you could do that:
```jsx
const dynamicStyles = (props, context) => ({
color: context.isLoggedIn ? 'green' : 'red'
})
const MyDiv = glamorous.div(dynamicStyles)
MyDiv.contextTypes = {
isLoggedIn: PropTypes.string,
}
class Parent extends React.Component {
getChildContext() {
return {
isLoggedIn: true,
}
}
render() {
return <MyDiv />
}
}
Parent.childContextTypes = {
isLoggedIn: PropTypes.string,
}
<Parent />
// renders <div />
// with {color: 'green'}
```
### Size
If your use case is really size constrained, then you might consider using the "tiny" version of glamorous for your application.
It's is a miniature version of `glamorous` with a few limitations:
1. No built-in component factories (`glamorous.article({/* styles */})`)
So you have to create your own (`glamorous('article')({/* styles */})`)
2. No built-in glamorous components (`glamorous.Span`)
3. No props filtering for dynamic styles, instead, you place them on a special
`glam` prop (see the example below).
4. If you need `ThemeProvider` or `withTheme`, you must import those manually.
They are not exported as part of `glamorous/tiny` like they are with `glamorous`.
Here's an example of what you're able to do with it.
```jsx
import React from 'react'
import glamorous from 'glamorous/dist/glamorous.es.tiny'
const Comp = glamorous('div')({
color: 'red'
}, (props) => ({
fontSize: props.glam.big ? 20 : 12
}))
function Root() {
return (
<Comp
glam={{big: true}}
thisWillBeForwardedAndReactWillWarn
>
ciao
</Comp>
)
}
export default Root
```
It's recommended to use either [`babel-plugin-module-resolver`][babel-plugin-module-resolver]
or the [`resolve.alias`][resolve-alias] config with webpack so you don't have
to import from that full path. You have the following options available for this
import:
1. `glamorous/dist/glamorous.es.tiny.js` - use if you're using Webpack@>=2 or Rollup
2. `glamorous/dist/glamorous.cjs.tiny` - use if you're not transpiling ESModules
3. `glamorous/dist/glamorous.umd.tiny.js` - use if you're including it as a script tag. (There's also a `.min.js` version).
The current size of `glamorous/dist/glamorous.umd.tiny.min.js` is: [![tiny size][tiny-size-badge]][unpkg-dist]
[![tiny gzip size][tiny-gzip-badge]][unpkg-dist]
> IMPORTANT NOTE ABOUT SIZE: Because `glamorous` depends on `glamor`, you should consider the full size you'll be adding
> to your application if you don't already have `glamor`.
> The current size of `glamor/umd/index.min.js` is: [![glamor size][glamor-size-badge]][unpkg-glamor]
> [![glamor gzip size][glamor-gzip-badge]][unpkg-glamor]
### Server Side Rendering (SSR)
Because both `glamor` and `react` support SSR, `glamorous` does too! I actually
do this on [my personal site](https://github.com/kentcdodds/kentcdodds.com)
which is generated at build-time on the server. Learn about rendering
[`react` on the server][react-ssr] and [`glamor` too][glamor-ssr].
### Example Style Objects
Style objects can affect pseudo-classes and pseudo-elements, complex CSS
selectors, introduce keyframe animations, and use media queries:
<details>
<summary>pseudo-class</summary>
```javascript
const MyLink = glamorous.a({
':hover': {
color: 'red'
}
})
// Use in a render function
<MyLink href="https://github.com">GitHub</MyLink>
```
</details>
<details>
<summary>pseudo-element</summary>
```jsx
const MyListItem = glamorous.li({
listStyleType: 'none',
position: 'relative',
'&::before': {
content: `'#'`, // be sure the quotes are included in the passed string
display: 'block',
position: 'absolute',
left: '-20px',
width: '20px',
height: '20px'
}
})
// Use in a render function
<ul>
<MyListItem>Item 1</MyListItem>
<MyListItem>Item 2</MyListItem>
<MyListItem>Item 3</MyListItem>
</ul>
```
</details>
<details>
<summary>Relational CSS Selectors</summary>
```jsx
const MyDiv = glamorous.div({
display: 'block',
'& div': { color: 'red' }, // child selector
'& div:first-of-type': { textDecoration: 'underline' }, // psuedo-selector
'& > p': { color: 'blue' } // direct descendent
})
// Use in a render function
<MyDiv>
<div><p>Red Underlined Paragraph</p></div>
<div>Red Paragraph</div>
<p>Blue Paragraph</p>
</MyDiv>
```
</details>
<details>
<summary>Animations</summary>
> Try this in [your browser](https://codesandbox.io/s/31VMyP7XO)
```jsx
// import css from glamor
import { css } from 'glamor'
// Define the animation styles
const animationStyles = props => {
const bounce = css.keyframes({
'0%': { transform: `scale(1.01)` },
'100%': { transform: `scale(0.99)` }
})
return {animation: `${bounce} 0.2s infinite ease-in-out alternate`}
}
// Define the element
const AnimatedDiv = glamorous.div(animationStyles)
// Use in a render function
<AnimatedDiv>
Bounce.
</AnimatedDiv>
```
</details>
<details>
<summary>Media Queries</summary>
```jsx
const MyResponsiveDiv = glamorous.div({
width: '100%',
padding: 20,
'@media(min-width: 400px)': {
width: '85%',
padding: 0
}
})
// Use in a render function
<MyResponsiveDiv>
Responsive Content
</MyResponsiveDiv>
```
</details>
## Related projects
- [babel-plugin-glamorous-displayname][babel-displayname]: Automatically adds a `displayName` to your glamorous components for a better debugging experience.
- [`jest-glamor-react`](https://github.com/kentcdodds/jest-glamor-react): Jest utilities for Glamor and React
- [`glamorous-native`][glamorous-native]: React Native component styling solved 💄
- [`glamorous-primitives`][glamorous-primitives]: style primitive interfaces with glamorous 💄
- [`babel-plugin-glamorous-displayname`][babel-displayname]: Automatically adds a `displayName` to your glamorous components for a better debugging experience.
- [`styled-system`](https://github.com/jxnblk/styled-system): Design system utilities for styled-components, glamorous, and other css-in-js libraries
- [`glamorous-pseudo`](https://github.com/tkh44/glamorous-pseudo): Pseudo component to extend built-in GlamorousComponents
- [`preact-glam`](https://github.com/vesparny/preact-glam): A tiny glamorous version for preact
- [`glamorous-jsxstyle`](https://github.com/paulmolluzzo/glamorous-jsxstyle): jsxstyle components generated with glamorous

@@ -1087,15 +65,2 @@ ## Users

The biggest inspiration for building this is because I love the API offered by
`styled-components`, but I wanted:
1. Not to ship a CSS parser to the browser (because it's huge and less
performant).
2. Support for RTL (via something like [rtl-css-js][rtl-css-js])
3. Support for using _real_ JavaScript objects rather than a CSS string (better
tooling support, ESLint, etc.)
> You can get around the parser issue if you use a certain babel plugin, but
> then you can't do any dynamic construction of your CSS string (like
> [this][styled-components-util]) which is a bummer for custom utilities.
## Other Solutions

@@ -1109,8 +74,8 @@

If you need help, please fork [this CodeSandbox][help-sandbox] and bring it up in
[the chat][chat]
If you need help, please fork [this CodeSandbox][help-sandbox] and bring it up
in [the chat][chat]
## Got Questions?
Check out the [FAQ](docs/FAQ.md).
Check out the [FAQ](other/FAQ.md).

@@ -1145,3 +110,3 @@ ## Swag 👕

| [<img src="https://avatars3.githubusercontent.com/u/22868432?v=3" width="100px;"/><br /><sub>Lufty Wiranda</sub>](http://instagram.com/luftywiranda13)<br />[💻](https://github.com/paypal/glamorous/commits?author=luftywiranda13 "Code") | [<img src="https://avatars3.githubusercontent.com/u/3208863?v=3" width="100px;"/><br /><sub>Ansuman Shah</sub>](https://github.com/ansumanshah)<br />[💻](https://github.com/paypal/glamorous/commits?author=ansumanshah "Code") [📖](https://github.com/paypal/glamorous/commits?author=ansumanshah "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/11598?v=3" width="100px;"/><br /><sub>Travis LaDuke</sub>](http://-)<br />[💡](#example-laduke "Examples") | [<img src="https://avatars2.githubusercontent.com/u/11290953?v=3" width="100px;"/><br /><sub>Aydın Çağrı Dumlu</sub>](https://github.com/acgrdumlu)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aacgrdumlu "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=acgrdumlu "Code") | [<img src="https://avatars2.githubusercontent.com/u/1383861?v=3" width="100px;"/><br /><sub>Maja Wichrowska</sub>](https://github.com/majapw)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amajapw "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/6845263?v=3" width="100px;"/><br /><sub>Tom Liu</sub>](https://github.com/gt3240)<br />[📖](https://github.com/paypal/glamorous/commits?author=gt3240 "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1863771?v=3" width="100px;"/><br /><sub>Siddharth Kshetrapal</sub>](https://github.com/siddharthkp)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=siddharthkp "Tests") [🔧](#tool-siddharthkp "Tools") |
| [<img src="https://avatars2.githubusercontent.com/u/5257243?v=3" width="100px;"/><br /><sub>WillowHQ</sub>](https://github.com/WillowHQ)<br />[📖](https://github.com/paypal/glamorous/commits?author=WillowHQ "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub>Mohammad Rajabifard</sub>](https://tarino.ir)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amorajabi "Bug reports") [📖](https://github.com/paypal/glamorous/commits?author=morajabi "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/17005317?v=3" width="100px;"/><br /><sub>Omar Albacha</sub>](https://github.com/Oalbacha)<br />[💻](https://github.com/paypal/glamorous/commits?author=Oalbacha "Code") [📖](https://github.com/paypal/glamorous/commits?author=Oalbacha "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/28659384?v=3" width="100px;"/><br /><sub>tdeschryver</sub>](https://github.com/tdeschryver)<br />[💻](https://github.com/paypal/glamorous/commits?author=tdeschryver "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tdeschryver "Tests") |
| [<img src="https://avatars2.githubusercontent.com/u/5257243?v=3" width="100px;"/><br /><sub>WillowHQ</sub>](https://github.com/WillowHQ)<br />[📖](https://github.com/paypal/glamorous/commits?author=WillowHQ "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub>Mohammad Rajabifard</sub>](https://tarino.ir)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amorajabi "Bug reports") [📖](https://github.com/paypal/glamorous/commits?author=morajabi "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/17005317?v=3" width="100px;"/><br /><sub>Omar Albacha</sub>](https://github.com/Oalbacha)<br />[💻](https://github.com/paypal/glamorous/commits?author=Oalbacha "Code") [📖](https://github.com/paypal/glamorous/commits?author=Oalbacha "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/28659384?v=3" width="100px;"/><br /><sub>tdeschryver</sub>](https://github.com/tdeschryver)<br />[💻](https://github.com/paypal/glamorous/commits?author=tdeschryver "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tdeschryver "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4955191?v=4" width="100px;"/><br /><sub>Dylan Mozlowski</sub>](https://github.com/DylanMoz)<br />[💻](https://github.com/paypal/glamorous/commits?author=DylanMoz "Code") |
<!-- ALL-CONTRIBUTORS-LIST:END -->

@@ -1165,3 +130,3 @@

[downloads-badge]: https://img.shields.io/npm/dm/glamorous.svg?style=flat-square
[npm-stat]: http://npm-stat.com/charts.html?package=glamorous&from=2017-04-01
[npmcharts]: https://npmcharts.com/compare/glamorous
[license-badge]: https://img.shields.io/npm/l/glamorous.svg?style=flat-square

@@ -1175,6 +140,2 @@ [license]: https://github.com/paypal/glamorous/blob/master/LICENSE

[coc]: https://github.com/paypal/glamorous/blob/master/other/CODE_OF_CONDUCT.md
[roadmap-badge]: https://img.shields.io/badge/%F0%9F%93%94-roadmap-CD9523.svg?style=flat-square
[roadmap]: https://github.com/paypal/glamorous/blob/master/other/ROADMAP.md
[examples-badge]: https://img.shields.io/badge/%F0%9F%92%A1-examples-8C8E93.svg?style=flat-square
[examples]: https://github.com/paypal/glamorous/blob/master/examples
[github-watch-badge]: https://img.shields.io/github/watchers/paypal/glamorous.svg?style=social

@@ -1188,28 +149,8 @@ [github-watch]: https://github.com/paypal/glamorous/watchers

[all-contributors]: https://github.com/kentcdodds/all-contributors
[glamor]: https://github.com/threepointone/glamor
[rtl-css-js]: https://github.com/kentcdodds/rtl-css-js
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square
[size-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.min.js?label=size&style=flat-square
[tiny-gzip-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.tiny.min.js?compression=gzip&label=gzip%20size&style=flat-square
[tiny-size-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.tiny.min.js?label=size&style=flat-square
[unpkg-dist]: https://unpkg.com/glamorous/dist/
[glamor-gzip-badge]: http://img.badgesize.io/https://unpkg.com/glamor/umd/index.min.js?compression=gzip&label=gzip%20size&style=flat-square
[glamor-size-badge]: http://img.badgesize.io/https://unpkg.com/glamor/umd/index.min.js?label=size&style=flat-square
[unpkg-glamor]: https://unpkg.com/glamor/umd/
[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square
[mainFields]: https://webpack.js.org/configuration/resolve/#resolve-mainfields
[umd]: https://github.com/umdjs/umd
[styled-components-util]: https://codepen.io/kentcdodds/pen/MpxMge
[intro-blogpost]: https://medium.com/p/fb3c9f4ed20e
[react-ssr]: https://facebook.github.io/react/docs/react-dom-server.html
[glamor-ssr]: https://github.com/threepointone/glamor/blob/5e7d988211330b8e2fca5bb8da78e35051444efd/docs/server.md
[help-sandbox]: http://kcd.im/glamorous-help
[react-devtools]: https://github.com/facebook/react-devtools
[babel-plugin]: https://github.com/paypal/glamorous/issues/29
[unknown-prop-warning]: https://facebook.github.io/react/warnings/unknown-prop.html
[babel-plugin-module-resolver]: https://github.com/tleunen/babel-plugin-module-resolver
[resolve-alias]: https://webpack.js.org/configuration/resolve/#resolve-alias
[glamorous-native]: https://github.com/robinpowered/glamorous-native
[typescript-usage]: https://github.com/paypal/glamorous/blob/master/other/TYPESCRIPT_USAGE.md
[gwc]: https://girlswhocode.com/
[babel-displayname]: https://www.npmjs.com/package/babel-plugin-glamorous-displayname
[glamorous-primitives]: https://github.com/nitin42/glamorous-primitives

6

typings/component-factory.ts

@@ -84,3 +84,3 @@ import { GlamorousComponent } from './glamorous-component'

): GlamorousComponent<
ExternalProps & Partial<DefaultProps>,
ExternalProps & Partial<DefaultProps> & Props,
Props

@@ -107,3 +107,3 @@ >;

): GlamorousComponent<
ExternalProps & Partial<DefaultProps> & Properties,
ExternalProps & Partial<DefaultProps> & Properties & Props,
Props

@@ -118,5 +118,5 @@ >

): GlamorousComponent<
ExternalProps & Partial<DefaultProps> & Properties,
ExternalProps & Partial<DefaultProps> & Properties & Omit<Props, 'theme'>,
Props
>
}
dist/glamorous.umd.js.map

Sorry, the diff of this file is not supported yet

dist/glamorous.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/glamorous.umd.tiny.js.map

Sorry, the diff of this file is not supported yet

dist/glamorous.umd.tiny.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc