@veracity/vui 0.3.0 → 0.3.2

package/header/headerProfile.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HeaderProfileProps } from './headerProfile.types';
+/** Displays user profile information and helpful links, like settings or logout. */
+export default function HeaderProfile(props: HeaderProfileProps): JSX.Element;

package/header/headerProfile.js

@@ -0,0 +1,101 @@
+"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;
+    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 __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 react_1 = __importStar(require("react"));
+var avatar_1 = __importDefault(require("../avatar"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var popover_1 = __importDefault(require("../popover"));
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+function UserInfo(_a) {
+    var companyName = _a.companyName, userName = _a.userName;
+    return (react_1.default.createElement(box_1.default, { p: 2, spaceX: 2 },
+        react_1.default.createElement(avatar_1.default, { colorScheme: "prussian", name: userName, size: "lg", variant: "solid" }),
+        react_1.default.createElement(box_1.default, { column: true },
+            userName && (react_1.default.createElement(t_1.default, { mb: 0.5, weight: "demi" }, userName)),
+            companyName && react_1.default.createElement(t_1.default, null, companyName))));
+}
+/** Displays user profile information and helpful links, like settings or logout. */
+function HeaderProfile(props) {
+    var children = props.children, contentProps = props.contentProps, sections = props.sections, triggerProps = props.triggerProps, userInfo = props.userInfo, rest = __rest(props, ["children", "contentProps", "sections", "triggerProps", "userInfo"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)()).profile;
+    var name = (0, utils_1.isObject)(userInfo) ? userInfo.userName : '';
+    return (react_1.default.createElement(popover_1.default, __assign({ placement: "bottom-end" }, rest),
+        react_1.default.createElement(popover_1.default.Trigger, __assign({ as: avatar_1.default, colorScheme: "prussian", isInteractive: true, name: name, variant: "solid" }, styles.trigger, triggerProps)),
+        react_1.default.createElement(popover_1.default.Content, __assign({ column: true, py: 1 }, styles.content, contentProps),
+            (0, utils_1.isObject)(userInfo) ? react_1.default.createElement(UserInfo, __assign({}, userInfo)) : userInfo,
+            (0, utils_1.isObject)(sections)
+                ? Object.entries(sections).map(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], _c = _b[1], heading = _c.heading, links = _c.links;
+                    return (react_1.default.createElement(react_1.Fragment, { key: key },
+                        react_1.default.createElement(list_1.default.Divider, null),
+                        react_1.default.createElement(list_1.default, { heading: heading }, links === null || links === void 0 ? void 0 : links.map(function (_a, index) {
+                            var icon = _a.icon, text = _a.text, url = _a.url;
+                            return (react_1.default.createElement(list_1.default.Item, { iconLeft: icon, key: index, linkProps: { href: url }, text: text }));
+                        }))));
+                })
+                : sections)));
+}
+exports.default = HeaderProfile;

package/header/headerProfile.types.d.ts

@@ -0,0 +1,35 @@
+import { AvatarProps } from '../avatar';
+import { BoxProps } from '../box';
+import { PopoverProps } from '../popover';
+import { AnyElement } from '../utils';
+import { HeaderLinkData } from './header.types';
+export declare type HeaderProfileProps = PopoverProps & {
+    /** Props object passed to the PopoverContent component. */
+    contentProps?: BoxProps;
+    /** Socket displaying a set of link sections below user information. */
+    sections?: HeaderProfileData['sections'] | AnyElement;
+    /** Props object passed to the PopoverTrigger component. */
+    triggerProps?: AvatarProps;
+    /** Socket displaying user information on top of the profile popover. */
+    userInfo?: HeaderProfileData['userInfo'] | AnyElement;
+};
+/** Defines profile link sections and user information. */
+export declare type HeaderProfileData = {
+    sections?: HeaderProfileSectionsData;
+    userInfo?: HeaderProfileUserInfoData;
+};
+/** Defines heading and an array of links within one section. */
+export declare type HeaderProfileSectionData = {
+    heading?: string;
+    links?: HeaderLinkData[];
+};
+/** Defines a set of link sections within the profile popover. */
+export declare type HeaderProfileSectionsData = {
+    [sectionName: string]: HeaderProfileSectionData;
+};
+/** Defines user information within the profile. */
+export declare type HeaderProfileUserInfoData = {
+    companyName?: string;
+    userName?: string;
+};
+export declare type HeaderProfileUserInfoProps = HeaderProfileUserInfoData;

package/header/headerServices.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HeaderServicesProps } from './header.types';
+/** Displays a list of services available to the user. */
+export default function HeaderServices(props: HeaderServicesProps): JSX.Element;

package/header/headerServices.js

