@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121328

package/dist/modal/modal.js

@@ -87,5 +87,5 @@ Modal.displayName = "Modal";
 
 //#endregion
 export { Modal as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=modal.js.map

package/dist/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":[],"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 mouseDownTargetRef = 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 (mouseDownTargetRef.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) => (mouseDownTargetRef.current = e.target)\n\n  const childProps = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation()\n      ;(children?.props as { onClick?: (e: MouseEvent) => void })?.onClick?.(e)\n    },\n    tabIndex: (children?.props as { tabIndex?: number })?.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,qBAAqB,OAA2B,KAAK;AAE3D,iBAAgB,UAAU,QAAQ,kBAAkB;AAEpD,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,mBAAmB,MAAkB;AACzC,IAAE,iBAAiB;AAGnB,MAAI,mBAAmB,YAAY,EAAE,OAAQ;AAE7C,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,mBAAmB,UAAU,EAAE;CAEvE,MAAM,aAAa;EACjB,UAAU,MAAkB;AAC1B,KAAE,iBAAiB;AAClB,IAAC,UAAU,QAAiD,UAAU,EAAE;;EAE3E,WAAW,UAAU,QAAiC,YAAY;EACnE;AAID,QACE,oBAAC;EAAc,OAHD;GAAE;GAAQ;GAAiB;GAAS;GAAM;GAAS;YAI/D,oBAAC;GAAsB;aACrB,qBAAC;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,oBAAC,kBAAgB,EACnC,oBAAC;KACC,WAAW,CAAC;KACG;KACE;KACjB,YAAY;KACZ,aAAa,CAAC;eAEd,oBAAC;MAAwB;MAAW,GAAI;gBACrC,aAAa,UAAU,WAAW;OACtB;MACL;KACR;IACC;GACK;EAElB;AAKF,MAAM,WAAW;AACjB,MAAM,UAAU;AAChB,MAAM,cAAc"}
+{"version":3,"file":"modal.js","names":[],"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 mouseDownTargetRef = 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 (mouseDownTargetRef.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) => (mouseDownTargetRef.current = e.target)\n\n  const childProps = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation()\n      ;(children?.props as { onClick?: (e: MouseEvent) => void })?.onClick?.(e)\n    },\n    tabIndex: (children?.props as { tabIndex?: number })?.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,qBAAqB,OAA2B,KAAK;AAE3D,iBAAgB,UAAU,QAAQ,kBAAkB;AAEpD,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,mBAAmB,MAAkB;AACzC,IAAE,iBAAiB;AAGnB,MAAI,mBAAmB,YAAY,EAAE,OAAQ;AAE7C,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,mBAAmB,UAAU,EAAE;CAEvE,MAAM,aAAa;EACjB,UAAU,MAAkB;AAC1B,KAAE,iBAAiB;AAClB,IAAC,UAAU,QAAiD,UAAU,EAAE;;EAE3E,WAAW,UAAU,QAAiC,YAAY;EACnE;AAID,QACE,oBAAC,eAAD;EAAe,OAHD;GAAE;GAAQ;GAAiB;GAAS;GAAM;GAAS;YAI/D,oBAAC,QAAD;GAAuB;aACrB,qBAAC,KAAD;IACE,WAAW,GAAG,aAAa,UAAU;IACrC,KAAK,UAAU,KAAK,SAAS;IAC7B,GAAI;IACJ,WAAW,QAAQ,MAAM,WAAW,UAAU;IAC9C,aAAa,QAAQ,MAAM,aAAa,YAAY;cALtD,CAOG,CAAC,gBAAgB,oBAAC,eAAD,EAAiB,GACnC,oBAAC,WAAD;KACE,WAAW,CAAC;KACG;KACE;KACjB,YAAY;KACZ,aAAa,CAAC;eAEd,oBAAC,cAAD;MAAyB;MAAW,GAAI;gBACrC,aAAa,UAAU,WAAW;MACtB;KACL,EACR;;GACC;EACK;EAElB;AAKF,MAAM,WAAW;AACjB,MAAM,UAAU;AAChB,MAAM,cAAc"}

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

@@ -1,9 +1,7 @@
 import { MouseEvent } from "../utils/types.js";
-import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { AnimationProp } from "../system/animations.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { FocusableElement } from "../focusLock/focusLock.types.js";
 import { ReactElement } from "react";
 

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

