@telia-ace/knowledge-widget-ui 1.0.1

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+import { AccordionListItem, DialogLink, DialogList, DrawerList, DropdownActions, DropdownList, FavoriteButton, Feedback, GuideList, Loader, LoaderWrapper, Metadata } from './components';
+import { FavoriteActions, useArrowKeys, useDebounce, useFavorites, useHover } from './hooks';
+import { genericHtml, loadingOpacity, SmallCaret, StyledHeaderText, StyledListButton } from './styles';
+import { guideRenderInstructions } from './utils';
+export * from '@telia-ace/widget-ui';
+export { useFavorites, useDebounce, useArrowKeys, useHover, guideRenderInstructions, Metadata, AccordionListItem, GuideList, DialogLink, DialogList, FavoriteButton, Feedback, Loader, LoaderWrapper, DrawerList, DropdownActions, DropdownList, genericHtml, SmallCaret, StyledHeaderText, StyledListButton, loadingOpacity, };
+export type { FavoriteActions };

package/lib/index.js

@@ -0,0 +1,44 @@
+"use strict";
+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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadingOpacity = exports.StyledListButton = exports.StyledHeaderText = exports.SmallCaret = exports.genericHtml = exports.DropdownList = exports.DropdownActions = exports.DrawerList = exports.LoaderWrapper = exports.Loader = exports.Feedback = exports.FavoriteButton = exports.DialogList = exports.DialogLink = exports.GuideList = exports.AccordionListItem = exports.Metadata = exports.guideRenderInstructions = exports.useHover = exports.useArrowKeys = exports.useDebounce = exports.useFavorites = void 0;
+var components_1 = require("./components");
+Object.defineProperty(exports, "AccordionListItem", { enumerable: true, get: function () { return components_1.AccordionListItem; } });
+Object.defineProperty(exports, "DialogLink", { enumerable: true, get: function () { return components_1.DialogLink; } });
+Object.defineProperty(exports, "DialogList", { enumerable: true, get: function () { return components_1.DialogList; } });
+Object.defineProperty(exports, "DrawerList", { enumerable: true, get: function () { return components_1.DrawerList; } });
+Object.defineProperty(exports, "DropdownActions", { enumerable: true, get: function () { return components_1.DropdownActions; } });
+Object.defineProperty(exports, "DropdownList", { enumerable: true, get: function () { return components_1.DropdownList; } });
+Object.defineProperty(exports, "FavoriteButton", { enumerable: true, get: function () { return components_1.FavoriteButton; } });
+Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return components_1.Feedback; } });
+Object.defineProperty(exports, "GuideList", { enumerable: true, get: function () { return components_1.GuideList; } });
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return components_1.Loader; } });
+Object.defineProperty(exports, "LoaderWrapper", { enumerable: true, get: function () { return components_1.LoaderWrapper; } });
+Object.defineProperty(exports, "Metadata", { enumerable: true, get: function () { return components_1.Metadata; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useArrowKeys", { enumerable: true, get: function () { return hooks_1.useArrowKeys; } });
+Object.defineProperty(exports, "useDebounce", { enumerable: true, get: function () { return hooks_1.useDebounce; } });
+Object.defineProperty(exports, "useFavorites", { enumerable: true, get: function () { return hooks_1.useFavorites; } });
+Object.defineProperty(exports, "useHover", { enumerable: true, get: function () { return hooks_1.useHover; } });
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "genericHtml", { enumerable: true, get: function () { return styles_1.genericHtml; } });
+Object.defineProperty(exports, "loadingOpacity", { enumerable: true, get: function () { return styles_1.loadingOpacity; } });
+Object.defineProperty(exports, "SmallCaret", { enumerable: true, get: function () { return styles_1.SmallCaret; } });
+Object.defineProperty(exports, "StyledHeaderText", { enumerable: true, get: function () { return styles_1.StyledHeaderText; } });
+Object.defineProperty(exports, "StyledListButton", { enumerable: true, get: function () { return styles_1.StyledListButton; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "guideRenderInstructions", { enumerable: true, get: function () { return utils_1.guideRenderInstructions; } });
+__exportStar(require("@telia-ace/widget-ui"), exports);

package/lib/missing-type-exports.d.ts

@@ -0,0 +1,47 @@
+import { DrawerAnimationType, HtmlParseInstruction, ItemRenderer } from '@telia-ace/widget-ui';
+import { ReactElement } from 'react';
+export declare type LinkProps = Merge<React.ComponentProps<'a'>, {
+    disabled?: boolean;
+    routeName?: string;
+    params?: {
+        [key: string]: any;
+    };
+    to?: string;
+}>;
+export declare type DrawerProps = {
+    header?: string | React.ReactNode;
+    className?: string;
+    animation?: {
+        type: DrawerAnimationType;
+        duration?: number;
+    };
+    trigger: React.ReactElement;
+    fullScreen?: boolean;
+    closeButtonAriaLabel?: string;
+    onToggle?: (visible: boolean) => void;
+};
+export declare type ListProps = Merge<React.ComponentProps<'ul'>, {
+    renderItem: ItemRenderer;
+    items: any[];
+    renderLi?: boolean;
+}>;
+export declare type HtmlProps = Merge<React.ComponentProps<'div'>, {
+    html: string;
+    htmlParseInstruction?: HtmlParseInstruction;
+}>;
+export declare type ParagraphProps = Merge<HtmlProps, {
+    text?: string;
+    html?: string;
+    header?: string;
+    symbol?: Symbol;
+}>;
+export declare type ItemListProps = Merge<ListProps, ParagraphProps> & {
+    customHeader?: any;
+    ulProps?: any;
+};
+export declare type DropdownProps = {
+    className?: string;
+    children?: any;
+    trigger: ReactElement;
+    closeButtonAriaLabel?: string;
+};

package/lib/missing-type-exports.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// SHOULD BE EXPORTED FROM @telia-ace/widget-ui

package/lib/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const loadingOpacity: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    'data-loading': boolean;
+}, any>>;
+export declare const genericHtml: import("styled-components").FlattenInterpolation<any>;
+export declare const SmallCaret: import("styled-components").StyledComponent<import("react").FC<import("@telia-ace/widget-ui").IconProps>, any, {}, never>;
+export declare const StyledHeaderText: import("styled-components").StyledComponent<import("react").FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, any, {}, never>;
+export declare const StyledListButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>, any, any, never>;

package/lib/styles.js

@@ -0,0 +1,50 @@
+"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 __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 });
+exports.StyledListButton = exports.StyledHeaderText = exports.SmallCaret = exports.genericHtml = exports.loadingOpacity = void 0;
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var styled_components_1 = __importStar(require("styled-components"));
+var loader_1 = require("./components/loader");
+exports.loadingOpacity = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", ";\n    ", "\n    > * {\n        transition: 200ms ease-out opacity;\n        opacity: ", ";\n    }\n    ", " {\n        opacity: ", ";\n    }\n"], ["\n    ", ";\n    ", "\n    > * {\n        transition: 200ms ease-out opacity;\n        opacity: ", ";\n    }\n    ", " {\n        opacity: ", ";\n    }\n"])), function (p) { return p['data-loading'] && 'position: relative;'; }, function (p) { return p['data-loading'] && 'min-height: 150px;'; }, function (p) { return (p['data-loading'] ? '0.5' : '1'); }, loader_1.Wrapper, function (p) { return (p['data-loading'] ? '1' : '0'); });
+exports.genericHtml = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: 300;\n    line-height: 1.5em;\n    color: ", ";\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        word-break: break-word;\n        &:first-child {\n            margin-top: 0;\n        }\n        &:only-child {\n            margin: 0;\n        }\n        &:last-child {\n            margin-bottom: 0;\n        }\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", ";\n        }\n    }\n\n    img {\n        max-width: 100% !important;\n        height: auto !important;\n    }\n\n    p {\n        word-break: break-word;\n        margin: ", " 0;\n    }\n\n    p:first-child {\n        margin: 0 0 ", ";\n    }\n\n    p:last-child {\n        margin: ", " 0 0;\n    }\n\n    p:only-child {\n        margin: 0;\n    }\n"], ["\n    font-size: ", ";\n    font-weight: 300;\n    line-height: 1.5em;\n    color: ", ";\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        word-break: break-word;\n        &:first-child {\n            margin-top: 0;\n        }\n        &:only-child {\n            margin: 0;\n        }\n        &:last-child {\n            margin-bottom: 0;\n        }\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", ";\n        }\n    }\n\n    img {\n        max-width: 100% !important;\n        height: auto !important;\n    }\n\n    p {\n        word-break: break-word;\n        margin: ", " 0;\n    }\n\n    p:first-child {\n        margin: 0 0 ", ";\n    }\n\n    p:last-child {\n        margin: ", " 0 0;\n    }\n\n    p:only-child {\n        margin: 0;\n    }\n"])), 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.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.linkTabStyle; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+exports.SmallCaret = (0, styled_components_1.default)(widget_ui_1.Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    && {\n        font-size: ", ";\n    }\n    width: 1.2em;\n"], ["\n    && {\n        font-size: ", ";\n    }\n    width: 1.2em;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
+exports.StyledHeaderText = (0, styled_components_1.default)(widget_ui_1.Text)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: normal;\n    line-height: 1.2em;\n    color: ", ";\n"], ["\n    font-size: ", ";\n    font-weight: normal;\n    line-height: 1.2em;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+exports.StyledListButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n\n    ", "\n\n    &:focus {\n        ", ";\n    }\n\n    span {\n        flex: 1;\n        font-weight: 300;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n\n    ", "\n\n    &:focus {\n        ", ";\n    }\n\n    span {\n        flex: 1;\n        font-weight: 300;\n    }\n"])), function (p) {
+    var _a;
+    return p['data-has-label'] === 'true' &&
+        p['data-has-symbol'] === 'true' &&
+        "\n        svg, i    {\n            margin: 0 ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " 0 0;\n        }\n    ");
+}, function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                ", "\n\n                svg, i {\n                    ", "\n                }\n            "], ["\n                ", "\n\n                svg, i {\n                    ", "\n                }\n            "])), function (p) { return p['data-has-label'] === 'true' && widget_ui_1.paddedBorderTabStyle; }, function (p) {
+        return p['data-has-label'] === 'false' &&
+            p['data-has-symbol'] === 'true' && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                            ", "\n                            box-sizing: content-box;\n                        "], ["\n                            ", "\n                            box-sizing: content-box;\n                        "])), widget_ui_1.paddedBorderTabStyle);
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/lib/utils/embedded-link-mapper.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Container } from '@webprovisions/platform';
+declare const embeddedLinkMapper: (container: Container) => ({ children, ...props }: any) => JSX.Element;
+export default embeddedLinkMapper;

