@veracity/vui 0.0.1

package/skeleton/skeleton.js

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = exports.BaseSkeleton = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importDefault(require("react"));
+var styled_components_2 = __importStar(require("styled-components"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borderRadius, styled_components_1.sizing, styled_components_1.space);
+var pulse = styled_components_2.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
+exports.BaseSkeleton = styled_components_2.default.div.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), pulse, generator);
+exports.Skeleton = core_1.forwardRef(function (props, ref) {
+    var _a = core_1.omitThemingProps(props), className = _a.className, _b = _a.repeat, repeat = _b === void 0 ? 1 : _b, rest = __rest(_a, ["className", "repeat"]);
+    var styles = core_1.useStyleConfig('Skeleton', props);
+    var arr = Array(repeat).fill(0);
+    var aliasedProps = utils_1.filterUndefined({
+        w: props.variant === 'circle' ? styles.h : undefined
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function (_, i) { return (react_1.default.createElement(exports.BaseSkeleton, __assign({ bg: "blue.20", className: utils_1.cs('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
+});
+exports.Skeleton.displayName = 'Skeleton';
+exports.default = exports.Skeleton;
+var templateObject_1, templateObject_2;

package/skeleton/skeleton.types.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { BackgroundColorProps, BorderRadiusProps, SizingProps, SpaceProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SkeletonStyleProps, ThemingProps<'Skeleton'> {
+    colorScheme?: 'blue' | 'grey';
+    repeat?: number;
+}
+export interface SkeletonStyleProps extends BackgroundColorProps, BorderRadiusProps, SizingProps, SpaceProps {
+}

package/skeleton/skeleton.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/skeleton/theme.d.ts

@@ -0,0 +1,36 @@
+import { Dict } from '../utils';
+declare function variantCircle(props: Dict): {
+    borderRadius: string;
+    bg: string;
+};
+declare function variantRectangle(props: Dict): {
+    borderRadius: string;
+    bg: string;
+    w: string;
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    sizes: {
+        xs: {
+            h: number;
+        };
+        sm: {
+            h: number;
+        };
+        md: {
+            h: number;
+        };
+        lg: {
+            h: number;
+        };
+    };
+    variants: {
+        circle: typeof variantCircle;
+        rect: typeof variantRectangle;
+    };
+};
+export default _default;

package/skeleton/theme.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantCircle(props) {
+    var c = props.colorScheme;
+    var styles = {
+        borderRadius: '50%',
+        bg: c + ".20"
+    };
+    return styles;
+}
+function variantRectangle(props) {
+    var c = props.colorScheme;
+    var styles = {
+        borderRadius: 'md',
+        bg: c + ".20",
+        w: '100%'
+    };
+    return styles;
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'rect'
+};
+var sizes = {
+    xs: {
+        h: 24
+    },
+    sm: {
+        h: 32
+    },
+    md: {
+        h: 40
+    },
+    lg: {
+        h: 48
+    }
+};
+var variants = {
+    circle: variantCircle,
+    rect: variantRectangle
+};
+exports.default = {
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/styles/animations.d.ts

@@ -0,0 +1,7 @@
+export declare const fadeDown = "\n\tfrom { opacity: 0; transform: translateY(-20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
+export declare const fadeIn = "\n\tfrom { opacity: 0; }\n\tto { opacity: 1; }\n";
+export declare const fadeLeft = "\n\tfrom { opacity: 0; transform: translateX(20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
+export declare const fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n";
+export declare const fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
+export declare const fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
+export declare const spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";

package/styles/animations.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spin = exports.fadeUp = exports.fadeRight = exports.fadeOut = exports.fadeLeft = exports.fadeIn = exports.fadeDown = void 0;
+exports.fadeDown = "\n\tfrom { opacity: 0; transform: translateY(-20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
+exports.fadeIn = "\n\tfrom { opacity: 0; }\n\tto { opacity: 1; }\n";
+exports.fadeLeft = "\n\tfrom { opacity: 0; transform: translateX(20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
+exports.fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n";
+exports.fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
+exports.fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
+exports.spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";

package/styles/fonts.d.ts

@@ -0,0 +1,2 @@
+declare const fonts: string;
+export default fonts;

package/styles/fonts.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("../core");
+var fonts = "\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-regular-lat-ext.woff');\n\t\tfont-weight: 400;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-medium-lat-ext.woff');\n\t\tfont-weight: 500;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-demi-lat-ext.woff');\n\t\tfont-weight: 600;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-bold-lat-ext.woff');\n\t\tfont-weight: 700;\n\t}\n";
+exports.default = fonts;

package/styles/helpers.d.ts

@@ -0,0 +1,8 @@
+import { StyledProps } from 'styled-components';
+import { Screen } from '../theme';
+export declare const lineClamp: (maxLines: number) => string;
+export declare const mediaDown: (key: Screen) => (props: StyledProps<unknown>) => string;
+export declare const mediaUp: (key: Screen) => (props: StyledProps<unknown>) => string;
+export declare const resetLink = "\n\ttext-decoration: none;\n\tcolor: inherit;\n";
+export declare const resetList = "\n\tlist-style: none;\n\tpadding-left: 0;\n";
+export declare const truncateText = "\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n";

package/styles/helpers.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.truncateText = exports.resetList = exports.resetLink = exports.mediaUp = exports.mediaDown = exports.lineClamp = void 0;
+var lineClamp = function (maxLines) { return "\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: " + maxLines + ";\n\t-webkit-box-orient: vertical;  \n\toverflow: hidden;\n"; };
+exports.lineClamp = lineClamp;
+var mediaDown = function (key) { return function (props) {
+    return "@media (max-width: " + props.theme.screens[key] + "px)";
+}; };
+exports.mediaDown = mediaDown;
+var mediaUp = function (key) { return function (props) {
+    return "@media (min-width: " + props.theme.screens[key] + "px)";
+}; };
+exports.mediaUp = mediaUp;
+exports.resetLink = "\n\ttext-decoration: none;\n\tcolor: inherit;\n";
+exports.resetList = "\n\tlist-style: none;\n\tpadding-left: 0;\n";
+exports.truncateText = "\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n";

package/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './animations';
+export * from './helpers';
+export { default as fonts } from './fonts';

package/styles/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fonts = void 0;
+__exportStar(require("./animations"), exports);
+__exportStar(require("./helpers"), exports);
+var fonts_1 = require("./fonts");
+Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return __importDefault(fonts_1).default; } });

package/svg/cache.d.ts

@@ -0,0 +1,15 @@
+declare type CachedItem = string | Promise<string>;
+/**
+ * Provides svg caching functionality to avoid redundant XHR requests.
+ * When the retrieved item doesn't exist in cache yet, a request is sent
+ * to its 'src' url. The request's promise is cached for that 'src' key
+ * and can be used for the whole session without repeating requests.
+ */
+declare class Cache {
+    cache: Map<string, CachedItem>;
+    add: (src: string, svg: CachedItem) => void;
+    get: (src: string) => CachedItem;
+    reset: () => void;
+}
+declare const cache: Cache;
+export default cache;

package/svg/cache.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var axios_1 = __importDefault(require("axios"));
+/**
+ * Provides svg caching functionality to avoid redundant XHR requests.
+ * When the retrieved item doesn't exist in cache yet, a request is sent
+ * to its 'src' url. The request's promise is cached for that 'src' key
+ * and can be used for the whole session without repeating requests.
+ */
+var Cache = /** @class */ (function () {
+    function Cache() {
+        var _this = this;
+        this.cache = new Map();
+        this.add = function (src, svg) {
+            _this.cache.set(src, svg);
+        };
+        this.get = function (src) {
+            var item = _this.cache.get(src);
+            if (!item) {
+                var promise = axios_1.default.get(src).then(function (res) { return res.data; });
+                _this.add(src, promise);
+                return promise;
+            }
+            return item;
+        };
+        this.reset = function () {
+            _this.cache.clear();
+        };
+    }
+    return Cache;
+}());
+var cache = new Cache();
+exports.default = cache;

package/svg/helpers.d.ts

@@ -0,0 +1,10 @@
+import { SvgState } from './svg.types';
+import { Dict } from '../utils';
+/** Returns an object with given element's HTML attributes. */
+export declare function getAttributes(element?: Element): Dict<string>;
+/** Returns content of the SVG HTML string by stripping <svg> tag. */
+export declare function getSvgContent(html?: string): string;
+/** Returns object with initial state values. */
+export declare function initState(): SvgState;
+/** Returns given HTML string as an HTML element. */
+export declare function stringToHTML(html: string): Element | null;

package/svg/helpers.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringToHTML = exports.initState = exports.getSvgContent = exports.getAttributes = void 0;
+/** Returns an object with given element's HTML attributes. */
+function getAttributes(element) {
+    if (!element)
+        return {};
+    var attrs = Array.from(element.attributes);
+    return attrs.reduce(function (props, attr) {
+        var name = attr.name, value = attr.value;
+        props[name] = value;
+        return props;
+    }, {});
+}
+exports.getAttributes = getAttributes;
+/** Returns content of the SVG HTML string by stripping <svg> tag. */
+function getSvgContent(html) {
+    if (html === void 0) { html = ''; }
+    return html.replace(/(<\/?svg(?:.|\n)*?>)|(\r\n|\n|\r)/gm, '');
+}
+exports.getSvgContent = getSvgContent;
+/** Returns object with initial state values. */
+function initState() {
+    return { content: '', svgAttributes: {} };
+}
+exports.initState = initState;
+/** Returns given HTML string as an HTML element. */
+function stringToHTML(html) {
+    var container = document.createElement('div');
+    container.innerHTML = html;
+    return container.firstElementChild;
+}
+exports.stringToHTML = stringToHTML;

package/svg/index.d.ts

@@ -0,0 +1,3 @@
+export * from './svg';
+export * from './svg.types';
+export { default } from './svg';

package/svg/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./svg"), exports);
+__exportStar(require("./svg.types"), exports);
+var svg_1 = require("./svg");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(svg_1).default; } });

package/svg/svg.d.ts

@@ -0,0 +1,6 @@
+import { SvgProps, SvgStyleProps } from './svg.types';
+export declare const BaseSvg: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & SvgStyleProps, never>;
+export declare const Svg: import("styled-components").StyledComponent<"svg", never, SvgProps, never>;
+export default Svg;

package/svg/svg.js

@@ -0,0 +1,153 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Svg = exports.BaseSvg = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importStar(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var cache_1 = __importDefault(require("./cache"));
+var helpers_1 = require("./helpers");
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.animation, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transform);
+exports.BaseSvg = styled_components_2.default.svg.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\n\t", "\n"])), generator);
+exports.Svg = core_1.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, src = _a.src, rest = __rest(_a, ["children", "className", "src"]);
+    var _b = __read(react_1.useState(helpers_1.initState()), 2), state = _b[0], setState = _b[1];
+    var _c = state.content, content = _c === void 0 ? '' : _c, _d = state.svgAttributes, svgAttributes = _d === void 0 ? {} : _d;
+    svgAttributes['data-src'] = src !== null && src !== void 0 ? src : '';
+    react_1.useEffect(function () {
+        function loadSvg(src) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, content_1, svgEl, svgAttributes_1, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, cache_1.default.get(src)];
+                        case 1:
+                            response = _a.sent();
+                            content_1 = helpers_1.getSvgContent(response);
+                            svgEl = helpers_1.stringToHTML(response);
+                            svgAttributes_1 = helpers_1.getAttributes(svgEl);
+                            setState({ content: content_1, svgAttributes: svgAttributes_1 });
+                            return [3 /*break*/, 3];
+                        case 2:
+                            error_1 = _a.sent();
+                            console.error(error_1); // eslint-disable-line no-console
+                            setState(helpers_1.initState());
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        src && loadSvg(src);
+    }, [src]);
+    var innerHTML = !children ? { __html: content } : undefined;
+    return (react_1.default.createElement(exports.BaseSvg, __assign({ className: utils_1.cs('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
+});
+exports.Svg.displayName = 'Svg';
+exports.default = exports.Svg;
+var templateObject_1;

package/svg/svg.types.d.ts

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+import { AnimationProps, ColorProps, SizingProps, SpaceProps, TransformProps } from '../system';
+import { Dict } from '../utils';
+export interface SvgProps extends Omit<SVGProps<SVGSVGElement>, 'transform'>, SvgStyleProps {
+    src?: string;
+}
+export interface SvgState {
+    content?: string;
+    svgAttributes: Dict<string>;
+}
+export interface SvgStyleProps extends AnimationProps, ColorProps, SizingProps, SpaceProps, TransformProps {
+    color?: string;
+}

package/svg/svg.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/system/animations.d.ts

@@ -0,0 +1,9 @@
+import { ITheme, SystemProp, VariantsType } from '@xstyled/system';
+import { VuiTheme } from '../theme';
+export declare type AnimationGetter<T extends ITheme = VuiTheme> = VariantsType<T['animations']>;
+declare type AnimationProp<T extends ITheme> = SystemProp<AnimationGetter<T>, T>;
+export interface AnimationProps<T extends ITheme = VuiTheme> {
+    animation?: AnimationProp<T>;
+    hoverAnimation?: AnimationProp<T>;
+}
+export { AnimationProps as AnimationsProps };

package/system/animations.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/system/backgrounds.d.ts

@@ -0,0 +1,13 @@
+import { ITheme, SystemProp } from '@xstyled/system';
+import { ColorGetter } from './colors';
+import { VuiTheme } from '../theme';
+declare type BackgroundColorProp<T extends ITheme> = SystemProp<ColorGetter<T>, T>;
+export interface BackgroundColorProps<T extends ITheme = VuiTheme> {
+    activeBg?: BackgroundColorProp<T>;
+    bg?: BackgroundColorProp<T>;
+    disabledBg?: BackgroundColorProp<T>;
+    hoverBg?: BackgroundColorProp<T>;
+}
+export interface BackgroundsProps<T extends ITheme = VuiTheme> extends BackgroundColorProps<T> {
+}
+export {};

package/system/backgrounds.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });