@veracity/vui 0.7.0-beta.2 → 0.7.1

package/dialog/index.js

@@ -0,0 +1,30 @@
+"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.Dialog = void 0;
+__exportStar(require("./consts"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./dialog"), exports);
+var dialog_1 = require("./dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return __importDefault(dialog_1).default; } });
+__exportStar(require("./dialog.types"), exports);
+__exportStar(require("./dialogBody"), exports);
+__exportStar(require("./dialogCancelButton"), exports);
+__exportStar(require("./dialogCloseButton"), exports);
+__exportStar(require("./dialogFooter"), exports);
+__exportStar(require("./dialogHeader"), exports);
+__exportStar(require("./dialogIcon"), exports);
+__exportStar(require("./dialogSubmitButton"), exports);
+__exportStar(require("./dialogTitle"), exports);

package/dialog/theme.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+    };
+    parts: string[];
+    sizes: {
+        md: {
+            container: {
+                maxW: number;
+            };
+        };
+        lg: {
+            container: {
+                maxW: number;
+            };
+        };
+        fullWidth: {};
+    };
+    variants: {};
+};
+export default _default;

package/dialog/theme.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
+var defaultProps = {
+    size: 'md'
+};
+var parts = ['container', 'body', 'cancelButton', 'closeButton', 'footer', 'header', 'icon', 'submitButton', 'title'];
+var sizes = {
+    md: {
+        container: {
+            maxW: 520
+        }
+    },
+    lg: {
+        container: {
+            maxW: 640
+        }
+    },
+    fullWidth: {}
+};
+var variants = {};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/divider/divider.d.ts

@@ -0,0 +1,5 @@
+import { DividerProps } from './divider.types';
+export declare const DividerBase: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Visually separates content with a horizontal or vertical line. */
+export declare const Divider: import("../core").VuiComponent<"hr", DividerProps>;
+export default Divider;

package/divider/divider.js

@@ -0,0 +1,54 @@
+"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 __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.Divider = exports.DividerBase = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+exports.DividerBase = core_1.styled.hrBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-color: grey.30;\n"], ["\n\tborder-color: grey.30;\n"
+    /** Visually separates content with a horizontal or vertical line. */
+])));
+/** Visually separates content with a horizontal or vertical line. */
+exports.Divider = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var _b = (0, core_1.omitThemingProps)(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);
+    var styles = (0, core_1.useStyleConfig)('Divider', props);
+    var borderSide = isVertical ? 'Right' : 'Bottom';
+    var borderWidth = "border" + borderSide + "Width";
+    var height = isVertical ? '100%' : '';
+    var aliasedProps = (0, utils_1.filterUndefined)((_a = {},
+        _a[borderWidth] = width !== null && width !== void 0 ? width : 1,
+        _a));
+    return (react_1.default.createElement(exports.DividerBase, __assign({ className: (0, utils_1.cs)('vui-divider', className), h: height, ref: ref }, styles, aliasedProps, rest)));
+});
+exports.Divider.displayName = 'Divider';
+exports.default = exports.Divider;
+var templateObject_1;

package/divider/divider.types.d.ts

@@ -0,0 +1,10 @@
+import { BordersProps, SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type DividerProps = SystemProps & ThemingProps<'Divider'> & {
+    /** Children are disabled for this component. */
+    children?: never;
+    /** Renders the line vertically using 100% height. */
+    isVertical?: boolean;
+    /** Defines thickness of the line. */
+    width?: BordersProps['borderWidth'];
+};

package/divider/index.js

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

package/divider/theme.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/divider/theme.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
+var defaultProps = {};
+var sizes = {};
+var variants = {};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/footer/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FooterContext } from './footer.types';
+declare const FooterProvider: import("react").Provider<FooterContext>, useFooterContext: () => FooterContext;
+export { FooterProvider, useFooterContext };

package/footer/context.js

@@ -0,0 +1,23 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFooterContext = exports.FooterProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), FooterProvider = _a[0], useFooterContext = _a[1];
+exports.FooterProvider = FooterProvider;
+exports.useFooterContext = useFooterContext;

package/footer/footer.d.ts

@@ -0,0 +1,19 @@
+import { VuiComponent } from '../core';
+import { FooterProps } from './footer.types';
+import FooterColumn from './footerColumn';
+import FooterContent from './footerContent';
+import FooterHeading from './footerHeading';
+import FooterLink from './footerLink';
+import FooterRow from './footerRow';
+import FooterSection from './footerSection';
+export declare const FooterBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
+export declare const Footer: VuiComponent<"div", FooterProps> & {
+    Column: typeof FooterColumn;
+    Content: typeof FooterContent;
+    Heading: typeof FooterHeading;
+    Link: typeof FooterLink;
+    Row: typeof FooterRow;
+    Section: typeof FooterSection;
+};
+export default Footer;