package/lib/utils/embedded-link-mapper.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 __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_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = __importDefault(require("react"));
+// Determine if href starts with a hashtag
+var isAnchorLink = function (href) {
+    var re = new RegExp('^#', 'i');
+    var match = re.test(href);
+    return match;
+};
+var embeddedLinkMapper = function (container) {
+    return function (_a) {
+        var children = _a.children, props = __rest(_a, ["children"]);
+        var _b = container.get('$widget'), implementation = _b.implementation, currentWidgetName = _b.name;
+        var _c = props.href, href = _c === void 0 ? '' : _c;
+        if (isAnchorLink(href)) {
+            return (react_1.default.createElement(widget_ui_1.AnchorLink, { smooth: true, to: href }, children));
+        }
+        var escapedBindings = implementation.bindings
+            .map(function (binding) { return binding.replace(/\./g, '\\.'); })
+            .join('|');
+        var regexp = new RegExp("^((http[s]?:)?//)?(".concat(escapedBindings, ")/([^\\s]+)"));
+        var expArray = regexp.exec(href);
+        if (expArray && expArray.length >= 4) {
+            var targetWidgetName = expArray[4];
+            var targetWidget = implementation.widgets.get(targetWidgetName);
+            // blob links should not be treated as a widget link
+            if (targetWidget &&
+                !targetWidgetName.startsWith('blob?') &&
+                !targetWidgetName.startsWith(currentWidgetName)) {
+                return react_1.default.createElement(widget_ui_1.WidgetLink, { widgetName: targetWidgetName }, children);
+            }
+        }
+        return react_1.default.createElement("a", __assign({}, props), children);
+    };
+};
+exports.default = embeddedLinkMapper;