@@ -0,0 +1,51 @@
+"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 react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var menu_1 = __importDefault(require("../menu"));
+var context_1 = require("./context");
+/** Displays a list of services available to the user. */
+function HeaderServices(props) {
+    var buttonProps = props.buttonProps, children = props.children, listProps = props.listProps, _a = props.services, services = _a === void 0 ? [] : _a, rest = __rest(props, ["buttonProps", "children", "listProps", "services"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)()).services;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.RenderOnDesktop, { screen: "lg" },
+            react_1.default.createElement(menu_1.default, __assign({}, rest),
+                react_1.default.createElement(menu_1.default.Button, __assign({ icon: "falTh" }, styles.button, buttonProps)),
+                react_1.default.createElement(menu_1.default.List, __assign({}, styles.list, listProps), services.map(function (_a, index) {
+                    var text = _a.text, url = _a.url;
+                    return (react_1.default.createElement(menu_1.default.Item, __assign({ key: index, linkProps: { href: url }, text: text }, styles.item)));
+                })))),
+        react_1.default.createElement(core_1.RenderOnMobile, { screen: "lg" },
+            react_1.default.createElement(list_1.default, __assign({}, styles.list, listProps), services.map(function (_a, index) {
+                var text = _a.text, url = _a.url;
+                return (react_1.default.createElement(menu_1.default.Item, __assign({ key: index, linkProps: { href: url }, text: text }, styles.item)));
+            })))));
+}
+exports.default = HeaderServices;

package/header/headerSignIn.d.ts

@@ -0,0 +1,4 @@
+import { HeaderSignInProps } from './header.types';
+/** Sign in button leading to Veracity login page. */
+export declare const HeaderSignIn: import("../core").VuiComponent<"button", HeaderSignInProps>;
+export default HeaderSignIn;

package/header/headerSignIn.js

@@ -0,0 +1,40 @@
+"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 });
+exports.HeaderSignIn = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Sign in button leading to Veracity login page. */
+exports.HeaderSignIn = (0, core_1.vui)(function (props, ref) {
+    var url = props.url, rest = __rest(props, ["url"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
+    return (react_1.default.createElement(button_1.default, __assign({ as: "a", className: "vui-headerSignIn", href: url, ref: ref }, styles.signIn, rest), "Sign in"));
+});
+exports.HeaderSignIn.displayName = 'HeaderSignIn';
+exports.default = exports.HeaderSignIn;

package/header/index.d.ts

@@ -0,0 +1,17 @@
+export * from './header';
+export { default } from './header';
+export * from './header.types';
+export * from './headerContent';
+export * from './headerCreateAccount';
+export * from './headerDivider';
+export * from './headerLink';
+export * from './headerLinks';
+export * from './headerLogo';
+export * from './headerMobileContent';
+export * from './headerMobileToggle';
+export * from './headerNotifications';
+export * from './headerProfile';
+export * from './headerServices';
+export * from './headerSignIn';
+export * from './loggedInHeader';
+export * from './loggedOutHeader';

package/header/index.js

@@ -0,0 +1,34 @@
+"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("./header"), exports);
+var header_1 = require("./header");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(header_1).default; } });
+__exportStar(require("./header.types"), exports);
+__exportStar(require("./headerContent"), exports);
+__exportStar(require("./headerCreateAccount"), exports);
+__exportStar(require("./headerDivider"), exports);
+__exportStar(require("./headerLink"), exports);
+__exportStar(require("./headerLinks"), exports);
+__exportStar(require("./headerLogo"), exports);
+__exportStar(require("./headerMobileContent"), exports);
+__exportStar(require("./headerMobileToggle"), exports);
+__exportStar(require("./headerNotifications"), exports);
+__exportStar(require("./headerProfile"), exports);
+__exportStar(require("./headerServices"), exports);
+__exportStar(require("./headerSignIn"), exports);
+__exportStar(require("./loggedInHeader"), exports);
+__exportStar(require("./loggedOutHeader"), exports);

package/header/loggedInHeader.d.ts

@@ -0,0 +1,4 @@
+import { LoggedInHeaderProps } from './header.types';
+/** Displays Header content appropriate for logged in users, such as services, notifications or profile information. */
+export declare const LoggedInHeader: import("../core").VuiComponent<"div", LoggedInHeaderProps>;
+export default LoggedInHeader;

package/header/loggedInHeader.js

