@veracity/vui 0.3.2 → 0.5.0

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/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

@@ -1,6 +1,7 @@
 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';
@@ -9,6 +10,7 @@ export declare const FooterBase: import("styled-components").StyledComponent<"di
 /** 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;

package/footer/footer.js

@@ -25,33 +25,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = exports.FooterBase = void 0;
 var react_1 = __importDefault(require("react"));
-var box_1 = require("../box");
 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"));
@@ -62,21 +47,18 @@ exports.FooterBase = core_1.styled.divBox(templateObject_1 || (templateObject_1
 ])));
 /** 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, rest = __rest(props, ["children", "className", "columns"]);
-    return (react_1.default.createElement(exports.FooterBase, __assign({ className: (0, utils_1.cs)('vui-footer', className), ref: ref }, rest),
-        react_1.default.createElement(box_1.Box, { column: true, maxW: 1200, mx: "auto", w: "100%" }, children !== null && children !== void 0 ? children : (columns && (react_1.default.createElement(footerRow_1.default, null, Object.entries(columns).map(function (_a) {
-            var _b = __read(_a, 2), columnName = _b[0], column = _b[1];
-            return (react_1.default.createElement(footerColumn_1.default, { key: columnName }, Object.entries(column).map(function (_a) {
-                var _b = __read(_a, 2), sectionName = _b[0], section = _b[1];
-                return (react_1.default.createElement(footerSection_1.default, __assign({ key: sectionName }, section)));
-            })));
-        })))),
-            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, null)))));
+    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;

package/footer/footer.types.d.ts

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

package/footer/footerColumn.d.ts

@@ -1,220 +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", {
-    col?: (string | number | true | import("@xstyled/system").BreakpointsProps<string | number | true, import("..").VuiTheme>) | undefined;
-    p?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    column?: boolean | undefined;
-    row?: (boolean | import("@xstyled/system").BreakpointsProps<boolean, import("..").VuiTheme>) | undefined;
-    activeBg?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    hoverBg?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    px?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    color?: import("..").ColorGetter | undefined;
-    isTruncated?: boolean | undefined;
-    overflow?: (import("csstype").Property.Overflow | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Overflow, import("..").VuiTheme>) | undefined;
-    maxLines?: number | undefined;
-    display?: (import("csstype").Property.Display | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Display, import("..").VuiTheme>) | undefined;
-    spaceAround?: string | number | undefined;
-    wordBreak?: "normal" | "break-all" | "keep-all" | "break-word" | undefined;
-    flex?: (import("csstype").Property.Flex<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Flex<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    left?: (0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    right?: (0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    center?: boolean | undefined;
-    wrap?: boolean | undefined;
-    bottom?: (0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    top?: (0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    justify?: (import("csstype").Property.JustifyContent | import("@xstyled/system").BreakpointsProps<import("csstype").Property.JustifyContent, import("..").VuiTheme>) | undefined;
-    cursor?: (import("csstype").Property.Cursor | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Cursor, import("..").VuiTheme>) | undefined;
-    direction?: (import("csstype").Property.FlexDirection | import("@xstyled/system").BreakpointsProps<import("csstype").Property.FlexDirection, import("..").VuiTheme>) | undefined;
-    fontFamily?: (((string | number) & {}) | "avenir" | import("@xstyled/system").BreakpointsProps<((string | number) & {}) | "avenir", import("..").VuiTheme>) | undefined;
-    fontSize?: ("md" | "xs" | "sm" | "lg" | ((string | number) & {}) | import("@xstyled/system").BreakpointsProps<"md" | "xs" | "sm" | "lg" | ((string | number) & {}), import("..").VuiTheme>) | undefined;
-    fontStyle?: (import("csstype").Property.FontStyle | import("@xstyled/system").BreakpointsProps<import("csstype").Property.FontStyle, import("..").VuiTheme>) | undefined;
-    fontWeight?: ("bold" | ((string | number) & {}) | "regular" | "medium" | "demi" | import("@xstyled/system").BreakpointsProps<"bold" | ((string | number) & {}) | "regular" | "medium" | "demi", import("..").VuiTheme>) | undefined;
-    letterSpacing?: (import("csstype").Property.LetterSpacing<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.LetterSpacing<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    opacity?: (import("csstype").Property.Opacity | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Opacity, import("..").VuiTheme>) | undefined;
-    order?: (import("csstype").Property.Order | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Order, import("..").VuiTheme>) | undefined;
-    pointerEvents?: (import("csstype").Property.PointerEvents | import("@xstyled/system").BreakpointsProps<import("csstype").Property.PointerEvents, import("..").VuiTheme>) | undefined;
-    radius?: import("..").BorderRadiusProp | undefined;
-    rotate?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    scale?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    textDecoration?: (("none" | import("csstype").Globals | "overline" | "underline" | "line-through") | import("@xstyled/system").BreakpointsProps<"none" | import("csstype").Globals | "overline" | "underline" | "line-through", import("..").VuiTheme>) | undefined;
-    transform?: (string | boolean | import("@xstyled/system").BreakpointsProps<string | boolean, import("..").VuiTheme>) | undefined;
-    visibility?: (import("csstype").Property.Visibility | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Visibility, import("..").VuiTheme>) | undefined;
-    align?: (import("csstype").Property.AlignItems | import("@xstyled/system").BreakpointsProps<import("csstype").Property.AlignItems, import("..").VuiTheme>) | undefined;
-    border?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    alignContent?: (import("csstype").Property.AlignContent | import("@xstyled/system").BreakpointsProps<import("csstype").Property.AlignContent, import("..").VuiTheme>) | undefined;
-    alignItems?: (import("csstype").Property.AlignItems | import("@xstyled/system").BreakpointsProps<import("csstype").Property.AlignItems, import("..").VuiTheme>) | undefined;
-    alignSelf?: (import("csstype").Property.AlignSelf | import("@xstyled/system").BreakpointsProps<import("csstype").Property.AlignSelf, import("..").VuiTheme>) | undefined;
-    appearance?: (import("csstype").Property.Appearance | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Appearance, import("..").VuiTheme>) | undefined;
-    borderBottomColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    borderBottomWidth?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    borderCollapse?: (import("csstype").Property.BorderCollapse | import("@xstyled/system").BreakpointsProps<import("csstype").Property.BorderCollapse, import("..").VuiTheme>) | undefined;
-    borderLeftColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    borderLeftWidth?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    borderRightColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    borderRightWidth?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    borderTopColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    borderTopWidth?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    boxShadow?: (import("..").ShadowGetter | import("@xstyled/system").BreakpointsProps<import("..").ShadowGetter, import("..").VuiTheme>) | undefined;
-    boxSizing?: (import("csstype").Property.BoxSizing | import("@xstyled/system").BreakpointsProps<import("csstype").Property.BoxSizing, import("..").VuiTheme>) | undefined;
-    columnGap?: (0 | (string & {}) | (number & {}) | "normal" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "normal" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset", import("..").VuiTheme>) | undefined;
-    flexBasis?: (import("csstype").Property.FlexBasis<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.FlexBasis<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    flexDirection?: (import("csstype").Property.FlexDirection | import("@xstyled/system").BreakpointsProps<import("csstype").Property.FlexDirection, import("..").VuiTheme>) | undefined;
-    flexGrow?: (import("csstype").Property.FlexGrow | import("@xstyled/system").BreakpointsProps<import("csstype").Property.FlexGrow, import("..").VuiTheme>) | undefined;
-    flexShrink?: (import("csstype").Property.FlexShrink | import("@xstyled/system").BreakpointsProps<import("csstype").Property.FlexShrink, import("..").VuiTheme>) | undefined;
-    flexWrap?: (import("csstype").Property.FlexWrap | import("@xstyled/system").BreakpointsProps<import("csstype").Property.FlexWrap, import("..").VuiTheme>) | undefined;
-    float?: (import("csstype").Property.Float | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Float, import("..").VuiTheme>) | undefined;
-    gridAutoColumns?: (import("csstype").Property.GridAutoColumns<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridAutoColumns<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    gridAutoFlow?: (import("csstype").Property.GridAutoFlow | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridAutoFlow, import("..").VuiTheme>) | undefined;
-    gridAutoRows?: (import("csstype").Property.GridAutoRows<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridAutoRows<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    gridTemplateAreas?: (import("csstype").Property.GridTemplateAreas | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridTemplateAreas, import("..").VuiTheme>) | undefined;
-    gridTemplateColumns?: (import("csstype").Property.GridTemplateColumns<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridTemplateColumns<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    gridTemplateRows?: (import("csstype").Property.GridTemplateRows<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridTemplateRows<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    justifyContent?: (import("csstype").Property.JustifyContent | import("@xstyled/system").BreakpointsProps<import("csstype").Property.JustifyContent, import("..").VuiTheme>) | undefined;
-    justifyItems?: (import("csstype").Property.JustifyItems | import("@xstyled/system").BreakpointsProps<import("csstype").Property.JustifyItems, import("..").VuiTheme>) | undefined;
-    justifySelf?: (import("csstype").Property.JustifySelf | import("@xstyled/system").BreakpointsProps<import("csstype").Property.JustifySelf, import("..").VuiTheme>) | undefined;
-    lineHeight?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    listStylePosition?: (import("csstype").Property.ListStylePosition | import("@xstyled/system").BreakpointsProps<import("csstype").Property.ListStylePosition, import("..").VuiTheme>) | undefined;
-    listStyleType?: (import("csstype").Property.ListStyleType | import("@xstyled/system").BreakpointsProps<import("csstype").Property.ListStyleType, import("..").VuiTheme>) | undefined;
-    objectFit?: (import("csstype").Property.ObjectFit | import("@xstyled/system").BreakpointsProps<import("csstype").Property.ObjectFit, import("..").VuiTheme>) | undefined;
-    outlineColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    outlineStyle?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    outlineWidth?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    overflowX?: (import("csstype").Property.OverflowX | import("@xstyled/system").BreakpointsProps<import("csstype").Property.OverflowX, import("..").VuiTheme>) | undefined;
-    overflowY?: (import("csstype").Property.OverflowY | import("@xstyled/system").BreakpointsProps<import("csstype").Property.OverflowY, import("..").VuiTheme>) | undefined;
-    position?: (import("csstype").Property.Position | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Position, import("..").VuiTheme>) | undefined;
-    resize?: (import("csstype").Property.Resize | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Resize, import("..").VuiTheme>) | undefined;
-    rowGap?: (0 | (string & {}) | (number & {}) | "normal" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "normal" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset", import("..").VuiTheme>) | undefined;
-    tableLayout?: (import("csstype").Property.TableLayout | import("@xstyled/system").BreakpointsProps<import("csstype").Property.TableLayout, import("..").VuiTheme>) | undefined;
-    textAlign?: (import("csstype").Property.TextAlign | import("@xstyled/system").BreakpointsProps<import("csstype").Property.TextAlign, import("..").VuiTheme>) | undefined;
-    textOverflow?: (import("csstype").Property.TextOverflow | import("@xstyled/system").BreakpointsProps<import("csstype").Property.TextOverflow, import("..").VuiTheme>) | undefined;
-    textShadow?: (import("..").ShadowGetter | import("@xstyled/system").BreakpointsProps<import("..").ShadowGetter, import("..").VuiTheme>) | undefined;
-    textTransform?: (import("csstype").Property.TextTransform | import("@xstyled/system").BreakpointsProps<import("csstype").Property.TextTransform, import("..").VuiTheme>) | undefined;
-    transformOrigin?: (import("csstype").Property.TransformOrigin<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.TransformOrigin<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    transitionDelay?: (number | import("@xstyled/system").BreakpointsProps<number, import("..").VuiTheme>) | undefined;
-    transitionDuration?: (((string | number) & {}) | "normal" | "instant" | "fast" | "slow" | import("@xstyled/system").BreakpointsProps<((string | number) & {}) | "normal" | "instant" | "fast" | "slow", import("..").VuiTheme>) | undefined;
-    transitionProperty?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    transitionTimingFunction?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    userSelect?: (import("csstype").Property.UserSelect | import("@xstyled/system").BreakpointsProps<import("csstype").Property.UserSelect, import("..").VuiTheme>) | undefined;
-    verticalAlign?: (import("csstype").Property.VerticalAlign<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.VerticalAlign<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    whiteSpace?: (import("csstype").Property.WhiteSpace | import("@xstyled/system").BreakpointsProps<import("csstype").Property.WhiteSpace, import("..").VuiTheme>) | undefined;
-    zIndex?: ((string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<(string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    animation?: (((string | number) & {}) | "bounce" | "fadeDown" | "fadeIn" | "fadeLeft" | "fadeOut" | "fadeRight" | "fadeUp" | "pulse" | "spin" | import("@xstyled/system").BreakpointsProps<((string | number) & {}) | "bounce" | "fadeDown" | "fadeIn" | "fadeLeft" | "fadeOut" | "fadeRight" | "fadeUp" | "pulse" | "spin", import("..").VuiTheme>) | undefined;
-    borderBottom?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    borderColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    borderLeft?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    borderRadius?: import("..").BorderRadiusProp | undefined;
-    borderRight?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    borderStyle?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    borderTop?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    borderWidth?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    gap?: (0 | (string & {}) | (number & {}) | "normal" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "normal" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset", import("..").VuiTheme>) | undefined;
-    gridArea?: (import("csstype").Property.GridArea | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridArea, import("..").VuiTheme>) | undefined;
-    gridColumn?: (import("csstype").Property.GridColumn | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridColumn, import("..").VuiTheme>) | undefined;
-    gridRow?: (import("csstype").Property.GridRow | import("@xstyled/system").BreakpointsProps<import("csstype").Property.GridRow, import("..").VuiTheme>) | undefined;
-    outline?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    overscrollBehavior?: (import("csstype").Property.OverscrollBehavior | import("@xstyled/system").BreakpointsProps<import("csstype").Property.OverscrollBehavior, import("..").VuiTheme>) | undefined;
-    transition?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverAnimation?: (((string | number) & {}) | "bounce" | "fadeDown" | "fadeIn" | "fadeLeft" | "fadeOut" | "fadeRight" | "fadeUp" | "pulse" | "spin" | import("@xstyled/system").BreakpointsProps<((string | number) & {}) | "bounce" | "fadeDown" | "fadeIn" | "fadeLeft" | "fadeOut" | "fadeRight" | "fadeUp" | "pulse" | "spin", import("..").VuiTheme>) | undefined;
-    bg?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    disabledBg?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    hoverBorder?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    disabledBorderColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    focusBorderColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    hoverBorderColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    focusWithinBorderColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    hoverBorderWidth?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverBorderStyle?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverBorderRadius?: import("..").BorderRadiusProp | undefined;
-    divideX?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    divideY?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    divideXReverse?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    divideYReverse?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    divideColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    hoverDivideColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    divideStyle?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    ring?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    focusRing?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    focusVisibleRing?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    focusWithinRing?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverRing?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    ringColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    focusRingColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    focusVisibleRingColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    focusWithinRingColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    hoverRingColor?: (import("..").ColorGetter | import("@xstyled/system").BreakpointsProps<import("..").ColorGetter, import("..").VuiTheme>) | undefined;
-    hoverOpacity?: (import("csstype").Property.Opacity | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Opacity, import("..").VuiTheme>) | undefined;
-    hoverBoxShadow?: (import("..").ShadowGetter | import("@xstyled/system").BreakpointsProps<import("..").ShadowGetter, import("..").VuiTheme>) | undefined;
-    hoverFlexBasis?: (import("csstype").Property.FlexBasis<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.FlexBasis<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    hoverFlex?: (import("csstype").Property.Flex<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Flex<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    hoverTop?: (0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    hoverRight?: (0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    hoverBottom?: (0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    hoverLeft?: (0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("@xstyled/system").BreakpointsProps<0 | (string & {}) | (number & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto", import("..").VuiTheme>) | undefined;
-    hoverVisibility?: (import("csstype").Property.Visibility | import("@xstyled/system").BreakpointsProps<import("csstype").Property.Visibility, import("..").VuiTheme>) | undefined;
-    w?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverW?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    h?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverH?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    maxW?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverMaxW?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    maxH?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverMaxH?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    minW?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverMinW?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    minH?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverMinH?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    m?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastM?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    mt?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastMt?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    mr?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastMr?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    mb?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastMb?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    ml?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastMl?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    mx?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastMx?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    my?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastMy?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastP?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    pt?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastPt?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    pr?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastPr?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    pb?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastPb?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    pl?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastPl?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastPx?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    py?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    lastPy?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    spaceX?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    spaceY?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    spaceXReverse?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    spaceYReverse?: (((string | number) & {}) | import("@xstyled/system").BreakpointsProps<(string | number) & {}, import("..").VuiTheme>) | undefined;
-    hoverTransform?: (string | boolean | import("@xstyled/system").BreakpointsProps<string | boolean, import("..").VuiTheme>) | undefined;
-    hoverTransformOrigin?: (import("csstype").Property.TransformOrigin<0 | (string & {})> | import("@xstyled/system").BreakpointsProps<import("csstype").Property.TransformOrigin<0 | (string & {})>, import("..").VuiTheme>) | undefined;
-    translateX?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    hoverTranslateX?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    translateY?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    hoverTranslateY?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    hoverRotate?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    skewX?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    hoverSkewX?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    skewY?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    hoverSkewY?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    hoverScale?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    scaleX?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    hoverScaleX?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    scaleY?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    hoverScaleY?: (string | number | import("@xstyled/system").BreakpointsProps<string | number, import("..").VuiTheme>) | undefined;
-    disabledColor?: import("..").ColorGetter | undefined;
-    hoverColor?: import("..").ColorGetter | undefined;
-    placeholderColor?: import("..").ColorGetter | undefined;
-    hoverTextDecoration?: (("none" | import("csstype").Globals | "overline" | "underline" | "line-through") | import("@xstyled/system").BreakpointsProps<"none" | import("csstype").Globals | "overline" | "underline" | "line-through", import("..").VuiTheme>) | undefined;
-    centerH?: boolean | undefined;
-    centerV?: boolean | undefined;
-    hoverShadow?: (import("..").ShadowGetter | import("@xstyled/system").BreakpointsProps<import("..").ShadowGetter, import("..").VuiTheme>) | undefined;
-    shadow?: (import("..").ShadowGetter | import("@xstyled/system").BreakpointsProps<import("..").ShadowGetter, import("..").VuiTheme>) | undefined;
-}>;
+declare const FooterColumn: import("../core").VuiComponent<"div", FooterColumnProps>;
 export default FooterColumn;

package/footer/footerColumn.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 };
 };
@@ -17,9 +28,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
+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 styles = (0, core_1.useStyleConfig)('Footer', props);
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-footerColumn", column: true, flex: { xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }, p: 1.5, ref: ref, spaceY: 4 }, styles.column, props)));
+    var children = props.children, sections = props.sections, rest = __rest(props, ["children", "sections"]);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-footerColumn", 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,28 @@
+"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 __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 context_1 = require("./context");
+/** Controls max-width of the content and centers itself horizontally. */
+exports.FooterContent = (0, core_1.vui)(function (props, ref) {
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-footerContent", column: true, maxW: 1200, mx: "auto", ref: ref, w: "100%" }, styles.content, props)));
+});
+exports.FooterContent.displayName = 'FooterContent';
+exports.default = exports.FooterContent;