package/lib/utils/guide-render-instructions.d.ts

@@ -0,0 +1,9 @@
+import { Container } from '@webprovisions/platform';
+import React from 'react';
+declare const guideRenderInstructions: (container: Container, dialog?: any[]) => {
+    transform: {
+        img: (attrs: React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLImageElement>, HTMLImageElement>) => JSX.Element;
+        a: (attr: any) => JSX.Element;
+    };
+};
+export default guideRenderInstructions;

package/lib/utils/guide-render-instructions.js

@@ -0,0 +1,56 @@
+"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_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = __importDefault(require("react"));
+var components_1 = require("../components");
+var embedded_link_mapper_1 = __importDefault(require("./embedded-link-mapper"));
+var imageLightboxRenderer = function (attrs) { return react_1.default.createElement(widget_ui_1.Lightbox, { attrs: attrs }); };
+var guideRenderInstructions = function (container, dialog) {
+    if (dialog === void 0) { dialog = []; }
+    return {
+        transform: {
+            img: imageLightboxRenderer,
+            a: function (attr) {
+                var children = attr.children, otherAttr = __rest(attr, ["children"]);
+                var connectionId = otherAttr['data-target'];
+                if (connectionId && dialog.length) {
+                    var item = dialog.find(function (_a) {
+                        var connection = _a.connection;
+                        return connection === connectionId;
+                    });
+                    if (item) {
+                        return react_1.default.createElement(components_1.DialogLink, __assign({}, item), children);
+                    }
+                }
+                var defaultInstructions = (0, embedded_link_mapper_1.default)(container);
+                return defaultInstructions(attr);
+            },
+        },
+    };
+};
+exports.default = guideRenderInstructions;

