@telia-ace/widget-ui 1.0.0

package/lib/components/tab-stop.js

@@ -0,0 +1,100 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var TabStop = /** @class */ (function (_super) {
+    __extends(TabStop, _super);
+    function TabStop() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            boundFocus: false,
+        };
+        return _this;
+    }
+    TabStop.prototype.componentWillMount = function () {
+        var settings = this.props.container.get('accessibilitySettings');
+        if (settings && settings.boundFocus) {
+            this.setState({
+                boundFocus: true,
+            });
+        }
+    };
+    TabStop.prototype.componentDidMount = function () {
+        if (!this.state.boundFocus) {
+            return;
+        }
+        var widgetDOMElement = this.props.container.get('widgetDOMElement');
+        if (this.node && widgetDOMElement) {
+            this.onFocusListener = this.node.addEventListener('focus', function () {
+                var focusable = widgetDOMElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                var filtered = [].filter.call(focusable, function (el) {
+                    if (typeof window === 'undefined') {
+                        return true;
+                    }
+                    var style = window.getComputedStyle(el);
+                    if (style.display === 'none' || (el.offsetWidth <= 0 && el.offsetHeight <= 0)) {
+                        return false;
+                    }
+                    return true;
+                });
+                var firstFocusable = filtered[0];
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                }
+            });
+        }
+    };
+    TabStop.prototype.componentWillUnmount = function () {
+        if (this.node) {
+            this.node.removeEventListener('focus', this.onFocusListener);
+        }
+    };
+    TabStop.prototype.render = function () {
+        var _this = this;
+        if (!this.state.boundFocus) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { style: { opacity: 0 }, tabIndex: 0, ref: function (node) {
+                _this.node = node;
+            } }));
+    };
+    return TabStop;
+}(react_1.Component));
+exports.default = TabStop;

package/lib/components/text-link.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Props as LinkProps } from './link';
+export declare type Props = Merge<LinkProps, {
+    text: string;
+    description?: string;
+}>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "text" | "to" | "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement> | "disabled" | "description" | "routeName" | "params"> & React.RefAttributes<HTMLAnchorElement>>;
+export default _default;

package/lib/components/text-link.js

@@ -0,0 +1,62 @@
+"use strict";
+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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var html_1 = __importDefault(require("./html"));
+var link_1 = __importDefault(require("./link"));
+var text_1 = __importDefault(require("./text"));
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, description = _a.description, text = _a.text, children = _a.children, other = __rest(_a, ["className", "description", "text", "children"]);
+    return (react_1.default.createElement(link_1.default, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-text-link') }, other, { ref: ref }),
+        children,
+        react_1.default.createElement(text_1.default, null, text),
+        description ? react_1.default.createElement(html_1.default, { html: description, className: "humany-description" }) : null));
+});

package/lib/components/text.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare type Props = React.ComponentProps<'span'>;
+declare const Text: React.FC<Props>;
+export default Text;

package/lib/components/text.js

