@veracity/vui 0.3.2 → 0.5.0

package/icons/baseIcons/fas/fasCalendarAlt.js

@@ -2,6 +2,6 @@
 /* eslint-disable */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    details: [32, 32, [], '', 'M9 0C8.44772 0 8 0.447715 8 1V4H5C3.34315 4 2 5.34315 2 7V10H30V7C30 5.34315 28.6569 4 27 4H24V1C24 0.447715 23.5523 0 23 0H21C20.4477 0 20 0.447715 20 1V4H12V1C12 0.447715 11.5523 0 11 0H9Z M30 12H2V29C2 30.6569 3.34315 32 5 32H27C28.6569 32 30 30.6569 30 29V12ZM22 17C22 16.4477 22.4477 16 23 16H25C25.5523 16 26 16.4477 26 17V19C26 19.5523 25.5523 20 25 20H23C22.4477 20 22 19.5523 22 19V17ZM23 24C22.4477 24 22 24.4477 22 25V27C22 27.5523 22.4477 28 23 28H25C25.5523 28 26 27.5523 26 27V25C26 24.4477 25.5523 24 25 24H23ZM14 17C14 16.4477 14.4477 16 15 16H17C17.5523 16 18 16.4477 18 17V19C18 19.5523 17.5523 20 17 20H15C14.4477 20 14 19.5523 14 19V17ZM7 16C6.44772 16 6 16.4477 6 17V19C6 19.5523 6.44772 20 7 20H9C9.55228 20 10 19.5523 10 19V17C10 16.4477 9.55228 16 9 16H7ZM14 25C14 24.4477 14.4477 24 15 24H17C17.5523 24 18 24.4477 18 25V27C18 27.5523 17.5523 28 17 28H15C14.4477 28 14 27.5523 14 27V25ZM7 24C6.44772 24 6 24.4477 6 25V27C6 27.5523 6.44772 28 7 28H9C9.55228 28 10 27.5523 10 27V25C10 24.4477 9.55228 24 9 24H7Z'],
+    details: [448, 512, [], '', 'M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'],
     name: 'fasCalendarAlt'
 };

package/index.d.ts

@@ -5,8 +5,10 @@ export * from './buttonGroup';
 export * from './card';
 export * from './checkbox';
 export * from './core';
+export * from './dialog';
 export * from './divider';
 export * from './footer';
+export * from './grid';
 export * from './header';
 export * from './heading';
 export * from './icon';
@@ -16,10 +18,12 @@ export * from './input';
 export * from './link';
 export * from './list';
 export * from './menu';
+export * from './modal';
 export * from './notification';
 export * from './p';
 export * from './panel';
 export * from './popover';
+export * from './portal';
 export * from './radio';
 export * from './skeleton';
 export * from './spinner';

package/index.js

@@ -17,8 +17,10 @@ __exportStar(require("./buttonGroup"), exports);
 __exportStar(require("./card"), exports);
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./core"), exports);
+__exportStar(require("./dialog"), exports);
 __exportStar(require("./divider"), exports);
 __exportStar(require("./footer"), exports);