@@ -1 +1 @@
-{"version":3,"file":"modal.types.d.ts","names":[],"sources":["../../src/modal/modal.types.ts"],"mappings":";;;;;;;;;;KAOY,kBAAA,GAAqB,WAAA;AAAA,KAErB,iBAAA,GAAoB,WAAA;AAAA,KAEpB,YAAA,GAAe,IAAA,CAAK,UAAA;AAAA,KAEpB,UAAA,GAAa,WAAA,GACvB,YAAA;kFAEE,cAAA,YAT0B;EAW1B,SAAA,GAAY,aAAA,EAXiB;EAa7B,QAAA,EAAU,YAAA,EAXF;EAaR,YAAA,GAAe,iBAAA;EAEf,gBAAA,YAfuC;EAiBvC,oBAAA,YAfoB;EAiBpB,eAAA,YAjBuB;EAmBvB,aAAA,YAjBQ;EAmBR,kBAAA;EAEA,iBAAA,YApBF;EAsBE,gBAAA,YAhBU;EAkBV,aAAA,GAAgB,KAAA,CAAM,SAAA,CAAU,gBAAA,GAAA;EAEhC,YAAA,YAEkC;EAAlC,eAAA,GAAkB,KAAA,CAAM,SAAA,CAAU,gBAAA,GAIZ;EAFtB,MAAA,YAEgC;EAAhC,eAAA,IAAmB,CAAA,EAAG,UAAA,WAhCxB;EAkCE,OAAA,eA9BA;EAgCA,KAAA,eA9BA;EAgCA,iBAAA;AAAA"}
+{"version":3,"file":"modal.types.d.ts","names":[],"sources":["../../src/modal/modal.types.ts"],"mappings":";;;;;;;;KAOY,kBAAA,GAAqB,WAAA;AAAA,KAErB,iBAAA,GAAoB,WAAA;AAAA,KAEpB,YAAA,GAAe,IAAA,CAAK,UAAA;AAAA,KAEpB,UAAA,GAAa,WAAA,GACvB,YAAA;kFAEE,cAAA,YATQ;EAWR,SAAA,GAAY,aAAA;EAEZ,QAAA,EAAU,YAAA,EAb8B;EAexC,YAAA,GAAe,iBAAA,EAbU;EAezB,gBAAA,YAf4B;EAiB5B,oBAAA,YAfQ;EAiBR,eAAA;EAEA,aAAA,YAnBsC;EAqBtC,kBAAA,YAnBkB;EAqBlB,iBAAA,YArBqB;EAuBrB,gBAAA,YAlBY;EAoBZ,aAAA,GAAgB,KAAA,CAAM,SAAA,CAAU,gBAAA,GAhBjB;EAkBf,YAAA,YAFgB;EAIhB,eAAA,GAAkB,KAAA,CAAM,SAAA,CAAU,gBAAA,GAAhB;EAElB,MAAA,YAEgC;EAAhC,eAAA,IAAmB,CAAA,EAAG,UAAA,WAjCD;EAmCrB,OAAA,eAhCA;EAkCA,KAAA,eAhCY;EAkCZ,iBAAA;AAAA"}

package/dist/modal/modalBackdrop.d.ts

@@ -1,10 +1,10 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
-import "../index.js";
+import { SystemProps } from "../system/system.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/modal/modalBackdrop.d.ts
-declare const ModalBackdropBase: styled_components0.StyledComponent<"div", styled_components0.DefaultTheme, SystemProps, never>;
+declare const ModalBackdropBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /** Displays a dark overlay underneath modal content, but on top of page content. */
 declare const ModalBackdrop: VuiComponent<"div", SystemProps>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"modalBackdrop.d.ts","names":[],"sources":["../../src/modal/modalBackdrop.tsx"],"mappings":";;;;;;cASa,iBAAA,EAAiB,kBAAA,CAAA,eAAA,QAK7B,kBAAA,CAL6B,YAAA,EAAA,WAAA;;cAQjB,aAAA,EAAa,YAAA,QAaxB,WAAA"}
+{"version":3,"file":"modalBackdrop.d.ts","names":[],"sources":["../../src/modal/modalBackdrop.tsx"],"mappings":";;;;;;cASa,iBAAA,EAAiB,6BAAA,CAAA,oBAAA,QAK7B,kBAAA,CAL6B,QAAA;;cAQjB,aAAA,EAAa,YAAA,QAaxB,WAAA"}

package/dist/modal/modalBackdrop.js

@@ -31,5 +31,5 @@ ModalBackdrop.displayName = "ModalBackdrop";
 
 //#endregion
 export { ModalBackdropBase, ModalBackdrop as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.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,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"}
+{"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,mBAAD;EACE,WAAU;EACV,WAAW,GAAG,qBAAqB,UAAU;EACxC;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,cAAc,cAAc"}

package/dist/modal/modalContent.d.ts

@@ -1,10 +1,10 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
-import "../index.js";
+import { SystemProps } from "../system/system.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/modal/modalContent.d.ts
-declare const ModalContentBase: styled_components0.StyledComponent<"div", styled_components0.DefaultTheme, SystemProps, never>;
+declare const ModalContentBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /** Wraps the content provided to the Modal component. */
 declare const ModalContent: VuiComponent<"div", SystemProps>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"modalContent.d.ts","names":[],"sources":["../../src/modal/modalContent.tsx"],"mappings":";;;;;;cAKa,gBAAA,EAAgB,kBAAA,CAAA,eAAA,QAK5B,kBAAA,CAL4B,YAAA,EAAA,WAAA;;cAQhB,YAAA,EAAY,YAAA,QAevB,WAAA"}
+{"version":3,"file":"modalContent.d.ts","names":[],"sources":["../../src/modal/modalContent.tsx"],"mappings":";;;;;;cAKa,gBAAA,EAAgB,6BAAA,CAAA,oBAAA,QAK5B,kBAAA,CAL4B,QAAA;;cAQhB,YAAA,EAAY,YAAA,QAevB,WAAA"}

package/dist/modal/modalContent.js