package/footer/footer.js

@@ -0,0 +1,67 @@
+"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 __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.Footer = exports.FooterBase = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var divider_1 = require("../divider");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var footerColumn_1 = __importDefault(require("./footerColumn"));
+var footerContent_1 = __importDefault(require("./footerContent"));
+var footerHeading_1 = __importDefault(require("./footerHeading"));
+var footerLink_1 = __importDefault(require("./footerLink"));
+var footerRow_1 = __importDefault(require("./footerRow"));
+var footerSection_1 = __importDefault(require("./footerSection"));
+var footerTrademark_1 = __importDefault(require("./footerTrademark"));
+exports.FooterBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tbackground-color: prussian.80;\n\tcolor: white;\n\tpadding: 5 3;\n"], ["\n\tbackground-color: prussian.80;\n\tcolor: white;\n\tpadding: 5 3;\n"
+    /** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
+])));
+/** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
+exports.Footer = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, columns = props.columns, linkedIn = props.linkedIn, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "columns", "linkedIn", "size", "variant"]);
+    var context = { size: size, variant: variant };
+    return (react_1.default.createElement(context_1.FooterProvider, { value: context },
+        react_1.default.createElement(exports.FooterBase, __assign({ className: (0, utils_1.cs)('vui-footer', className), ref: ref }, rest),
+            react_1.default.createElement(footerContent_1.default, null, children !== null && children !== void 0 ? children : (columns && (react_1.default.createElement(footerRow_1.default, null, columns.map(function (sections, index) { return (react_1.default.createElement(footerColumn_1.default, { key: index, sections: sections })); })))),
+                children || columns ? react_1.default.createElement(divider_1.Divider, { borderColor: "grey.60", my: 4 }) : null,
+                react_1.default.createElement(footerRow_1.default, null,
+                    react_1.default.createElement(footerTrademark_1.default, { linkedIn: linkedIn }))))));
+});
+exports.Footer.displayName = 'Footer';
+exports.Footer.Column = footerColumn_1.default;
+exports.Footer.Content = footerContent_1.default;
+exports.Footer.Heading = footerHeading_1.default;
+exports.Footer.Link = footerLink_1.default;
+exports.Footer.Row = footerRow_1.default;
+exports.Footer.Section = footerSection_1.default;
+exports.default = exports.Footer;
+var templateObject_1;

package/footer/footer.types.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { BoxProps } from '../box';
+import { ThemingProps } from '../theme';
+/** Column consists of one ore more sections with a heading and links. */
+export declare type FooterColumnData = FooterSectionData[];
+export declare type FooterColumnProps = BoxProps & {
+    /** Data structure for sections and links */
+    sections?: FooterSectionData[];
+};
+export declare type FooterContentProps = BoxProps;
+export declare type FooterContext = Pick<FooterProps, 'size' | 'variant'>;
+/** Link includes the label text and URL address. */
+export declare type FooterLinkData = {
+    /** Unique name that identifies a link in the links dictionary. */
+    id?: string;
+    text: string;
+    url: string;
+};
+export declare type FooterProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Footer'> & Pick<FooterTrademarkProps, 'linkedIn'> & {
+    /** Data defining content of multiple columns. */
+    columns?: FooterColumnData[];
+};
+/** Section consists of multiple links with text (label) and url */
+export declare type FooterSectionData = {
+    heading?: string;
+    /** Array of objects defining each link. */
+    links?: FooterLinkData[];
+};
+export declare type FooterSectionProps = BoxProps & {
+    /** Socket for a heading on top of the section. */
+    heading?: FooterSectionData['heading'] | JSX.Element;
+    /** Socket for a list of links below the heading. */
+    links?: FooterSectionData['links'] | JSX.Element;
+};
+export declare type FooterTrademarkProps = BoxProps & {
+    /** Url provided to the LinkedIn icon in the Trademark section. */
+    linkedIn?: string;
+};

package/footer/footerColumn.d.ts

@@ -0,0 +1,4 @@
+import { FooterColumnProps } from './footer.types';
+/** Organizes sections with links into a single column. Different width per breakpoint. */
+declare const FooterColumn: import("../core").VuiComponent<"div", FooterColumnProps>;
+export default FooterColumn;