+__exportStar(require("./grid"), exports);
 __exportStar(require("./header"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./icon"), exports);
@@ -28,10 +30,12 @@ __exportStar(require("./input"), exports);
 __exportStar(require("./link"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./menu"), exports);
+__exportStar(require("./modal"), exports);
 __exportStar(require("./notification"), exports);
 __exportStar(require("./p"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
+__exportStar(require("./portal"), exports);
 __exportStar(require("./radio"), exports);
 __exportStar(require("./skeleton"), exports);
 __exportStar(require("./spinner"), exports);

package/input/consts.js

@@ -13,8 +13,8 @@ exports.inputStateMapping = {
         colorScheme: 'grey',
         iconProps: {
             animation: 'vui-spin 0.6s linear infinite',
-            fill: ['blue.20', 'blue.50'],
-            icon: 'fadSpinnerThird'
+            name: 'fadSpinnerThird',
+            pathFill: ['blue.20', 'blue.50']
         }
     },
     success: {

package/input/input.js

@@ -74,7 +74,7 @@ var context_1 = require("./context");
 var helpers_1 = require("./helpers");
 var inputIcon_1 = __importDefault(require("./inputIcon"));
 var inputInput_1 = __importDefault(require("./inputInput"));
-exports.InputBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"
+exports.InputBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-radius: md;\n\tborder-width: 1px;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\toutline: none;\n\tposition: relative;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"
     /**
      * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
      * Forwards many relevant props to the inner input. Handles different states, like loading or error.

package/input/input.types.d.ts

@@ -2,7 +2,7 @@
 import { IconProp, IconProps } from '../icon';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement, ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
 export declare type InputInputProps = PropsOf<'input', SystemProps>;
 export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
     /** Passed to the inner input. */
@@ -16,9 +16,9 @@ export declare type InputProps = SystemProps & ThemingProps<'Input'> & {
     /** Passed to the inner input. */
     disabled?: boolean;
     /** Socket displaying an icon on the left. */
-    iconLeft?: IconProp | AnyElement;
+    iconLeft?: IconProp | JSX.Element;
     /** Socket displaying an icon on the right. */
-    iconRight?: IconProp | AnyElement;
+    iconRight?: IconProp | JSX.Element;
     /** Socket rendering a custom input element. */
     input?: React.ReactNode;
     /** Props object passed to the inner input. */

package/link/link.types.d.ts

@@ -1,7 +1,7 @@
+/// <reference types="react" />
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
 export declare type LinkProps = SystemProps & ThemingProps<'Link'> & {
     /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'white';
@@ -10,15 +10,15 @@ export declare type LinkProps = SystemProps & ThemingProps<'Link'> & {
     /** Alias for hoverTextDecoration prop. @deprecated */
     hoverDecoration?: TypographyProps['textDecoration'];
     /** Socket displaying an icon on the left. */
-    iconLeft?: IconProp | AnyElement;
+    iconLeft?: IconProp | JSX.Element;
     /** Socket displaying an icon on the right. */
-    iconRight?: IconProp | AnyElement;
+    iconRight?: IconProp | JSX.Element;
     /** Opens the link in new tab with appropriate attributes. */
     isExternal?: boolean;
     /** Displays permanent underline. */
     isUnderlined?: boolean;
     /** Socket displaying text within the Link. */
-    text?: number | string | AnyElement;
+    text?: number | string | JSX.Element;
     /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
 };

package/link/linkText.js

@@ -22,7 +22,7 @@ var context_1 = require("./context");
 /** Displays text of the Link. */
 exports.LinkText = (0, core_1.vui)(function (props, ref) {
     var styles = (0, core_1.useStyleConfig)('Link', __assign(__assign({}, (0, context_1.useLink)()), props));
-    return react_1.default.createElement(t_1.default, __assign({ className: "vui-linkText", fontSize: "inherit", ref: ref }, styles.text, props));
+    return (react_1.default.createElement(t_1.default, __assign({ className: "vui-linkText", fontSize: "inherit", ref: ref, transitionDuration: "unset" }, styles.text, props)));
 });
 exports.LinkText.displayName = 'LinkText';
 exports.default = exports.LinkText;

package/list/listHeading.js

@@ -22,7 +22,7 @@ var context_1 = require("./context");
 /** Displays a heading within the List. */
 exports.ListHeading = (0, core_1.vui)(function (props, ref) {
     var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
-    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", display: "inline-block", px: 2, py: 1, ref: ref, weight: "demi" }, styles.heading, props)));
+    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", color: "grey.60", display: "inline-block", px: 2, py: 1, ref: ref, size: "sm", textTransform: "uppercase", weight: "medium" }, styles.heading, props)));
 });
 exports.ListHeading.displayName = 'ListHeading';
 exports.default = exports.ListHeading;

package/list/listItem.js

@@ -58,7 +58,7 @@ var listIcon_1 = __importDefault(require("./listIcon"));
 var listText_1 = __importDefault(require("./listText"));
 /** Used as optional content wrapper when list item should be a link. */
 var ListItemLink = (0, core_1.vui)(function (props, ref) { return (react_1.default.createElement(link_1.default, __assign({ borderRadius: "none", h: "100%", px: 2, ref: ref, variant: "plain", w: "100%" }, props))); });
-exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"
+exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"
     /**
      * Displays a list item with text and optional icons. Can be shown as interactive or selected.
      * Optionally wraps the content with an <a> element when rendering a link.
@@ -71,7 +71,7 @@ exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1
 exports.ListItem = (0, core_1.vui)(function (props, ref) {
     var mergedProps = __assign(__assign({}, (0, context_1.useList)()), props);
     var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, isInteractiveProp = mergedProps.isInteractive, isSelected = mergedProps.isSelected, isTruncated = mergedProps.isTruncated, itemLeft = mergedProps.itemLeft, itemRight = mergedProps.itemRight, linkProps = mergedProps.linkProps, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconLeft", "iconRight", "isInteractive", "isSelected", "isTruncated", "itemLeft", "itemRight", "linkProps", "onClick", "text"]);
-    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', (0, context_1.useList)());
     var _b = styles.item, activeBg = _b.activeBg, hoverBg = _b.hoverBg, selectedBg = _b.selectedBg, itemStyles = __rest(_b, ["activeBg", "hoverBg", "selectedBg"]);
     var isLinkItem = linkProps !== undefined;
     var isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined;

package/list/theme.d.ts

@@ -58,8 +58,7 @@ declare const _default: {
             };
             item: {
                 display: string;
-                h: undefined;
-                lineHeight: number;
+                h: string;
             };
         };
         unordered: {
@@ -70,8 +69,7 @@ declare const _default: {
             };
             item: {
                 display: string;
-                h: undefined;
-                lineHeight: number;
+                h: string;
             };
         };
     };

package/list/theme.js

@@ -65,8 +65,7 @@ var variants = {
         },
         item: {
             display: 'list-item',
-            h: undefined,
-            lineHeight: 1.5
+            h: ''
         }
     },
     unordered: {
@@ -77,8 +76,7 @@ var variants = {
         },
         item: {
             display: 'list-item',
-            h: undefined,
-            lineHeight: 1.5
+            h: ''
         }
     }
 };

package/menu/menuItem.js

@@ -10,25 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -40,12 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = void 0;
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var list_1 = require("../list");
 var popover_1 = require("../popover");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays a list item and by default closes the menu on click. */
 exports.MenuItem = (0, core_1.vui)(function (props, ref) {
@@ -54,10 +39,10 @@ exports.MenuItem = (0, core_1.vui)(function (props, ref) {
     var instance = ((_a = (0, popover_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}).instance;
     var _c = (_b = (0, context_1.useMenuContext)()) !== null && _b !== void 0 ? _b : {}, closeOnSelect = _c.closeOnSelect, menuProps = __rest(_c, ["closeOnSelect"]);
     var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
-    var onClick = (0, react_1.useCallback)(function (e) {
+    var onClick = (0, utils_1.useCallbackRef)(function (e) {
         onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
         closeOnSelect && (instance === null || instance === void 0 ? void 0 : instance.hide());
-    }, [closeOnSelect, instance]);
+    });
     return react_1.default.createElement(list_1.ListItem, __assign({ className: "vui-menuItem", isInteractive: true, onClick: onClick, ref: ref }, styles.item, rest));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/menu/menuList.js

@@ -36,7 +36,7 @@ exports.MenuList = (0, core_1.vui)(function (props, ref) {
     var contentProps = props.contentProps, contentRef = props.contentRef, rest = __rest(props, ["contentProps", "contentRef"]);
     var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, (0, context_1.useMenuContext)()), props));
     return (react_1.default.createElement(popover_1.PopoverContent, __assign({ ref: contentRef }, contentProps),
-        react_1.default.createElement(list_1.default, __assign({ className: "vui-menuList", py: 1, ref: ref }, styles.list, rest))));
+        react_1.default.createElement(list_1.default, __assign({ className: "vui-menuList", py: 1, ref: ref, w: "100%" }, styles.list, rest))));
 });
 exports.MenuList.displayName = 'MenuList';
 exports.MenuList.Divider = list_1.default.Divider;

package/modal/ModalBackdrop.d.ts

@@ -0,0 +1,4 @@
+export declare const ModalBackdropBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a dark overlay underneath modal content, but on top of page content. */
+export declare const ModalBackdrop: import("../core").VuiComponent<"div", import("..").SystemProps>;
+export default ModalBackdrop;

package/modal/ModalBackdrop.js

@@ -0,0 +1,37 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalBackdrop = exports.ModalBackdropBase = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var theme_1 = require("../theme");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+exports.ModalBackdropBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tanimation: vui-fadeIn 0.3s ease;\n\tbackground-color: ", ";\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: modal;\n"], ["\n\tanimation: vui-fadeIn 0.3s ease;\n\tbackground-color: ", ";\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: modal;\n"
+    /** Displays a dark overlay underneath modal content, but on top of page content. */
+])), (0, utils_1.hexToRGBA)(theme_1.colors.prussian[80], 0.6));
+/** Displays a dark overlay underneath modal content, but on top of page content. */
+exports.ModalBackdrop = (0, core_1.vui)(function (props, ref) {
+    var styles = (0, core_1.useStyleConfig)('Modal', (0, context_1.useModalContext)());
+    return react_1.default.createElement(exports.ModalBackdropBase, __assign({ className: "vui-modalBackdrop", ref: ref }, styles.backdrop, props));
+});
+exports.ModalBackdrop.displayName = 'ModalBackdrop';
+exports.default = exports.ModalBackdrop;
+var templateObject_1;

package/modal/ModalContent.d.ts

@@ -0,0 +1,4 @@
+export declare const ModalContentBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Wraps the content provided to the Modal component. */
+export declare const ModalContent: import("../core").VuiComponent<"div", import("..").SystemProps>;
+export default ModalContent;

package/modal/ModalContent.js

@@ -0,0 +1,38 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = exports.ModalContentBase = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+exports.ModalContentBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: modal;\n"], ["\n\tdisplay: flex;\n\tinset: 0px;\n\tposition: fixed;\n\tz-index: modal;\n"
+    /** Wraps the content provided to the Modal component. */
+])));
+/** Wraps the content provided to the Modal component. */
+exports.ModalContent = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var onBackdropClick = ((_a = (0, context_1.useModalContext)()) !== null && _a !== void 0 ? _a : {}).onBackdropClick;
+    var styles = (0, core_1.useStyleConfig)('Modal', (0, context_1.useModalContext)());
+    return (react_1.default.createElement(exports.ModalContentBase, __assign({ className: "vui-modalContent", ref: ref, tabIndex: -1 }, styles.content, props, { onClick: (0, utils_1.callAll)(props.onClick, onBackdropClick) })));
+});
+exports.ModalContent.displayName = 'ModalContent';
+exports.default = exports.ModalContent;
+var templateObject_1;

