@veracity/vui 3.1.2 → 4.0.0-floatinguitake3.2154362

package/dist/menu/menuList.js

@@ -10,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/menu/menuList.tsx
 /** Displays a list of menu items in a popover content element. */
 const MenuList = vui((props, ref) => {
-	const { className, contentProps, contentRef, maxH, slotTop, slotBottom,...rest } = props;
+	const { className, contentProps, contentRef, maxH, slotTop, slotBottom, ...rest } = props;
 	const styles = useStyleConfig("Menu", useMenuContext());
 	return /* @__PURE__ */ jsx(popoverContent_default, {
 		borderRadius: 0,
@@ -45,5 +45,5 @@ var menuList_default = MenuList;
 
 //#endregion
 export { menuList_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=menuList.js.map

package/dist/menu/menuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuList.js","names":["PopoverContent","List"],"sources":["../../src/menu/menuList.tsx"],"sourcesContent":["import { Box } from '../box'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport List from '../list'\nimport { PopoverContent } from '../popover'\nimport { cs } from '../utils'\nimport { useMenuContext } from './context'\nimport type { MenuListProps } from './menu.types'\n\n/** Displays a list of menu items in a popover content element. */\nexport const MenuList = vui<'ul', MenuListProps>((props, ref) => {\n  const { className, contentProps, contentRef, maxH, slotTop, slotBottom, ...rest } = props\n\n  const styles = useStyleConfig('Menu', useMenuContext())\n\n  return (\n    <PopoverContent borderRadius={0} ref={contentRef} {...contentProps}>\n      <Box flexDirection=\"column\">\n        {slotTop}\n        <List\n          className={cs('vui-menuList', className)}\n          isInteractive\n          py={1}\n          ref={ref}\n          w=\"100%\"\n          {...styles.list}\n          {...rest}\n          maxH={maxH}\n        />\n        {slotBottom}\n      </Box>\n    </PopoverContent>\n  )\n}) as VuiComponent<'ul', MenuListProps> & {\n  Divider: typeof List.Divider\n  Heading: typeof List.Heading\n  Icon: typeof List.Icon\n  Item: typeof List.Item\n  Text: typeof List.Text\n}\n\nMenuList.Divider = List.Divider\nMenuList.Heading = List.Heading\nMenuList.Icon = List.Icon\nMenuList.Item = List.Item\nMenuList.Text = List.Text\n\nMenuList.displayName = 'MenuList'\n\nexport default MenuList\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,WAAW,KAA0B,OAAO,QAAQ;CAC/D,MAAM,EAAE,WAAW,cAAc,YAAY,MAAM,SAAS,WAAY,GAAG,SAAS;CAEpF,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAACA;EAAe,cAAc;EAAG,KAAK;EAAY,GAAI;YACpD,qBAAC;GAAI,eAAc;;IAChB;IACD,oBAACC;KACC,WAAW,GAAG,gBAAgB,UAAU;KACxC;KACA,IAAI;KACC;KACL,GAAE;KACF,GAAI,OAAO;KACX,GAAI;KACE;MACN;IACD;;IACG;GACS;EAEnB;AAQF,SAAS,UAAUA,aAAK;AACxB,SAAS,UAAUA,aAAK;AACxB,SAAS,OAAOA,aAAK;AACrB,SAAS,OAAOA,aAAK;AACrB,SAAS,OAAOA,aAAK;AAErB,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"menuList.js","names":["PopoverContent","List"],"sources":["../../src/menu/menuList.tsx"],"sourcesContent":["import { Box } from '../box'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport List from '../list'\nimport { PopoverContent } from '../popover'\nimport { cs } from '../utils'\nimport { useMenuContext } from './context'\nimport type { MenuListProps } from './menu.types'\n\n/** Displays a list of menu items in a popover content element. */\nexport const MenuList = vui<'ul', MenuListProps>((props, ref) => {\n  const { className, contentProps, contentRef, maxH, slotTop, slotBottom, ...rest } = props\n\n  const styles = useStyleConfig('Menu', useMenuContext())\n\n  return (\n    <PopoverContent borderRadius={0} ref={contentRef} {...contentProps}>\n      <Box flexDirection=\"column\">\n        {slotTop}\n        <List\n          className={cs('vui-menuList', className)}\n          isInteractive\n          py={1}\n          ref={ref}\n          w=\"100%\"\n          {...styles.list}\n          {...rest}\n          maxH={maxH}\n        />\n        {slotBottom}\n      </Box>\n    </PopoverContent>\n  )\n}) as VuiComponent<'ul', MenuListProps> & {\n  Divider: typeof List.Divider\n  Heading: typeof List.Heading\n  Icon: typeof List.Icon\n  Item: typeof List.Item\n  Text: typeof List.Text\n}\n\nMenuList.Divider = List.Divider\nMenuList.Heading = List.Heading\nMenuList.Icon = List.Icon\nMenuList.Item = List.Item\nMenuList.Text = List.Text\n\nMenuList.displayName = 'MenuList'\n\nexport default MenuList\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,WAAW,KAA0B,OAAO,QAAQ;CAC/D,MAAM,EAAE,WAAW,cAAc,YAAY,MAAM,SAAS,YAAY,GAAG,SAAS;CAEpF,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAACA;EAAe,cAAc;EAAG,KAAK;EAAY,GAAI;YACpD,qBAAC;GAAI,eAAc;;IAChB;IACD,oBAACC;KACC,WAAW,GAAG,gBAAgB,UAAU;KACxC;KACA,IAAI;KACC;KACL,GAAE;KACF,GAAI,OAAO;KACX,GAAI;KACE;MACN;IACD;;IACG;GACS;EAEnB;AAQF,SAAS,UAAUA,aAAK;AACxB,SAAS,UAAUA,aAAK;AACxB,SAAS,OAAOA,aAAK;AACrB,SAAS,OAAOA,aAAK;AACrB,SAAS,OAAOA,aAAK;AAErB,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/menu/theme.js

@@ -1,5 +1,8 @@
 //#region src/menu/theme.ts
-const baseStyle = {};
+const baseStyle = {
+	fontWeight: 400,
+	lineHeight: "125%"
+};
 const defaultProps = { size: "md" };
 const parts = [
 	"button",
@@ -31,5 +34,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/menu/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/menu/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['button', 'item', 'list']\n\nconst sizes = {\n  sm: {\n    button: {\n      size: 'sm',\n    },\n    list: {\n      size: 'sm',\n    },\n  },\n  md: {\n    button: {\n      size: 'md',\n    },\n    list: {\n      size: 'md',\n    },\n  },\n  lg: {\n    button: {\n      size: 'lg',\n    },\n    list: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe,EACnB,MAAM,MACP;AAED,MAAM,QAAQ;CAAC;CAAU;CAAQ;CAAO;AAExC,MAAM,QAAQ;CACZ,IAAI;EACF,QAAQ,EACN,MAAM,MACP;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACD,IAAI;EACF,QAAQ,EACN,MAAM,MACP;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACD,IAAI;EACF,QAAQ,EACN,MAAM,MACP;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACF;AAED,MAAM,WAAW,EAAE;AAEnB,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/menu/theme.ts"],"sourcesContent":["const baseStyle = {\n  fontWeight: 400,\n  lineHeight: '125%',\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['button', 'item', 'list']\n\nconst sizes = {\n  sm: {\n    button: {\n      size: 'sm',\n    },\n    list: {\n      size: 'sm',\n    },\n  },\n  md: {\n    button: {\n      size: 'md',\n    },\n    list: {\n      size: 'md',\n    },\n  },\n  lg: {\n    button: {\n      size: 'lg',\n    },\n    list: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY;CAChB,YAAY;CACZ,YAAY;CACb;AAED,MAAM,eAAe,EACnB,MAAM,MACP;AAED,MAAM,QAAQ;CAAC;CAAU;CAAQ;CAAO;AAExC,MAAM,QAAQ;CACZ,IAAI;EACF,QAAQ,EACN,MAAM,MACP;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACD,IAAI;EACF,QAAQ,EACN,MAAM,MACP;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACD,IAAI;EACF,QAAQ,EACN,MAAM,MACP;EACD,MAAM,EACJ,MAAM,MACP;EACF;CACF;AAED,MAAM,WAAW,EAAE;AAEnB,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/message/consts.js

@@ -23,5 +23,5 @@ const avatarStyles = {
 
 //#endregion
 export { avatarStyles, iconDictionary, messageColors, spacingDictionary };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/message/index.d.ts

@@ -1,2 +1,2 @@
 import { MessageProps } from "./message.types.js";
-import { Message, MessageBase } from "./message.js";
+import { Message, MessageBase } from "./message.js";

package/dist/message/message.d.ts

@@ -2,12 +2,13 @@ import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { MessageProps } from "./message.types.js";
 import "../index.js";
-import * as styled_components394 from "styled-components";
+import * as styled_components3 from "styled-components";
 
 //#region src/message/message.d.ts
-declare const MessageBase: styled_components394.StyledComponent<"div", styled_components394.DefaultTheme, SystemProps, never>;
+declare const MessageBase: styled_components3.StyledComponent<"div", styled_components3.DefaultTheme, SystemProps, never>;
 /** Displays a simple message text. */
 declare const Message: VuiComponent<"span", MessageProps>;
 //#endregion
 export { Message, MessageBase };
+
 //# sourceMappingURL=message.d.ts.map

package/dist/message/message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","names":[],"sources":["../../src/message/message.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAQa,aAAW,oBAAA,CAAA,uBAEvB,oBAAA,CAFuB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAKX,SAAO,qBAAA"}
+{"version":3,"file":"message.d.ts","names":[],"sources":["../../src/message/message.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAQa,aAAW,kBAAA,CAAA,uBAEvB,kBAAA,CAFuB,YAAA,EAAA,WAAA;;cAKX,SAAO,qBAAA"}

package/dist/message/message.js

@@ -14,7 +14,7 @@ const MessageBase = styled.divBox`
 `;
 /** Displays a simple message text. */
 const Message = vui((props, ref) => {
-	const { avatar, children, className, text, size = "md", variant = "info",...rest } = props;
+	const { avatar, children, className, text, size = "md", variant = "info", ...rest } = props;
 	const styles = useStyleConfig("Message", props);
 	return /* @__PURE__ */ jsx(MessageBase, {
 		className: cs("vui-message", className),
@@ -41,5 +41,5 @@ var message_default = Message;
 
 //#endregion
 export { Message, MessageBase, message_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=message.js.map

package/dist/message/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","names":[],"sources":["../../src/message/message.tsx"],"sourcesContent":["import { Avatar } from '../avatar'\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Icon } from '../icon'\nimport { cs } from '../utils'\nimport { avatarStyles, iconDictionary, spacingDictionary } from './consts'\nimport type { MessageProps } from './message.types'\n\nexport const MessageBase = styled.divBox`\n  transition-duration: fast;\n`\n\n/** Displays a simple message text. */\nexport const Message = vui<'span', MessageProps>((props, ref) => {\n  const { avatar, children, className, text, size = 'md', variant = 'info', ...rest } = props\n  const styles = useStyleConfig('Message', props)\n\n  return (\n    <MessageBase className={cs('vui-message', className)} ref={ref} {...styles} {...rest}>\n      <>\n        {avatar ? (\n          <Avatar mr=\"16px\" {...avatar} />\n        ) : (\n          <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.iconSize} />\n        )}\n        <Box size={styles.fontSize} w=\"100%\" {...(avatar ? avatarStyles : undefined)}>\n          {children ?? text}\n        </Box>\n      </>\n    </MessageBase>\n  )\n})\n\nMessage.displayName = 'Message'\n\nexport default Message\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,cAAc,OAAO,MAAM;;;;AAKxC,MAAa,UAAU,KAA2B,OAAO,QAAQ;CAC/D,MAAM,EAAE,QAAQ,UAAU,WAAW,MAAM,OAAO,MAAM,UAAU,OAAQ,GAAG,SAAS;CACtF,MAAM,SAAS,eAAe,WAAW,MAAM;AAE/C,QACE,oBAAC;EAAY,WAAW,GAAG,eAAe,UAAU;EAAO;EAAK,GAAI;EAAQ,GAAI;YAC9E,4CACG,SACC,oBAAC;GAAO,IAAG;GAAO,GAAI;IAAU,GAEhC,oBAAC;GAAK,IAAI,GAAG,kBAAkB,MAAM;GAAK,MAAM,eAAe;GAAU,MAAM,OAAO;IAAY,EAEpG,oBAAC;GAAI,MAAM,OAAO;GAAU,GAAE;GAAO,GAAK,SAAS,eAAe;aAC/D,YAAY;IACT,IACL;GACS;EAEhB;AAEF,QAAQ,cAAc;AAEtB,sBAAe"}
+{"version":3,"file":"message.js","names":[],"sources":["../../src/message/message.tsx"],"sourcesContent":["import { Avatar } from '../avatar'\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Icon } from '../icon'\nimport { cs } from '../utils'\nimport { avatarStyles, iconDictionary, spacingDictionary } from './consts'\nimport type { MessageProps } from './message.types'\n\nexport const MessageBase = styled.divBox`\n  transition-duration: fast;\n`\n\n/** Displays a simple message text. */\nexport const Message = vui<'span', MessageProps>((props, ref) => {\n  const { avatar, children, className, text, size = 'md', variant = 'info', ...rest } = props\n  const styles = useStyleConfig('Message', props)\n\n  return (\n    <MessageBase className={cs('vui-message', className)} ref={ref} {...styles} {...rest}>\n      <>\n        {avatar ? (\n          <Avatar mr=\"16px\" {...avatar} />\n        ) : (\n          <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.iconSize} />\n        )}\n        <Box size={styles.fontSize} w=\"100%\" {...(avatar ? avatarStyles : undefined)}>\n          {children ?? text}\n        </Box>\n      </>\n    </MessageBase>\n  )\n})\n\nMessage.displayName = 'Message'\n\nexport default Message\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,cAAc,OAAO,MAAM;;;;AAKxC,MAAa,UAAU,KAA2B,OAAO,QAAQ;CAC/D,MAAM,EAAE,QAAQ,UAAU,WAAW,MAAM,OAAO,MAAM,UAAU,QAAQ,GAAG,SAAS;CACtF,MAAM,SAAS,eAAe,WAAW,MAAM;AAE/C,QACE,oBAAC;EAAY,WAAW,GAAG,eAAe,UAAU;EAAO;EAAK,GAAI;EAAQ,GAAI;YAC9E,4CACG,SACC,oBAAC;GAAO,IAAG;GAAO,GAAI;IAAU,GAEhC,oBAAC;GAAK,IAAI,GAAG,kBAAkB,MAAM;GAAK,MAAM,eAAe;GAAU,MAAM,OAAO;IAAY,EAEpG,oBAAC;GAAI,MAAM,OAAO;GAAU,GAAE;GAAO,GAAK,SAAS,eAAe;aAC/D,YAAY;IACT,IACL;GACS;EAEhB;AAEF,QAAQ,cAAc;AAEtB,sBAAe"}

package/dist/message/message.types.d.ts

@@ -14,4 +14,5 @@ type MessageProps = SystemProps & ThemingProps<'Message'> & {
 };
 //#endregion
 export { MessageProps };
+
 //# sourceMappingURL=message.types.d.ts.map

package/dist/message/message.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.types.d.ts","names":[],"sources":["../../src/message/message.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,YAAA,CAAA,CAAA,CAAe,cACzB;;SAES;;EAHC,MAAA,CAAA,CAAA,CAKC,WALW;CAAG"}
+{"version":3,"file":"message.types.d.ts","names":[],"sources":["../../src/message/message.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,YAAA,GAAe,cACzB;;SAES;;EAHC,MAAA,CAAA,EAKC,WALW;CAAG"}

package/dist/message/theme.js

@@ -35,5 +35,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/modal/context.d.ts

@@ -1,8 +1,9 @@
 import { ModalContext } from "./modal.types.js";
-import * as react940 from "react";
+import * as react0 from "react";
 
 //#region src/modal/context.d.ts
-declare const ModalProvider: react940.Provider<ModalContext>, useModalContext: () => ModalContext;
+declare const ModalProvider: react0.Provider<ModalContext>, useModalContext: () => ModalContext;
 //#endregion
 export { ModalProvider, useModalContext };
+
 //# sourceMappingURL=context.d.ts.map

package/dist/modal/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/modal/context.ts"],"sourcesContent":[],"mappings":";;;;cAGO,eAAa,QAAA,CAAA,SAAA,eAAE,uBAAe"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/modal/context.ts"],"sourcesContent":[],"mappings":";;;;cAGO,eAAa,MAAA,CAAA,SAAA,eAAE,uBAAe"}

package/dist/modal/context.js

@@ -5,5 +5,5 @@ const [ModalProvider, useModalContext] = createContext({ isOptional: true });
 
 //#endregion
 export { ModalProvider, useModalContext };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/modal/index.d.ts

@@ -5,4 +5,4 @@ import { FocusLock } from "../focusLock/focusLock.js";
 import { ModalBackdrop, ModalBackdropBase } from "./modalBackdrop.js";
 import { ModalContent, ModalContentBase } from "./modalContent.js";
 import { Modal } from "./modal.js";
-import { manager, useModalManager } from "./modalManager.js";
+import { manager, useModalManager } from "./modalManager.js";

package/dist/modal/modal.d.ts

@@ -18,4 +18,5 @@ declare const Modal: VuiComponent<"div", ModalProps> & {
 };
 //#endregion
 export { Modal };
+
 //# sourceMappingURL=modal.d.ts.map

package/dist/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","names":[],"sources":["../../src/modal/modal.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;AAqBA,CAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,MAAA,CAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,MAAA,CAAA,aAAA;;;AAgGmB,OAAA,CAAA,KAAA,CAhGN,KAgGM,CAAA,CADb,YACa,CAAA,CAAA,GAAA,CAAA,CAAA,CADO,UACP,CAAA,CAAA,CAAA,CAAA;EACD,QAAA,CAAA,CAAA,MAAA,CADC,aACD;EAAY,OAAA,CAAA,CAAA,MAAA,CAAZ,YAAY"}
+{"version":3,"file":"modal.d.ts","names":[],"sources":["../../src/modal/modal.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;AAqBA;;;AAgGmB,cAhGN,KAgGM,EADb,YACa,CAAA,KAAA,EADO,UACP,CAAA,GAAA;EACD,QAAA,EAAA,OADC,aACD;EAAY,OAAA,EAAA,OAAZ,YAAY"}

package/dist/modal/modal.js

@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
 */
 const Modal = vui((props, ref) => {
-	const { allowPinchZoom, animation = "fadeDown", children, className, contentProps, disableAutoFocus, disableBackdropClose, disableEscClose, disablePortal, disableReturnFocus, disableScrollLock, disableTrapFocus, finalFocusRef, hideBackdrop, initialFocusRef, isOpen, onBackdropClick: onBackdropClickProp, onClose, onEsc, preserveScrollBar, size, variant,...rest } = props;
+	const { allowPinchZoom, animation = "fadeDown", children, className, contentProps, disableAutoFocus, disableBackdropClose, disableEscClose, disablePortal, disableReturnFocus, disableScrollLock, disableTrapFocus, finalFocusRef, hideBackdrop, initialFocusRef, isOpen, onBackdropClick: onBackdropClickProp, onClose, onEsc, preserveScrollBar, size, variant, ...rest } = props;
 	const modalRef = useRef(null);
 	const mouseDownTarget = useRef(null);
 	useModalManager(modalRef, isOpen, disableScrollLock);
@@ -88,5 +88,5 @@ var modal_default = Modal;
 
 //#endregion
 export { modal_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=modal.js.map

package/dist/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["Portal","Box","ModalBackdrop","FocusLock","ModalContent"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["import { cloneElement, useRef } from 'react'\n\nimport Box from '../box'\nimport type { VuiComponent } from '../core'\nimport { vui } from '../core'\nimport FocusLock from '../focusLock'\nimport Portal from '../portal'\nimport type { KeyboardEvent, MouseEvent } from '../utils'\nimport { callAll, cs, mergeRefs } from '../utils'\nimport { ModalProvider } from './context'\nimport type { ModalProps } from './modal.types'\nimport ModalBackdrop from './modalBackdrop'\nimport ModalContent from './modalContent'\nimport { manager, useModalManager } from './modalManager'\n\n/**\n * Displays provided content on top of a dark backdrop element with fixed position.\n * By default uses Portal for content and closes when clicking backdrop or pressing 'Escape'.\n * Uses focus and scroll lock to achieve proper accessibility.\n * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role\n */\nexport const Modal = vui<'div', ModalProps>((props, ref) => {\n  const {\n    allowPinchZoom,\n    animation = 'fadeDown',\n    children,\n    className,\n    contentProps,\n    disableAutoFocus,\n    disableBackdropClose,\n    disableEscClose,\n    disablePortal,\n    disableReturnFocus,\n    disableScrollLock,\n    disableTrapFocus,\n    finalFocusRef,\n    hideBackdrop,\n    initialFocusRef,\n    isOpen,\n    onBackdropClick: onBackdropClickProp,\n    onClose,\n    onEsc,\n    preserveScrollBar,\n    size,\n    variant,\n    ...rest\n  } = props\n  const modalRef = useRef<HTMLElement>(null)\n  const mouseDownTarget = useRef<EventTarget | null>(null)\n\n  useModalManager(modalRef, isOpen, disableScrollLock)\n\n  if (!isOpen) return null\n\n  const onBackdropClick = (e: MouseEvent) => {\n    e.stopPropagation()\n\n    // Avoid closing modal when click starts inside the content and is released outside\n    if (mouseDownTarget.current !== e.target) return\n\n    if (!manager.isTopModal(modalRef)) return\n\n    if (!disableBackdropClose) {\n      onClose?.()\n      onBackdropClickProp?.(e)\n    }\n  }\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n\n      !disableEscClose && onClose?.()\n\n      onEsc?.()\n    }\n  }\n\n  const onMouseDown = (e: MouseEvent) => (mouseDownTarget.current = e.target)\n\n  const childProps = {\n    onClick: (e: any) => {\n      e.stopPropagation()\n      children?.props?.onClick?.(e)\n    },\n    tabIndex: children?.props?.tabIndex ?? -1,\n  }\n\n  const context = { isOpen, onBackdropClick, onClose, size, variant }\n\n  return (\n    <ModalProvider value={context}>\n      <Portal disablePortal={disablePortal}>\n        <Box\n          className={cs('vui-modal', className)}\n          ref={mergeRefs(ref, modalRef)}\n          {...rest}\n          onKeyDown={callAll(props.onKeyDown, onKeyDown)}\n          onMouseDown={callAll(props.onMouseDown, onMouseDown)}\n        >\n          {!hideBackdrop && <ModalBackdrop />}\n          <FocusLock\n            autoFocus={!disableAutoFocus}\n            finalFocusRef={finalFocusRef}\n            initialFocusRef={initialFocusRef}\n            isDisabled={disableTrapFocus}\n            returnFocus={!disableReturnFocus}\n          >\n            <ModalContent animation={animation} {...contentProps}>\n              {cloneElement(children, childProps)}\n            </ModalContent>\n          </FocusLock>\n        </Box>\n      </Portal>\n    </ModalProvider>\n  )\n}) as VuiComponent<'div', ModalProps> & {\n  Backdrop: typeof ModalBackdrop\n  Content: typeof ModalContent\n}\n\nModal.Backdrop = ModalBackdrop\nModal.Content = ModalContent\nModal.displayName = 'Modal'\n\nexport default Modal\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EACJ,gBACA,YAAY,YACZ,UACA,WACA,cACA,kBACA,sBACA,iBACA,eACA,oBACA,mBACA,kBACA,eACA,cACA,iBACA,QACA,iBAAiB,qBACjB,SACA,OACA,mBACA,MACA,QACA,GAAG,SACD;CACJ,MAAM,WAAW,OAAoB,KAAK;CAC1C,MAAM,kBAAkB,OAA2B,KAAK;AAExD,iBAAgB,UAAU,QAAQ,kBAAkB;AAEpD,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,mBAAmB,MAAkB;AACzC,IAAE,iBAAiB;AAGnB,MAAI,gBAAgB,YAAY,EAAE,OAAQ;AAE1C,MAAI,CAAC,QAAQ,WAAW,SAAS,CAAE;AAEnC,MAAI,CAAC,sBAAsB;AACzB,cAAW;AACX,yBAAsB,EAAE;;;CAI5B,MAAM,aAAa,MAAqC;AACtD,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AAEnB,IAAC,mBAAmB,WAAW;AAE/B,YAAS;;;CAIb,MAAM,eAAe,MAAmB,gBAAgB,UAAU,EAAE;CAEpE,MAAM,aAAa;EACjB,UAAU,MAAW;AACnB,KAAE,iBAAiB;AACnB,aAAU,OAAO,UAAU,EAAE;;EAE/B,UAAU,UAAU,OAAO,YAAY;EACxC;AAID,QACE,oBAAC;EAAc,OAHD;GAAE;GAAQ;GAAiB;GAAS;GAAM;GAAS;YAI/D,oBAACA;GAAsB;aACrB,qBAACC;IACC,WAAW,GAAG,aAAa,UAAU;IACrC,KAAK,UAAU,KAAK,SAAS;IAC7B,GAAI;IACJ,WAAW,QAAQ,MAAM,WAAW,UAAU;IAC9C,aAAa,QAAQ,MAAM,aAAa,YAAY;eAEnD,CAAC,gBAAgB,oBAACC,0BAAgB,EACnC,oBAACC;KACC,WAAW,CAAC;KACG;KACE;KACjB,YAAY;KACZ,aAAa,CAAC;eAEd,oBAACC;MAAwB;MAAW,GAAI;gBACrC,aAAa,UAAU,WAAW;OACtB;MACL;KACR;IACC;GACK;EAElB;AAKF,MAAM,WAAWF;AACjB,MAAM,UAAUE;AAChB,MAAM,cAAc;AAEpB,oBAAe"}
+{"version":3,"file":"modal.js","names":["Portal","Box","ModalBackdrop","FocusLock","ModalContent"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["import { cloneElement, useRef } from 'react'\n\nimport Box from '../box'\nimport type { VuiComponent } from '../core'\nimport { vui } from '../core'\nimport FocusLock from '../focusLock'\nimport Portal from '../portal'\nimport type { KeyboardEvent, MouseEvent } from '../utils'\nimport { callAll, cs, mergeRefs } from '../utils'\nimport { ModalProvider } from './context'\nimport type { ModalProps } from './modal.types'\nimport ModalBackdrop from './modalBackdrop'\nimport ModalContent from './modalContent'\nimport { manager, useModalManager } from './modalManager'\n\n/**\n * Displays provided content on top of a dark backdrop element with fixed position.\n * By default uses Portal for content and closes when clicking backdrop or pressing 'Escape'.\n * Uses focus and scroll lock to achieve proper accessibility.\n * More about accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role\n */\nexport const Modal = vui<'div', ModalProps>((props, ref) => {\n  const {\n    allowPinchZoom,\n    animation = 'fadeDown',\n    children,\n    className,\n    contentProps,\n    disableAutoFocus,\n    disableBackdropClose,\n    disableEscClose,\n    disablePortal,\n    disableReturnFocus,\n    disableScrollLock,\n    disableTrapFocus,\n    finalFocusRef,\n    hideBackdrop,\n    initialFocusRef,\n    isOpen,\n    onBackdropClick: onBackdropClickProp,\n    onClose,\n    onEsc,\n    preserveScrollBar,\n    size,\n    variant,\n    ...rest\n  } = props\n  const modalRef = useRef<HTMLElement>(null)\n  const mouseDownTarget = useRef<EventTarget | null>(null)\n\n  useModalManager(modalRef, isOpen, disableScrollLock)\n\n  if (!isOpen) return null\n\n  const onBackdropClick = (e: MouseEvent) => {\n    e.stopPropagation()\n\n    // Avoid closing modal when click starts inside the content and is released outside\n    if (mouseDownTarget.current !== e.target) return\n\n    if (!manager.isTopModal(modalRef)) return\n\n    if (!disableBackdropClose) {\n      onClose?.()\n      onBackdropClickProp?.(e)\n    }\n  }\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n\n      !disableEscClose && onClose?.()\n\n      onEsc?.()\n    }\n  }\n\n  const onMouseDown = (e: MouseEvent) => (mouseDownTarget.current = e.target)\n\n  const childProps = {\n    onClick: (e: any) => {\n      e.stopPropagation()\n      children?.props?.onClick?.(e)\n    },\n    tabIndex: children?.props?.tabIndex ?? -1,\n  }\n\n  const context = { isOpen, onBackdropClick, onClose, size, variant }\n\n  return (\n    <ModalProvider value={context}>\n      <Portal disablePortal={disablePortal}>\n        <Box\n          className={cs('vui-modal', className)}\n          ref={mergeRefs(ref, modalRef)}\n          {...rest}\n          onKeyDown={callAll(props.onKeyDown, onKeyDown)}\n          onMouseDown={callAll(props.onMouseDown, onMouseDown)}\n        >\n          {!hideBackdrop && <ModalBackdrop />}\n          <FocusLock\n            autoFocus={!disableAutoFocus}\n            finalFocusRef={finalFocusRef}\n            initialFocusRef={initialFocusRef}\n            isDisabled={disableTrapFocus}\n            returnFocus={!disableReturnFocus}\n          >\n            <ModalContent animation={animation} {...contentProps}>\n              {cloneElement(children, childProps)}\n            </ModalContent>\n          </FocusLock>\n        </Box>\n      </Portal>\n    </ModalProvider>\n  )\n}) as VuiComponent<'div', ModalProps> & {\n  Backdrop: typeof ModalBackdrop\n  Content: typeof ModalContent\n}\n\nModal.Backdrop = ModalBackdrop\nModal.Content = ModalContent\nModal.displayName = 'Modal'\n\nexport default Modal\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EACJ,gBACA,YAAY,YACZ,UACA,WACA,cACA,kBACA,sBACA,iBACA,eACA,oBACA,mBACA,kBACA,eACA,cACA,iBACA,QACA,iBAAiB,qBACjB,SACA,OACA,mBACA,MACA,SACA,GAAG,SACD;CACJ,MAAM,WAAW,OAAoB,KAAK;CAC1C,MAAM,kBAAkB,OAA2B,KAAK;AAExD,iBAAgB,UAAU,QAAQ,kBAAkB;AAEpD,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,mBAAmB,MAAkB;AACzC,IAAE,iBAAiB;AAGnB,MAAI,gBAAgB,YAAY,EAAE,OAAQ;AAE1C,MAAI,CAAC,QAAQ,WAAW,SAAS,CAAE;AAEnC,MAAI,CAAC,sBAAsB;AACzB,cAAW;AACX,yBAAsB,EAAE;;;CAI5B,MAAM,aAAa,MAAqC;AACtD,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AAEnB,IAAC,mBAAmB,WAAW;AAE/B,YAAS;;;CAIb,MAAM,eAAe,MAAmB,gBAAgB,UAAU,EAAE;CAEpE,MAAM,aAAa;EACjB,UAAU,MAAW;AACnB,KAAE,iBAAiB;AACnB,aAAU,OAAO,UAAU,EAAE;;EAE/B,UAAU,UAAU,OAAO,YAAY;EACxC;AAID,QACE,oBAAC;EAAc,OAHD;GAAE;GAAQ;GAAiB;GAAS;GAAM;GAAS;YAI/D,oBAACA;GAAsB;aACrB,qBAACC;IACC,WAAW,GAAG,aAAa,UAAU;IACrC,KAAK,UAAU,KAAK,SAAS;IAC7B,GAAI;IACJ,WAAW,QAAQ,MAAM,WAAW,UAAU;IAC9C,aAAa,QAAQ,MAAM,aAAa,YAAY;eAEnD,CAAC,gBAAgB,oBAACC,0BAAgB,EACnC,oBAACC;KACC,WAAW,CAAC;KACG;KACE;KACjB,YAAY;KACZ,aAAa,CAAC;eAEd,oBAACC;MAAwB;MAAW,GAAI;gBACrC,aAAa,UAAU,WAAW;OACtB;MACL;KACR;IACC;GACK;EAElB;AAKF,MAAM,WAAWF;AACjB,MAAM,UAAUE;AAChB,MAAM,cAAc;AAEpB,oBAAe"}

package/dist/modal/modal.types.d.ts

@@ -53,4 +53,5 @@ type ModalProps = SystemProps & ThemingProps<'Modal'> & {
 };
 //#endregion
 export { ModalBackdropProps, ModalContentProps, ModalContext, ModalProps };
+
 //# sourceMappingURL=modal.types.d.ts.map

package/dist/modal/modal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.types.d.ts","names":[],"sources":["../../src/modal/modal.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAOY,kBAAA,CAAA,CAAA,CAAqB;KAErB,iBAAA,CAAA,CAAA,CAAoB;KAEpB,YAAA,CAAA,CAAA,CAAe,KAAK;KAEpB,UAAA,CAAA,CAAA,CAAa,cACvB;;EAPU,cAAA,CAAA,CAAA,CAAA,OAAkB;EAElB,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,SAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA,EAAA,CAAA,IAAA,CAAA,CAAA,CAAA,OAAA,CAAA,QAAA,CAAA,CAAA;EAEA,SAAA,CAAA,CAAA,CAOI,aAPQ;EAEZ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,KAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAAa,QAAA,CAAA,CAOX,YAPW;EACvB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,MAAA,CAAA,EAAA,CAAA,QAAA,CAAA,YAAA,CAAA,SAAA,CAAA,CAAA,CAAA;EAIc,YAAA,CAAA,CAAA,CAIG,iBAJH;EAEF,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,GAAA,CAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,QAAA,CAAA,OAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,QAAA,CAAA,CAAA,IAAA,CAAA,SAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAEK,gBAAA,CAAA,CAAA,CAAA,OAAA;EAgBiB,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,QAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA;EAAhB,oBAAM,CAAA,CAAA,CAAA,OAAA;EAIY,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,MAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA;EAAhB,eAAM,CAAA,CAAA,CAAA,OAAA;EAIF,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,QAAA,CAAA,IAAA,CAAA,EAAA,CAAA,KAAA,CAAA,GAAA,CAAA,GAAA,CAAA,SAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,SAAA,CAAA,CAAA,CAAA;EAAU,aAAA,CAAA,CAAA,CAAA,OAAA;;;;;;;;kBARhB,KAAA,CAAM,UAAU;;;;oBAId,KAAA,CAAM,UAAU;;;;wBAIZ"}
+{"version":3,"file":"modal.types.d.ts","names":[],"sources":["../../src/modal/modal.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAOY,kBAAA,GAAqB;KAErB,iBAAA,GAAoB;KAEpB,YAAA,GAAe,KAAK;KAEpB,UAAA,GAAa,cACvB;;EAPU,cAAA,CAAA,EAAA,OAAkB;EAElB;EAEA,SAAA,CAAA,EAOI,aAPQ;EAEZ;EAAa,QAAA,EAOX,YAPW;EACvB;EAIc,YAAA,CAAA,EAIG,iBAJH;EAEF;EAEK,gBAAA,CAAA,EAAA,OAAA;EAgBiB;EAAhB,oBAAM,CAAA,EAAA,OAAA;EAIY;EAAhB,eAAM,CAAA,EAAA,OAAA;EAIF;EAAU,aAAA,CAAA,EAAA,OAAA;;;;;;;;kBARhB,KAAA,CAAM,UAAU;;;;oBAId,KAAA,CAAM,UAAU;;;;wBAIZ"}

package/dist/modal/modalBackdrop.d.ts

@@ -1,12 +1,13 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import "../index.js";
-import * as styled_components396 from "styled-components";
+import * as styled_components5 from "styled-components";
 
 //#region src/modal/modalBackdrop.d.ts
-declare const ModalBackdropBase: styled_components396.StyledComponent<"div", styled_components396.DefaultTheme, SystemProps, never>;
+declare const ModalBackdropBase: styled_components5.StyledComponent<"div", styled_components5.DefaultTheme, SystemProps, never>;
 /** Displays a dark overlay underneath modal content, but on top of page content. */
 declare const ModalBackdrop: VuiComponent<"div", SystemProps>;
 //#endregion
 export { ModalBackdrop, ModalBackdropBase };
+
 //# sourceMappingURL=modalBackdrop.d.ts.map

package/dist/modal/modalBackdrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalBackdrop.d.ts","names":[],"sources":["../../src/modal/modalBackdrop.tsx"],"sourcesContent":[],"mappings":";;;;;;cASa,mBAAiB,oBAAA,CAAA,uBAK7B,oBAAA,CAL6B,YAAA,CAAA,CAAA,WAAA,CAAA;;cAQjB,eAAa,oBAaxB,WAAA"}
+{"version":3,"file":"modalBackdrop.d.ts","names":[],"sources":["../../src/modal/modalBackdrop.tsx"],"sourcesContent":[],"mappings":";;;;;;cASa,mBAAiB,kBAAA,CAAA,uBAK7B,kBAAA,CAL6B,YAAA,EAAA,WAAA;;cAQjB,eAAa,oBAaxB,WAAA"}

package/dist/modal/modalBackdrop.js

@@ -17,7 +17,7 @@ const ModalBackdropBase = styled.divBox`
 `;
 /** Displays a dark overlay underneath modal content, but on top of page content. */
 const ModalBackdrop = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const styles = useStyleConfig("Modal", useModalContext());
 	return /* @__PURE__ */ jsx(ModalBackdropBase, {
 		animation: "fadeIn",
@@ -32,5 +32,5 @@ var modalBackdrop_default = ModalBackdrop;
 
 //#endregion
 export { ModalBackdrop, ModalBackdropBase, modalBackdrop_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=modalBackdrop.js.map

package/dist/modal/modalBackdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalBackdrop.js","names":["colors"],"sources":["../../src/modal/modalBackdrop.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { colors } from '../theme'\nimport { cs, HSLToRGBA, parseHSL } from '../utils'\nimport { useModalContext } from './context'\nimport type { ModalBackdropProps } from './modal.types'\n\nconst { h, s, l } = parseHSL(colors.sandstone[5])\nconst rgba = HSLToRGBA(h, s, l, 0.6)\n\nexport const ModalBackdropBase = styled.divBox`\n  background-color: ${rgba};\n  inset: 0;\n  position: fixed;\n  z-index: modal;\n`\n\n/** Displays a dark overlay underneath modal content, but on top of page content. */\nexport const ModalBackdrop = vui<'div', ModalBackdropProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Modal', useModalContext())\n\n  return (\n    <ModalBackdropBase\n      animation=\"fadeIn\"\n      className={cs('vui-modalBackdrop', className)}\n      ref={ref}\n      {...styles.backdrop}\n      {...rest}\n    />\n  )\n})\n\nModalBackdrop.displayName = 'ModalBackdrop'\n\nexport default ModalBackdrop\n"],"mappings":";;;;;;;;;AAMA,MAAM,EAAE,GAAG,GAAG,MAAM,SAASA,eAAO,UAAU,GAAG;AACjD,MAAM,OAAO,UAAU,GAAG,GAAG,GAAG,GAAI;AAEpC,MAAa,oBAAoB,OAAO,MAAM;sBACxB,KAAK;;;;;;AAO3B,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;AAEzD,QACE,oBAAC;EACC,WAAU;EACV,WAAW,GAAG,qBAAqB,UAAU;EACxC;EACL,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"modalBackdrop.js","names":["colors"],"sources":["../../src/modal/modalBackdrop.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { colors } from '../theme'\nimport { cs, HSLToRGBA, parseHSL } from '../utils'\nimport { useModalContext } from './context'\nimport type { ModalBackdropProps } from './modal.types'\n\nconst { h, s, l } = parseHSL(colors.sandstone[5])\nconst rgba = HSLToRGBA(h, s, l, 0.6)\n\nexport const ModalBackdropBase = styled.divBox`\n  background-color: ${rgba};\n  inset: 0;\n  position: fixed;\n  z-index: modal;\n`\n\n/** Displays a dark overlay underneath modal content, but on top of page content. */\nexport const ModalBackdrop = vui<'div', ModalBackdropProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Modal', useModalContext())\n\n  return (\n    <ModalBackdropBase\n      animation=\"fadeIn\"\n      className={cs('vui-modalBackdrop', className)}\n      ref={ref}\n      {...styles.backdrop}\n      {...rest}\n    />\n  )\n})\n\nModalBackdrop.displayName = 'ModalBackdrop'\n\nexport default ModalBackdrop\n"],"mappings":";;;;;;;;;AAMA,MAAM,EAAE,GAAG,GAAG,MAAM,SAASA,eAAO,UAAU,GAAG;AACjD,MAAM,OAAO,UAAU,GAAG,GAAG,GAAG,GAAI;AAEpC,MAAa,oBAAoB,OAAO,MAAM;sBACxB,KAAK;;;;;;AAO3B,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;AAEzD,QACE,oBAAC;EACC,WAAU;EACV,WAAW,GAAG,qBAAqB,UAAU;EACxC;EACL,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,cAAc,cAAc;AAE5B,4BAAe"}

package/dist/modal/modalContent.d.ts

@@ -1,12 +1,13 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import "../index.js";
-import * as styled_components398 from "styled-components";
+import * as styled_components7 from "styled-components";
 
 //#region src/modal/modalContent.d.ts
-declare const ModalContentBase: styled_components398.StyledComponent<"div", styled_components398.DefaultTheme, SystemProps, never>;
+declare const ModalContentBase: styled_components7.StyledComponent<"div", styled_components7.DefaultTheme, SystemProps, never>;
 /** Wraps the content provided to the Modal component. */
 declare const ModalContent: VuiComponent<"div", SystemProps>;
 //#endregion
 export { ModalContent, ModalContentBase };
+
 //# sourceMappingURL=modalContent.d.ts.map

package/dist/modal/modalContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalContent.d.ts","names":[],"sources":["../../src/modal/modalContent.tsx"],"sourcesContent":[],"mappings":";;;;;;cAKa,kBAAgB,oBAAA,CAAA,uBAK5B,oBAAA,CAL4B,YAAA,CAAA,CAAA,WAAA,CAAA;;cAQhB,cAAY,oBAevB,WAAA"}
+{"version":3,"file":"modalContent.d.ts","names":[],"sources":["../../src/modal/modalContent.tsx"],"sourcesContent":[],"mappings":";;;;;;cAKa,kBAAgB,kBAAA,CAAA,uBAK5B,kBAAA,CAL4B,YAAA,EAAA,WAAA;;cAQhB,cAAY,oBAevB,WAAA"}

package/dist/modal/modalContent.js

@@ -15,7 +15,7 @@ const ModalContentBase = styled.divBox`
 `;
 /** Wraps the content provided to the Modal component. */
 const ModalContent = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const { onBackdropClick } = useModalContext() ?? {};
 	const styles = useStyleConfig("Modal", useModalContext());
 	return /* @__PURE__ */ jsx(ModalContentBase, {
@@ -32,5 +32,5 @@ var modalContent_default = ModalContent;
 
 //#endregion
 export { ModalContent, ModalContentBase, modalContent_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=modalContent.js.map

package/dist/modal/modalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalContent.js","names":[],"sources":["../../src/modal/modalContent.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { callAll, cs } from '../utils'\nimport { useModalContext } from './context'\nimport type { ModalContentProps } from './modal.types'\n\nexport const ModalContentBase = styled.divBox`\n  display: flex;\n  inset: 0px;\n  position: fixed;\n  z-index: modal;\n`\n\n/** Wraps the content provided to the Modal component. */\nexport const ModalContent = vui<'div', ModalContentProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onBackdropClick } = useModalContext() ?? {}\n  const styles = useStyleConfig('Modal', useModalContext())\n\n  return (\n    <ModalContentBase\n      className={cs('vui-modalContent', className)}\n      ref={ref}\n      tabIndex={-1}\n      {...styles.content}\n      {...rest}\n      onClick={callAll(props.onClick, onBackdropClick)}\n    />\n  )\n})\n\nModalContent.displayName = 'ModalContent'\n\nexport default ModalContent\n"],"mappings":";;;;;;;;;AAKA,MAAa,mBAAmB,OAAO,MAAM;;;;;;;AAQ7C,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,oBAAoB,iBAAiB,IAAI,EAAE;CACnD,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;AAEzD,QACE,oBAAC;EACC,WAAW,GAAG,oBAAoB,UAAU;EACvC;EACL,UAAU;EACV,GAAI,OAAO;EACX,GAAI;EACJ,SAAS,QAAQ,MAAM,SAAS,gBAAgB;GAChD;EAEJ;AAEF,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"modalContent.js","names":[],"sources":["../../src/modal/modalContent.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { callAll, cs } from '../utils'\nimport { useModalContext } from './context'\nimport type { ModalContentProps } from './modal.types'\n\nexport const ModalContentBase = styled.divBox`\n  display: flex;\n  inset: 0px;\n  position: fixed;\n  z-index: modal;\n`\n\n/** Wraps the content provided to the Modal component. */\nexport const ModalContent = vui<'div', ModalContentProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onBackdropClick } = useModalContext() ?? {}\n  const styles = useStyleConfig('Modal', useModalContext())\n\n  return (\n    <ModalContentBase\n      className={cs('vui-modalContent', className)}\n      ref={ref}\n      tabIndex={-1}\n      {...styles.content}\n      {...rest}\n      onClick={callAll(props.onClick, onBackdropClick)}\n    />\n  )\n})\n\nModalContent.displayName = 'ModalContent'\n\nexport default ModalContent\n"],"mappings":";;;;;;;;;AAKA,MAAa,mBAAmB,OAAO,MAAM;;;;;;;AAQ7C,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,oBAAoB,iBAAiB,IAAI,EAAE;CACnD,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;AAEzD,QACE,oBAAC;EACC,WAAW,GAAG,oBAAoB,UAAU;EACvC;EACL,UAAU;EACV,GAAI,OAAO;EACX,GAAI;EACJ,SAAS,QAAQ,MAAM,SAAS,gBAAgB;GAChD;EAEJ;AAEF,aAAa,cAAc;AAE3B,2BAAe"}

package/dist/modal/modalManager.d.ts

@@ -13,4 +13,5 @@ declare const manager: ModalManager;
 declare function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean): void;
 //#endregion
 export { manager, useModalManager };
+
 //# sourceMappingURL=modalManager.d.ts.map

package/dist/modal/modalManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalManager.d.ts","names":[],"sources":["../../src/modal/modalManager.ts"],"sourcesContent":[],"mappings":";;;;cAMM,YAAA;EAAA,MAAA,CAAA,CAAA,GAAA,CAAA,CAAA;EAaO,GAAA,CAAA,CAAA,CAAA,KAA4B,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAArB;EAGJ,MAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAe,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA;;;cAHlB,SAAO;;iBAGJ,eAAA,MAAqB"}
+{"version":3,"file":"modalManager.d.ts","names":[],"sources":["../../src/modal/modalManager.ts"],"sourcesContent":[],"mappings":";;;;cAMM,YAAA;EAAA,MAAA,EAAA,GAAA,EAAA;EAaO,GAAA,EAAA,CAAA,KAA4B,EAAA,GAAA,EAAA,GAAA,MAArB;EAGJ,MAAA,EAAA,CAAA,KAAA,EAAA,GAAe,EAAA,GAAA,GAAA,EAAA;;;cAHlB,SAAO;;iBAGJ,eAAA,MAAqB"}

package/dist/modal/modalManager.js

@@ -29,5 +29,5 @@ function useModalManager(ref, isOpen, disableScrollLock) {
 
 //#endregion
 export { manager, useModalManager };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=modalManager.js.map

package/dist/modal/theme.js

@@ -18,5 +18,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/notification/consts.js

@@ -65,5 +65,5 @@ const closeButtonVariantMapping = {
 
 //#endregion
 export { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/notification/context.d.ts

@@ -1,8 +1,9 @@
 import { NotificationProps } from "./notification.types.js";
-import * as react941 from "react";
+import * as react1 from "react";
 
 //#region src/notification/context.d.ts
-declare const NotificationProvider: react941.Provider<Partial<NotificationProps>>, useNotificationContext: () => Partial<NotificationProps>;
+declare const NotificationProvider: react1.Provider<Partial<NotificationProps>>, useNotificationContext: () => Partial<NotificationProps>;
 //#endregion
 export { NotificationProvider, useNotificationContext };
+
 //# sourceMappingURL=context.d.ts.map

package/dist/notification/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/notification/context.ts"],"sourcesContent":[],"mappings":";;;;cAGO,sBAAoB,QAAA,CAAA,SAAA,QAAA,qBAAE,8BAAsB,QAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/notification/context.ts"],"sourcesContent":[],"mappings":";;;;cAGO,sBAAoB,MAAA,CAAA,SAAA,QAAA,qBAAE,8BAAsB,QAAA"}

package/dist/notification/context.js

@@ -5,5 +5,5 @@ const [NotificationProvider, useNotificationContext] = createContext({ isOptiona
 
 //#endregion
 export { NotificationProvider, useNotificationContext };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/notification/index.d.ts

@@ -4,4 +4,4 @@ import { NotificationButton } from "./notificationButton.js";
 import { NotificationIcon } from "./notificationIcon.js";
 import { NotificationText } from "./notificationText.js";
 import { NotificationTitle } from "./notificationTitle.js";
-import { Notification } from "./notification.js";
+import { Notification } from "./notification.js";

package/dist/notification/notification.d.ts

@@ -20,4 +20,5 @@ declare const Notification: VuiComponent<"div", NotificationProps> & {
 };
 //#endregion
 export { Notification };
+
 //# sourceMappingURL=notification.d.ts.map

package/dist/notification/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;AAgBA,CAAA,CAAA;AAgE0B,OAAA,CAAA,KAAA,CAhEb,YAgEa,CAAA,CAApB,YAAoB,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,iBAAA,CAAA,CAAA,CAAA,CAAA;EAApB,MAAA,CAAA,CAAA,MAAA,CACW,kBADX;EACW,IAAA,CAAA,CAAA,MAAA,CACF,gBADE;EACF,IAAA,CAAA,CAAA,MAAA,CACA,gBADA;EACA,KAAA,CAAA,CAAA,MAAA,CACC,iBADD;CACC"}
+{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;AAgBA;AAgE0B,cAhEb,YAgEa,EAApB,YAAoB,CAAA,KAAA,EAAA,iBAAA,CAAA,GAAA;EAApB,MAAA,EAAA,OACW,kBADX;EACW,IAAA,EAAA,OACF,gBADE;EACF,IAAA,EAAA,OACA,gBADA;EACA,KAAA,EAAA,OACC,iBADD;CACC"}

package/dist/notification/notification.js

@@ -18,7 +18,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Handles multiple states, like info, error or loading.
 */
 const Notification = vui((props, ref) => {
-	const { action, children, className, icon, onClose, size, status, statusMapping, text, title, variant: variantProp = "subtleBlue", verticalAlign,...rest } = props;
+	const { action, children, className, icon, onClose, size, status, statusMapping, text, title, variant: variantProp = "subtleBlue", verticalAlign, ...rest } = props;
 	const statuses = {
 		...notificationStatusMapping,
 		...statusMapping
@@ -84,5 +84,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=notification.js.map

package/dist/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":["Box","NotificationIcon","NotificationText","NotificationTitle","NotificationButton"],"sources":["../../src/notification/notification.tsx"],"sourcesContent":["import Box from '../box'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from './consts'\nimport { NotificationProvider } from './context'\nimport type { NotificationProps } from './notification.types'\nimport NotificationButton from './notificationButton'\nimport NotificationIcon from './notificationIcon'\nimport NotificationText from './notificationText'\nimport NotificationTitle from './notificationTitle'\n\n/**\n * Displays informational content, like text and icon with optional action buttons.\n * Handles multiple states, like info, error or loading.\n */\nexport const Notification = vui<'div', NotificationProps>((props, ref) => {\n  const {\n    action,\n    children,\n    className,\n    icon,\n    onClose,\n    size,\n    status,\n    statusMapping,\n    text,\n    title,\n    variant: variantProp = 'subtleBlue',\n    verticalAlign,\n    ...rest\n  } = props\n  const statuses = { ...notificationStatusMapping, ...statusMapping }\n  const { variant = variantProp } = statuses[status ?? ''] ?? {}\n  const styles = useStyleConfig('Notification', { variant, ...props })\n\n  const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name\n\n  const context = filterUndefined<NotificationProps>({ size, status })\n\n  const titleDisplay = action ? 'block' : 'inline'\n\n  const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start'\n\n  return (\n    <NotificationProvider value={context}>\n      <Box\n        borderRadius=\"md\"\n        borderWidth={1}\n        className={cs('vui-notification', className)}\n        elevation={variant.includes('banner') ? bannerNotificationElevation : undefined}\n        ref={ref}\n        role=\"mark\"\n        w=\"fit-content\"\n        {...styles.container}\n        {...rest}\n      >\n        {iconName ? <NotificationIcon alignSelf={alignSelf} name={iconName} /> : icon}\n\n        {children ?? (\n          <NotificationText alignSelf={alignSelf}>\n            {isReactText(title) ? <NotificationTitle display={titleDisplay} text={title} /> : title} {text}\n          </NotificationText>\n        )}\n\n        {action}\n\n        {onClose && (\n          <NotificationButton\n            alignSelf={alignSelf}\n            aria-label=\"close\"\n            icon=\"uiTimes\"\n            onClick={onClose}\n            variant={closeButtonVariantMapping?.[variant] ?? variant}\n            w=\"32px\"\n          />\n        )}\n      </Box>\n    </NotificationProvider>\n  )\n}) as VuiComponent<'div', NotificationProps> & {\n  Button: typeof NotificationButton\n  Icon: typeof NotificationIcon\n  Text: typeof NotificationText\n  Title: typeof NotificationTitle\n}\n\nNotification.Button = NotificationButton\nNotification.Icon = NotificationIcon\nNotification.Text = NotificationText\nNotification.Title = NotificationTitle\nNotification.displayName = 'Notification'\n\nexport default Notification\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,UACA,WACA,MACA,SACA,MACA,QACA,eACA,MACA,OACA,SAAS,cAAc,cACvB,cACA,GAAG,SACD;CACJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;EAAe;CACnE,MAAM,EAAE,UAAU,gBAAgB,SAAS,UAAU,OAAO,EAAE;CAC9D,MAAM,SAAS,eAAe,gBAAgB;EAAE;EAAS,GAAG;EAAO,CAAC;CAEpE,MAAM,WAAW,SAAS,KAAK,GAAG,OAAO,SAAS,UAAU,KAAK,WAAW;CAE5E,MAAM,UAAU,gBAAmC;EAAE;EAAM;EAAQ,CAAC;CAEpE,MAAM,eAAe,SAAS,UAAU;CAExC,MAAM,YAAY,kBAAkB,WAAW,WAAW;AAE1D,QACE,oBAAC;EAAqB,OAAO;YAC3B,qBAACA;GACC,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,UAAU;GAC5C,WAAW,QAAQ,SAAS,SAAS,GAAG,8BAA8B;GACjE;GACL,MAAK;GACL,GAAE;GACF,GAAI,OAAO;GACX,GAAI;;IAEH,WAAW,oBAACC;KAA4B;KAAW,MAAM;MAAY,GAAG;IAExE,YACC,qBAACC;KAA4B;;MAC1B,YAAY,MAAM,GAAG,oBAACC;OAAkB,SAAS;OAAc,MAAM;QAAS,GAAG;MAAM;MAAE;;MACzE;IAGpB;IAEA,WACC,oBAACC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS;KACT,SAAS,4BAA4B,YAAY;KACjD,GAAE;MACF;;IAEA;GACe;EAEzB;AAOF,aAAa,SAASA;AACtB,aAAa,OAAOH;AACpB,aAAa,OAAOC;AACpB,aAAa,QAAQC;AACrB,aAAa,cAAc"}
+{"version":3,"file":"notification.js","names":["Box","NotificationIcon","NotificationText","NotificationTitle","NotificationButton"],"sources":["../../src/notification/notification.tsx"],"sourcesContent":["import Box from '../box'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from './consts'\nimport { NotificationProvider } from './context'\nimport type { NotificationProps } from './notification.types'\nimport NotificationButton from './notificationButton'\nimport NotificationIcon from './notificationIcon'\nimport NotificationText from './notificationText'\nimport NotificationTitle from './notificationTitle'\n\n/**\n * Displays informational content, like text and icon with optional action buttons.\n * Handles multiple states, like info, error or loading.\n */\nexport const Notification = vui<'div', NotificationProps>((props, ref) => {\n  const {\n    action,\n    children,\n    className,\n    icon,\n    onClose,\n    size,\n    status,\n    statusMapping,\n    text,\n    title,\n    variant: variantProp = 'subtleBlue',\n    verticalAlign,\n    ...rest\n  } = props\n  const statuses = { ...notificationStatusMapping, ...statusMapping }\n  const { variant = variantProp } = statuses[status ?? ''] ?? {}\n  const styles = useStyleConfig('Notification', { variant, ...props })\n\n  const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name\n\n  const context = filterUndefined<NotificationProps>({ size, status })\n\n  const titleDisplay = action ? 'block' : 'inline'\n\n  const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start'\n\n  return (\n    <NotificationProvider value={context}>\n      <Box\n        borderRadius=\"md\"\n        borderWidth={1}\n        className={cs('vui-notification', className)}\n        elevation={variant.includes('banner') ? bannerNotificationElevation : undefined}\n        ref={ref}\n        role=\"mark\"\n        w=\"fit-content\"\n        {...styles.container}\n        {...rest}\n      >\n        {iconName ? <NotificationIcon alignSelf={alignSelf} name={iconName} /> : icon}\n\n        {children ?? (\n          <NotificationText alignSelf={alignSelf}>\n            {isReactText(title) ? <NotificationTitle display={titleDisplay} text={title} /> : title} {text}\n          </NotificationText>\n        )}\n\n        {action}\n\n        {onClose && (\n          <NotificationButton\n            alignSelf={alignSelf}\n            aria-label=\"close\"\n            icon=\"uiTimes\"\n            onClick={onClose}\n            variant={closeButtonVariantMapping?.[variant] ?? variant}\n            w=\"32px\"\n          />\n        )}\n      </Box>\n    </NotificationProvider>\n  )\n}) as VuiComponent<'div', NotificationProps> & {\n  Button: typeof NotificationButton\n  Icon: typeof NotificationIcon\n  Text: typeof NotificationText\n  Title: typeof NotificationTitle\n}\n\nNotification.Button = NotificationButton\nNotification.Icon = NotificationIcon\nNotification.Text = NotificationText\nNotification.Title = NotificationTitle\nNotification.displayName = 'Notification'\n\nexport default Notification\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,UACA,WACA,MACA,SACA,MACA,QACA,eACA,MACA,OACA,SAAS,cAAc,cACvB,eACA,GAAG,SACD;CACJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;EAAe;CACnE,MAAM,EAAE,UAAU,gBAAgB,SAAS,UAAU,OAAO,EAAE;CAC9D,MAAM,SAAS,eAAe,gBAAgB;EAAE;EAAS,GAAG;EAAO,CAAC;CAEpE,MAAM,WAAW,SAAS,KAAK,GAAG,OAAO,SAAS,UAAU,KAAK,WAAW;CAE5E,MAAM,UAAU,gBAAmC;EAAE;EAAM;EAAQ,CAAC;CAEpE,MAAM,eAAe,SAAS,UAAU;CAExC,MAAM,YAAY,kBAAkB,WAAW,WAAW;AAE1D,QACE,oBAAC;EAAqB,OAAO;YAC3B,qBAACA;GACC,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,UAAU;GAC5C,WAAW,QAAQ,SAAS,SAAS,GAAG,8BAA8B;GACjE;GACL,MAAK;GACL,GAAE;GACF,GAAI,OAAO;GACX,GAAI;;IAEH,WAAW,oBAACC;KAA4B;KAAW,MAAM;MAAY,GAAG;IAExE,YACC,qBAACC;KAA4B;;MAC1B,YAAY,MAAM,GAAG,oBAACC;OAAkB,SAAS;OAAc,MAAM;QAAS,GAAG;MAAM;MAAE;;MACzE;IAGpB;IAEA,WACC,oBAACC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS;KACT,SAAS,4BAA4B,YAAY;KACjD,GAAE;MACF;;IAEA;GACe;EAEzB;AAOF,aAAa,SAASA;AACtB,aAAa,OAAOH;AACpB,aAAa,OAAOC;AACpB,aAAa,QAAQC;AACrB,aAAa,cAAc"}

package/dist/notification/notification.types.d.ts

@@ -32,4 +32,5 @@ type NotificationStatusMapping = Record<string, {
 }>;
 //#endregion
 export { NotificationProps, NotificationStatus, NotificationStatusMapping, NotificationVariant };
+
 //# sourceMappingURL=notification.types.d.ts.map

package/dist/notification/notification.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,iBAAA,CAAA,CAAA,CAAoB,KAAK,gCACnC;;WAEW;;EAHD,WAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAiB,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA;EAAQ,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAAL,IAAA,CAAA,CAAA,CAOrB,QAPqB,CAAA,CAAA,CAOV,GAAA,CAAI,OAPM;EAC9B,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,KAAA,CAAA,MAAA,CAAA,IAAA,CAAA,IAAA,CAAA,QAAA,CAAA,EAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;EAEW,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAIF,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,YAAA,CAAA,KAAA,CAAA,GAAA,CAAA,OAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAAW,MAAI,CAAA,CAAA,CAIb,kBAJa;EAIb,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,EAAA,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,GAAA,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAEO,aAAA,CAAA,CAAA,CAAA,yBAAA;EAET,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAEC,IAAA,CAAA,CAAA,CAFD,SAEC;EAAS,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAGT,KAAA,CAAA,CAAA,CAHA,SAGA;AAYZ,CAAA;AAUY,IAAA,CAtBA,kBAAA,CAAA,CAAA,CAsByB,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA,CAAA,aAAA,CAAA;AAGtB,IAAA,CAbH,mBAAA,CAAA,CAAA,CAaG,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA;AACD,IAAA,CAJF,yBAAA,CAAA,CAAA,CAA4B,MAI1B,CAAA,MAAA,CAAA,CAAA;EAJ0B,SAAA,CAAA,CAGzB,SAHyB;EAAM,OAAA,CAAA,CAAA,CAIhC,iBAJgC,CAAA,CAAA,OAAA,CAAA,CAAA"}
+{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,iBAAA,GAAoB,KAAK,gCACnC;;WAEW;;EAHD,WAAA,CAAA,EAAA,MAAiB,GAAA,OAAA,GAAA,KAAA,GAAA,QAAA;EAAQ;EAAL,IAAA,CAAA,EAOrB,QAPqB,GAOV,GAAA,CAAI,OAPM;EAC9B;EAEW,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAIF;EAAW,MAAI,CAAA,EAIb,kBAJa;EAIb;EAEO,aAAA,CAAA,EAAA,yBAAA;EAET;EAEC,IAAA,CAAA,EAFD,SAEC;EAAS;EAGT,KAAA,CAAA,EAHA,SAGA;AAYZ,CAAA;AAUY,KAtBA,kBAAA,GAsByB,OAAA,GAAA,MAAA,GAAA,SAAA,GAAA,SAAA,GAAA,SAAA,GAAA,aAAA,GAAA,YAAA,GAAA,eAAA,GAAA,eAAA,GAAA,eAAA;AAGtB,KAbH,mBAAA,GAaG,YAAA,GAAA,WAAA,GAAA,cAAA,GAAA,aAAA,GAAA,YAAA,GAAA,WAAA,GAAA,cAAA,GAAA,aAAA;AACD,KAJF,yBAAA,GAA4B,MAI1B,CAAA,MAAA,EAAA;EAJ0B,SAAA,EAGzB,SAHyB;EAAM,OAAA,CAAA,EAIhC,iBAJgC,CAAA,SAAA,CAAA"}

package/dist/notification/notificationButton.d.ts

@@ -8,4 +8,5 @@ import "../index.js";
 declare const NotificationButton: VuiComponent<"button", ButtonProps>;
 //#endregion
 export { NotificationButton };
+
 //# sourceMappingURL=notificationButton.d.ts.map

package/dist/notification/notificationButton.js

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/notification/notificationButton.tsx
 /** Displays an action button within the Notification. */
 const NotificationButton = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const mergedProps = {
 		...useNotificationContext(),
 		...props
@@ -36,5 +36,5 @@ var notificationButton_default = NotificationButton;
 
 //#endregion
 export { NotificationButton, notificationButton_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=notificationButton.js.map

package/dist/notification/notificationButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationButton.js","names":["Button"],"sources":["../../src/notification/notificationButton.tsx"],"sourcesContent":["import type { ButtonProps } from '../button'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { notificationStatusMapping } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationButton = vui<'button', ButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  const { status = '' } = mergedProps\n  const { variant } = notificationStatusMapping[status] ?? {}\n\n  return (\n    <Button\n      className={cs('vui-notificationButton', className)}\n      ml=\"0px\"\n      mr=\"16px\"\n      my=\"16px\"\n      px=\"12px\"\n      py=\"6px\"\n      ref={ref}\n      size=\"md\"\n      {...styles.button}\n      variant={variant}\n      {...rest}\n    />\n  )\n})\n\nNotificationButton.displayName = 'NotificationButton'\nexport default NotificationButton\n"],"mappings":";;;;;;;;;;AAQA,MAAa,qBAAqB,KAA4B,OAAO,QAAQ;CAC3E,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,EAAE,YAAY,0BAA0B,WAAW,EAAE;AAE3D,QACE,oBAACA;EACC,WAAW,GAAG,0BAA0B,UAAU;EAClD,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EACE;EACL,MAAK;EACL,GAAI,OAAO;EACF;EACT,GAAI;GACJ;EAEJ;AAEF,mBAAmB,cAAc;AACjC,iCAAe"}
+{"version":3,"file":"notificationButton.js","names":["Button"],"sources":["../../src/notification/notificationButton.tsx"],"sourcesContent":["import type { ButtonProps } from '../button'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { notificationStatusMapping } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationButton = vui<'button', ButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  const { status = '' } = mergedProps\n  const { variant } = notificationStatusMapping[status] ?? {}\n\n  return (\n    <Button\n      className={cs('vui-notificationButton', className)}\n      ml=\"0px\"\n      mr=\"16px\"\n      my=\"16px\"\n      px=\"12px\"\n      py=\"6px\"\n      ref={ref}\n      size=\"md\"\n      {...styles.button}\n      variant={variant}\n      {...rest}\n    />\n  )\n})\n\nNotificationButton.displayName = 'NotificationButton'\nexport default NotificationButton\n"],"mappings":";;;;;;;;;;AAQA,MAAa,qBAAqB,KAA4B,OAAO,QAAQ;CAC3E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,EAAE,YAAY,0BAA0B,WAAW,EAAE;AAE3D,QACE,oBAACA;EACC,WAAW,GAAG,0BAA0B,UAAU;EAClD,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EACE;EACL,MAAK;EACL,GAAI,OAAO;EACF;EACT,GAAI;GACJ;EAEJ;AAEF,mBAAmB,cAAc;AACjC,iCAAe"}

package/dist/notification/notificationIcon.d.ts

@@ -8,4 +8,5 @@ import "../index.js";
 declare const NotificationIcon: VuiComponent<"svg", IconProps>;
 //#endregion
 export { NotificationIcon };
+
 //# sourceMappingURL=notificationIcon.d.ts.map

package/dist/notification/notificationIcon.js

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/notification/notificationIcon.tsx
 /** Displays an icon based on the status within the Notification. */
 const NotificationIcon = vui((props, ref) => {
-	const { className, alignSelf,...rest } = props;
+	const { className, alignSelf, ...rest } = props;
 	const mergedProps = {
 		...useNotificationContext(),
 		...props
@@ -36,5 +36,5 @@ var notificationIcon_default = NotificationIcon;
 
 //#endregion
 export { NotificationIcon, notificationIcon_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=notificationIcon.js.map

package/dist/notification/notificationIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationIcon.js","names":["Icon"],"sources":["../../src/notification/notificationIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { notificationStatusMapping } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an icon based on the status within the Notification. */\nexport const NotificationIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, alignSelf, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  const { status = '' } = mergedProps\n  const { iconProps } = notificationStatusMapping[status] ?? {}\n\n  const marginTop = alignSelf === 'center' ? '0' : '16px'\n\n  return (\n    <Icon\n      alignSelf={alignSelf}\n      className={cs('vui-notificationIcon', className)}\n      ml=\"16px\"\n      mt={marginTop}\n      ref={ref}\n      size=\"md\"\n      variant=\"loading\"\n      {...styles.icon}\n      {...iconProps}\n      {...rest}\n    />\n  )\n})\n\nNotificationIcon.displayName = 'NotificationIcon'\n\nexport default NotificationIcon\n"],"mappings":";;;;;;;;;;AAQA,MAAa,mBAAmB,KAAuB,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,UAAW,GAAG,SAAS;CAC1C,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,EAAE,cAAc,0BAA0B,WAAW,EAAE;CAE7D,MAAM,YAAY,cAAc,WAAW,MAAM;AAEjD,QACE,oBAACA;EACY;EACX,WAAW,GAAG,wBAAwB,UAAU;EAChD,IAAG;EACH,IAAI;EACC;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,iBAAiB,cAAc;AAE/B,+BAAe"}
+{"version":3,"file":"notificationIcon.js","names":["Icon"],"sources":["../../src/notification/notificationIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { notificationStatusMapping } from './consts'\nimport { useNotificationContext } from './context'\n\n/** Displays an icon based on the status within the Notification. */\nexport const NotificationIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, alignSelf, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  const { status = '' } = mergedProps\n  const { iconProps } = notificationStatusMapping[status] ?? {}\n\n  const marginTop = alignSelf === 'center' ? '0' : '16px'\n\n  return (\n    <Icon\n      alignSelf={alignSelf}\n      className={cs('vui-notificationIcon', className)}\n      ml=\"16px\"\n      mt={marginTop}\n      ref={ref}\n      size=\"md\"\n      variant=\"loading\"\n      {...styles.icon}\n      {...iconProps}\n      {...rest}\n    />\n  )\n})\n\nNotificationIcon.displayName = 'NotificationIcon'\n\nexport default NotificationIcon\n"],"mappings":";;;;;;;;;;AAQA,MAAa,mBAAmB,KAAuB,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,WAAW,GAAG,SAAS;CAC1C,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,OAAO;CACxB,MAAM,EAAE,cAAc,0BAA0B,WAAW,EAAE;CAE7D,MAAM,YAAY,cAAc,WAAW,MAAM;AAEjD,QACE,oBAACA;EACY;EACX,WAAW,GAAG,wBAAwB,UAAU;EAChD,IAAG;EACH,IAAI;EACC;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,iBAAiB,cAAc;AAE/B,+BAAe"}

package/dist/notification/notificationText.d.ts

@@ -8,4 +8,5 @@ import "../index.js";
 declare const NotificationText: VuiComponent<"p", TProps>;
 //#endregion
 export { NotificationText };
+
 //# sourceMappingURL=notificationText.d.ts.map