@@ -0,0 +1,53 @@
+"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 });
+exports.LoggedInHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var header_1 = __importDefault(require("./header"));
+/** Displays Header content appropriate for logged in users, such as services, notifications or profile information. */
+exports.LoggedInHeader = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, children = props.children, links = props.links, logo = props.logo, profile = props.profile, services = props.services, notifications = props.notifications, rest = __rest(props, ["className", "children", "links", "logo", "profile", "services", "notifications"]);
+    return (react_1.default.createElement(header_1.default, __assign({ className: (0, utils_1.cs)('vui-loggedInHeader', className), ref: ref }, rest),
+        react_1.default.createElement(header_1.default.Content, null,
+            (0, utils_1.isObject)(logo) ? react_1.default.createElement(header_1.default.Logo, __assign({}, logo)) : logo,
+            react_1.default.createElement(core_1.RenderOnDesktop, { screen: "lg" },
+                children,
+                (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.Links, { links: links }) : links,
+                (0, utils_1.isArray)(services) ? react_1.default.createElement(header_1.default.Services, { services: services }) : services),
+            (0, utils_1.isObject)(notifications) ? react_1.default.createElement(header_1.default.Notifications, __assign({}, notifications)) : notifications,
+            (0, utils_1.isObject)(profile) ? react_1.default.createElement(header_1.default.Profile, __assign({}, profile)) : profile,
+            react_1.default.createElement(core_1.RenderOnMobile, { screen: "lg" },
+                react_1.default.createElement(header_1.default.MobileToggle, null),
+                react_1.default.createElement(header_1.default.MobileContent, null,
+                    children,
+                    (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.Links, { links: links }) : links,
+                    (0, utils_1.isArray)(services) ? react_1.default.createElement(header_1.default.Services, { services: services }) : services)))));
+});
+exports.LoggedInHeader.displayName = 'LoggedInHeader';
+exports.default = exports.LoggedInHeader;

package/header/loggedOutHeader.d.ts

@@ -0,0 +1,4 @@
+import { LoggedOutHeaderProps } from './header.types';
+/** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
+export declare const LoggedOutHeader: import("../core").VuiComponent<"div", LoggedOutHeaderProps>;
+export default LoggedOutHeader;

package/header/loggedOutHeader.js

@@ -0,0 +1,54 @@
+"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 });
+exports.LoggedOutHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var header_1 = __importDefault(require("./header"));
+/** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
+exports.LoggedOutHeader = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, createAccount = props.createAccount, links = props.links, logo = props.logo, signIn = props.signIn, rest = __rest(props, ["children", "className", "createAccount", "links", "logo", "signIn"]);
+    return (react_1.default.createElement(header_1.default, __assign({ className: (0, utils_1.cs)('vui-loggedOutHeader', className), ref: ref }, rest),
+        react_1.default.createElement(header_1.default.Content, null,
+            (0, utils_1.isObject)(logo) ? react_1.default.createElement(header_1.default.Logo, __assign({}, logo)) : logo,
+            react_1.default.createElement(core_1.RenderOnDesktop, { screen: "lg" },
+                children,
+                (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.Links, { links: links }) : links,
+                react_1.default.createElement(header_1.default.Divider, null),
+                (0, utils_1.isString)(signIn) ? react_1.default.createElement(header_1.default.SignIn, { url: signIn }) : signIn,
+                (0, utils_1.isString)(createAccount) ? react_1.default.createElement(header_1.default.CreateAccount, { url: createAccount }) : createAccount),
+            react_1.default.createElement(core_1.RenderOnMobile, { screen: "lg" },
+                (0, utils_1.isString)(signIn) ? react_1.default.createElement(header_1.default.SignIn, { url: signIn }) : signIn,
+                react_1.default.createElement(header_1.default.MobileToggle, null),
+                react_1.default.createElement(header_1.default.MobileContent, null,
+                    children,
+                    (0, utils_1.isString)(createAccount) ? react_1.default.createElement(header_1.default.CreateAccount, { url: createAccount }) : createAccount,
+                    (0, utils_1.isArray)(links) ? react_1.default.createElement(header_1.default.Links, { links: links }) : links)))));
+});
+exports.LoggedOutHeader.displayName = 'LoggedOutHeader';
+exports.default = exports.LoggedOutHeader;

package/header/theme.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {
+        test: {
+            container: {
+                bg: string;
+                color: string;
+            };
+            profile: {
+                content: {
+                    color: string;
+                };
+                trigger: {
+                    color: string;
+                    name: string;
+                };
+            };
+            services: {
+                button: {
+                    variant: string;
+                };
+            };
+            signIn: {
+                colorScheme: string;
+            };
+        };
+    };
+};
+export default _default;

package/header/theme.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
+var defaultProps = {};
+var parts = [
+    'container',
+    'content',
+    'createAccount',
+    'divider',
+    'link',
+    'links',
+    'logo',
+    'mobileContent',
+    'mobileToggle',
+    'notifications',
+    'profile',
+    'services',
+    'signIn'
+];
+var sizes = {};
+var variants = {
+    test: {
+        container: {
+            bg: 'prussian.80',
+            color: 'white'
+        },
+        profile: {
+            content: {
+                color: 'prussian.80'
+            },
+            trigger: {
+                color: 'green.80',
+                name: 'Ferdynand Kiepski'
+            }
+        },
+        services: {
+            button: {
+                variant: 'text'
+            }
+        },
+        signIn: {
+            colorScheme: 'pink'
+        }
+    }
+};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/heading/heading.d.ts

@@ -1,5 +1,5 @@
 import { HeadingProps } from './heading.types';
-import { SystemProps } from '../system';
-export declare const HeadingBase: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const HeadingBase: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays bold text in different sizes. Used as title for pages, articles, panels, etc. */
 export declare const Heading: import("../core").VuiComponent<"h2", HeadingProps>;
 export default Heading;