package/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as guideRenderInstructions } from './guide-render-instructions';

package/lib/utils/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.guideRenderInstructions = void 0;
+var guide_render_instructions_1 = require("./guide-render-instructions");
+Object.defineProperty(exports, "guideRenderInstructions", { enumerable: true, get: function () { return __importDefault(guide_render_instructions_1).default; } });

package/lib-esm/components/dialog-link.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LinkProps } from '../missing-type-exports';
+export declare type Props = Merge<LinkProps, {
+    parent: {
+        id: string;
+        title: string;
+    };
+    type: 'guide' | 'link' | 'default';
+    connection?: string;
+}>;
+declare const DialogLink: React.FC<Props>;
+export default DialogLink;

package/lib-esm/components/dialog-link.js

@@ -0,0 +1,35 @@
+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);
+};
+import { Icon, Link, useRouteData } from '@telia-ace/widget-ui';
+import { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';
+import React from 'react';
+var DialogLink = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? '' : _b, className = _a.className, id = _a.id, parent = _a.parent, connection = _a.connection, type = _a.type, target = _a.target, href = _a.href, children = _a.children;
+    var props = {};
+    var _c = useRouteData(), name = _c.name, params = _c.params;
+    switch (type) {
+        case 'default':
+        case 'guide':
+            var parentId = parent.id, parentTitle = parent.title;
+            props.routeName = name;
+            props.params = createParams(__assign(__assign({}, params), { guide: id, connection: id === parentId ? connection : undefined, uriName: id === parentId ? formatUrl(parentTitle) : formatUrl(title) }));
+            break;
+        case 'link':
+            props.href = href;
+            props.target = target;
+            break;
+    }
+    return (React.createElement(Link, __assign({ className: appendClassNames(className, 'humany-dialog-link') }, props), children || (React.createElement(React.Fragment, null,
+        type === 'link' && React.createElement(Icon, { faIcon: "link" }),
+        React.createElement("span", null, title)))));
+};
+export default DialogLink;

package/lib-esm/components/dialog-list.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Props as DialogLinkProps } from './dialog-link';
+declare type Props = Merge<React.ComponentProps<'ul'>, {
+    dialog: DialogLinkProps[];
+}>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "dialog" | "key" | keyof React.HTMLAttributes<HTMLUListElement>> & React.RefAttributes<HTMLUListElement>>;
+export default _default;

package/lib-esm/components/dialog-list.js