package/footer/footerColumn.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 });
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var footerSection_1 = __importDefault(require("./footerSection"));
+/** Organizes sections with links into a single column. Different width per breakpoint. */
+var FooterColumn = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, sections = props.sections, rest = __rest(props, ["children", "className", "sections"]);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerColumn', className), column: true, flex: { xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }, p: 1.5, ref: ref, spaceY: 4 }, styles.column, rest), children !== null && children !== void 0 ? children : sections === null || sections === void 0 ? void 0 : sections.map(function (section, index) { return react_1.default.createElement(footerSection_1.default, __assign({ key: index }, section)); })));
+});
+exports.default = FooterColumn;

package/footer/footerContent.d.ts

@@ -0,0 +1,3 @@
+/** Controls max-width of the content and centers itself horizontally. */
+export declare const FooterContent: import("../core").VuiComponent<"div", import("../box").BoxProps>;
+export default FooterContent;

package/footer/footerContent.js

@@ -0,0 +1,41 @@
+"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.FooterContent = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Controls max-width of the content and centers itself horizontally. */
+exports.FooterContent = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerContent', className), column: true, maxW: 1200, mx: "auto", ref: ref, w: "100%" }, styles.content, rest)));
+});
+exports.FooterContent.displayName = 'FooterContent';
+exports.default = exports.FooterContent;

package/footer/footerHeading.d.ts

@@ -0,0 +1,4 @@
+import { HeadingProps } from '../heading';
+/** Heading of a links section. */
+export declare const FooterHeading: import("../core").VuiComponent<"h5", HeadingProps>;
+export default FooterHeading;

package/footer/footerHeading.js

@@ -0,0 +1,41 @@
+"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.FooterHeading = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var heading_1 = __importDefault(require("../heading"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Heading of a links section. */
+exports.FooterHeading = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
+    return (react_1.default.createElement(heading_1.default, __assign({ className: (0, utils_1.cs)('vui-footerHeading', className), mb: 1, ref: ref, size: "h5" }, styles.heading, rest)));
+});
+exports.FooterHeading.displayName = 'FooterHeading';
+exports.default = exports.FooterHeading;

package/footer/footerLink.d.ts

@@ -0,0 +1,4 @@
+import { LinkProps } from '../link';
+/** Individual link item of the Footer. */
+export declare const FooterLink: import("../core").VuiComponent<"a", LinkProps>;
+export default FooterLink;

package/footer/footerLink.js

@@ -0,0 +1,41 @@
+"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.FooterLink = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var link_1 = __importDefault(require("../link"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Individual link item of the Footer. */
+exports.FooterLink = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
+    return (react_1.default.createElement(link_1.default, __assign({ className: (0, utils_1.cs)('vui-footerLink', className), colorScheme: "white", py: 0.5, ref: ref, size: "sm" }, styles.link, rest)));
+});
+exports.FooterLink.displayName = 'FooterLink';
+exports.default = exports.FooterLink;

package/footer/footerRow.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Organizes Footer content into a row of multuple columns. */
+declare const FooterRow: import("../core").VuiComponent<"div", BoxProps>;
+export default FooterRow;

package/footer/footerRow.js

@@ -0,0 +1,39 @@
+"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 box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Organizes Footer content into a row of multuple columns. */
+var FooterRow = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
+    return react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerRow', className), m: -1.5, ref: ref, wrap: true }, styles.row, rest));
+});
+exports.default = FooterRow;

package/footer/footerSection.d.ts

@@ -0,0 +1,4 @@
+import { FooterSectionProps } from './footer.types';
+/** Section includes a heading and a set of links. */
+export declare const FooterSection: import("../core").VuiComponent<"div", FooterSectionProps>;
+export default FooterSection;

package/footer/footerSection.js

@@ -0,0 +1,48 @@
+"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.FooterSection = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var footerHeading_1 = __importDefault(require("./footerHeading"));
+var footerLink_1 = __importDefault(require("./footerLink"));
+/** Section includes a heading and a set of links. */
+exports.FooterSection = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, heading = props.heading, links = props.links, rest = __rest(props, ["children", "className", "heading", "links"]);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-footerSection', className), column: true, ref: ref }, styles.section, rest),
+        (0, utils_1.isJsx)(heading) ? heading : react_1.default.createElement(footerHeading_1.default, { text: heading }), children !== null && children !== void 0 ? children : ((0, utils_1.isJsx)(links) ? (links) : (react_1.default.createElement(core_1.v.ul, null, links === null || links === void 0 ? void 0 : links.map(function (_a, index) {
+        var text = _a.text, url = _a.url;
+        return (react_1.default.createElement(core_1.v.li, { key: index },
+            react_1.default.createElement(footerLink_1.default, { href: url, text: text })));
+    }))))));
+});
+exports.FooterSection.displayName = 'FooterSection';
+exports.default = exports.FooterSection;