@@ -0,0 +1,35 @@
+"use strict";
+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 __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 });
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+var Text = function (_a) {
+    var className = _a.className, children = _a.children, other = __rest(_a, ["className", "children"]);
+    return (react_1.default.createElement("span", __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-text') }, (0, utils_1.convertToStringAttributes)(other)), children));
+};
+exports.default = Text;

package/lib/components/timestamp.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare enum DateFormats {
+    HH_MM = "hh:mm",
+    YYYY_MM_DD = "yyyy-mm-dd",
+    YYYY_MM_DD_HH_MM = "yyyy-mm-dd hh:mm"
+}
+export declare type Props = {
+    timestamp: string;
+    format?: DateFormats;
+    className?: string;
+};
+declare const Timestamp: React.FC<Props>;
+export default Timestamp;

package/lib/components/timestamp.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateFormats = void 0;
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importDefault(require("react"));
+var DateFormats;
+(function (DateFormats) {
+    DateFormats["HH_MM"] = "hh:mm";
+    DateFormats["YYYY_MM_DD"] = "yyyy-mm-dd";
+    DateFormats["YYYY_MM_DD_HH_MM"] = "yyyy-mm-dd hh:mm";
+})(DateFormats = exports.DateFormats || (exports.DateFormats = {}));
+var Timestamp = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.format, format = _c === void 0 ? DateFormats.HH_MM : _c, timestamp = _a.timestamp;
+    return (react_1.default.createElement("span", { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-timestamp') }, formatDate(timestamp, format)));
+};
+exports.default = Timestamp;
+var asTwoDigitString = function (input) {
+    return "0".concat(input).slice(-2);
+};
+/* formats date to hh:mm, yyyy-mm-dd or yyyy-mm-dd hh:mm format */
+function formatDate(unformattedDate, format) {
+    var date = new Date(unformattedDate);
+    var dateArray = date.toTimeString().split(' ')[0].split(':');
+    var timeString = dateArray.length > 1 ? "".concat(dateArray[0], ":").concat(dateArray[1]) : dateArray[0];
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    var dateString = "".concat(year, "-").concat(asTwoDigitString(month), "-").concat(asTwoDigitString(day));
+    if (format === DateFormats.YYYY_MM_DD) {
+        return dateString;
+    }
+    if (format === DateFormats.HH_MM) {
+        return timeString;
+    }
+    return "".concat(dateString, " ").concat(timeString);
+}

package/lib/components/tooltip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type Props = {
+    className?: string;
+    content: React.ReactNode;
+    sticky: boolean;
+};
+declare const Tooltip: React.FC<Props>;
+export default Tooltip;

package/lib/components/tooltip.js

@@ -0,0 +1,127 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __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 });
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var dropdown_1 = require("./dropdown");
+var portal_1 = __importDefault(require("./portal"));
+var Tooltip = function (_a) {
+    var className = _a.className, children = _a.children, content = _a.content, _b = _a.sticky, sticky = _b === void 0 ? false : _b, other = __rest(_a, ["className", "children", "content", "sticky"]);
+    var _c = __read((0, react_1.useState)(false), 2), open = _c[0], setOpen = _c[1];
+    var id = (0, react_1.useRef)((0, widget_utilities_1.uuid)());
+    var ref = (0, react_1.useRef)();
+    var _d = __read((0, dropdown_1.useCursorPosition)(open, id.current, ref.current), 2), _e = _d[0], x = _e.x, y = _e.y, set = _d[1];
+    var clickHandler = function (event) {
+        var target = event.target;
+        if (!ref.current || !target) {
+            return;
+        }
+        if (ref.current !== target && !ref.current.contains(target)) {
+            setOpen(false);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        if (!sticky) {
+            return;
+        }
+        window.addEventListener('click', clickHandler);
+        return function () {
+            window.removeEventListener('click', clickHandler);
+        };
+    }, [open, sticky]);
+    var handleMouseEvent = (0, react_1.useCallback)(function (e, value) {
+        set(e, ref.current);
+        setOpen(value);
+    }, [set, setOpen]);
+    return (react_1.default.createElement(Trigger, { ref: ref, className: "humany-tooltip-trigger", onMouseEnter: !sticky ? function (e) { return handleMouseEvent(e, true); } : undefined, onMouseLeave: !sticky ? function (e) { return handleMouseEvent(e, false); } : undefined, onTouchEnd: sticky ? function (e) { return handleMouseEvent(e, !open); } : undefined, onClick: sticky ? function (e) { return handleMouseEvent(e, !open); } : undefined },
+        children,
+        open && (react_1.default.createElement(portal_1.default, null,
+            react_1.default.createElement(TooltipContainer, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-tooltip-container'), x: x, y: y }, other), content)))));
+};
+var Trigger = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n"], ["\n    display: flex;\n    align-items: center;\n"])));
+var TooltipContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: #ffffff;\n    background: #161616;\n    border-radius: ", ";\n    padding: calc(", " * 2);\n    font-size: ", ";\n    font-family: ", ";\n    position: absolute;\n    z-index: 10;\n\n    a {\n        color: ", ";\n        text-decoration: none;\n    }\n\n    i,\n    svg {\n        margin-right: ", ";\n    }\n\n    ", ";\n"], ["\n    color: #ffffff;\n    background: #161616;\n    border-radius: ", ";\n    padding: calc(", " * 2);\n    font-size: ", ";\n    font-family: ", ";\n    position: absolute;\n    z-index: 10;\n\n    a {\n        color: ", ";\n        text-decoration: none;\n    }\n\n    i,\n    svg {\n        margin-right: ", ";\n    }\n\n    ", ";\n"])), function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, function (p) { return (p.color ? p.color : 'inherit'); }, function (p) { return p.theme.sizes.small; }, function (p) {
+    var css = '';
+    if (p.y > 0) {
+        css += "top: calc(2px + ".concat(p.y || '0', "px);");
+    }
+    else {
+        css += "bottom: 2px;";
+    }
+    if (p.x > 0) {
+        css += "right: calc(2px + ".concat(p.x || '0', "px);");
+    }
+    else {
+        css += "left: 2px;";
+    }
+    return css;
+});
+exports.default = Tooltip;
+var templateObject_1, templateObject_2;

package/lib/components/transition-component.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export declare type Props = {
+    in: boolean;
+    timeout?: number | {
+        enter?: number;
+        exit?: number;
+    };
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    children?: any;
+    transitions?: string | {
+        enter: TransitionInfo;
+        exit: TransitionInfo;
+    };
+};
+declare type TransitionInfo = {
+    type: string;
+    easing?: string;
+};
+/**
+ * Wrapper component for Transition from 'react-transition-group'
+ * Controls animated enter/exit transitions of a child component bu dynamically creating
+ * css that is forwarded to the child component.
+ *
+ * TODO:
+ * Extend to accept more specific transitions (TransitionStateSettings) to enable different
+ * enter and exit animations, timings and easings
+ */
+declare const TransitionComponent: React.FC<Props>;
+export default TransitionComponent;

package/lib/components/transition-component.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var utils_1 = require("../utils");
+/**
+ * Wrapper component for Transition from 'react-transition-group'
+ * Controls animated enter/exit transitions of a child component bu dynamically creating
+ * css that is forwarded to the child component.
+ *
+ * TODO:
+ * Extend to accept more specific transitions (TransitionStateSettings) to enable different
+ * enter and exit animations, timings and easings
+ */
+var TransitionComponent = function (props) {
+    var inState = props.in, _a = props.mountOnEnter, mountOnEnter = _a === void 0 ? true : _a, _b = props.unmountOnExit, unmountOnExit = _b === void 0 ? true : _b, timeout = props.timeout, children = props.children, transitions = props.transitions;
+    var generateTransitionDefinition = function () {
+        var _a, _b;
+        if (!transitions || transitions === 'none') {
+            return;
+        }
+        if (typeof transitions === 'string') {
+            return {
+                enter: {
+                    transitionKeys: transitions,
+                    duration: !!timeout
+                        ? typeof timeout === 'number'
+                            ? timeout
+                            : timeout.enter
+                        : 200,
+                    easing: 'ease-in',
+                },
+                exit: {
+                    transitionKeys: transitions,
+                    duration: !!timeout
+                        ? typeof timeout === 'number'
+                            ? timeout
+                            : timeout.exit
+                        : 200,
+                    easing: 'ease-out',
+                },
+            };
+        }
+        if (typeof transitions === 'object') {
+            var enter = transitions.enter, exit = transitions.exit;
+            return {
+                enter: {
+                    transitionKeys: (_a = transitions.enter) === null || _a === void 0 ? void 0 : _a.type,
+                    duration: !!timeout
+                        ? typeof timeout === 'number'
+                            ? timeout
+                            : timeout.enter
+                        : 200,
+                    easing: !!enter.easing ? enter.easing : 'ease-in',
+                },
+                exit: {
+                    transitionKeys: (_b = transitions.enter) === null || _b === void 0 ? void 0 : _b.type,
+                    duration: !!timeout
+                        ? typeof timeout === 'number'
+                            ? timeout
+                            : timeout.enter
+                        : 200,
+                    easing: !!exit.easing ? exit.easing : 'ease-out',
+                },
+            };
+        }
+    };
+    var def = generateTransitionDefinition();
+    return (react_1.default.createElement(react_transition_group_1.Transition, { timeout: {
+            enter: (def && def.enter.duration) || 0,
+            exit: (def && def.exit.duration) || 0,
+        }, in: inState, appear: true, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, onEnter: function (node) { return node.clientHeight; } }, function (state) { return children && children(state, def && utils_1.transitionComposer.compose(state, def)); }));
+};
+exports.default = TransitionComponent;

package/lib/components/typography.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+export declare type Props = {
+    variant: TypographyVariant;
+    component?: React.ElementType;
+    className?: string;
+};
+declare const Typography: React.FC<Props>;
+export default Typography;

package/lib/components/typography.js

@@ -0,0 +1,43 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hooks_1 = require("../hooks");
+var defaultVariantMapping = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    p: 'p',
+    span: 'span',
+};
+var Typography = function (_a) {
+    var variant = _a.variant, component = _a.component, className = _a.className, children = _a.children;
+    var _b = (0, hooks_1.useContext)().typographyVariantMapping, typographyVariantMapping = _b === void 0 ? {} : _b;
+    var variantMapping = __assign(__assign({}, defaultVariantMapping), typographyVariantMapping);
+    var Component = component || variantMapping[variant] || 'span';
+    return (react_1.default.createElement(Base, { className: className, as: Component }, children));
+};
+var Base = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+exports.default = Typography;
+var templateObject_1;

package/lib/components/widget-link.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Props as LinkProps } from './link';
+export declare type Props = Merge<LinkProps, {
+    widgetName: string;
+    activationOptions?: {
+        [key: string]: any;
+    };
+}>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "to" | "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement> | "disabled" | "routeName" | "params" | "widgetName" | "activationOptions"> & React.RefAttributes<HTMLAnchorElement>>;
+export default _default;