@wener/ui
Version:
1,296 lines (1,128 loc) • 93.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var styled = _interopDefault(require('styled-components'));
var lodash = require('lodash');
var rxjs = require('rxjs');
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _taggedTemplateLiteral(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _templateObject5() {
var data = _taggedTemplateLiteral(["\n .leo {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n }\n\n .blue-orbit {\n width: 165px;\n height: 165px;\n border: 1px solid #91daffa5;\n -webkit-animation: spin3D 3s linear 0.2s infinite;\n }\n\n .green-orbit {\n width: 120px;\n height: 120px;\n border: 1px solid #91ffbfa5;\n -webkit-animation: spin3D 2s linear 0s infinite;\n }\n\n .red-orbit {\n width: 90px;\n height: 90px;\n border: 1px solid #ffca91a5;\n -webkit-animation: spin3D 1s linear 0s infinite;\n }\n\n .white-orbit {\n width: 60px;\n height: 60px;\n border: 2px solid #ffffff;\n -webkit-animation: spin3D 10s linear 0s infinite;\n }\n\n .w1 {\n transform: rotate3D(1, 1, 1, 90deg);\n }\n\n .w2 {\n transform: rotate3D(1, 2, 0.5, 90deg);\n }\n\n .w3 {\n transform: rotate3D(0.5, 1, 2, 90deg);\n }\n\n @keyframes spin {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(359deg);\n }\n }\n\n @keyframes spin3D {\n from {\n transform: rotate3d(0.5, 0.5, 0.5, 360deg);\n }\n to {\n transform: rotate3d(0deg);\n }\n }\n"]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n .solar-system {\n width: 250px;\n height: 250px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .orbit {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid #ffffffa5;\n border-radius: 50%;\n }\n\n .earth-orbit {\n width: 165px;\n height: 165px;\n animation: spin 12s linear 0s infinite;\n }\n\n .venus-orbit {\n width: 120px;\n height: 120px;\n animation: spin 7.4s linear 0s infinite;\n }\n\n .mercury-orbit {\n width: 90px;\n height: 90px;\n animation: spin 3s linear 0s infinite;\n }\n\n .planet {\n position: absolute;\n top: -5px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #3ff9dc;\n }\n\n .sun {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n background-color: #ffab91;\n }\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n .pulse-container {\n width: 120px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .pulse-bubble {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #3ff9dc;\n }\n\n .pulse-bubble-1 {\n animation: pulse 0.4s ease 0s infinite alternate;\n }\n .pulse-bubble-2 {\n animation: pulse 0.4s ease 0.2s infinite alternate;\n }\n .pulse-bubble-3 {\n animation: pulse 0.4s ease 0.4s infinite alternate;\n }\n @keyframes pulse {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0.25;\n transform: scale(0.75);\n }\n }\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n .circle-border {\n width: 150px;\n height: 150px;\n padding: 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background: rgb(63, 249, 220);\n background: linear-gradient(0deg, rgba(63, 249, 220, 0.1) 33%, rgba(63, 249, 220, 1) 100%);\n animation: spin 0.8s linear 0s infinite;\n }\n\n .circle-core {\n width: 100%;\n height: 100%;\n background-color: #37474f;\n border-radius: 50%;\n }\n\n @keyframes spin {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(359deg);\n }\n }\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n width: 300px;\n height: 300px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: transparent;\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var SpinnerBox = styled.div(_templateObject());
var GradientSpinnerBox = styled(SpinnerBox)(_templateObject2());
var PulseBubbleBox = styled(SpinnerBox)(_templateObject3());
var GradientSpinner = function GradientSpinner() {
return /*#__PURE__*/React__default.createElement(GradientSpinnerBox, null, /*#__PURE__*/React__default.createElement("div", {
className: "circle-border"
}, /*#__PURE__*/React__default.createElement("div", {
className: "circle-core"
})));
};
var PulseBubble = function PulseBubble() {
return /*#__PURE__*/React__default.createElement(PulseBubbleBox, null, /*#__PURE__*/React__default.createElement("div", {
className: "pulse-container"
}, /*#__PURE__*/React__default.createElement("div", {
className: "pulse-bubble pulse-bubble-1"
}), /*#__PURE__*/React__default.createElement("div", {
className: "pulse-bubble pulse-bubble-2"
}), /*#__PURE__*/React__default.createElement("div", {
className: "pulse-bubble pulse-bubble-3"
})));
};
var SolarSystemBox = styled(SpinnerBox)(_templateObject4());
var SolarSystemSpinner = function SolarSystemSpinner() {
return /*#__PURE__*/React__default.createElement(SolarSystemBox, null, /*#__PURE__*/React__default.createElement("div", {
className: "solar-system"
}, /*#__PURE__*/React__default.createElement("div", {
className: "earth-orbit orbit"
}, /*#__PURE__*/React__default.createElement("div", {
className: "planet earth"
}), /*#__PURE__*/React__default.createElement("div", {
className: "venus-orbit orbit"
}, /*#__PURE__*/React__default.createElement("div", {
className: "planet venus"
}), /*#__PURE__*/React__default.createElement("div", {
className: "mercury-orbit orbit"
}, /*#__PURE__*/React__default.createElement("div", {
className: "planet mercury"
}), /*#__PURE__*/React__default.createElement("div", {
className: "sun"
}))))));
};
var PlanetRotatingBox = styled(SpinnerBox)(_templateObject5());
var PlantRotating = function PlantRotating() {
return /*#__PURE__*/React__default.createElement(PlanetRotatingBox, null, /*#__PURE__*/React__default.createElement("div", {
className: "blue-orbit leo"
}), /*#__PURE__*/React__default.createElement("div", {
className: "green-orbit leo"
}), /*#__PURE__*/React__default.createElement("div", {
className: "red-orbit leo"
}), /*#__PURE__*/React__default.createElement("div", {
className: "white-orbit w1 leo"
}), /*#__PURE__*/React__default.createElement("div", {
className: "white-orbit w2 leo"
}), /*#__PURE__*/React__default.createElement("div", {
className: "white-orbit w3 leo"
}));
};
function _templateObject$1() {
var data = _taggedTemplateLiteral(["\n position: absolute;\n width: 35px;\n height: 35px;\n left: 50%;\n top: 50%;\n & > div {\n position: absolute;\n width: 2px;\n height: 8px;\n background-color: #25363f;\n opacity: 0.05;\n animation: fadeit 0.8s linear infinite;\n }\n\n ", "\n\n @keyframes fadeit {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n"]);
_templateObject$1 = function _templateObject() {
return data;
};
return data;
}
var BarsSpinnerBox = styled.div(_templateObject$1(), function (_ref) {
var bars = _ref.bars;
return Array(bars).fill(null).map(function (_, i) {
return "\n & > div:nth-child(".concat(i + 1, ") {\n transform: rotate(").concat((360 / bars * i).toFixed(2), "deg) translate(0, -12px);\n animation-delay:").concat((0.8 / bars * (i + 1)).toFixed(2), "s;\n }\n ");
});
});
var BarsSpinner = function BarsSpinner(_ref2) {
var _ref2$bars = _ref2.bars,
bars = _ref2$bars === void 0 ? 16 : _ref2$bars;
return /*#__PURE__*/React__default.createElement(BarsSpinnerBox, {
bars: bars
}, Array(bars).fill(null).map(function (_, i) {
return /*#__PURE__*/React__default.createElement("div", {
key: i
});
}));
};
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _isNativeFunction(fn) {
return Function.toString.call(fn).indexOf("[native code]") !== -1;
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _construct(Parent, args, Class) {
if (_isNativeReflectConstruct()) {
_construct = Reflect.construct;
} else {
_construct = function _construct(Parent, args, Class) {
var a = [null];
a.push.apply(a, args);
var Constructor = Function.bind.apply(Parent, a);
var instance = new Constructor();
if (Class) _setPrototypeOf(instance, Class.prototype);
return instance;
};
}
return _construct.apply(null, arguments);
}
function _wrapNativeSuper(Class) {
var _cache = typeof Map === "function" ? new Map() : undefined;
_wrapNativeSuper = function _wrapNativeSuper(Class) {
if (Class === null || !_isNativeFunction(Class)) return Class;
if (typeof Class !== "function") {
throw new TypeError("Super expression must either be null or a function");
}
if (typeof _cache !== "undefined") {
if (_cache.has(Class)) return _cache.get(Class);
_cache.set(Class, Wrapper);
}
function Wrapper() {
return _construct(Class, arguments, _getPrototypeOf(this).constructor);
}
Wrapper.prototype = Object.create(Class.prototype, {
constructor: {
value: Wrapper,
enumerable: false,
writable: true,
configurable: true
}
});
return _setPrototypeOf(Wrapper, Class);
};
return _wrapNativeSuper(Class);
}
/**
* Parse errors.md and turn it into a simple hash of code: message
* @private
*/
var ERRORS = {
"1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
"2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
"3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
"4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
"5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
"6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
"7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
"8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
"9": "Please provide a number of steps to the modularScale helper.\n\n",
"10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
"11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
"12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
"13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
"14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
"15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
"16": "You must provide a template to this method.\n\n",
"17": "You passed an unsupported selector state to this method.\n\n",
"18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
"19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
"20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
"21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
"22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
"23": "fontFace expects a name of a font-family.\n\n",
"24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
"25": "fontFace expects localFonts to be an array.\n\n",
"26": "fontFace expects fileFormats to be an array.\n\n",
"27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
"28": "Please supply a filename to retinaImage() as the first argument.\n\n",
"29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
"30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
"31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
"32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
"33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
"34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
"35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
"36": "Property must be a string value.\n\n",
"37": "Syntax Error at %s.\n\n",
"38": "Formula contains a function that needs parentheses at %s.\n\n",
"39": "Formula is missing closing parenthesis at %s.\n\n",
"40": "Formula has too many closing parentheses at %s.\n\n",
"41": "All values in a formula must have the same unit or be unitless.\n\n",
"42": "Please provide a number of steps to the modularScale helper.\n\n",
"43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
"44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
"45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
"46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
"47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
"48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
"49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
"50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
"51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
"52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
"53": "fontFace expects localFonts to be an array.\n\n",
"54": "fontFace expects fileFormats to be an array.\n\n",
"55": "fontFace expects a name of a font-family.\n\n",
"56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
"57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
"58": "Please supply a filename to retinaImage() as the first argument.\n\n",
"59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
"60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
"61": "Property must be a string value.\n\n",
"62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
"63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
"64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
"65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
"66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
"67": "You must provide a template to this method.\n\n",
"68": "You passed an unsupported selector state to this method.\n\n",
"69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
"70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
"71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
"72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
"73": "Please provide a valid CSS variable.\n\n",
"74": "CSS variable not found.\n"
};
/**
* super basic version of sprintf
* @private
*/
function format() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var a = args[0];
var b = [];
var c;
for (c = 1; c < args.length; c += 1) {
b.push(args[c]);
}
b.forEach(function (d) {
a = a.replace(/%[a-z]/, d);
});
return a;
}
/**
* Create an error file out of errors.md for development and a simple web link to the full errors
* in production mode.
* @private
*/
var PolishedError = /*#__PURE__*/function (_Error) {
_inheritsLoose(PolishedError, _Error);
function PolishedError(code) {
var _this;
if (process.env.NODE_ENV === 'production') {
_this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/master/src/internalHelpers/errors.md#" + code + " for more information.") || this;
} else {
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
_this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
}
return _assertThisInitialized(_this);
}
return PolishedError;
}( /*#__PURE__*/_wrapNativeSuper(Error));
function colorToInt(color) {
return Math.round(color * 255);
}
function convertToInt(red, green, blue) {
return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
}
function hslToRgb(hue, saturation, lightness, convert) {
if (convert === void 0) {
convert = convertToInt;
}
if (saturation === 0) {
// achromatic
return convert(lightness, lightness, lightness);
} // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
var huePrime = (hue % 360 + 360) % 360 / 60;
var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
var red = 0;
var green = 0;
var blue = 0;
if (huePrime >= 0 && huePrime < 1) {
red = chroma;
green = secondComponent;
} else if (huePrime >= 1 && huePrime < 2) {
red = secondComponent;
green = chroma;
} else if (huePrime >= 2 && huePrime < 3) {
green = chroma;
blue = secondComponent;
} else if (huePrime >= 3 && huePrime < 4) {
green = secondComponent;
blue = chroma;
} else if (huePrime >= 4 && huePrime < 5) {
red = secondComponent;
blue = chroma;
} else if (huePrime >= 5 && huePrime < 6) {
red = chroma;
blue = secondComponent;
}
var lightnessModification = lightness - chroma / 2;
var finalRed = red + lightnessModification;
var finalGreen = green + lightnessModification;
var finalBlue = blue + lightnessModification;
return convert(finalRed, finalGreen, finalBlue);
}
var namedColorMap = {
aliceblue: 'f0f8ff',
antiquewhite: 'faebd7',
aqua: '00ffff',
aquamarine: '7fffd4',
azure: 'f0ffff',
beige: 'f5f5dc',
bisque: 'ffe4c4',
black: '000',
blanchedalmond: 'ffebcd',
blue: '0000ff',
blueviolet: '8a2be2',
brown: 'a52a2a',
burlywood: 'deb887',
cadetblue: '5f9ea0',
chartreuse: '7fff00',
chocolate: 'd2691e',
coral: 'ff7f50',
cornflowerblue: '6495ed',
cornsilk: 'fff8dc',
crimson: 'dc143c',
cyan: '00ffff',
darkblue: '00008b',
darkcyan: '008b8b',
darkgoldenrod: 'b8860b',
darkgray: 'a9a9a9',
darkgreen: '006400',
darkgrey: 'a9a9a9',
darkkhaki: 'bdb76b',
darkmagenta: '8b008b',
darkolivegreen: '556b2f',
darkorange: 'ff8c00',
darkorchid: '9932cc',
darkred: '8b0000',
darksalmon: 'e9967a',
darkseagreen: '8fbc8f',
darkslateblue: '483d8b',
darkslategray: '2f4f4f',
darkslategrey: '2f4f4f',
darkturquoise: '00ced1',
darkviolet: '9400d3',
deeppink: 'ff1493',
deepskyblue: '00bfff',
dimgray: '696969',
dimgrey: '696969',
dodgerblue: '1e90ff',
firebrick: 'b22222',
floralwhite: 'fffaf0',
forestgreen: '228b22',
fuchsia: 'ff00ff',
gainsboro: 'dcdcdc',
ghostwhite: 'f8f8ff',
gold: 'ffd700',
goldenrod: 'daa520',
gray: '808080',
green: '008000',
greenyellow: 'adff2f',
grey: '808080',
honeydew: 'f0fff0',
hotpink: 'ff69b4',
indianred: 'cd5c5c',
indigo: '4b0082',
ivory: 'fffff0',
khaki: 'f0e68c',
lavender: 'e6e6fa',
lavenderblush: 'fff0f5',
lawngreen: '7cfc00',
lemonchiffon: 'fffacd',
lightblue: 'add8e6',
lightcoral: 'f08080',
lightcyan: 'e0ffff',
lightgoldenrodyellow: 'fafad2',
lightgray: 'd3d3d3',
lightgreen: '90ee90',
lightgrey: 'd3d3d3',
lightpink: 'ffb6c1',
lightsalmon: 'ffa07a',
lightseagreen: '20b2aa',
lightskyblue: '87cefa',
lightslategray: '789',
lightslategrey: '789',
lightsteelblue: 'b0c4de',
lightyellow: 'ffffe0',
lime: '0f0',
limegreen: '32cd32',
linen: 'faf0e6',
magenta: 'f0f',
maroon: '800000',
mediumaquamarine: '66cdaa',
mediumblue: '0000cd',
mediumorchid: 'ba55d3',
mediumpurple: '9370db',
mediumseagreen: '3cb371',
mediumslateblue: '7b68ee',
mediumspringgreen: '00fa9a',
mediumturquoise: '48d1cc',
mediumvioletred: 'c71585',
midnightblue: '191970',
mintcream: 'f5fffa',
mistyrose: 'ffe4e1',
moccasin: 'ffe4b5',
navajowhite: 'ffdead',
navy: '000080',
oldlace: 'fdf5e6',
olive: '808000',
olivedrab: '6b8e23',
orange: 'ffa500',
orangered: 'ff4500',
orchid: 'da70d6',
palegoldenrod: 'eee8aa',
palegreen: '98fb98',
paleturquoise: 'afeeee',
palevioletred: 'db7093',
papayawhip: 'ffefd5',
peachpuff: 'ffdab9',
peru: 'cd853f',
pink: 'ffc0cb',
plum: 'dda0dd',
powderblue: 'b0e0e6',
purple: '800080',
rebeccapurple: '639',
red: 'f00',
rosybrown: 'bc8f8f',
royalblue: '4169e1',
saddlebrown: '8b4513',
salmon: 'fa8072',
sandybrown: 'f4a460',
seagreen: '2e8b57',
seashell: 'fff5ee',
sienna: 'a0522d',
silver: 'c0c0c0',
skyblue: '87ceeb',
slateblue: '6a5acd',
slategray: '708090',
slategrey: '708090',
snow: 'fffafa',
springgreen: '00ff7f',
steelblue: '4682b4',
tan: 'd2b48c',
teal: '008080',
thistle: 'd8bfd8',
tomato: 'ff6347',
turquoise: '40e0d0',
violet: 'ee82ee',
wheat: 'f5deb3',
white: 'fff',
whitesmoke: 'f5f5f5',
yellow: 'ff0',
yellowgreen: '9acd32'
};
/**
* Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
* @private
*/
function nameToHex(color) {
if (typeof color !== 'string') return color;
var normalizedColorName = color.toLowerCase();
return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
}
var hexRegex = /^#[a-fA-F0-9]{6}$/;
var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
/**
* Returns an RgbColor or RgbaColor object. This utility function is only useful
* if want to extract a color component. With the color util `toColorString` you
* can convert a RgbColor or RgbaColor object back to a string.
*
* @example
* // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
* const color1 = parseToRgb('rgb(255, 0, 0)');
* // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
* const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
*/
function parseToRgb(color) {
if (typeof color !== 'string') {
throw new PolishedError(3);
}
var normalizedColor = nameToHex(color);
if (normalizedColor.match(hexRegex)) {
return {
red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
};
}
if (normalizedColor.match(hexRgbaRegex)) {
var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
return {
red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
alpha: alpha
};
}
if (normalizedColor.match(reducedHexRegex)) {
return {
red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
};
}
if (normalizedColor.match(reducedRgbaHexRegex)) {
var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
return {
red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
alpha: _alpha
};
}
var rgbMatched = rgbRegex.exec(normalizedColor);
if (rgbMatched) {
return {
red: parseInt("" + rgbMatched[1], 10),
green: parseInt("" + rgbMatched[2], 10),
blue: parseInt("" + rgbMatched[3], 10)
};
}
var rgbaMatched = rgbaRegex.exec(normalizedColor);
if (rgbaMatched) {
return {
red: parseInt("" + rgbaMatched[1], 10),
green: parseInt("" + rgbaMatched[2], 10),
blue: parseInt("" + rgbaMatched[3], 10),
alpha: parseFloat("" + rgbaMatched[4])
};
}
var hslMatched = hslRegex.exec(normalizedColor);
if (hslMatched) {
var hue = parseInt("" + hslMatched[1], 10);
var saturation = parseInt("" + hslMatched[2], 10) / 100;
var lightness = parseInt("" + hslMatched[3], 10) / 100;
var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
var hslRgbMatched = rgbRegex.exec(rgbColorString);
if (!hslRgbMatched) {
throw new PolishedError(4, normalizedColor, rgbColorString);
}
return {
red: parseInt("" + hslRgbMatched[1], 10),
green: parseInt("" + hslRgbMatched[2], 10),
blue: parseInt("" + hslRgbMatched[3], 10)
};
}
var hslaMatched = hslaRegex.exec(normalizedColor);
if (hslaMatched) {
var _hue = parseInt("" + hslaMatched[1], 10);
var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
if (!_hslRgbMatched) {
throw new PolishedError(4, normalizedColor, _rgbColorString);
}
return {
red: parseInt("" + _hslRgbMatched[1], 10),
green: parseInt("" + _hslRgbMatched[2], 10),
blue: parseInt("" + _hslRgbMatched[3], 10),
alpha: parseFloat("" + hslaMatched[4])
};
}
throw new PolishedError(5);
}
function rgbToHsl(color) {
// make sure rgb are contained in a set of [0, 255]
var red = color.red / 255;
var green = color.green / 255;
var blue = color.blue / 255;
var max = Math.max(red, green, blue);
var min = Math.min(red, green, blue);
var lightness = (max + min) / 2;
if (max === min) {
// achromatic
if (color.alpha !== undefined) {
return {
hue: 0,
saturation: 0,
lightness: lightness,
alpha: color.alpha
};
} else {
return {
hue: 0,
saturation: 0,
lightness: lightness
};
}
}
var hue;
var delta = max - min;
var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
switch (max) {
case red:
hue = (green - blue) / delta + (green < blue ? 6 : 0);
break;
case green:
hue = (blue - red) / delta + 2;
break;
default:
// blue case
hue = (red - green) / delta + 4;
break;
}
hue *= 60;
if (color.alpha !== undefined) {
return {
hue: hue,
saturation: saturation,
lightness: lightness,
alpha: color.alpha
};
}
return {
hue: hue,
saturation: saturation,
lightness: lightness
};
}
/**
* Returns an HslColor or HslaColor object. This utility function is only useful
* if want to extract a color component. With the color util `toColorString` you
* can convert a HslColor or HslaColor object back to a string.
*
* @example
* // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1
* const color1 = parseToHsl('rgb(255, 0, 0)');
* // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2
* const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');
*/
function parseToHsl(color) {
// Note: At a later stage we can optimize this function as right now a hsl
// color would be parsed converted to rgb values and converted back to hsl.
return rgbToHsl(parseToRgb(color));
}
/**
* Reduces hex values if possible e.g. #ff8866 to #f86
* @private
*/
var reduceHexValue = function reduceHexValue(value) {
if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
return "#" + value[1] + value[3] + value[5];
}
return value;
};
function numberToHex(value) {
var hex = value.toString(16);
return hex.length === 1 ? "0" + hex : hex;
}
function colorToHex(color) {
return numberToHex(Math.round(color * 255));
}
function convertToHex(red, green, blue) {
return reduceHexValue("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
}
function hslToHex(hue, saturation, lightness) {
return hslToRgb(hue, saturation, lightness, convertToHex);
}
/**
* Returns a string value for the color. The returned result is the smallest possible hex notation.
*
* @example
* // Styles as object usage
* const styles = {
* background: hsl(359, 0.75, 0.4),
* background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),
* }
*
* // styled-components usage
* const div = styled.div`
* background: ${hsl(359, 0.75, 0.4)};
* background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};
* `
*
* // CSS in JS Output
*
* element {
* background: "#b3191c";
* background: "#b3191c";
* }
*/
function hsl(value, saturation, lightness) {
if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
return hslToHex(value, saturation, lightness);
} else if (_typeof(value) === 'object' && saturation === undefined && lightness === undefined) {
return hslToHex(value.hue, value.saturation, value.lightness);
}
throw new PolishedError(1);
}
/**
* Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
*
* @example
* // Styles as object usage
* const styles = {
* background: hsla(359, 0.75, 0.4, 0.7),
* background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),
* background: hsla(359, 0.75, 0.4, 1),
* }
*
* // styled-components usage
* const div = styled.div`
* background: ${hsla(359, 0.75, 0.4, 0.7)};
* background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};
* background: ${hsla(359, 0.75, 0.4, 1)};
* `
*
* // CSS in JS Output
*
* element {
* background: "rgba(179,25,28,0.7)";
* background: "rgba(179,25,28,0.7)";
* background: "#b3191c";
* }
*/
function hsla(value, saturation, lightness, alpha) {
if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
} else if (_typeof(value) === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
}
throw new PolishedError(2);
}
/**
* Returns a string value for the color. The returned result is the smallest possible hex notation.
*
* @example
* // Styles as object usage
* const styles = {
* background: rgb(255, 205, 100),
* background: rgb({ red: 255, green: 205, blue: 100 }),
* }
*
* // styled-components usage
* const div = styled.div`
* background: ${rgb(255, 205, 100)};
* background: ${rgb({ red: 255, green: 205, blue: 100 })};
* `
*
* // CSS in JS Output
*
* element {
* background: "#ffcd64";
* background: "#ffcd64";
* }
*/
function rgb(value, green, blue) {
if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
} else if (_typeof(value) === 'object' && green === undefined && blue === undefined) {
return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
}
throw new PolishedError(6);
}
/**
* Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
*
* Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
*
* @example
* // Styles as object usage
* const styles = {
* background: rgba(255, 205, 100, 0.7),
* background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
* background: rgba(255, 205, 100, 1),
* background: rgba('#ffffff', 0.4),
* background: rgba('black', 0.7),
* }
*
* // styled-components usage
* const div = styled.div`
* background: ${rgba(255, 205, 100, 0.7)};
* background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
* background: ${rgba(255, 205, 100, 1)};
* background: ${rgba('#ffffff', 0.4)};
* background: ${rgba('black', 0.7)};
* `
*
* // CSS in JS Output
*
* element {
* background: "rgba(255,205,100,0.7)";
* background: "rgba(255,205,100,0.7)";
* background: "#ffcd64";
* background: "rgba(255,255,255,0.4)";
* background: "rgba(0,0,0,0.7)";
* }
*/
function rgba(firstValue, secondValue, thirdValue, fourthValue) {
if (typeof firstValue === 'string' && typeof secondValue === 'number') {
var rgbValue = parseToRgb(firstValue);
return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
} else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
} else if (_typeof(firstValue) === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
}
throw new PolishedError(7);
}
var isRgb = function isRgb(color) {
return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
};
var isRgba = function isRgba(color) {
return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';
};
var isHsl = function isHsl(color) {
return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
};
var isHsla = function isHsla(color) {
return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';
};
/**
* Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
* This util is useful in case you only know on runtime which color object is
* used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
*
* @example
* // Styles as object usage
* const styles = {
* background: toColorString({ red: 255, green: 205, blue: 100 }),
* background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
* background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
* background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
* }
*
* // styled-components usage
* const div = styled.div`
* background: ${toColorString({ red: 255, green: 205, blue: 100 })};
* background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
* background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
* background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
* `
*
* // CSS in JS Output
* element {
* background: "#ffcd64";
* background: "rgba(255,205,100,0.72)";
* background: "#00f";
* background: "rgba(179,25,25,0.72)";
* }
*/
function toColorString(color) {
if (_typeof(color) !== 'object') throw new PolishedError(8);
if (isRgba(color)) return rgba(color);
if (isRgb(color)) return rgb(color);
if (isHsla(color)) return hsla(color);
if (isHsl(color)) return hsl(color);
throw new PolishedError(8);
} // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
// eslint-disable-next-line no-unused-vars
// eslint-disable-next-line no-unused-vars
// eslint-disable-next-line no-redeclare
function curried(f, length, acc) {
return function fn() {
// eslint-disable-next-line prefer-rest-params
var combined = acc.concat(Array.prototype.slice.call(arguments));
return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
};
} // eslint-disable-next-line no-redeclare
function curry(f) {
// eslint-disable-line no-redeclare
return curried(f, f.length, []);
}
function guard(lowerBoundary, upperBoundary, value) {
return Math.max(lowerBoundary, Math.min(upperBoundary, value));
}
/**
* Returns a string value for the darkened color.
*
* @example
* // Styles as object usage
* const styles = {
* background: darken(0.2, '#FFCD64'),
* background: darken('0.2', 'rgba(255,205,100,0.7)'),
* }
*
* // styled-components usage
* const div = styled.div`
* background: ${darken(0.2, '#FFCD64')};
* background: ${darken('0.2', 'rgba(255,205,100,0.7)')};
* `
*
* // CSS in JS Output
*
* element {
* background: "#ffbd31";
* background: "rgba(255,189,49,0.7)";
* }
*/
function darken(amount, color) {
if (color === 'transparent') return color;
var hslColor = parseToHsl(color);
return toColorString(_extends({}, hslColor, {
lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
}));
} // prettier-ignore
var curriedDarken = /*#__PURE__*/curry
/* ::<number | string, string, string> */
(darken);
function _templateObject$2() {
var data = _taggedTemplateLiteral(["\n --size: ", ";\n\n .container {\n ", ";\n transform-style: preserve-3d;\n perspective: 2000px;\n transform: rotateX(-30deg) rotateY(-45deg);\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n }\n\n .holder {\n ", ";\n transform-style: preserve-3d;\n transform: translate3d(0em, var(--size), calc(var(--size) * 0.5));\n &:nth-child(3) {\n transform: rotateY(-90deg) rotateX(90deg) translate3d(0, var(--size), calc(var(--size) * 0.5));\n }\n &:first-child {\n transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, var(--size), calc(var(--size) * 0.5));\n }\n }\n\n ", "\n\n .info {\n ", ";\n padding-top: 180px;\n\n .title {\n font-size: 20px;\n font-weight: 400;\n text-align: center;\n color: #212121;\n }\n\n .detail {\n font-size: 14px;\n font-weight: 200;\n text-align: center;\n }\n }\n\n .box {\n ", ";\n transform-style: preserve-3d;\n animation: ani-box 6s infinite;\n width: var(--size);\n height: var(--size);\n //opacity: .9;\n &:before,\n &:after {\n position: absolute;\n width: 100%;\n height: 100%;\n content: '';\n }\n &:before {\n left: 100%;\n bottom: 0;\n transform: rotateY(90deg);\n transform-origin: 0 50%;\n }\n &:after {\n left: 0;\n bottom: 100%;\n transform: rotateX(90deg);\n transform-origin: 0 100%;\n }\n }\n\n @keyframes ani-box {\n 8.33% {\n transform: translate3d(-50%, -50%, 0) scaleZ(2);\n }\n 16.7% {\n transform: translate3d(-50%, -50%, calc(-1 * var(--size))) scaleZ(1);\n }\n 25% {\n transform: translate3d(-50%, -100%, calc(-1 * var(--size))) scaleY(2);\n }\n 33.3% {\n transform: translate3d(-50%, -150%, calc(-1 * var(--size))) scaleY(1);\n }\n 41.7% {\n transform: translate3d(-100%, -150%, calc(-1 * var(--size))) scaleX(2);\n }\n 50% {\n transform: translate3d(-150%, -150%, calc(-1 * var(--size))) scaleX(1);\n }\n 58.3% {\n transform: translate3d(-150%, -150%, 0) scaleZ(2);\n }\n 66.7% {\n transform: translate3d(-150%, -150%, 0) scaleZ(1);\n }\n 75% {\n transform: translate3d(-150%, -100%, 0) scaleY(2);\n }\n 83.3% {\n transform: translate3d(-150%, -50%, 0) scaleY(1);\n }\n 91.7% {\n transform: translate3d(-100%, -50%, 0) scaleX(2);\n }\n 100% {\n transform: translate3d(-50%, -50%, 0) scaleX(1);\n }\n }\n"]);
_templateObject$2 = function _templateObject() {
return data;
};
return data;
}
var cbox = function cbox(props) {
return "\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\n";
};
var BoxShuffleContainer = styled.div(_templateObject$2(), function (props) {
return props['size'] || '3em';
}, cbox, cbox, function (props) {
return (props.colors || ['#1FBCD3', '#CBE2B4', '#F6B6CA']).map(function (color, i) {
return "\n .holder:nth-child(".concat(i + 1, "){\n .box{\n background-color: ").concat(color, ";\n &:before{\n background-color: ").concat(curriedDarken(0.2, color), ";\n }\n &:after{\n background-color: ").concat(curriedDarken(0.1, color), ";\n }\n }\n }\n }\n");
});
}, cbox, cbox);
var BoxShuffle = function BoxShuffle(props) {
var title = props.title,
detail = props.detail;
return /*#__PURE__*/React__default.createElement(BoxShuffleContainer, null, /*#__PURE__*/React__default.createElement("div", {
className: "container"
}, /*#__PURE__*/React__default.createElement("div", {
className: "holder"
}, /*#__PURE__*/React__default.createElement("div", {
className: "box"
})), /*#__PURE__*/React__default.createElement("div", {
className: "holder"
}, /*#__PURE__*/React__default.createElement("div", {
className: "box"
})), /*#__PURE__*/React__default.createElement("div", {
className: "holder"
}, /*#__PURE__*/React__default.createElement("div", {
className: "box"
}))),