package/footer/footerHeading.js

@@ -18,9 +18,10 @@ exports.FooterHeading = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var heading_1 = __importDefault(require("../heading"));
+var context_1 = require("./context");
 /** Heading of a links section. */
 exports.FooterHeading = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Footer', props);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
     return react_1.default.createElement(heading_1.default, __assign({ className: "vui-footerHeading", mb: 1, ref: ref, size: "h5" }, styles.heading, props));
 });
 exports.FooterHeading.displayName = 'FooterHeading';

package/footer/footerLink.js

@@ -18,9 +18,10 @@ exports.FooterLink = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var link_1 = __importDefault(require("../link"));
+var context_1 = require("./context");
 /** Individual link item of the Footer. */
 exports.FooterLink = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Footer', props);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
     return (react_1.default.createElement(link_1.default, __assign({ className: "vui-footerLink", colorScheme: "white", py: 0.5, ref: ref, size: "sm" }, styles.link, props)));
 });
 exports.FooterLink.displayName = 'FooterLink';

package/footer/footerRow.js

@@ -17,9 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
+var context_1 = require("./context");
 /** Organizes Footer content into a row of multuple columns. */
 var FooterRow = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Footer', props);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
     return react_1.default.createElement(box_1.default, __assign({ className: "vui-footerRow", m: -1.5, ref: ref, wrap: true }, styles.row, props));
 });
 exports.default = FooterRow;

package/footer/footerSection.js

@@ -30,18 +30,19 @@ 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, heading = props.heading, links = props.links, rest = __rest(props, ["children", "heading", "links"]);
-    var styles = (0, core_1.useStyleConfig)('Footer', props);
+    var styles = (0, core_1.useStyleConfig)('Footer', (0, context_1.useFooterContext)());
     return (react_1.default.createElement(box_1.default, __assign({ className: "vui-footerSection", column: true, ref: ref }, styles.section, rest),
-        (0, utils_1.isReactText)(heading) ? react_1.default.createElement(footerHeading_1.default, { text: heading }) : heading, children !== null && children !== void 0 ? children : ((0, utils_1.isArray)(links) ? (react_1.default.createElement(core_1.v.ul, null, links.map(function (_a, index) {
+        (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 })));
-    }))) : (links))));
+    }))))));
 });
 exports.FooterSection.displayName = 'FooterSection';
 exports.default = exports.FooterSection;