package/heading/heading.js

@@ -31,11 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = exports.HeadingBase = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
-var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.HeadingBase = styled_components_1.default.h2.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.HeadingBase = core_1.styled.h2Box(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tfont-weight: demi;\n\ttransition-duration: fast;\n"], ["\n\tfont-weight: demi;\n\ttransition-duration: fast;\n"
+    /** Displays bold text in different sizes. Used as title for pages, articles, panels, etc. */
+])));
+/** Displays bold text in different sizes. Used as title for pages, articles, panels, etc. */
 exports.Heading = (0, core_1.vui)(function (props, ref) {
     var _a = (0, core_1.omitThemingProps)(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
     var styles = (0, core_1.useStyleConfig)('Heading', props);
@@ -46,7 +47,7 @@ exports.Heading = (0, core_1.vui)(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: (0, utils_1.cs)('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: (0, utils_1.cs)('vui-heading', hClassName, className), ref: ref }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.Heading.displayName = 'Heading';
 exports.default = exports.Heading;

package/heading/heading.types.d.ts

@@ -1,10 +1,15 @@
 import React from 'react';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface HeadingProps extends SystemProps, ThemingProps<'Heading'> {
+export declare type HeadingProps = SystemProps & ThemingProps<'Heading'> & {
+    /** Alias for textAlign prop. @deprecated */
     align?: TypographyProps['textAlign'];
+    /** Alias for textTransform prop. @deprecated */
     casing?: TypographyProps['textTransform'];
+    /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration'];
+    /** Displays given text if no children are provided. */
     text?: React.ReactText;
+    /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
-}
+};

package/heading/headings.js

@@ -16,8 +16,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
 var react_1 = __importDefault(require("react"));
-var heading_1 = __importDefault(require("./heading"));
 var core_1 = require("../core");
+var heading_1 = __importDefault(require("./heading"));
 exports.H1 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h1" }, props)); });
 exports.H2 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h2" }, props)); });
 exports.H3 = (0, core_1.vui)(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h3" }, props)); });

package/heading/index.d.ts

@@ -1,4 +1,4 @@
 export * from './heading';
+export { default } from './heading';
 export * from './heading.types';
 export * from './headings';
-export { default } from './heading';

package/heading/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./heading"), exports);
-__exportStar(require("./heading.types"), exports);
-__exportStar(require("./headings"), exports);
 var heading_1 = require("./heading");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(heading_1).default; } });
+__exportStar(require("./heading.types"), exports);
+__exportStar(require("./headings"), exports);

package/heading/theme.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         size: string;
     };

package/heading/theme.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {
     size: 'h2'
 };
@@ -37,6 +38,7 @@ var sizes = {
 };
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/icon/helpers.js

@@ -39,14 +39,14 @@ function getIconDetails(icon) {
     if (!icon)
         return {};
     // Compute CDN url if icon is not in library cache
-    if (!icons_1.library.has(icon)) {
+    if (!icons_1.iconsCache.has(icon)) {
         var prefix = icon.slice(0, 3);
         return {
             src: core_1.cdnUrl + "/common/icons/ui/" + prefix + "/" + icon + ".svg"
         };
     }
     // Compute relevant properties based on icon definition from the library
-    var _a = icons_1.library.get(icon), details = _a.details, name = _a.name, _b = _a.pathProps, pathProps = _b === void 0 ? [] : _b, _c = _a.svgProps, svgProps = _c === void 0 ? {} : _c;
+    var _a = icons_1.iconsCache.get(icon), details = _a.details, name = _a.name, _b = _a.pathProps, pathProps = _b === void 0 ? [] : _b, _c = _a.svgProps, svgProps = _c === void 0 ? {} : _c;
     var _d = __read(details, 5), width = _d[0], height = _d[1], d = _d[4];
     var viewBox = "0 0 " + width + " " + height;
     var customIcon = {

package/icon/icon.d.ts

@@ -1,3 +1,4 @@
 import { IconProps } from './icon.types';
+/** Displays and Svg element with a given icon. Handles icon names or definition objects. */
 export declare const Icon: import("../core").VuiComponent<"svg", IconProps>;
 export default Icon;