package/modal/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ModalContext } from './modal.types';
+declare const ModalProvider: import("react").Provider<ModalContext>, useModalContext: () => ModalContext;
+export { ModalProvider, useModalContext };

package/modal/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.useModalContext = exports.ModalProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), ModalProvider = _a[0], useModalContext = _a[1];
+exports.ModalProvider = ModalProvider;
+exports.useModalContext = useModalContext;

package/modal/focusLock.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { FocusLockProps } from './focusLock.types';
+/**
+ * Traps the focus within the provided content. That is, tabbing with keyboard will
+ * only cycle through the children and won't leave the boundary of the FocusLock.
+ * This behavior enhances accessibility of the Modal component.
+ */
+export declare const FocusLock: FC<FocusLockProps>;
+export default FocusLock;

package/modal/focusLock.js

@@ -0,0 +1,47 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusLock = void 0;
+var react_1 = __importStar(require("react"));
+var react_focus_lock_1 = __importDefault(require("react-focus-lock"));
+/**
+ * Traps the focus within the provided content. That is, tabbing with keyboard will
+ * only cycle through the children and won't leave the boundary of the FocusLock.
+ * This behavior enhances accessibility of the Modal component.
+ */
+var FocusLock = function (props) {
+    var autoFocus = props.autoFocus, children = props.children, crossFrame = props.crossFrame, finalFocusRef = props.finalFocusRef, initialFocusRef = props.initialFocusRef, isDisabled = props.isDisabled, persistentFocus = props.persistentFocus, returnFocusProp = props.returnFocus;
+    var onActivation = react_1.default.useCallback(function () {
+        var _a;
+        (_a = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [initialFocusRef]);
+    var onDeactivation = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = finalFocusRef === null || finalFocusRef === void 0 ? void 0 : finalFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [finalFocusRef]);
+    var returnFocus = returnFocusProp && !finalFocusRef;
+    return (react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, crossFrame: crossFrame, disabled: isDisabled, onActivation: onActivation, onDeactivation: onDeactivation, persistentFocus: persistentFocus, returnFocus: returnFocus }, children));
+};
+exports.FocusLock = FocusLock;
+exports.default = exports.FocusLock;