@@ -31,5 +31,5 @@ ModalContent.displayName = "ModalContent";
 
 //#endregion
 export { ModalContentBase, ModalContent as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.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,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"}
+{"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,kBAAD;EACE,WAAW,GAAG,oBAAoB,UAAU;EACvC;EACL,UAAU;EACV,GAAI,OAAO;EACX,GAAI;EACJ,SAAS,QAAQ,MAAM,SAAS,gBAAgB;EAChD;EAEJ;AAEF,aAAa,cAAc"}

package/dist/modal/modalManager.js

@@ -29,5 +29,5 @@ function useModalManager(ref, isOpen, disableScrollLock) {
 
 //#endregion
 export { manager, useModalManager };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.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__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floating-ui.dom.d.ts","names":["AlignedPlacement","Alignment","ArrowOptions","ArrowOptions_2","AutoPlacementOptions","AutoPlacementOptions_2","Axis","ClientRectObject","ComputePositionConfig","ComputePositionConfig_2","ComputePositionReturn","Coords","DetectOverflowOptions","DetectOverflowOptions_2","Dimensions","ElementContext","ElementRects","FlipOptions","FlipOptions_2","getOverflowAncestors","HideOptions","HideOptions_2","InlineOptions","Length","LimitShiftOptions","Middleware","Middleware_2","MiddlewareData","MiddlewareReturn","MiddlewareState","MiddlewareState_2","Padding","Placement","Rect","RootBoundary","ShiftOptions","ShiftOptions_2","Side","SideObject","SizeOptions","SizeOptions_2","Strategy","arrow","Derivable","options","Omit","Element","Prettify","element","autoPlacement","autoUpdate","ReferenceElement","FloatingElement","AutoUpdateOptions","reference","floating","update","ancestorScroll","ancestorResize","elementResize","layoutShift","animationFrame","Boundary","Array","computePosition","Partial","Promise","Platform","middleware","platform","T","state","detectOverflow","boundary","Elements","flip","HTMLElement","hide","inline","limitShift","fn","Promisable","MiddlewareArguments","elements","NodeScroll","scrollLeft","scrollTop","offset","OffsetOptions","OffsetValue","mainAxis","crossAxis","alignmentAxis","Window","getElementRects","strategy","args","getClippingRect","rootBoundary","getDimensions","convertOffsetParentRelativeRectToViewportRelativeRect","rect","offsetParent","getOffsetParent","polyfill","isElement","value","getDocumentElement","getClientRects","isRTL","getScale","x","y","K","VirtualElement","shift","size","apply","availableWidth","availableHeight","DOMRectList","getBoundingClientRect","contextElement"],"sources":["../../../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts"],"x_google_ignoreList":[0],"mappings":";;;;;;;;kBA6VyBkH,cAAAA;EACrBO,qBAAAA,IAAyBlH,gBAAAA;EACzBqG,cAAAA,KAAmB7C,KAAAA,CAAMxD,gBAAAA,IAAoBiH,WAAAA;EAC7CE,cAAAA,GAAiB5E,OAAAA;AAAAA"}
+{"version":3,"file":"floating-ui.dom.d.ts","names":["AlignedPlacement","Alignment","ArrowOptions","ArrowOptions_2","AutoPlacementOptions","AutoPlacementOptions_2","Axis","ClientRectObject","ComputePositionConfig","ComputePositionConfig_2","ComputePositionReturn","Coords","detectOverflow","detectOverflow_2","DetectOverflowOptions","DetectOverflowOptions_2","Dimensions","ElementContext","ElementRects","FlipOptions","FlipOptions_2","getOverflowAncestors","HideOptions","HideOptions_2","InlineOptions","Length","LimitShiftOptions","Middleware","Middleware_2","MiddlewareData","MiddlewareReturn","MiddlewareState","MiddlewareState_2","Padding","Placement","Rect","RootBoundary","ShiftOptions","ShiftOptions_2","Side","SideObject","SizeOptions","SizeOptions_2","Strategy","arrow","Derivable","options","Omit","Element","Prettify","element","autoPlacement","autoUpdate","ReferenceElement","FloatingElement","AutoUpdateOptions","reference","floating","update","ancestorScroll","ancestorResize","elementResize","layoutShift","animationFrame","Boundary","Array","computePosition","Partial","Promise","Platform","middleware","platform","T","state","boundary","Elements","flip","HTMLElement","hide","inline","limitShift","fn","Promisable","MiddlewareArguments","elements","NodeScroll","scrollLeft","scrollTop","offset","OffsetOptions","OffsetValue","mainAxis","crossAxis","alignmentAxis","Window","getElementRects","strategy","args","getClippingRect","rootBoundary","getDimensions","convertOffsetParentRelativeRectToViewportRelativeRect","rect","offsetParent","getOffsetParent","polyfill","isElement","value","getDocumentElement","getClientRects","isRTL","getScale","x","y","K","VirtualElement","shift","size","apply","availableWidth","availableHeight","DOMRectList","getBoundingClientRect","contextElement"],"sources":["../../../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts"],"x_google_ignoreList":[0],"mappings":";;;;;;;;kBA+VyBmH,cAAAA;EACrBO,qBAAAA,IAAyBnH,gBAAAA;EACzBsG,cAAAA,KAAmB5C,KAAAA,CAAM1D,gBAAAA,IAAoBkH,WAAAA;EAC7CE,cAAAA,GAAiB3E,OAAAA;AAAAA"}

package/dist/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.d.ts

@@ -1,8 +1,6 @@
 import { AlignedPlacement, Alignment, Axis, ClientRectObject, Coords, Dimensions, Length, Placement, Rect, Side, SideObject, Strategy } from "../../utils/dist/floating-ui.utils.js";
 import { MiddlewareData } from "../../core/dist/floating-ui.core.js";
 import { VirtualElement } from "../../dom/dist/floating-ui.dom.js";
-import "react";
-
 //#region ../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.d.mts
 declare type ReferenceType = Element | VirtualElement;
 //#endregion

package/dist/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floating-ui.react-dom.d.ts","names":["AlignedPlacement","Alignment","AutoPlacementOptions","autoUpdate","AutoUpdateOptions","Axis","Boundary","ClientRectObject","computePosition","ComputePositionConfig","ComputePositionReturn","Coords","Derivable","detectOverflow","DetectOverflowOptions","Dimensions","ElementContext","ElementRects","Elements","FlipOptions","FloatingElement","getOverflowAncestors","HideOptions","InlineOptions","Length","LimitShiftOptions","Middleware","MiddlewareArguments","MiddlewareData","MiddlewareReturn","MiddlewareState","NodeScroll","OffsetOptions","Padding","Placement","Platform","platform","React","Rect","ReferenceElement","RootBoundary","ShiftOptions","Side","SideObject","SizeOptions","Strategy","VirtualElement","arrow","ArrowOptions","DependencyList","options","deps","Element","MutableRefObject","element","padding","autoPlacement","flip","hide","inline","limitShift","fn","state","offset","Prettify","T","K","ReferenceType","shift","size","useFloating","RT","UseFloatingOptions","UseFloatingReturn","UseFloatingData","isPositioned","Partial","HTMLElement","whileElementsMounted","reference","floating","update","elements","open","transform","CSSProperties","floatingStyles","refs","setReference","node","setFloating"],"sources":["../../../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.d.mts"],"x_google_ignoreList":[0],"mappings":";;;;;;aAqMoBmE,aAAAA,GAAgBf,OAAAA,GAAUN,cAAAA"}
+{"version":3,"file":"floating-ui.react-dom.d.ts","names":["AlignedPlacement","Alignment","AutoPlacementOptions","autoUpdate","AutoUpdateOptions","Axis","Boundary","ClientRectObject","computePosition","ComputePositionConfig","ComputePositionReturn","Coords","Derivable","detectOverflow","DetectOverflowOptions","Dimensions","ElementContext","ElementRects","Elements","FlipOptions","FloatingElement","getOverflowAncestors","HideOptions","InlineOptions","Length","LimitShiftOptions","Middleware","MiddlewareArguments","MiddlewareData","MiddlewareReturn","MiddlewareState","NodeScroll","OffsetOptions","Padding","Placement","Platform","platform","React","Rect","ReferenceElement","RootBoundary","ShiftOptions","Side","SideObject","SizeOptions","Strategy","VirtualElement","arrow","ArrowOptions","DependencyList","options","deps","Element","MutableRefObject","element","padding","autoPlacement","flip","hide","inline","limitShift","fn","state","offset","Prettify","T","K","ReferenceType","shift","size","useFloating","RT","UseFloatingOptions","UseFloatingReturn","UseFloatingData","isPositioned","Partial","HTMLElement","whileElementsMounted","reference","floating","update","elements","open","transform","CSSProperties","floatingStyles","refs","setReference","node","setFloating"],"sources":["../../../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.d.mts"],"x_google_ignoreList":[0],"mappings":";;;;aAqMoBmE,aAAAA,GAAgBf,OAAAA,GAAUN,cAAAA"}

package/dist/notification/consts.js

@@ -1,7 +1,6 @@
 import { iconDictionary } from "../message/consts.js";
 
 //#region src/notification/consts.ts
-const bannerNotificationElevation = 2;
 const notificationStatusMapping = {
 	error: {
 		iconProps: { name: iconDictionary.error },
@@ -13,7 +12,7 @@ const notificationStatusMapping = {
 	},
 	loading: {
 		iconProps: {
-			name: "fadSpinnerThird",
+			name: "uiSpinnerThird",
 			pathFill: ["blue.40", "blue.60"],
 			variant: "spinning"
 		},
@@ -37,7 +36,7 @@ const notificationStatusMapping = {
 	},
 	bannerLoading: {
 		iconProps: {
-			name: "fadSpinnerThird",
+			name: "uiSpinnerThird",
 			pathFill: ["blue.40", "blue.60"],
 			variant: "spinning"
 		},
@@ -52,18 +51,8 @@ const notificationStatusMapping = {
 		variant: "bannerYellow"
 	}
 };
-const closeButtonVariantMapping = {
-	subtleRed: "subtleRed",
-	subtleBlue: "subtleBlue",
-	subtleGreen: "subtleGreen",
-	subtleYellow: "subtleYellow",
-	bannerRed: "subtleRed",
-	bannerBlue: "subtleBlue",
-	bannerGreen: "subtleGreen",
-	bannerYellow: "subtleYellow"
-};
 
 //#endregion
-export { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping };
-globalThis.__vuiVersion__ = "4.0.3"
+export { notificationStatusMapping };
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/notification/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/notification/consts.ts"],"sourcesContent":["import { iconDictionary } from '../message/consts'\nimport type { NotificationStatusMapping } from './notification.types'\n\nexport const bannerNotificationElevation = 2\n\nexport const notificationStatusMapping: NotificationStatusMapping = {\n  error: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'subtleRed',\n  },\n  info: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'subtleBlue',\n  },\n  loading: {\n    iconProps: {\n      name: 'fadSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'subtleBlue',\n  },\n  success: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'subtleGreen',\n  },\n  warning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'subtleYellow',\n  },\n  bannerError: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'bannerRed',\n  },\n  bannerInfo: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'bannerBlue',\n  },\n  bannerLoading: {\n    iconProps: {\n      name: 'fadSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'bannerBlue',\n  },\n  bannerSuccess: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'bannerGreen',\n  },\n  bannerWarning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'bannerYellow',\n  },\n}\n\nexport const closeButtonVariantMapping = {\n  subtleRed: 'subtleRed',\n  subtleBlue: 'subtleBlue',\n  subtleGreen: 'subtleGreen',\n  subtleYellow: 'subtleYellow',\n  bannerRed: 'subtleRed',\n  bannerBlue: 'subtleBlue',\n  bannerGreen: 'subtleGreen',\n  bannerYellow: 'subtleYellow',\n}\n"],"mappings":";;;AAGA,MAAa,8BAA8B;AAE3C,MAAa,4BAAuD;CAClE,OAAO;EACL,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,MAAM;EACJ,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,aAAa;EACX,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,YAAY;EACV,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACF;AAED,MAAa,4BAA4B;CACvC,WAAW;CACX,YAAY;CACZ,aAAa;CACb,cAAc;CACd,WAAW;CACX,YAAY;CACZ,aAAa;CACb,cAAc;CACf"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/notification/consts.ts"],"sourcesContent":["import { iconDictionary } from '../message/consts'\nimport type { NotificationStatusMapping } from './notification.types'\n\nexport const bannerNotificationElevation = 2\n\nexport const notificationStatusMapping: NotificationStatusMapping = {\n  error: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'subtleRed',\n  },\n  info: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'subtleBlue',\n  },\n  loading: {\n    iconProps: {\n      name: 'uiSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'subtleBlue',\n  },\n  success: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'subtleGreen',\n  },\n  warning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'subtleYellow',\n  },\n  bannerError: {\n    iconProps: {\n      name: iconDictionary.error,\n    },\n    variant: 'bannerRed',\n  },\n  bannerInfo: {\n    iconProps: {\n      name: iconDictionary.info,\n    },\n    variant: 'bannerBlue',\n  },\n  bannerLoading: {\n    iconProps: {\n      name: 'uiSpinnerThird',\n      pathFill: ['blue.40', 'blue.60'],\n      variant: 'spinning',\n    },\n    variant: 'bannerBlue',\n  },\n  bannerSuccess: {\n    iconProps: {\n      name: iconDictionary.success,\n    },\n    variant: 'bannerGreen',\n  },\n  bannerWarning: {\n    iconProps: {\n      name: iconDictionary.warning,\n    },\n    variant: 'bannerYellow',\n  },\n}\n"],"mappings":";;;AAKA,MAAa,4BAAuD;CAClE,OAAO;EACL,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,MAAM;EACJ,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,SAAS;EACP,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,aAAa;EACX,WAAW,EACT,MAAM,eAAe,OACtB;EACD,SAAS;EACV;CACD,YAAY;EACV,WAAW,EACT,MAAM,eAAe,MACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW;GACT,MAAM;GACN,UAAU,CAAC,WAAW,UAAU;GAChC,SAAS;GACV;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACD,eAAe;EACb,WAAW,EACT,MAAM,eAAe,SACtB;EACD,SAAS;EACV;CACF"}