@@ -0,0 +1,44 @@
+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 __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;
+};
+import { invertedHoverButton, List, list } from '@telia-ace/widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import DialogLink from './dialog-link';
+export default forwardRef(function (_a, ref) {
+    var className = _a.className, dialog = _a.dialog, other = __rest(_a, ["className", "dialog"]);
+    return !!dialog.length ? (React.createElement(StyledList, __assign({ className: appendClassNames(className, 'humany-dialog'), items: dialog, renderItem: function (item) { return (React.createElement("li", { key: item.connection, "data-dialog": item.connection },
+            React.createElement(DialogLink, __assign({}, item)))); } }, other, { ref: ref }))) : null;
+});
+var StyledList = styled(List)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    a {\n        min-width: 150px;\n        max-width: 400px;\n        display: block;\n        white-space: normal;\n        ", "\n    }\n\n    i {\n        margin: 0 ", " 0 0;\n    }\n"], ["\n    ", "\n    a {\n        min-width: 150px;\n        max-width: 400px;\n        display: block;\n        white-space: normal;\n        ", "\n    }\n\n    i {\n        margin: 0 ", " 0 0;\n    }\n"])), list, function (p) {
+    var _a;
+    return invertedHoverButton({
+        primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        secondaryColor: '#FFFFFF',
+    });
+}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var templateObject_1;

package/lib-esm/components/drawer-list.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DrawerProps, ItemListProps } from '../missing-type-exports';
+declare type Props = Merge<ItemListProps, DrawerProps>;
+declare const DrawerList: React.FC<Props>;
+export default DrawerList;

package/lib-esm/components/drawer-list.js

@@ -0,0 +1,38 @@
+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 __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;
+};
+import { Drawer, ItemList, itemList } from '@telia-ace/widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React from 'react';
+import styled from 'styled-components';
+var DrawerList = function (_a) {
+    var trigger = _a.trigger, header = _a.header, className = _a.className, animation = _a.animation, fullScreen = _a.fullScreen, onToggle = _a.onToggle, children = _a.children, ref = _a.ref, closeButtonAriaLabel = _a.closeButtonAriaLabel, other = __rest(_a, ["trigger", "header", "className", "animation", "fullScreen", "onToggle", "children", "ref", "closeButtonAriaLabel"]);
+    return (React.createElement(Drawer, { className: appendClassNames(className, 'humany-drawer-list'), trigger: trigger, header: header, animation: animation, fullScreen: fullScreen, onToggle: onToggle, closeButtonAriaLabel: closeButtonAriaLabel },
+        React.createElement(StyledItemList, __assign({}, other), children)));
+};
+export default DrawerList;
+var StyledItemList = styled(ItemList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    font-family: ", ";\n    padding: ", ";\n    > ul > li {\n        overflow: visible;\n        font-weight: 300;\n        font-size: ", ";\n    }\n"], ["\n    ", "\n    font-family: ", ";\n    padding: ", ";\n    > ul > li {\n        overflow: visible;\n        font-weight: 300;\n        font-size: ", ";\n    }\n"])), itemList, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var templateObject_1;

package/lib-esm/components/dropdown-actions.d.ts

@@ -0,0 +1,11 @@
+import { ItemRenderer } from '@telia-ace/widget-ui';
+import React from 'react';
+declare type Props = {
+    trigger: React.ReactElement;
+    header?: React.ReactElement;
+    items?: any[];
+    renderItem?: ItemRenderer;
+    className?: string;
+};
+declare const DropdownActions: React.FC<Props>;
+export default DropdownActions;

package/lib-esm/components/dropdown-actions.js

@@ -0,0 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Dropdown, List } from '@telia-ace/widget-ui';
+import React from 'react';
+import styled from 'styled-components';
+var DropdownActions = function (_a) {
+    var items = _a.items, renderItem = _a.renderItem, trigger = _a.trigger, header = _a.header, children = _a.children;
+    return (React.createElement(Dropdown, { className: "humany-dropdown-actions", trigger: trigger },
+        React.createElement(Wrapper, null,
+            !!header && React.createElement(Header, null, header),
+            items && renderItem && (React.createElement(StyledList, { items: items, renderItem: renderItem })),
+            children)));
+};
+export default DropdownActions;
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: #fff;\n    border: #ccc 1px solid;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    font-family: ", ";\n    font-size: ", ";\n"], ["\n    background: #fff;\n    border: #ccc 1px solid;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    font-family: ", ";\n    font-size: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: 0;\n    font-size: ", ";\n    font-weight: normal;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        margin: 0;\n        font-weight: normal;\n        padding-bottom: 0;\n    }\n\n    svg,\n    i {\n        margin-right: ", ";\n    }\n"], ["\n    padding: ", ";\n    padding-bottom: 0;\n    font-size: ", ";\n    font-weight: normal;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        margin: 0;\n        font-weight: normal;\n        padding-bottom: 0;\n    }\n\n    svg,\n    i {\n        margin-right: ", ";\n    }\n"])), function (p) { return p.theme.sizes.normal; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.theme.sizes.small; });
+var StyledList = styled(List)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    padding: ", " 0;\n\n    li {\n        background: #fff;\n\n        a {\n            display: block;\n            font-size: ", ";\n            padding: ", ";\n            cursor: pointer;\n            color: #555;\n            text-decoration: none;\n\n            &:hover {\n                background: #f9f9f9;\n                color: ", ";\n            }\n        }\n    }\n"], ["\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    padding: ", " 0;\n\n    li {\n        background: #fff;\n\n        a {\n            display: block;\n            font-size: ", ";\n            padding: ", ";\n            cursor: pointer;\n            color: #555;\n            text-decoration: none;\n\n            &:hover {\n                background: #f9f9f9;\n                color: ", ";\n            }\n        }\n    }\n"])), function (p) { return p.theme.sizes.small; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a, _b; return "".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
+var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/components/dropdown-list.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DropdownProps, ItemListProps } from '../missing-type-exports';
+export declare type Props = Merge<DropdownProps, ItemListProps>;
+declare const DropdownList: React.FC<Props>;
+export default DropdownList;