package/modal/focusLock.types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare type FocusableElement = {
+    focus(options?: FocusOptions): void;
+};
+export declare type FocusLockProps = {
+    /**
+     * The first focuable element within the 'children' will be auto-focused once 'FocusLock' mounts.
+     * @default true
+     */
+    autoFocus?: boolean;
+    /**
+     * Enables aggressive focus capturing within iframes.
+     * - 'true' keeps focus in the lock, no matter where the lock is active.
+     * - 'false' allows focus to move outside of iframe, if enabled inside iframe.
+     * @default true
+     */
+    crossFrame?: boolean;
+    /** 'ref' of the element to return focus to when FocusLock unmounts. */
+    finalFocusRef?: React.RefObject<FocusableElement>;
+    /** 'ref' of the element to receive focus initially when FocusLock mounts. */
+    initialFocusRef?: React.RefObject<FocusableElement>;
+    /** Disables focus trapping. */
+    isDisabled?: boolean;
+    /** Disables text selections inside, and outside focus lock. */
+    persistentFocus?: boolean;
+    /** Focus will be returned to the element that triggered the FocusLock once it unmounts. */
+    returnFocus?: boolean;
+};

package/modal/focusLock.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/modal/index.d.ts

@@ -0,0 +1,9 @@
+export * from './context';
+export * from './focusLock';
+export * from './focusLock.types';
+export * from './modal';
+export { default as Modal } from './modal';
+export * from './modal.types';
+export * from './modalBackdrop';
+export * from './modalContent';
+export * from './modalManager';

package/modal/index.js

@@ -0,0 +1,26 @@
+"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.Modal = void 0;
+__exportStar(require("./context"), exports);
+__exportStar(require("./focusLock"), exports);
+__exportStar(require("./focusLock.types"), exports);
+__exportStar(require("./modal"), exports);
+var modal_1 = require("./modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(modal_1).default; } });
+__exportStar(require("./modal.types"), exports);
+__exportStar(require("./modalBackdrop"), exports);
+__exportStar(require("./modalContent"), exports);
+__exportStar(require("./modalManager"), exports);

package/modal/modal.d.ts

@@ -0,0 +1,15 @@
+import { VuiComponent } from '../core';
+import { ModalProps } from './modal.types';
+import ModalBackdrop from './ModalBackdrop';
+import ModalContent from './ModalContent';
+/**
+ * Displays provided content on top of a dark backdrop element with fixed position.
+ * By default uses Portal for content and closes when clicking backdrop or pressing 'Escape'.
+ * Uses focus and scroll lock to achieve proper accessibility.
+ * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
+ */
+export declare const Modal: VuiComponent<"div", ModalProps> & {
+    Backdrop: typeof ModalBackdrop;
+    Content: typeof ModalContent;
+};
+export default Modal;