package/dist/notification/context.js

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

package/dist/notification/index.d.ts

@@ -1,5 +1,6 @@
 import { NotificationProps, NotificationStatus, NotificationStatusMapping, NotificationVariant } from "./notification.types.js";
 import { NotificationProvider, useNotificationContext } from "./context.js";
+import { NotificationAction } from "./notificationAction.js";
 import { NotificationButton } from "./notificationButton.js";
 import { NotificationIcon } from "./notificationIcon.js";
 import { NotificationText } from "./notificationText.js";

package/dist/notification/notification.d.ts

@@ -1,6 +1,6 @@
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 import { NotificationProps } from "./notification.types.js";
+import { NotificationAction } from "./notificationAction.js";
 import { NotificationButton } from "./notificationButton.js";
 import { NotificationIcon } from "./notificationIcon.js";
 import { NotificationText } from "./notificationText.js";
@@ -12,6 +12,7 @@ import { NotificationTitle } from "./notificationTitle.js";
  * Handles multiple states, like info, error or loading.
  */
 declare const Notification: VuiComponent<"div", NotificationProps> & {
+  Action: typeof NotificationAction;
   Button: typeof NotificationButton;
   Icon: typeof NotificationIcon;
   Text: typeof NotificationText;

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

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;;AAgBA;cAAa,YAAA,EAgEP,YAAA,QAAoB,iBAAA;EACxB,MAAA,SAAe,kBAAA;EACf,IAAA,SAAa,gBAAA;EACb,IAAA,SAAa,gBAAA;EACb,KAAA,SAAc,iBAAA;AAAA"}
+{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;;AAiBA;cAAa,YAAA,EAsEP,YAAA,QAAoB,iBAAA;EACxB,MAAA,SAAe,kBAAA;EACf,MAAA,SAAe,kBAAA;EACf,IAAA,SAAa,gBAAA;EACb,IAAA,SAAa,gBAAA;EACb,KAAA,SAAc,iBAAA;AAAA"}

package/dist/notification/notification.js

@@ -5,7 +5,8 @@ import { useStyleConfig } from "../core/theme.js";
 import vui from "../core/vui.js";
 import Box from "../box/box.js";
 import { NotificationProvider } from "./context.js";
-import { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from "./consts.js";
+import { notificationStatusMapping } from "./consts.js";
+import NotificationAction from "./notificationAction.js";
 import NotificationButton from "./notificationButton.js";
 import NotificationIcon from "./notificationIcon.js";
 import NotificationText from "./notificationText.js";
@@ -24,28 +25,35 @@ const Notification = vui((props, ref) => {
 		...statusMapping
 	};
 	const { variant = variantProp } = statuses[status ?? ""] ?? {};
+	const isBanner = variant?.startsWith("banner");
+	const baseVariant = isBanner ? variant.replace("banner", "subtle") : variant;
 	const styles = useStyleConfig("Notification", {
-		variant,
-		...props
+		variant: baseVariant,
+		size
 	});
 	const iconName = isString(icon) ? icon : statuses[status ?? ""]?.iconProps?.name;
 	const context = filterUndefined({
 		size,
-		status
+		status,
+		variant: baseVariant
 	});
 	const titleDisplay = action ? "block" : "inline";
 	const alignSelf = verticalAlign === "center" ? "center" : "flex-start";
+	const bannerOverrides = isBanner ? {
+		borderColor: styles.container?.bg,
+		elevation: 2
+	} : {};
 	return /* @__PURE__ */ jsx(NotificationProvider, {
 		value: context,
 		children: /* @__PURE__ */ jsxs(Box, {
 			borderRadius: "md",
 			borderWidth: 1,
 			className: cs("vui-notification", className),
-			elevation: variant.includes("banner") ? bannerNotificationElevation : void 0,
 			ref,
 			role: "mark",
 			w: "fit-content",
 			...styles.container,
+			...bannerOverrides,
 			...rest,
 			children: [
 				iconName ? /* @__PURE__ */ jsx(NotificationIcon, {
@@ -63,19 +71,19 @@ const Notification = vui((props, ref) => {
 						text
 					]
 				}),
-				action,
-				onClose && /* @__PURE__ */ jsx(NotificationButton, {
+				action ? /* @__PURE__ */ jsx(NotificationAction, { children: action }) : null,
+				onClose ? /* @__PURE__ */ jsx(NotificationButton, {
 					alignSelf,
 					"aria-label": "close",
 					icon: "uiTimes",
 					onClick: onClose,
-					variant: closeButtonVariantMapping?.[variant] ?? variant,
-					w: "32px"
-				})
+					w: 4
+				}) : null
 			]
 		})
 	});
 });
+Notification.Action = NotificationAction;
 Notification.Button = NotificationButton;
 Notification.Icon = NotificationIcon;
 Notification.Text = NotificationText;
@@ -84,5 +92,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=notification.js.map

package/dist/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":[],"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,qBAAC;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,oBAAC;KAA4B;KAAW,MAAM;MAAY,GAAG;IAExE,YACC,qBAAC;KAA4B;;MAC1B,YAAY,MAAM,GAAG,oBAAC;OAAkB,SAAS;OAAc,MAAM;QAAS,GAAG;MAAM;MAAE;;MACzE;IAGpB;IAEA,WACC,oBAAC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS;KACT,SAAS,4BAA4B,YAAY;KACjD,GAAE;MACF;;IAEA;GACe;EAEzB;AAOF,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,OAAO;AACpB,aAAa,QAAQ;AACrB,aAAa,cAAc"}
+{"version":3,"file":"notification.js","names":[],"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 { notificationStatusMapping } from './consts'\nimport { NotificationProvider } from './context'\nimport type { NotificationProps } from './notification.types'\nimport NotificationAction from './notificationAction'\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\n  const statuses = { ...notificationStatusMapping, ...statusMapping }\n  const { variant = variantProp } = statuses[status ?? ''] ?? {}\n\n  // Map banner variants to their subtle counterparts\n  const isBanner = variant?.startsWith('banner')\n  const baseVariant = isBanner ? (variant.replace('banner', 'subtle') as any) : variant\n\n  const styles = useStyleConfig('Notification', { variant: baseVariant, size })\n\n  const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name\n\n  const context = filterUndefined<NotificationProps>({ size, status, variant: baseVariant })\n\n  const titleDisplay = action ? 'block' : 'inline'\n\n  const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start'\n\n  // Banner overrides: hide border and add elevation\n  const bannerOverrides = isBanner\n    ? {\n        borderColor: styles.container?.bg,\n        elevation: 2,\n      }\n    : {}\n\n  return (\n    <NotificationProvider value={context}>\n      <Box\n        borderRadius=\"md\"\n        borderWidth={1}\n        className={cs('vui-notification', className)}\n        ref={ref}\n        role=\"mark\"\n        w=\"fit-content\"\n        {...styles.container}\n        {...bannerOverrides}\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        {action ? <NotificationAction>{action}</NotificationAction> : null}\n\n        {onClose ? (\n          <NotificationButton alignSelf={alignSelf} aria-label=\"close\" icon=\"uiTimes\" onClick={onClose} w={4} />\n        ) : null}\n      </Box>\n    </NotificationProvider>\n  )\n}) as VuiComponent<'div', NotificationProps> & {\n  Action: typeof NotificationAction\n  Button: typeof NotificationButton\n  Icon: typeof NotificationIcon\n  Text: typeof NotificationText\n  Title: typeof NotificationTitle\n}\n\nNotification.Action = NotificationAction\nNotification.Button = NotificationButton\nNotification.Icon = NotificationIcon\nNotification.Text = NotificationText\nNotification.Title = NotificationTitle\nNotification.displayName = 'Notification'\n\nexport default Notification\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiBA,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;CAEJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;EAAe;CACnE,MAAM,EAAE,UAAU,gBAAgB,SAAS,UAAU,OAAO,EAAE;CAG9D,MAAM,WAAW,SAAS,WAAW,SAAS;CAC9C,MAAM,cAAc,WAAY,QAAQ,QAAQ,UAAU,SAAS,GAAW;CAE9E,MAAM,SAAS,eAAe,gBAAgB;EAAE,SAAS;EAAa;EAAM,CAAC;CAE7E,MAAM,WAAW,SAAS,KAAK,GAAG,OAAO,SAAS,UAAU,KAAK,WAAW;CAE5E,MAAM,UAAU,gBAAmC;EAAE;EAAM;EAAQ,SAAS;EAAa,CAAC;CAE1F,MAAM,eAAe,SAAS,UAAU;CAExC,MAAM,YAAY,kBAAkB,WAAW,WAAW;CAG1D,MAAM,kBAAkB,WACpB;EACE,aAAa,OAAO,WAAW;EAC/B,WAAW;EACZ,GACD,EAAE;AAEN,QACE,oBAAC,sBAAD;EAAsB,OAAO;YAC3B,qBAAC,KAAD;GACE,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,UAAU;GACvC;GACL,MAAK;GACL,GAAE;GACF,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;aATN;IAWG,WAAW,oBAAC,kBAAD;KAA6B;KAAW,MAAM;KAAY,IAAG;IAExE,YACC,qBAAC,kBAAD;KAA6B;eAA7B;MACG,YAAY,MAAM,GAAG,oBAAC,mBAAD;OAAmB,SAAS;OAAc,MAAM;OAAS,IAAG;MAAM;MAAE;MACzE;;IAEpB,SAAS,oBAAC,oBAAD,YAAqB,QAA4B,IAAG;IAE7D,UACC,oBAAC,oBAAD;KAA+B;KAAW,cAAW;KAAQ,MAAK;KAAU,SAAS;KAAS,GAAG;KAAK,IACpG;IACA;;EACe;EAEzB;AAQF,aAAa,SAAS;AACtB,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,OAAO;AACpB,aAAa,QAAQ;AACrB,aAAa,cAAc"}

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

@@ -1,12 +1,10 @@
 import { ThemingProps } from "../theme/types.js";
 import { IconProp, IconProps } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
 import { JSX, ReactNode } from "react";
 
 //#region src/notification/notification.types.d.ts
-type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Notification'> & {
+type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<'Notification'>, 'variant'> & {
   /** Socket displaying a button on the right. */action?: ReactNode; /** Available theme colors for this component. @deprecated */
   colorScheme?: 'blue' | 'green' | 'red' | 'yellow'; /** Socket displaying an icon on the left. */
   icon?: IconProp | JSX.Element; /** When provided, displays a close button with this function as the callback. */
@@ -14,13 +12,14 @@ type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Noti
   status?: NotificationStatus; /** Object definition of styles and content for each status. */
   statusMapping?: NotificationStatusMapping; /** Socket displaying text in the middle. */
   text?: ReactNode; /** Socket displaying title in the middle. */
-  title?: ReactNode;
+  title?: ReactNode; /** The notification variant. */
+  variant?: NotificationVariant;
 };
 type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'warning' | 'bannerError' | 'bannerInfo' | 'bannerLoading' | 'bannerSuccess' | 'bannerWarning';
 type NotificationVariant = 'subtleBlue' | 'subtleRed' | 'subtleYellow' | 'subtleGreen' | 'bannerBlue' | 'bannerRed' | 'bannerYellow' | 'bannerGreen';
 type NotificationStatusMapping = Record<string, {
   iconProps: IconProps;
-  variant?: NotificationProps['variant'];
+  variant?: NotificationVariant;
 }>;
 //#endregion
 export { NotificationProps, NotificationStatus, NotificationStatusMapping, NotificationVariant };

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

@@ -1 +1 @@
-{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"mappings":";;;;;;;;KAMY,iBAAA,GAAoB,IAAA,CAAK,QAAA,wBACnC,YAAA;iDAEE,MAAA,GAAS,SAAA;EAET,WAAA,wCALyB;EAOzB,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA,EAPW;EASjC,OAAA,eARF;EAUE,MAAA,GAAS,kBAAA,EAJF;EAMP,aAAA,GAAgB,yBAAA,EAFP;EAIT,IAAA,GAAO,SAAA,EAAA;EAEP,KAAA,GAAQ,SAAA;AAAA;AAAA,KAGA,kBAAA;AAAA,KAYA,mBAAA;AAAA,KAUA,yBAAA,GAA4B,MAAA;EAGpC,SAAA,EAAW,SAAA;EACX,OAAA,GAAU,iBAAA;AAAA"}
+{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"mappings":";;;;;;KAMY,iBAAA,GAAoB,IAAA,CAAK,QAAA,wBACnC,IAAA,CAAK,YAAA;iDAEH,MAAA,GAAS,SAAA;EAET,WAAA,wCALQ;EAOR,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA;EAEtB,OAAA,eAT4B;EAW5B,MAAA,GAAS,kBAAA,EAVX;EAYE,aAAA,GAAgB,yBAAA,EANT;EAQP,IAAA,GAAO,SAAA,EAJE;EAMT,KAAA,GAAQ,SAAA,EAFD;EAIP,OAAA,GAAU,mBAAA;AAAA;AAAA,KAGF,kBAAA;AAAA,KAYA,mBAAA;AAAA,KAUA,yBAAA,GAA4B,MAAA;EAGpC,SAAA,EAAW,SAAA;EACX,OAAA,GAAU,mBAAA;AAAA"}

package/dist/notification/notificationAction.d.ts

@@ -0,0 +1,9 @@
+import { VuiComponent } from "../core/vui.js";
+import { BoxProps } from "../box/box.types.js";
+//#region src/notification/notificationAction.d.ts
+/** Displays an action button within the Notification. */
+declare const NotificationAction: VuiComponent<"div", BoxProps>;
+//#endregion
+export { NotificationAction };
+
+//# sourceMappingURL=notificationAction.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notificationAction.d.ts","names":[],"sources":["../../src/notification/notificationAction.tsx"],"mappings":";;;;cASa,kBAAA,EAAkB,YAAA,QAAA,QAAA"}

package/dist/notification/notificationAction.js

@@ -0,0 +1,38 @@
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import vui from "../core/vui.js";
+import Box from "../box/box.js";
+import { useNotificationContext } from "./context.js";
+import { cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/notification/notificationAction.tsx
+/** Displays an action button within the Notification. */
+const NotificationAction = vui((props, ref) => {
+	const { children, className, ...rest } = props;
+	const styles = useStyleConfig("Notification", useNotificationContext());
+	const enhancedChild = isValidElement(children) && typeof children.type !== "string" ? cloneElement(children, {
+		size: "md",
+		bg: styles.action?.bg,
+		borderColor: styles.action?.borderColor,
+		color: styles.action?.color,
+		hoverBg: styles.action?.hoverBg,
+		hoverColor: styles.action?.hoverColor,
+		activeBg: styles.action?.activeBg,
+		activeColor: styles.action?.activeColor,
+		...children.props
+	}) : children;
+	return /* @__PURE__ */ jsx(Box, {
+		className: cs("vui-notificationAction", className),
+		ref,
+		...styles.actionBox,
+		...rest,
+		children: enhancedChild
+	});
+});
+NotificationAction.displayName = "NotificationAction";
+
+//#endregion
+export { NotificationAction as default };
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
+//# sourceMappingURL=notificationAction.js.map

package/dist/notification/notificationAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notificationAction.js","names":[],"sources":["../../src/notification/notificationAction.tsx"],"sourcesContent":["import { cloneElement, isValidElement } from 'react'\n\nimport Box from '../box'\nimport type { BoxProps } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationAction = vui<'div', BoxProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  // Clone child and apply color overrides from notification theme\n  const enhancedChild =\n    isValidElement(children) && typeof children.type !== 'string'\n      ? cloneElement(children as any, {\n          size: 'md',\n          bg: styles.action?.bg,\n          borderColor: styles.action?.borderColor,\n          color: styles.action?.color,\n          hoverBg: styles.action?.hoverBg,\n          hoverColor: styles.action?.hoverColor,\n          activeBg: styles.action?.activeBg,\n          activeColor: styles.action?.activeColor,\n          ...(children.props as any),\n        })\n      : children\n\n  return (\n    <Box className={cs('vui-notificationAction', className)} ref={ref} {...styles.actionBox} {...rest}>\n      {enhancedChild}\n    </Box>\n  )\n})\n\nNotificationAction.displayName = 'NotificationAction'\nexport default NotificationAction\n"],"mappings":";;;;;;;;;;AASA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAGvE,MAAM,gBACJ,eAAe,SAAS,IAAI,OAAO,SAAS,SAAS,WACjD,aAAa,UAAiB;EAC5B,MAAM;EACN,IAAI,OAAO,QAAQ;EACnB,aAAa,OAAO,QAAQ;EAC5B,OAAO,OAAO,QAAQ;EACtB,SAAS,OAAO,QAAQ;EACxB,YAAY,OAAO,QAAQ;EAC3B,UAAU,OAAO,QAAQ;EACzB,aAAa,OAAO,QAAQ;EAC5B,GAAI,SAAS;EACd,CAAC,GACF;AAEN,QACE,oBAAC,KAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;EAAO;EAAK,GAAI,OAAO;EAAW,GAAI;YAC1F;EACG;EAER;AAEF,mBAAmB,cAAc"}

package/dist/notification/notificationButton.d.ts

@@ -1,8 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { ButtonProps } from "../button/button.types.js";
-import "../button/index.js";
-import "../index.js";
-
 //#region src/notification/notificationButton.d.ts
 /** Displays an action button within the Notification. */
 declare const NotificationButton: VuiComponent<"button", ButtonProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"notificationButton.d.ts","names":[],"sources":["../../src/notification/notificationButton.tsx"],"mappings":";;;;;;;cAQa,kBAAA,EAAkB,YAAA,WAAA,WAAA"}
+{"version":3,"file":"notificationButton.d.ts","names":[],"sources":["../../src/notification/notificationButton.tsx"],"mappings":";;;;cAOa,kBAAA,EAAkB,YAAA,WAAA,WAAA"}

package/dist/notification/notificationButton.js

@@ -2,7 +2,6 @@ import { cs } from "../utils/styles.js";
 import { useStyleConfig } from "../core/theme.js";
 import vui from "../core/vui.js";
 import { useNotificationContext } from "./context.js";
-import { notificationStatusMapping } from "./consts.js";
 import Button from "../button/button.js";
 import { jsx } from "react/jsx-runtime";
 
@@ -10,24 +9,14 @@ import { jsx } from "react/jsx-runtime";
 /** Displays an action button within the Notification. */
 const NotificationButton = vui((props, ref) => {
 	const { className, ...rest } = props;
-	const mergedProps = {
-		...useNotificationContext(),
-		...props
-	};
 	const styles = useStyleConfig("Notification", useNotificationContext());
-	const { status = "" } = mergedProps;
-	const { variant } = notificationStatusMapping[status] ?? {};
 	return /* @__PURE__ */ jsx(Button, {
 		className: cs("vui-notificationButton", className),
-		ml: "0px",
-		mr: "16px",
-		my: "16px",
-		px: "12px",
-		py: "6px",
 		ref,
 		size: "md",
+		variant: "tertiary",
+		intent: "brand",
 		...styles.button,
-		variant,
 		...rest
 	});
 });
@@ -35,5 +24,5 @@ NotificationButton.displayName = "NotificationButton";
 
 //#endregion
 export { NotificationButton as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=notificationButton.js.map

package/dist/notification/notificationButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationButton.js","names":[],"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,oBAAC;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"}
+{"version":3,"file":"notificationButton.js","names":[],"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 { 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 styles = useStyleConfig('Notification', useNotificationContext())\n\n  return (\n    <Button\n      className={cs('vui-notificationButton', className)}\n      ref={ref}\n      size=\"md\"\n      variant=\"tertiary\"\n      intent=\"brand\"\n      {...styles.button}\n      {...rest}\n    />\n  )\n})\n\nNotificationButton.displayName = 'NotificationButton'\nexport default NotificationButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAA4B,OAAO,QAAQ;CAC3E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;AAEvE,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,0BAA0B,UAAU;EAC7C;EACL,MAAK;EACL,SAAQ;EACR,QAAO;EACP,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,mBAAmB,cAAc"}

package/dist/notification/notificationIcon.d.ts

@@ -1,8 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { IconProps } from "../icon/icon.types.js";
-import "../icon/index.js";
-import "../index.js";
-
 //#region src/notification/notificationIcon.d.ts
 /** Displays an icon based on the status within the Notification. */
 declare const NotificationIcon: VuiComponent<"svg", IconProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"notificationIcon.d.ts","names":[],"sources":["../../src/notification/notificationIcon.tsx"],"mappings":";;;;;;;cAQa,gBAAA,EAAgB,YAAA,QAAA,SAAA"}
+{"version":3,"file":"notificationIcon.d.ts","names":[],"sources":["../../src/notification/notificationIcon.tsx"],"mappings":";;;;cAQa,gBAAA,EAAgB,YAAA,QAAA,SAAA"}

package/dist/notification/notificationIcon.js

@@ -21,7 +21,6 @@ const NotificationIcon = vui((props, ref) => {
 	return /* @__PURE__ */ jsx(Icon, {
 		alignSelf,
 		className: cs("vui-notificationIcon", className),
-		ml: "16px",
 		mt: marginTop,
 		ref,
 		size: "md",
@@ -35,5 +34,5 @@ NotificationIcon.displayName = "NotificationIcon";
 
 //#endregion
 export { NotificationIcon as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=notificationIcon.js.map