package/lib-esm/components/dropdown-list.js

@@ -0,0 +1,38 @@
+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 __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;
+};
+import { Dropdown, headingElement, ItemList, itemList } from '@telia-ace/widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React from 'react';
+import styled, { css } from 'styled-components';
+var DropdownList = function (_a) {
+    var trigger = _a.trigger, className = _a.className, children = _a.children, closeButtonAriaLabel = _a.closeButtonAriaLabel, other = __rest(_a, ["trigger", "className", "children", "closeButtonAriaLabel"]);
+    return (React.createElement(Dropdown, { className: appendClassNames(className, 'humany-dropdown-list'), closeButtonAriaLabel: closeButtonAriaLabel, trigger: trigger },
+        React.createElement(StyledItemList, __assign({}, other), children)));
+};
+export default DropdownList;
+var StyledItemList = styled(ItemList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    font-family: ", ";\n    > div {\n        ", "\n    }\n    > ul > li {\n        overflow: visible;\n        font-weight: 300;\n        font-size: ", ";\n\n        a {\n            display: inline-block;\n\n            @media (hover: hover) {\n                &:hover {\n                    text-decoration: underline;\n                }\n            }\n        }\n    }\n"], ["\n    ", "\n    font-family: ", ";\n    > div {\n        ", "\n    }\n    > ul > li {\n        overflow: visible;\n        font-weight: 300;\n        font-size: ", ";\n\n        a {\n            display: inline-block;\n\n            @media (hover: hover) {\n                &:hover {\n                    text-decoration: underline;\n                }\n            }\n        }\n    }\n"])), itemList, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, headingElement('> h1', css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                font-size: ", ";\n                line-height: 1.2em;\n            "], ["\n                font-size: ", ";\n                line-height: 1.2em;\n            "])), 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.normal; });
+var templateObject_1, templateObject_2;

package/lib-esm/components/favorite-button.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FavoriteActions } from '../hooks';
+declare type Props = {
+    isFavorite: boolean;
+    actions: FavoriteActions;
+    id: string;
+    addFavoriteTooltip?: string;
+    removeFavoriteCancelLabel?: string;
+    removeFavoriteConfirmLabel?: string;
+    removeFavoriteHeader?: string;
+    removeFavoriteLabel?: string;
+    removeFavoriteTooltip?: string;
+    buttonLabel?: string;
+    guideTitle?: string;
+};
+declare const FavoriteButton: React.FC<Props>;
+export default FavoriteButton;