@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121328

package/dist/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Modal } from '../modal'\nimport { cs, isJsx, isReactText, random, useIds } from '../utils'\nimport { modalAnimation, modalJustifyContent } from './consts'\nimport { DialogProvider } from './context'\nimport type { DialogProps } from './dialog.types'\nimport DialogBody from './dialogBody'\nimport DialogCancelButton from './dialogCancelButton'\nimport DialogCloseButton from './dialogCloseButton'\nimport DialogFooter from './dialogFooter'\nimport DialogHeader from './dialogHeader'\nimport DialogIcon from './dialogIcon'\nimport DialogSubmitButton from './dialogSubmitButton'\nimport DialogTitle from './dialogTitle'\n\nexport const DialogBase = styled.divBox`\n  background-color: white;\n  border-radius: 1px;\n  box-shadow: modal;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`\n\n/**\n * Displays content in a Modal window. Includes required accessibility configuration.\n *\n * Dialog is built upon `Modal`.\n *\n * The content can include important information, like warnings or errors, simple forms or prompts for user's decision. It blocks interaction with the rest of the page, but often can be disabled by pressing Escape, clicking on the backdrop or close button.\n */\nexport const Dialog = vui<'div', DialogProps>((props, ref) => {\n  const {\n    body: bodyProp,\n    cancelButton,\n    children,\n    className,\n    closeButton,\n    disableBackdropClose,\n    footer,\n    header,\n    icon,\n    id,\n    isOpen,\n    modalProps: modalPropsProp,\n    placement = 'center',\n    onClose,\n    size,\n    status,\n    submitButton,\n    title,\n    variant,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Dialog', props)\n\n  const idRef = useRef(id ?? random().toString())\n  const [dialogId, bodyId, titleId] = useIds(idRef.current, ['dialog', 'dialog-body', 'dialog-title'])\n\n  const body = isReactText(bodyProp) ? { children: bodyProp } : bodyProp\n  const showHeader = Boolean(header || closeButton || icon || title)\n  const showFooter = Boolean(footer || cancelButton || submitButton)\n\n  const ariaProps = {\n    'aria-describedby': bodyId,\n    'aria-labelledby': titleId,\n  }\n\n  const modalProps = {\n    animation: modalAnimation[placement as keyof typeof modalAnimation],\n    contentProps: {\n      alignItems: placement === 'center' ? 'center' : 'auto',\n      justifyContent: modalJustifyContent[placement as keyof typeof modalJustifyContent],\n      ...modalPropsProp?.contentProps,\n    },\n    ...modalPropsProp,\n  }\n\n  const context = { bodyId, icon, isOpen, onClose, size, status, titleId, variant }\n\n  return (\n    <DialogProvider value={context}>\n      <Modal {...{ isOpen, onClose }} {...{ ...modalProps, disableBackdropClose }}>\n        <DialogBase\n          className={cs('vui-dialog', className)}\n          id={dialogId}\n          maxH={placement === 'center' ? 'calc(100vh - 32px)' : '100%'}\n          ref={ref}\n          role=\"dialog\"\n          {...ariaProps}\n          {...styles.container}\n          {...rest}\n        >\n          {children ?? (\n            <>\n              {isJsx(header) ? header : showHeader && <DialogHeader {...{ closeButton, icon, title }} {...header} />}\n\n              {isJsx(body) ? body : body && <DialogBody {...body} />}\n\n              {isJsx(footer) ? footer : showFooter && <DialogFooter {...{ cancelButton, submitButton }} {...footer} />}\n            </>\n          )}\n        </DialogBase>\n      </Modal>\n    </DialogProvider>\n  )\n}) as VuiComponent<'div', DialogProps> & {\n  Body: typeof DialogBody\n  CancelButton: typeof DialogCancelButton\n  CloseButton: typeof DialogCloseButton\n  Footer: typeof DialogFooter\n  Header: typeof DialogHeader\n  Icon: typeof DialogIcon\n  SubmitButton: typeof DialogSubmitButton\n  Title: typeof DialogTitle\n}\n\nDialog.Body = DialogBody\nDialog.CancelButton = DialogCancelButton\nDialog.CloseButton = DialogCloseButton\nDialog.Footer = DialogFooter\nDialog.Header = DialogHeader\nDialog.Icon = DialogIcon\nDialog.SubmitButton = DialogSubmitButton\nDialog.Title = DialogTitle\nDialog.displayName = 'Dialog'\n\nexport default Dialog\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAa,aAAa,OAAO,MAAM;;;;;;;;;;;;;;;AAgBvC,MAAa,SAAS,KAAyB,OAAO,QAAQ;CAC5D,MAAM,EACJ,MAAM,UACN,cACA,UACA,WACA,aACA,sBACA,QACA,QACA,MACA,IACA,QACA,YAAY,gBACZ,YAAY,UACZ,SACA,MACA,QACA,cACA,OACA,SACA,GAAG,SACD;CACJ,MAAM,SAAS,eAAe,UAAU,MAAM;CAG9C,MAAM,CAAC,UAAU,QAAQ,WAAW,OADtB,OAAO,MAAM,QAAQ,CAAC,UAAU,CAAC,CACE,SAAS;EAAC;EAAU;EAAe;EAAe,CAAC;CAEpG,MAAM,OAAO,YAAY,SAAS,GAAG,EAAE,UAAU,UAAU,GAAG;CAC9D,MAAM,aAAa,QAAQ,UAAU,eAAe,QAAQ,MAAM;CAClE,MAAM,aAAa,QAAQ,UAAU,gBAAgB,aAAa;CAElE,MAAM,YAAY;EAChB,oBAAoB;EACpB,mBAAmB;EACpB;CAED,MAAM,aAAa;EACjB,WAAW,eAAe;EAC1B,cAAc;GACZ,YAAY,cAAc,WAAW,WAAW;GAChD,gBAAgB,oBAAoB;GACpC,GAAG,gBAAgB;GACpB;EACD,GAAG;EACJ;AAID,QACE,oBAAC;EAAe,OAHF;GAAE;GAAQ;GAAM;GAAQ;GAAS;GAAM;GAAQ;GAAS;GAAS;YAI7E,oBAAC;GAAY;GAAQ;GAAiB,GAAG;GAAY;aACnD,oBAAC;IACC,WAAW,GAAG,cAAc,UAAU;IACtC,IAAI;IACJ,MAAM,cAAc,WAAW,uBAAuB;IACjD;IACL,MAAK;IACL,GAAI;IACJ,GAAI,OAAO;IACX,GAAI;cAEH,YACC;KACG,MAAM,OAAO,GAAG,SAAS,cAAc,oBAAC;MAAmB;MAAa;MAAM;MAAS,GAAI;OAAU;KAErG,MAAM,KAAK,GAAG,OAAO,QAAQ,oBAAC,cAAW,GAAI,OAAQ;KAErD,MAAM,OAAO,GAAG,SAAS,cAAc,oBAAC;MAAmB;MAAc;MAAgB,GAAI;OAAU;QACvG;KAEM;IACP;GACO;EAEnB;AAWF,OAAO,OAAO;AACd,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,OAAO;AACd,OAAO,eAAe;AACtB,OAAO,QAAQ;AACf,OAAO,cAAc"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Modal } from '../modal'\nimport { cs, isJsx, isReactText, random, useIds } from '../utils'\nimport { modalAnimation, modalJustifyContent } from './consts'\nimport { DialogProvider } from './context'\nimport type { DialogProps } from './dialog.types'\nimport DialogBody from './dialogBody'\nimport DialogCancelButton from './dialogCancelButton'\nimport DialogCloseButton from './dialogCloseButton'\nimport DialogFooter from './dialogFooter'\nimport DialogHeader from './dialogHeader'\nimport DialogIcon from './dialogIcon'\nimport DialogSubmitButton from './dialogSubmitButton'\nimport DialogTitle from './dialogTitle'\n\nexport const DialogBase = styled.divBox`\n  background-color: white;\n  border-radius: 1px;\n  box-shadow: modal;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`\n\n/**\n * Displays content in a Modal window. Includes required accessibility configuration.\n *\n * Dialog is built upon `Modal`.\n *\n * The content can include important information, like warnings or errors, simple forms or prompts for user's decision. It blocks interaction with the rest of the page, but often can be disabled by pressing Escape, clicking on the backdrop or close button.\n */\nexport const Dialog = vui<'div', DialogProps>((props, ref) => {\n  const {\n    body: bodyProp,\n    cancelButton,\n    children,\n    className,\n    closeButton,\n    disableBackdropClose,\n    footer,\n    header,\n    icon,\n    id,\n    isOpen,\n    modalProps: modalPropsProp,\n    placement = 'center',\n    onClose,\n    size,\n    status,\n    submitButton,\n    title,\n    variant,\n    ...rest\n  } = props\n  const styles = useStyleConfig('Dialog', props)\n\n  const idRef = useRef(id ?? random().toString())\n  const [dialogId, bodyId, titleId] = useIds(idRef.current, ['dialog', 'dialog-body', 'dialog-title'])\n\n  const body = isReactText(bodyProp) ? { children: bodyProp } : bodyProp\n  const showHeader = Boolean(header || closeButton || icon || title)\n  const showFooter = Boolean(footer || cancelButton || submitButton)\n\n  const ariaProps = {\n    'aria-describedby': bodyId,\n    'aria-labelledby': titleId,\n  }\n\n  const modalProps = {\n    animation: modalAnimation[placement as keyof typeof modalAnimation],\n    contentProps: {\n      alignItems: placement === 'center' ? 'center' : 'auto',\n      justifyContent: modalJustifyContent[placement as keyof typeof modalJustifyContent],\n      ...modalPropsProp?.contentProps,\n    },\n    ...modalPropsProp,\n  }\n\n  const context = { bodyId, icon, isOpen, onClose, size, status, titleId, variant }\n\n  return (\n    <DialogProvider value={context}>\n      <Modal {...{ isOpen, onClose }} {...{ ...modalProps, disableBackdropClose }}>\n        <DialogBase\n          className={cs('vui-dialog', className)}\n          id={dialogId}\n          maxH={placement === 'center' ? 'calc(100vh - 32px)' : '100%'}\n          ref={ref}\n          role=\"dialog\"\n          {...ariaProps}\n          {...styles.container}\n          {...rest}\n        >\n          {children ?? (\n            <>\n              {isJsx(header) ? header : showHeader && <DialogHeader {...{ closeButton, icon, title }} {...header} />}\n\n              {isJsx(body) ? body : body && <DialogBody {...body} />}\n\n              {isJsx(footer) ? footer : showFooter && <DialogFooter {...{ cancelButton, submitButton }} {...footer} />}\n            </>\n          )}\n        </DialogBase>\n      </Modal>\n    </DialogProvider>\n  )\n}) as VuiComponent<'div', DialogProps> & {\n  Body: typeof DialogBody\n  CancelButton: typeof DialogCancelButton\n  CloseButton: typeof DialogCloseButton\n  Footer: typeof DialogFooter\n  Header: typeof DialogHeader\n  Icon: typeof DialogIcon\n  SubmitButton: typeof DialogSubmitButton\n  Title: typeof DialogTitle\n}\n\nDialog.Body = DialogBody\nDialog.CancelButton = DialogCancelButton\nDialog.CloseButton = DialogCloseButton\nDialog.Footer = DialogFooter\nDialog.Header = DialogHeader\nDialog.Icon = DialogIcon\nDialog.SubmitButton = DialogSubmitButton\nDialog.Title = DialogTitle\nDialog.displayName = 'Dialog'\n\nexport default Dialog\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAa,aAAa,OAAO,MAAM;;;;;;;;;;;;;;;AAgBvC,MAAa,SAAS,KAAyB,OAAO,QAAQ;CAC5D,MAAM,EACJ,MAAM,UACN,cACA,UACA,WACA,aACA,sBACA,QACA,QACA,MACA,IACA,QACA,YAAY,gBACZ,YAAY,UACZ,SACA,MACA,QACA,cACA,OACA,SACA,GAAG,SACD;CACJ,MAAM,SAAS,eAAe,UAAU,MAAM;CAG9C,MAAM,CAAC,UAAU,QAAQ,WAAW,OADtB,OAAO,MAAM,QAAQ,CAAC,UAAU,CAAC,CACE,SAAS;EAAC;EAAU;EAAe;EAAe,CAAC;CAEpG,MAAM,OAAO,YAAY,SAAS,GAAG,EAAE,UAAU,UAAU,GAAG;CAC9D,MAAM,aAAa,QAAQ,UAAU,eAAe,QAAQ,MAAM;CAClE,MAAM,aAAa,QAAQ,UAAU,gBAAgB,aAAa;CAElE,MAAM,YAAY;EAChB,oBAAoB;EACpB,mBAAmB;EACpB;CAED,MAAM,aAAa;EACjB,WAAW,eAAe;EAC1B,cAAc;GACZ,YAAY,cAAc,WAAW,WAAW;GAChD,gBAAgB,oBAAoB;GACpC,GAAG,gBAAgB;GACpB;EACD,GAAG;EACJ;AAID,QACE,oBAAC,gBAAD;EAAgB,OAHF;GAAE;GAAQ;GAAM;GAAQ;GAAS;GAAM;GAAQ;GAAS;GAAS;YAI7E,oBAAC,OAAD;GAAa;GAAQ;GAAiB,GAAG;GAAY;aACnD,oBAAC,YAAD;IACE,WAAW,GAAG,cAAc,UAAU;IACtC,IAAI;IACJ,MAAM,cAAc,WAAW,uBAAuB;IACjD;IACL,MAAK;IACL,GAAI;IACJ,GAAI,OAAO;IACX,GAAI;cAEH,YACC;KACG,MAAM,OAAO,GAAG,SAAS,cAAc,oBAAC,cAAD;MAAoB;MAAa;MAAM;MAAS,GAAI;MAAU;KAErG,MAAM,KAAK,GAAG,OAAO,QAAQ,oBAAC,YAAD,EAAY,GAAI,MAAQ;KAErD,MAAM,OAAO,GAAG,SAAS,cAAc,oBAAC,cAAD;MAAoB;MAAc;MAAgB,GAAI;MAAU;KACvG;IAEM;GACP;EACO;EAEnB;AAWF,OAAO,OAAO;AACd,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,OAAO;AACd,OAAO,eAAe;AACtB,OAAO,QAAQ;AACf,OAAO,cAAc"}

package/dist/dialog/dialog.types.d.ts

@@ -1,18 +1,11 @@
 import { PropsOf } from "../utils/types.js";
-import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { IconProp, IconProps } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { ButtonProps, IconButtonProps } from "../button/button.types.js";
-import "../button/index.js";
 import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
 import { HeadingProps } from "../heading/heading.types.js";
-import "../heading/index.js";
 import { ModalProps } from "../modal/modal.types.js";
-import "../modal/index.js";
 import { JSX } from "react";
 
 //#region src/dialog/dialog.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.types.d.ts","names":[],"sources":["../../src/dialog/dialog.types.ts"],"mappings":";;;;;;;;;;;;;;;;;;KAWY,eAAA,GAAkB,OAAA,QAAe,QAAA;AAAA,KAEjC,uBAAA,GAA0B,OAAA,WAAkB,WAAA;AAAA,KAE5C,sBAAA,GAAyB,OAAA,WAAkB,eAAA;AAAA,KAE3C,aAAA,GAAgB,IAAA,CAAK,WAAA;EAC/B,MAAA;EACA,OAAA;AAAA;AAAA,KAGU,iBAAA,GAAoB,OAAA,QAAe,QAAA,GAAW,IAAA,CAAK,WAAA;AAAA,KAEnD,iBAAA,GAAoB,OAAA,QAAe,QAAA,GAAW,IAAA,CAAK,WAAA;AAAA,KAEnD,eAAA,GAAkB,OAAA,QAAe,SAAA;AAAA,KAEjC,eAAA;AAAA,KAEA,WAAA,GAAc,WAAA,GACxB,YAAA,aACA,IAAA,CAAK,UAAA;EArBuB,0CAuB1B,IAAA,qBAAyB,eAAA,GAAkB,GAAA,CAAI,OAAA,EArBvC;EAuBR,YAAA,GAAe,uBAAA,GAA0B,GAAA,CAAI,OAAA;EAE7C,WAAA,aAAwB,sBAAA,GAAyB,GAAA,CAAI,OAAA,EAzBU;EA2B/D,oBAAA,YAzB8B;EA2B9B,MAAA,GAAS,iBAAA,GAAoB,GAAA,CAAI,OAAA,EA3BA;EA6BjC,MAAA,GAAS,iBAAA,GAAoB,GAAA,CAAI,OAAA,EA3BzB;EA6BR,IAAA,GAAO,QAAA,GAAW,eAAA,GAAkB,GAAA,CAAI,OAAA;EAExC,UAAA,GAAa,UAAA,EA/BW;EAiCxB,SAAA,GAAY,eAAA,EAhCd;EAkCE,MAAA,GAAS,YAAA,EAjCJ;EAmCL,YAAA,GAAe,uBAAA,GAA0B,GAAA,CAAI,OAAA,EAhCrC;EAkCR,KAAA,GAAQ,YAAA,WAAuB,gBAAA,GAAmB,GAAA,CAAI,OAAA;AAAA;AAAA,KAG9C,YAAA;AAAA,KAEA,mBAAA,GAAsB,MAAA;EAAiB,SAAA,EAAW,SAAA;AAAA;AAAA,KAElD,uBAAA,GAA0B,OAAA,WAAkB,WAAA;AAAA,KAE5C,gBAAA,GAAmB,OAAA,OAAc,YAAA"}
+{"version":3,"file":"dialog.types.d.ts","names":[],"sources":["../../src/dialog/dialog.types.ts"],"mappings":";;;;;;;;;;;KAWY,eAAA,GAAkB,OAAA,QAAe,QAAA;AAAA,KAEjC,uBAAA,GAA0B,OAAA,WAAkB,WAAA;AAAA,KAE5C,sBAAA,GAAyB,OAAA,WAAkB,eAAA;AAAA,KAE3C,aAAA,GAAgB,IAAA,CAAK,WAAA;EAC/B,MAAA;EACA,OAAA;AAAA;AAAA,KAGU,iBAAA,GAAoB,OAAA,QAAe,QAAA,GAAW,IAAA,CAAK,WAAA;AAAA,KAEnD,iBAAA,GAAoB,OAAA,QAAe,QAAA,GAAW,IAAA,CAAK,WAAA;AAAA,KAEnD,eAAA,GAAkB,OAAA,QAAe,SAAA;AAAA,KAEjC,eAAA;AAAA,KAEA,WAAA,GAAc,WAAA,GACxB,YAAA,aACA,IAAA,CAAK,UAAA;4CAEH,IAAA,qBAAyB,eAAA,GAAkB,GAAA,CAAI,OAAA,EAvBE;EAyBjD,YAAA,GAAe,uBAAA,GAA0B,GAAA,CAAI,OAAA,EAvBd;EAyB/B,WAAA,aAAwB,sBAAA,GAAyB,GAAA,CAAI,OAAA,EAzBnB;EA2BlC,oBAAA,YAzBQ;EA2BR,MAAA,GAAS,iBAAA,GAAoB,GAAA,CAAI,OAAA;EAEjC,MAAA,GAAS,iBAAA,GAAoB,GAAA,CAAI,OAAA,EA7BiC;EA+BlE,IAAA,GAAO,QAAA,GAAW,eAAA,GAAkB,GAAA,CAAI,OAAA,EA7BnB;EA+BrB,UAAA,GAAa,UAAA,EA/Be;EAiC5B,SAAA,GAAY,eAAA,EAjCiB;EAmC7B,MAAA,GAAS,YAAA,EAjCX;EAmCE,YAAA,GAAe,uBAAA,GAA0B,GAAA,CAAI,OAAA,EAnCxC;EAqCL,KAAA,GAAQ,YAAA,WAAuB,gBAAA,GAAmB,GAAA,CAAI,OAAA;AAAA;AAAA,KAG9C,YAAA;AAAA,KAEA,mBAAA,GAAsB,MAAA;EAAiB,SAAA,EAAW,SAAA;AAAA;AAAA,KAElD,uBAAA,GAA0B,OAAA,WAAkB,WAAA;AAAA,KAE5C,gBAAA,GAAmB,OAAA,OAAc,YAAA"}

package/dist/dialog/dialogBody.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DialogBodyProps } from "./dialog.types.js";
-import "../index.js";
-
 //#region src/dialog/dialogBody.d.ts
 /**
  * Shows the main content between the Dialog Header and Footer.

package/dist/dialog/dialogBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogBody.d.ts","names":[],"sources":["../../src/dialog/dialogBody.tsx"],"mappings":";;;;;;;;;AAcA;;cAAa,UAAA,EAAU,YAAA,QAAA,eAAA"}
+{"version":3,"file":"dialogBody.d.ts","names":[],"sources":["../../src/dialog/dialogBody.tsx"],"mappings":";;;;;;;AAcA;;cAAa,UAAA,EAAU,YAAA,QAAA,eAAA"}

package/dist/dialog/dialogBody.js

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

package/dist/dialog/dialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogBody.js","names":[],"sources":["../../src/dialog/dialogBody.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, mergeRefs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogBodyProps } from './dialog.types'\n\n/**\n * Shows the main content between the Dialog Header and Footer.\n * It becomes scrollable when content does not fit vertically. Borders are shown automatically.\n * Receives more horizontal padding when Dialog has icon, so align text with title.\n * Receives id linked to aria-describedby on the Dialog for accessibility.\n */\nexport const DialogBody = vui<'div', DialogBodyProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { bodyId, icon, status } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  const [isScrolled, setIsScrolled] = useState(false)\n  const bodyRef = useRef<HTMLDivElement>(null)\n\n  // Observe size changes of the body to detect if it becomes vertically scrollable\n  const observerRef = useRef(\n    new ResizeObserver(() => {\n      if (bodyRef.current) {\n        const { clientHeight, scrollHeight } = bodyRef.current\n        setIsScrolled(scrollHeight > clientHeight)\n      }\n    }),\n  )\n\n  useEffect(() => {\n    bodyRef.current && observerRef.current?.observe(bodyRef.current)\n  }, [])\n\n  // If body can be scrolled vertically, add dividing lines on top and bottom\n  const borderProps = isScrolled ? { borderColor: 'grey.30' } : {}\n\n  // Add more body padding when custom or status icon is displayed\n  const paddingProps = (icon ?? status) !== undefined ? { px: 8 } : { px: 3 }\n\n  return (\n    <Box\n      borderBottom=\"1px solid transparent\"\n      borderTop=\"1px solid transparent\"\n      className={cs('vui-dialogBody', className)}\n      column\n      id={bodyId}\n      overflowY=\"auto\"\n      pb={2}\n      pt={1.5}\n      ref={mergeRefs(ref, bodyRef)}\n      {...borderProps}\n      {...paddingProps}\n      {...styles.body}\n      {...rest}\n    />\n  )\n})\n\nDialogBody.displayName = 'DialogBody'\n\nexport default DialogBody\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,QAAQ,MAAM,WAAW,kBAAkB,IAAI,EAAE;CACzD,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,UAAU,OAAuB,KAAK;CAG5C,MAAM,cAAc,OAClB,IAAI,qBAAqB;AACvB,MAAI,QAAQ,SAAS;GACnB,MAAM,EAAE,cAAc,iBAAiB,QAAQ;AAC/C,iBAAc,eAAe,aAAa;;GAE5C,CACH;AAED,iBAAgB;AACd,UAAQ,WAAW,YAAY,SAAS,QAAQ,QAAQ,QAAQ;IAC/D,EAAE,CAAC;CAGN,MAAM,cAAc,aAAa,EAAE,aAAa,WAAW,GAAG,EAAE;CAGhE,MAAM,gBAAgB,QAAQ,YAAY,SAAY,EAAE,IAAI,GAAG,GAAG,EAAE,IAAI,GAAG;AAE3E,QACE,oBAAC;EACC,cAAa;EACb,WAAU;EACV,WAAW,GAAG,kBAAkB,UAAU;EAC1C;EACA,IAAI;EACJ,WAAU;EACV,IAAI;EACJ,IAAI;EACJ,KAAK,UAAU,KAAK,QAAQ;EAC5B,GAAI;EACJ,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,WAAW,cAAc"}
+{"version":3,"file":"dialogBody.js","names":[],"sources":["../../src/dialog/dialogBody.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, mergeRefs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogBodyProps } from './dialog.types'\n\n/**\n * Shows the main content between the Dialog Header and Footer.\n * It becomes scrollable when content does not fit vertically. Borders are shown automatically.\n * Receives more horizontal padding when Dialog has icon, so align text with title.\n * Receives id linked to aria-describedby on the Dialog for accessibility.\n */\nexport const DialogBody = vui<'div', DialogBodyProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { bodyId, icon, status } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  const [isScrolled, setIsScrolled] = useState(false)\n  const bodyRef = useRef<HTMLDivElement>(null)\n\n  // Observe size changes of the body to detect if it becomes vertically scrollable\n  const observerRef = useRef(\n    new ResizeObserver(() => {\n      if (bodyRef.current) {\n        const { clientHeight, scrollHeight } = bodyRef.current\n        setIsScrolled(scrollHeight > clientHeight)\n      }\n    }),\n  )\n\n  useEffect(() => {\n    bodyRef.current && observerRef.current?.observe(bodyRef.current)\n  }, [])\n\n  // If body can be scrolled vertically, add dividing lines on top and bottom\n  const borderProps = isScrolled ? { borderColor: 'grey.30' } : {}\n\n  // Add more body padding when custom or status icon is displayed\n  const paddingProps = (icon ?? status) !== undefined ? { px: 8 } : { px: 3 }\n\n  return (\n    <Box\n      borderBottom=\"1px solid transparent\"\n      borderTop=\"1px solid transparent\"\n      className={cs('vui-dialogBody', className)}\n      column\n      id={bodyId}\n      overflowY=\"auto\"\n      pb={2}\n      pt={1.5}\n      ref={mergeRefs(ref, bodyRef)}\n      {...borderProps}\n      {...paddingProps}\n      {...styles.body}\n      {...rest}\n    />\n  )\n})\n\nDialogBody.displayName = 'DialogBody'\n\nexport default DialogBody\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,QAAQ,MAAM,WAAW,kBAAkB,IAAI,EAAE;CACzD,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,UAAU,OAAuB,KAAK;CAG5C,MAAM,cAAc,OAClB,IAAI,qBAAqB;AACvB,MAAI,QAAQ,SAAS;GACnB,MAAM,EAAE,cAAc,iBAAiB,QAAQ;AAC/C,iBAAc,eAAe,aAAa;;GAE5C,CACH;AAED,iBAAgB;AACd,UAAQ,WAAW,YAAY,SAAS,QAAQ,QAAQ,QAAQ;IAC/D,EAAE,CAAC;CAGN,MAAM,cAAc,aAAa,EAAE,aAAa,WAAW,GAAG,EAAE;CAGhE,MAAM,gBAAgB,QAAQ,YAAY,SAAY,EAAE,IAAI,GAAG,GAAG,EAAE,IAAI,GAAG;AAE3E,QACE,oBAAC,KAAD;EACE,cAAa;EACb,WAAU;EACV,WAAW,GAAG,kBAAkB,UAAU;EAC1C;EACA,IAAI;EACJ,WAAU;EACV,IAAI;EACJ,IAAI;EACJ,KAAK,UAAU,KAAK,QAAQ;EAC5B,GAAI;EACJ,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,WAAW,cAAc"}

package/dist/dialog/dialogCancelButton.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DialogCancelButtonProps } from "./dialog.types.js";
-import "../index.js";
-
 //#region src/dialog/dialogCancelButton.d.ts
 /** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */
 declare const DialogCancelButton: VuiComponent<"button", DialogCancelButtonProps>;

package/dist/dialog/dialogCancelButton.d.ts.map

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

package/dist/dialog/dialogCancelButton.js

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

package/dist/dialog/dialogCancelButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogCancelButton.js","names":[],"sources":["../../src/dialog/dialogCancelButton.tsx"],"sourcesContent":["import { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogCancelButtonProps } from './dialog.types'\n\n/** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */\nexport const DialogCancelButton = vui<'button', DialogCancelButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onClose } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <LineButton\n      className={cs('vui-dialogCancelButton', className)}\n      onClick={onClose}\n      ref={ref}\n      {...styles.cancelButton}\n      {...rest}\n    />\n  )\n})\n\nDialogCancelButton.displayName = 'DialogCancelButton'\nexport default DialogCancelButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAAwC,OAAO,QAAQ;CACvF,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,YAAY,kBAAkB,IAAI,EAAE;CAC5C,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC;EACC,WAAW,GAAG,0BAA0B,UAAU;EAClD,SAAS;EACJ;EACL,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,mBAAmB,cAAc"}
+{"version":3,"file":"dialogCancelButton.js","names":[],"sources":["../../src/dialog/dialogCancelButton.tsx"],"sourcesContent":["import { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogCancelButtonProps } from './dialog.types'\n\n/** Shows an outlined Button in the Dialog Footer, which by default closes the Dialog. */\nexport const DialogCancelButton = vui<'button', DialogCancelButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onClose } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <LineButton\n      className={cs('vui-dialogCancelButton', className)}\n      onClick={onClose}\n      ref={ref}\n      {...styles.cancelButton}\n      {...rest}\n    />\n  )\n})\n\nDialogCancelButton.displayName = 'DialogCancelButton'\nexport default DialogCancelButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAAwC,OAAO,QAAQ;CACvF,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,YAAY,kBAAkB,IAAI,EAAE;CAC5C,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC,YAAD;EACE,WAAW,GAAG,0BAA0B,UAAU;EAClD,SAAS;EACJ;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,mBAAmB,cAAc"}

package/dist/dialog/dialogCloseButton.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DialogCloseButtonProps } from "./dialog.types.js";
-import "../index.js";
-
 //#region src/dialog/dialogCloseButton.d.ts
 /** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */
 declare const DialogCloseButton: VuiComponent<"button", DialogCloseButtonProps>;

package/dist/dialog/dialogCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogCloseButton.d.ts","names":[],"sources":["../../src/dialog/dialogCloseButton.tsx"],"mappings":";;;;;;cAOa,iBAAA,EAAiB,YAAA,WAAA,sBAAA"}
+{"version":3,"file":"dialogCloseButton.d.ts","names":[],"sources":["../../src/dialog/dialogCloseButton.tsx"],"mappings":";;;;cAOa,iBAAA,EAAiB,YAAA,WAAA,sBAAA"}

package/dist/dialog/dialogCloseButton.js

@@ -19,7 +19,8 @@ const DialogCloseButton = vui((props, ref) => {
 		right: 16,
 		size,
 		top: 16,
-		variant: "tertiaryDark",
+		variant: "tertiary",
+		intent: "brand",
 		...styles.closeButton,
 		...rest
 	});
@@ -28,5 +29,5 @@ DialogCloseButton.displayName = "DialogCloseButton";
 
 //#endregion
 export { DialogCloseButton as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=dialogCloseButton.js.map

package/dist/dialog/dialogCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogCloseButton.js","names":[],"sources":["../../src/dialog/dialogCloseButton.tsx"],"sourcesContent":["import { CloseButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogCloseButtonProps } from './dialog.types'\n\n/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */\nexport const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, ref) => {\n  const { className, size = 'md', ...rest } = props\n  const { onClose } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <CloseButton\n      className={cs('vui-dialogCloseButton', className)}\n      onClick={onClose}\n      position=\"absolute\"\n      ref={ref}\n      right={16}\n      size={size}\n      top={16}\n      variant=\"tertiaryDark\"\n      {...styles.closeButton}\n      {...rest}\n    />\n  )\n})\n\nDialogCloseButton.displayName = 'DialogCloseButton'\n\nexport default DialogCloseButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,oBAAoB,KAAuC,OAAO,QAAQ;CACrF,MAAM,EAAE,WAAW,OAAO,MAAM,GAAG,SAAS;CAC5C,MAAM,EAAE,YAAY,kBAAkB,IAAI,EAAE;CAC5C,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC;EACC,WAAW,GAAG,yBAAyB,UAAU;EACjD,SAAS;EACT,UAAS;EACJ;EACL,OAAO;EACD;EACN,KAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,kBAAkB,cAAc"}
+{"version":3,"file":"dialogCloseButton.js","names":[],"sources":["../../src/dialog/dialogCloseButton.tsx"],"sourcesContent":["import { CloseButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogCloseButtonProps } from './dialog.types'\n\n/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */\nexport const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, ref) => {\n  const { className, size = 'md', ...rest } = props\n  const { onClose } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <CloseButton\n      className={cs('vui-dialogCloseButton', className)}\n      onClick={onClose}\n      position=\"absolute\"\n      ref={ref}\n      right={16}\n      size={size}\n      top={16}\n      variant=\"tertiary\"\n      intent=\"brand\"\n      {...styles.closeButton}\n      {...rest}\n    />\n  )\n})\n\nDialogCloseButton.displayName = 'DialogCloseButton'\n\nexport default DialogCloseButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,oBAAoB,KAAuC,OAAO,QAAQ;CACrF,MAAM,EAAE,WAAW,OAAO,MAAM,GAAG,SAAS;CAC5C,MAAM,EAAE,YAAY,kBAAkB,IAAI,EAAE;CAC5C,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC,aAAD;EACE,WAAW,GAAG,yBAAyB,UAAU;EACjD,SAAS;EACT,UAAS;EACJ;EACL,OAAO;EACD;EACN,KAAK;EACL,SAAQ;EACR,QAAO;EACP,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,kBAAkB,cAAc"}

package/dist/dialog/dialogFooter.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DialogFooterProps } from "./dialog.types.js";
-import "../index.js";
-
 //#region src/dialog/dialogFooter.d.ts
 /** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */
 declare const DialogFooter: VuiComponent<"div", DialogFooterProps>;

package/dist/dialog/dialogFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogFooter.d.ts","names":[],"sources":["../../src/dialog/dialogFooter.tsx"],"mappings":";;;;;;cASa,YAAA,EAAY,YAAA,QAAA,iBAAA"}
+{"version":3,"file":"dialogFooter.d.ts","names":[],"sources":["../../src/dialog/dialogFooter.tsx"],"mappings":";;;;cASa,YAAA,EAAY,YAAA,QAAA,iBAAA"}

package/dist/dialog/dialogFooter.js

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

package/dist/dialog/dialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogFooter.js","names":[],"sources":["../../src/dialog/dialogFooter.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, isJsx } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogFooterProps } from './dialog.types'\nimport DialogCancelButton from './dialogCancelButton'\nimport DialogSubmitButton from './dialogSubmitButton'\n\n/** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */\nexport const DialogFooter = vui<'div', DialogFooterProps>((props, ref) => {\n  const { cancelButton, children, className, submitButton, ...rest } = props\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <Box\n      className={cs('vui-dialogFooter', className)}\n      justifyContent=\"flex-end\"\n      p={3}\n      pt={2}\n      ref={ref}\n      {...styles.footer}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          {isJsx(cancelButton) ? cancelButton : cancelButton && <DialogCancelButton {...cancelButton} />}\n\n          {isJsx(submitButton) ? submitButton : submitButton && <DialogSubmitButton {...submitButton} />}\n        </>\n      )}\n    </Box>\n  )\n})\n\nDialogFooter.displayName = 'DialogFooter'\nexport default DialogFooter\n"],"mappings":";;;;;;;;;;;;AASA,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EAAE,cAAc,UAAU,WAAW,cAAc,GAAG,SAAS;CACrE,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC;EACC,WAAW,GAAG,oBAAoB,UAAU;EAC5C,gBAAe;EACf,GAAG;EACH,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;YAEH,YACC,4CACG,MAAM,aAAa,GAAG,eAAe,gBAAgB,oBAAC,sBAAmB,GAAI,eAAgB,EAE7F,MAAM,aAAa,GAAG,eAAe,gBAAgB,oBAAC,sBAAmB,GAAI,eAAgB,IAC7F;GAED;EAER;AAEF,aAAa,cAAc"}
+{"version":3,"file":"dialogFooter.js","names":[],"sources":["../../src/dialog/dialogFooter.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, isJsx } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogFooterProps } from './dialog.types'\nimport DialogCancelButton from './dialogCancelButton'\nimport DialogSubmitButton from './dialogSubmitButton'\n\n/** Shows control buttons below the Dialog Body. By default includes cancel and submit buttons. */\nexport const DialogFooter = vui<'div', DialogFooterProps>((props, ref) => {\n  const { cancelButton, children, className, submitButton, ...rest } = props\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <Box\n      className={cs('vui-dialogFooter', className)}\n      justifyContent=\"flex-end\"\n      p={3}\n      pt={2}\n      ref={ref}\n      {...styles.footer}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          {isJsx(cancelButton) ? cancelButton : cancelButton && <DialogCancelButton {...cancelButton} />}\n\n          {isJsx(submitButton) ? submitButton : submitButton && <DialogSubmitButton {...submitButton} />}\n        </>\n      )}\n    </Box>\n  )\n})\n\nDialogFooter.displayName = 'DialogFooter'\nexport default DialogFooter\n"],"mappings":";;;;;;;;;;;;AASA,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EAAE,cAAc,UAAU,WAAW,cAAc,GAAG,SAAS;CACrE,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC,KAAD;EACE,WAAW,GAAG,oBAAoB,UAAU;EAC5C,gBAAe;EACf,GAAG;EACH,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;YAEH,YACC,4CACG,MAAM,aAAa,GAAG,eAAe,gBAAgB,oBAAC,oBAAD,EAAoB,GAAI,cAAgB,GAE7F,MAAM,aAAa,GAAG,eAAe,gBAAgB,oBAAC,oBAAD,EAAoB,GAAI,cAAgB,EAC7F;EAED;EAER;AAEF,aAAa,cAAc"}

package/dist/dialog/dialogHeader.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DialogHeaderProps } from "./dialog.types.js";
-import "../index.js";
-
 //#region src/dialog/dialogHeader.d.ts
 /** Shows title, status icon and close button above the Dialog Body. */
 declare const DialogHeader: VuiComponent<"div", DialogHeaderProps>;

package/dist/dialog/dialogHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogHeader.d.ts","names":[],"sources":["../../src/dialog/dialogHeader.tsx"],"mappings":";;;;;;cAUa,YAAA,EAAY,YAAA,QAAA,iBAAA"}
+{"version":3,"file":"dialogHeader.d.ts","names":[],"sources":["../../src/dialog/dialogHeader.tsx"],"mappings":";;;;cAUa,YAAA,EAAY,YAAA,QAAA,iBAAA"}

package/dist/dialog/dialogHeader.js

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

package/dist/dialog/dialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogHeader.js","names":[],"sources":["../../src/dialog/dialogHeader.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, isJsx, isReactText, isString } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogHeaderProps } from './dialog.types'\nimport DialogCloseButton from './dialogCloseButton'\nimport DialogIcon from './dialogIcon'\nimport DialogTitle from './dialogTitle'\n\n/** Shows title, status icon and close button above the Dialog Body. */\nexport const DialogHeader = vui<'div', DialogHeaderProps>((props, ref) => {\n  const { children, className, closeButton, icon: iconProp, title: titleProp, ...rest } = props\n  const { onClose, status } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  const icon = isString(iconProp) ? { name: iconProp } : iconProp\n  const showCloseButton = Boolean(closeButton !== undefined ? closeButton : onClose)\n  const showIcon = Boolean(icon || status)\n  const title = isReactText(titleProp) ? { text: titleProp } : titleProp\n\n  return (\n    <Box\n      className={cs('vui-dialogHeader', className)}\n      icon={icon}\n      pb={1.5}\n      pl={3}\n      position=\"relative\"\n      pr={8}\n      pt={3}\n      ref={ref}\n      {...styles.header}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          {isJsx(icon) ? icon : showIcon && <DialogIcon {...icon} />}\n\n          {isJsx(title) ? title : !!title && <DialogTitle {...(title as any)} />}\n\n          {isJsx(closeButton) ? closeButton : showCloseButton && <DialogCloseButton />}\n        </>\n      )}\n    </Box>\n  )\n})\n\nDialogHeader.displayName = 'DialogHeader'\nexport default DialogHeader\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EAAE,UAAU,WAAW,aAAa,MAAM,UAAU,OAAO,WAAW,GAAG,SAAS;CACxF,MAAM,EAAE,SAAS,WAAW,kBAAkB,IAAI,EAAE;CACpD,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,OAAO,SAAS,SAAS,GAAG,EAAE,MAAM,UAAU,GAAG;CACvD,MAAM,kBAAkB,QAAQ,gBAAgB,SAAY,cAAc,QAAQ;CAClF,MAAM,WAAW,QAAQ,QAAQ,OAAO;CACxC,MAAM,QAAQ,YAAY,UAAU,GAAG,EAAE,MAAM,WAAW,GAAG;AAE7D,QACE,oBAAC;EACC,WAAW,GAAG,oBAAoB,UAAU;EACtC;EACN,IAAI;EACJ,IAAI;EACJ,UAAS;EACT,IAAI;EACJ,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;YAEH,YACC;GACG,MAAM,KAAK,GAAG,OAAO,YAAY,oBAAC,cAAW,GAAI,OAAQ;GAEzD,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,SAAS,oBAAC,eAAY,GAAK,QAAiB;GAErE,MAAM,YAAY,GAAG,cAAc,mBAAmB,oBAAC,sBAAoB;MAC3E;GAED;EAER;AAEF,aAAa,cAAc"}
+{"version":3,"file":"dialogHeader.js","names":[],"sources":["../../src/dialog/dialogHeader.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, isJsx, isReactText, isString } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogHeaderProps } from './dialog.types'\nimport DialogCloseButton from './dialogCloseButton'\nimport DialogIcon from './dialogIcon'\nimport DialogTitle from './dialogTitle'\n\n/** Shows title, status icon and close button above the Dialog Body. */\nexport const DialogHeader = vui<'div', DialogHeaderProps>((props, ref) => {\n  const { children, className, closeButton, icon: iconProp, title: titleProp, ...rest } = props\n  const { onClose, status } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  const icon = isString(iconProp) ? { name: iconProp } : iconProp\n  const showCloseButton = Boolean(closeButton !== undefined ? closeButton : onClose)\n  const showIcon = Boolean(icon || status)\n  const title = isReactText(titleProp) ? { text: titleProp } : titleProp\n\n  return (\n    <Box\n      className={cs('vui-dialogHeader', className)}\n      icon={icon}\n      pb={1.5}\n      pl={3}\n      position=\"relative\"\n      pr={8}\n      pt={3}\n      ref={ref}\n      {...styles.header}\n      {...rest}\n    >\n      {children ?? (\n        <>\n          {isJsx(icon) ? icon : showIcon && <DialogIcon {...icon} />}\n\n          {isJsx(title) ? title : !!title && <DialogTitle {...(title as any)} />}\n\n          {isJsx(closeButton) ? closeButton : showCloseButton && <DialogCloseButton />}\n        </>\n      )}\n    </Box>\n  )\n})\n\nDialogHeader.displayName = 'DialogHeader'\nexport default DialogHeader\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EAAE,UAAU,WAAW,aAAa,MAAM,UAAU,OAAO,WAAW,GAAG,SAAS;CACxF,MAAM,EAAE,SAAS,WAAW,kBAAkB,IAAI,EAAE;CACpD,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,OAAO,SAAS,SAAS,GAAG,EAAE,MAAM,UAAU,GAAG;CACvD,MAAM,kBAAkB,QAAQ,gBAAgB,SAAY,cAAc,QAAQ;CAClF,MAAM,WAAW,QAAQ,QAAQ,OAAO;CACxC,MAAM,QAAQ,YAAY,UAAU,GAAG,EAAE,MAAM,WAAW,GAAG;AAE7D,QACE,oBAAC,KAAD;EACE,WAAW,GAAG,oBAAoB,UAAU;EACtC;EACN,IAAI;EACJ,IAAI;EACJ,UAAS;EACT,IAAI;EACJ,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;YAEH,YACC;GACG,MAAM,KAAK,GAAG,OAAO,YAAY,oBAAC,YAAD,EAAY,GAAI,MAAQ;GAEzD,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,SAAS,oBAAC,aAAD,EAAa,GAAK,OAAiB;GAErE,MAAM,YAAY,GAAG,cAAc,mBAAmB,oBAAC,mBAAD,EAAqB;GAC3E;EAED;EAER;AAEF,aAAa,cAAc"}

package/dist/dialog/dialogIcon.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DialogIconProps } from "./dialog.types.js";
-import "../index.js";
-
 //#region src/dialog/dialogIcon.d.ts
 /** Shows an icon based on a given status. Optionally, can be a custom icon. */
 declare const DialogIcon: VuiComponent<"svg", DialogIconProps>;

package/dist/dialog/dialogIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogIcon.d.ts","names":[],"sources":["../../src/dialog/dialogIcon.tsx"],"mappings":";;;;;;cAQa,UAAA,EAAU,YAAA,QAAA,eAAA"}
+{"version":3,"file":"dialogIcon.d.ts","names":[],"sources":["../../src/dialog/dialogIcon.tsx"],"mappings":";;;;cAQa,UAAA,EAAU,YAAA,QAAA,eAAA"}

package/dist/dialog/dialogIcon.js

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

package/dist/dialog/dialogIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogIcon.js","names":[],"sources":["../../src/dialog/dialogIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { Icon } from '../icon'\nimport { cs } from '../utils'\nimport { dialogStatusMapping } from './consts'\nimport { useDialogContext } from './context'\nimport type { DialogIconProps } from './dialog.types'\n\n/** Shows an icon based on a given status. Optionally, can be a custom icon. */\nexport const DialogIcon = vui<'svg', DialogIconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { status = '' } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n  const { iconProps } = dialogStatusMapping[status] ?? {}\n\n  return <Icon className={cs('vui-dialogIcon', className)} mr={2} ref={ref} {...styles.icon} {...iconProps} {...rest} />\n})\n\nDialogIcon.displayName = 'DialogIcon'\n\nexport default DialogIcon\n"],"mappings":";;;;;;;;;;AAQA,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,SAAS,OAAO,kBAAkB,IAAI,EAAE;CAChD,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAC3D,MAAM,EAAE,cAAc,oBAAoB,WAAW,EAAE;AAEvD,QAAO,oBAAC;EAAK,WAAW,GAAG,kBAAkB,UAAU;EAAE,IAAI;EAAQ;EAAK,GAAI,OAAO;EAAM,GAAI;EAAW,GAAI;GAAQ;EACtH;AAEF,WAAW,cAAc"}
+{"version":3,"file":"dialogIcon.js","names":[],"sources":["../../src/dialog/dialogIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { Icon } from '../icon'\nimport { cs } from '../utils'\nimport { dialogStatusMapping } from './consts'\nimport { useDialogContext } from './context'\nimport type { DialogIconProps } from './dialog.types'\n\n/** Shows an icon based on a given status. Optionally, can be a custom icon. */\nexport const DialogIcon = vui<'svg', DialogIconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { status = '' } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n  const { iconProps } = dialogStatusMapping[status] ?? {}\n\n  return <Icon className={cs('vui-dialogIcon', className)} mr={2} ref={ref} {...styles.icon} {...iconProps} {...rest} />\n})\n\nDialogIcon.displayName = 'DialogIcon'\n\nexport default DialogIcon\n"],"mappings":";;;;;;;;;;AAQA,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,SAAS,OAAO,kBAAkB,IAAI,EAAE;CAChD,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAC3D,MAAM,EAAE,cAAc,oBAAoB,WAAW,EAAE;AAEvD,QAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,kBAAkB,UAAU;EAAE,IAAI;EAAQ;EAAK,GAAI,OAAO;EAAM,GAAI;EAAW,GAAI;EAAQ;EACtH;AAEF,WAAW,cAAc"}

package/dist/dialog/dialogSubmitButton.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DialogSubmitButtonProps } from "./dialog.types.js";
-import "../index.js";
-
 //#region src/dialog/dialogSubmitButton.d.ts
 /** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */
 declare const DialogSubmitButton: VuiComponent<"button", DialogSubmitButtonProps>;

package/dist/dialog/dialogSubmitButton.d.ts.map

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

package/dist/dialog/dialogSubmitButton.js

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

package/dist/dialog/dialogSubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogSubmitButton.js","names":[],"sources":["../../src/dialog/dialogSubmitButton.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogSubmitButtonProps } from './dialog.types'\n\n/** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */\nexport const DialogSubmitButton = vui<'button', DialogSubmitButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <Button\n      className={cs('vui-dialogSubmitButton', className)}\n      ml={2}\n      ref={ref}\n      text=\"Submit\"\n      {...styles.submitButton}\n      {...rest}\n    />\n  )\n})\n\nDialogSubmitButton.displayName = 'DialogSubmitButton'\nexport default DialogSubmitButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAAwC,OAAO,QAAQ;CACvF,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC;EACC,WAAW,GAAG,0BAA0B,UAAU;EAClD,IAAI;EACC;EACL,MAAK;EACL,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,mBAAmB,cAAc"}
+{"version":3,"file":"dialogSubmitButton.js","names":[],"sources":["../../src/dialog/dialogSubmitButton.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogSubmitButtonProps } from './dialog.types'\n\n/** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */\nexport const DialogSubmitButton = vui<'button', DialogSubmitButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return (\n    <Button\n      className={cs('vui-dialogSubmitButton', className)}\n      ml={2}\n      ref={ref}\n      text=\"Submit\"\n      {...styles.submitButton}\n      {...rest}\n    />\n  )\n})\n\nDialogSubmitButton.displayName = 'DialogSubmitButton'\nexport default DialogSubmitButton\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAAwC,OAAO,QAAQ;CACvF,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,0BAA0B,UAAU;EAClD,IAAI;EACC;EACL,MAAK;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,mBAAmB,cAAc"}

package/dist/dialog/dialogTitle.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DialogTitleProps } from "./dialog.types.js";
-import "../index.js";
-
 //#region src/dialog/dialogTitle.d.ts
 /** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */
 declare const DialogTitle: VuiComponent<"h4", DialogTitleProps>;

package/dist/dialog/dialogTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogTitle.d.ts","names":[],"sources":["../../src/dialog/dialogTitle.tsx"],"mappings":";;;;;;cAOa,WAAA,EAAW,YAAA,OAAA,gBAAA"}
+{"version":3,"file":"dialogTitle.d.ts","names":[],"sources":["../../src/dialog/dialogTitle.tsx"],"mappings":";;;;cAOa,WAAA,EAAW,YAAA,OAAA,gBAAA"}

package/dist/dialog/dialogTitle.js

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

package/dist/dialog/dialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogTitle.js","names":[],"sources":["../../src/dialog/dialogTitle.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { H4 } from '../heading'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogTitleProps } from './dialog.types'\n\n/** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */\nexport const DialogTitle = vui<'h4', DialogTitleProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { titleId } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return <H4 className={cs('vui-dialogTitle', className)} id={titleId} ref={ref} {...styles.title} {...rest} />\n})\n\nDialogTitle.displayName = 'DialogTitle'\nexport default DialogTitle\n"],"mappings":";;;;;;;;;AAOA,MAAa,cAAc,KAA6B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,YAAY,kBAAkB,IAAI,EAAE;CAC5C,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QAAO,oBAAC;EAAG,WAAW,GAAG,mBAAmB,UAAU;EAAE,IAAI;EAAc;EAAK,GAAI,OAAO;EAAO,GAAI;GAAQ;EAC7G;AAEF,YAAY,cAAc"}
+{"version":3,"file":"dialogTitle.js","names":[],"sources":["../../src/dialog/dialogTitle.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { H4 } from '../heading'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogTitleProps } from './dialog.types'\n\n/** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */\nexport const DialogTitle = vui<'h4', DialogTitleProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { titleId } = useDialogContext() ?? {}\n  const styles = useStyleConfig('Dialog', useDialogContext())\n\n  return <H4 className={cs('vui-dialogTitle', className)} id={titleId} ref={ref} {...styles.title} {...rest} />\n})\n\nDialogTitle.displayName = 'DialogTitle'\nexport default DialogTitle\n"],"mappings":";;;;;;;;;AAOA,MAAa,cAAc,KAA6B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,YAAY,kBAAkB,IAAI,EAAE;CAC5C,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QAAO,oBAAC,IAAD;EAAI,WAAW,GAAG,mBAAmB,UAAU;EAAE,IAAI;EAAc;EAAK,GAAI,OAAO;EAAO,GAAI;EAAQ;EAC7G;AAEF,YAAY,cAAc"}

package/dist/dialog/theme.js

@@ -28,5 +28,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/dialog/useDialog.js

@@ -65,5 +65,5 @@ const useDialog = () => {
 
 //#endregion
 export { useDialog };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=useDialog.js.map

package/dist/dialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialog.js","names":[],"sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useVuiContext } from '../core'\nimport { Dialog } from '../dialog'\nimport { Input } from '../input'\n\nexport const useDialog = () => {\n  const { setPortalSlot } = useVuiContext()\n\n  const showConfirm = (title: string, message: string): Promise<boolean> =>\n    new Promise(resolve =>\n      setPortalSlot(\n        <Dialog\n          body={message}\n          cancelButton={{\n            onClick: () => {\n              resolve(false)\n              setPortalSlot(null)\n            },\n            text: 'Cancel',\n          }}\n          closeButton={false}\n          isOpen\n          submitButton={{\n            onClick: () => {\n              resolve(true)\n              setPortalSlot(null)\n            },\n            text: 'Confirm',\n          }}\n          title={title}\n        />,\n      ),\n    )\n\n  const showPrompt = (title: string, value = ''): Promise<string | false> =>\n    new Promise(resolve => {\n      let inputValue = value\n      setPortalSlot(\n        <Dialog\n          body={\n            <Box px={3} py={2}>\n              <Input onChange={e => (inputValue = e.target.value)} value={value} />\n            </Box>\n          }\n          cancelButton={{\n            onClick: () => {\n              resolve(false)\n              setPortalSlot(null)\n            },\n            text: 'Cancel',\n          }}\n          closeButton={false}\n          isOpen\n          submitButton={{\n            onClick: () => {\n              resolve(inputValue)\n              setPortalSlot(null)\n            },\n            text: 'Submit',\n          }}\n          title={title}\n        />,\n      )\n    })\n\n  return { showConfirm, showPrompt }\n}\n"],"mappings":";;;;;;;AAKA,MAAa,kBAAkB;CAC7B,MAAM,EAAE,kBAAkB,eAAe;CAEzC,MAAM,eAAe,OAAe,YAClC,IAAI,SAAQ,YACV,cACE,oBAAC;EACC,MAAM;EACN,cAAc;GACZ,eAAe;AACb,YAAQ,MAAM;AACd,kBAAc,KAAK;;GAErB,MAAM;GACP;EACD,aAAa;EACb;EACA,cAAc;GACZ,eAAe;AACb,YAAQ,KAAK;AACb,kBAAc,KAAK;;GAErB,MAAM;GACP;EACM;GACP,CACH,CACF;CAEH,MAAM,cAAc,OAAe,QAAQ,OACzC,IAAI,SAAQ,YAAW;EACrB,IAAI,aAAa;AACjB,gBACE,oBAAC;GACC,MACE,oBAAC;IAAI,IAAI;IAAG,IAAI;cACd,oBAAC;KAAM,WAAU,MAAM,aAAa,EAAE,OAAO;KAAe;MAAS;KACjE;GAER,cAAc;IACZ,eAAe;AACb,aAAQ,MAAM;AACd,mBAAc,KAAK;;IAErB,MAAM;IACP;GACD,aAAa;GACb;GACA,cAAc;IACZ,eAAe;AACb,aAAQ,WAAW;AACnB,mBAAc,KAAK;;IAErB,MAAM;IACP;GACM;IACP,CACH;GACD;AAEJ,QAAO;EAAE;EAAa;EAAY"}
+{"version":3,"file":"useDialog.js","names":[],"sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { useVuiContext } from '../core'\nimport { Dialog } from '../dialog'\nimport { Input } from '../input'\n\nexport const useDialog = () => {\n  const { setPortalSlot } = useVuiContext()\n\n  const showConfirm = (title: string, message: string): Promise<boolean> =>\n    new Promise(resolve =>\n      setPortalSlot(\n        <Dialog\n          body={message}\n          cancelButton={{\n            onClick: () => {\n              resolve(false)\n              setPortalSlot(null)\n            },\n            text: 'Cancel',\n          }}\n          closeButton={false}\n          isOpen\n          submitButton={{\n            onClick: () => {\n              resolve(true)\n              setPortalSlot(null)\n            },\n            text: 'Confirm',\n          }}\n          title={title}\n        />,\n      ),\n    )\n\n  const showPrompt = (title: string, value = ''): Promise<string | false> =>\n    new Promise(resolve => {\n      let inputValue = value\n      setPortalSlot(\n        <Dialog\n          body={\n            <Box px={3} py={2}>\n              <Input onChange={e => (inputValue = e.target.value)} value={value} />\n            </Box>\n          }\n          cancelButton={{\n            onClick: () => {\n              resolve(false)\n              setPortalSlot(null)\n            },\n            text: 'Cancel',\n          }}\n          closeButton={false}\n          isOpen\n          submitButton={{\n            onClick: () => {\n              resolve(inputValue)\n              setPortalSlot(null)\n            },\n            text: 'Submit',\n          }}\n          title={title}\n        />,\n      )\n    })\n\n  return { showConfirm, showPrompt }\n}\n"],"mappings":";;;;;;;AAKA,MAAa,kBAAkB;CAC7B,MAAM,EAAE,kBAAkB,eAAe;CAEzC,MAAM,eAAe,OAAe,YAClC,IAAI,SAAQ,YACV,cACE,oBAAC,QAAD;EACE,MAAM;EACN,cAAc;GACZ,eAAe;AACb,YAAQ,MAAM;AACd,kBAAc,KAAK;;GAErB,MAAM;GACP;EACD,aAAa;EACb;EACA,cAAc;GACZ,eAAe;AACb,YAAQ,KAAK;AACb,kBAAc,KAAK;;GAErB,MAAM;GACP;EACM;EACP,EACH,CACF;CAEH,MAAM,cAAc,OAAe,QAAQ,OACzC,IAAI,SAAQ,YAAW;EACrB,IAAI,aAAa;AACjB,gBACE,oBAAC,QAAD;GACE,MACE,oBAAC,KAAD;IAAK,IAAI;IAAG,IAAI;cACd,oBAAC,OAAD;KAAO,WAAU,MAAM,aAAa,EAAE,OAAO;KAAe;KAAS;IACjE;GAER,cAAc;IACZ,eAAe;AACb,aAAQ,MAAM;AACd,mBAAc,KAAK;;IAErB,MAAM;IACP;GACD,aAAa;GACb;GACA,cAAc;IACZ,eAAe;AACb,aAAQ,WAAW;AACnB,mBAAc,KAAK;;IAErB,MAAM;IACP;GACM;GACP,EACH;GACD;AAEJ,QAAO;EAAE;EAAa;EAAY"}

package/dist/display/display.d.ts

@@ -1,11 +1,10 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { DisplayTextProps } from "./display.types.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/display/display.d.ts
-declare const DisplayBase: styled_components0.StyledComponent<"p", styled_components0.DefaultTheme, SystemProps, never>;
+declare const DisplayBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 declare const Display: VuiComponent<"p", DisplayTextProps>;
 //#endregion
 export { Display, DisplayBase };

package/dist/display/display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","names":[],"sources":["../../src/display/display.tsx"],"mappings":";;;;;;;cAIa,WAAA,EAAW,kBAAA,CAAA,eAAA,MAAgB,kBAAA,CAAhB,YAAA,EAAA,WAAA;AAAA,cAEX,OAAA,EAAO,YAAA,MAAA,gBAAA"}
+{"version":3,"file":"display.d.ts","names":[],"sources":["../../src/display/display.tsx"],"mappings":";;;;;;cAIa,WAAA,EAAW,6BAAA,CAAA,oBAAA,QAAgB,kBAAA,CAAhB,QAAA;AAAA,cAEX,OAAA,EAAO,YAAA,MAAA,gBAAA"}

package/dist/display/display.js

@@ -21,5 +21,5 @@ Display.displayName = "Display";
 
 //#endregion
 export { DisplayBase, Display as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=display.js.map

package/dist/display/display.js.map

@@ -1 +1 @@
-{"version":3,"file":"display.js","names":[],"sources":["../../src/display/display.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { DisplayTextProps } from './display.types'\n\nexport const DisplayBase = styled.pBox``\n\nexport const Display = vui<'p', DisplayTextProps>((props, ref) => {\n  const { children, className, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Display', props)\n\n  return (\n    <DisplayBase className={cs('vui-display', className)} ref={ref} {...styles} {...rest}>\n      {children}\n    </DisplayBase>\n  )\n})\n\nDisplay.displayName = 'Display'\nexport default Display\n"],"mappings":";;;;;;;AAIA,MAAa,cAAc,OAAO,IAAI;AAEtC,MAAa,UAAU,KAA4B,OAAO,QAAQ;CAChE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS,iBAAiB,MAAM;CAChE,MAAM,SAAS,eAAe,WAAW,MAAM;AAE/C,QACE,oBAAC;EAAY,WAAW,GAAG,eAAe,UAAU;EAAO;EAAK,GAAI;EAAQ,GAAI;EAC7E;GACW;EAEhB;AAEF,QAAQ,cAAc"}
+{"version":3,"file":"display.js","names":[],"sources":["../../src/display/display.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { DisplayTextProps } from './display.types'\n\nexport const DisplayBase = styled.pBox``\n\nexport const Display = vui<'p', DisplayTextProps>((props, ref) => {\n  const { children, className, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Display', props)\n\n  return (\n    <DisplayBase className={cs('vui-display', className)} ref={ref} {...styles} {...rest}>\n      {children}\n    </DisplayBase>\n  )\n})\n\nDisplay.displayName = 'Display'\nexport default Display\n"],"mappings":";;;;;;;AAIA,MAAa,cAAc,OAAO,IAAI;AAEtC,MAAa,UAAU,KAA4B,OAAO,QAAQ;CAChE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS,iBAAiB,MAAM;CAChE,MAAM,SAAS,eAAe,WAAW,MAAM;AAE/C,QACE,oBAAC,aAAD;EAAa,WAAW,GAAG,eAAe,UAAU;EAAO;EAAK,GAAI;EAAQ,GAAI;EAC7E;EACW;EAEhB;AAEF,QAAQ,cAAc"}

package/dist/display/display.types.d.ts

@@ -1,7 +1,5 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
-
 //#region src/display/display.types.d.ts
 type DisplayTextProps = SystemProps & ThemingProps<'Display'>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"display.types.d.ts","names":[],"sources":["../../src/display/display.types.ts"],"mappings":";;;;;KAMY,gBAAA,GAAmB,WAAA,GAAc,YAAA"}
+{"version":3,"file":"display.types.d.ts","names":[],"sources":["../../src/display/display.types.ts"],"mappings":";;;KAMY,gBAAA,GAAmB,WAAA,GAAc,YAAA"}

package/dist/display/theme.js

@@ -25,5 +25,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/divider/divider.d.ts

@@ -1,11 +1,10 @@
-import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { DividerProps } from "./divider.types.js";
-import "../index.js";
 import * as styled_components0 from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/divider/divider.d.ts
-declare const DividerBase: styled_components0.StyledComponent<"hr", styled_components0.DefaultTheme, SystemProps, never>;
+declare const DividerBase: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<any, never>> & string;
 /** Visually separates content with a horizontal or vertical line. */
 declare const Divider: VuiComponent<"hr", DividerProps>;
 //#endregion

package/dist/divider/divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","names":[],"sources":["../../src/divider/divider.tsx"],"mappings":";;;;;;;cAIa,WAAA,EAAW,kBAAA,CAAA,eAAA,OAEvB,kBAAA,CAFuB,YAAA,EAAA,WAAA;;cAKX,OAAA,EAAO,YAAA,OAAA,YAAA"}
+{"version":3,"file":"divider.d.ts","names":[],"sources":["../../src/divider/divider.tsx"],"mappings":";;;;;;cAIa,WAAA,EAAW,6BAAA,CAAA,oBAAA,QAEvB,kBAAA,CAFuB,QAAA;;cAKX,OAAA,EAAO,YAAA,OAAA,YAAA"}

package/dist/divider/divider.js

@@ -29,5 +29,5 @@ Divider.displayName = "Divider";
 
 //#endregion
 export { DividerBase, Divider as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=divider.js.map

package/dist/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","names":[],"sources":["../../src/divider/divider.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { DividerProps } from './divider.types'\n\nexport const DividerBase = styled.hrBox`\n  border-color: sandstone.90;\n`\n\n/** Visually separates content with a horizontal or vertical line. */\nexport const Divider = vui<'hr', DividerProps>((props, ref) => {\n  const { className, isVertical, width, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Divider', props)\n\n  const borderSide = isVertical ? 'Right' : 'Bottom'\n  const borderWidth = `border${borderSide}Width`\n  const height = isVertical ? '100%' : ''\n\n  const aliasedProps = filterUndefined({\n    [borderWidth]: width ?? 1,\n  })\n\n  return (\n    <DividerBase\n      className={cs('vui-divider', className)}\n      h={height}\n      ref={ref}\n      {...styles}\n      {...aliasedProps}\n      {...rest}\n    />\n  )\n})\n\nDivider.displayName = 'Divider'\nexport default Divider\n"],"mappings":";;;;;;;;AAIA,MAAa,cAAc,OAAO,KAAK;;;;AAKvC,MAAa,UAAU,KAAyB,OAAO,QAAQ;CAC7D,MAAM,EAAE,WAAW,YAAY,OAAO,GAAG,SAAS,iBAAiB,MAAM;CACzE,MAAM,SAAS,eAAe,WAAW,MAAM;CAG/C,MAAM,cAAc,SADD,aAAa,UAAU,SACF;CACxC,MAAM,SAAS,aAAa,SAAS;CAErC,MAAM,eAAe,gBAAgB,GAClC,cAAc,SAAS,GACzB,CAAC;AAEF,QACE,oBAAC;EACC,WAAW,GAAG,eAAe,UAAU;EACvC,GAAG;EACE;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,QAAQ,cAAc"}
+{"version":3,"file":"divider.js","names":[],"sources":["../../src/divider/divider.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { DividerProps } from './divider.types'\n\nexport const DividerBase = styled.hrBox`\n  border-color: sandstone.90;\n`\n\n/** Visually separates content with a horizontal or vertical line. */\nexport const Divider = vui<'hr', DividerProps>((props, ref) => {\n  const { className, isVertical, width, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Divider', props)\n\n  const borderSide = isVertical ? 'Right' : 'Bottom'\n  const borderWidth = `border${borderSide}Width`\n  const height = isVertical ? '100%' : ''\n\n  const aliasedProps = filterUndefined({\n    [borderWidth]: width ?? 1,\n  })\n\n  return (\n    <DividerBase\n      className={cs('vui-divider', className)}\n      h={height}\n      ref={ref}\n      {...styles}\n      {...aliasedProps}\n      {...rest}\n    />\n  )\n})\n\nDivider.displayName = 'Divider'\nexport default Divider\n"],"mappings":";;;;;;;;AAIA,MAAa,cAAc,OAAO,KAAK;;;;AAKvC,MAAa,UAAU,KAAyB,OAAO,QAAQ;CAC7D,MAAM,EAAE,WAAW,YAAY,OAAO,GAAG,SAAS,iBAAiB,MAAM;CACzE,MAAM,SAAS,eAAe,WAAW,MAAM;CAG/C,MAAM,cAAc,SADD,aAAa,UAAU,SACF;CACxC,MAAM,SAAS,aAAa,SAAS;CAErC,MAAM,eAAe,gBAAgB,GAClC,cAAc,SAAS,GACzB,CAAC;AAEF,QACE,oBAAC,aAAD;EACE,WAAW,GAAG,eAAe,UAAU;EACvC,GAAG;EACE;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ;EAEJ;AAEF,QAAQ,cAAc"}

package/dist/divider/divider.types.d.ts

@@ -1,8 +1,6 @@
 import { ThemingProps } from "../theme/types.js";
 import { BordersProps } from "../system/borders.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
-
 //#region src/divider/divider.types.d.ts
 type DividerProps = SystemProps & ThemingProps<'Divider'> & {
   /** Children are disabled for this component. */children?: never; /** Renders the line vertically using 100% height. */

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

@@ -1 +1 @@
-{"version":3,"file":"divider.types.d.ts","names":[],"sources":["../../src/divider/divider.types.ts"],"mappings":";;;;;;KAGY,YAAA,GAAe,WAAA,GACzB,YAAA;kDAEE,QAAA;EAEA,UAAA,YALoB;EAOpB,KAAA,GAAQ,YAAA;AAAA"}
+{"version":3,"file":"divider.types.d.ts","names":[],"sources":["../../src/divider/divider.types.ts"],"mappings":";;;;KAGY,YAAA,GAAe,WAAA,GACzB,YAAA;kDAEE,QAAA;EAEA,UAAA,YALQ;EAOR,KAAA,GAAQ,YAAA;AAAA"}

package/dist/divider/theme.js

@@ -12,5 +12,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/dragAndDrop/dragAndDrop.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { DragAndDropProps } from "./dragAndDrop.types.js";
-import "../index.js";
-
 //#region src/dragAndDrop/dragAndDrop.d.ts
 /** Prepares uploading files by selecting or dragging. */
 declare const DragAndDrop: VuiComponent<"label", DragAndDropProps>;

package/dist/dragAndDrop/dragAndDrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.d.ts","names":[],"sources":["../../src/dragAndDrop/dragAndDrop.tsx"],"mappings":";;;;;;cAwBa,WAAA,EAAW,YAAA,UAAA,gBAAA"}
+{"version":3,"file":"dragAndDrop.d.ts","names":[],"sources":["../../src/dragAndDrop/dragAndDrop.tsx"],"mappings":";;;;cAwBa,WAAA,EAAW,YAAA,UAAA,gBAAA"}

package/dist/dragAndDrop/dragAndDrop.js

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

package/dist/dragAndDrop/dragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"dragAndDrop.js","names":[],"sources":["../../src/dragAndDrop/dragAndDrop.tsx"],"sourcesContent":["import type { ChangeEvent, DragEvent } from 'react'\nimport { useRef } from 'react'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport type { IconProp } from '../icon'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\nimport type { DragAndDropProps } from './dragAndDrop.types'\n\nconst defaultIcon: IconProp = 'falCloudUpload'\n\nconst defaultText = 'Click or drag files to this area'\n\nconst inputType = 'file'\n\nconst DragAndDropBase = styled.labelBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n  justify-content: center;\n`\n\n/** Prepares uploading files by selecting or dragging. */\nexport const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {\n  const {\n    accept,\n    className,\n    icon = defaultIcon,\n    selectFolderOnClick,\n    selectFolderOnDrop,\n    onFilesAdded,\n    multiple = true,\n    text = defaultText,\n    children,\n    disabled,\n    ...rest\n  } = omitThemingProps(props)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const styles = useStyleConfig('DragAndDrop', props)\n\n  const processFiles = (files: FileList): File[] => Array.from(files).map(file => file)\n\n  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n    const files = processFiles(e?.currentTarget?.files as FileList)\n    if (files?.length) {\n      onFilesAdded?.(files)\n      // Reseting the input type to allow selecting the same file(s)\n      e.currentTarget.type = ''\n      e.currentTarget.type = inputType\n    }\n  }\n\n  const getFilesWebkitDataTransferItems = (dataTransferItems: DataTransferItemList): Promise<File[]> => {\n    const traverseFileTreePromise = (item: FileSystemEntry, path: string = ''): Promise<File[]> =>\n      new Promise(resolve => {\n        if (item.isFile) {\n          const fileEntry = item as FileSystemFileEntry\n          fileEntry.file(file => {\n            ;(file as any).filepath = path + file.name // Save full path with type casting\n            files.push(file)\n            resolve([file])\n          })\n        } else if (item.isDirectory) {\n          const dirEntry = item as FileSystemDirectoryEntry\n          const dirReader = dirEntry.createReader()\n          dirReader.readEntries(entries => {\n            const entriesPromises: Promise<File[]>[] = entries.map(entry =>\n              traverseFileTreePromise(entry, path + dirEntry.name + '/'),\n            )\n            resolve(Promise.all(entriesPromises).then(entries => [].concat(...(entries as any[]))))\n          })\n        }\n      })\n\n    const files: File[] = []\n    return new Promise((resolve, reject) => {\n      const entriesPromises: Promise<File[]>[] = []\n      for (let i = 0; i < dataTransferItems.length; i++) {\n        const item = dataTransferItems[i].webkitGetAsEntry()\n        if (item) entriesPromises.push(traverseFileTreePromise(item))\n      }\n      Promise.all(entriesPromises)\n        .then(() => resolve(files))\n        .catch(reject)\n    })\n  }\n\n  const handleDrop = (e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n\n    if (selectFolderOnDrop) {\n      const items = e.dataTransfer.items\n      getFilesWebkitDataTransferItems(items).then(files => files?.length && onFilesAdded?.(files))\n      return undefined\n    }\n\n    const files = e.dataTransfer?.files ? processFiles(e.dataTransfer.files) : []\n    if (files?.length) onFilesAdded?.(files)\n  }\n\n  return (\n    <DragAndDropBase\n      className={cs('vui-drag-and-drop', className)}\n      cursor={disabled ? 'not-allowed' : 'pointer'}\n      onDragEnter={e => e.preventDefault()}\n      onDragOver={e => e.preventDefault()}\n      onDrop={e => handleDrop(e)}\n      opacity={disabled ? 0.5 : 1}\n      p={5}\n      pointerEvents={disabled ? 'none' : 'auto'}\n      ref={ref}\n      {...styles}\n      {...rest}\n    >\n      {children || (\n        <T display=\"flex\">\n          <Icon mr={1} name={icon} />\n          {text}\n        </T>\n      )}\n      <input\n        accept={accept}\n        className=\"vui-drag-and-drop-hidden-input\"\n        multiple={multiple}\n        onChange={handleFileInput}\n        ref={fileInputRef}\n        style={{ display: 'none' }}\n        type={inputType}\n        {...(selectFolderOnClick && { webkitdirectory: 'true', directory: 'true' })}\n      />\n    </DragAndDropBase>\n  )\n})\n\nDragAndDrop.displayName = 'DragAndDrop'\nexport default DragAndDrop\n"],"mappings":";;;;;;;;;;AAUA,MAAM,cAAwB;AAE9B,MAAM,cAAc;AAEpB,MAAM,YAAY;AAElB,MAAM,kBAAkB,OAAO,QAAQ;;;;;;;AAQvC,MAAa,cAAc,KAAgC,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,WACA,OAAO,aACP,qBACA,oBACA,cACA,WAAW,MACX,OAAO,aACP,UACA,UACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,eAAe,OAAyB,KAAK;CACnD,MAAM,SAAS,eAAe,eAAe,MAAM;CAEnD,MAAM,gBAAgB,UAA4B,MAAM,KAAK,MAAM,CAAC,KAAI,SAAQ,KAAK;CAErF,MAAM,mBAAmB,MAAqC;AAC5D,IAAE,gBAAgB;AAClB,MAAI,SAAU,QAAO;EACrB,MAAM,QAAQ,aAAa,GAAG,eAAe,MAAkB;AAC/D,MAAI,OAAO,QAAQ;AACjB,kBAAe,MAAM;AAErB,KAAE,cAAc,OAAO;AACvB,KAAE,cAAc,OAAO;;;CAI3B,MAAM,mCAAmC,sBAA6D;EACpG,MAAM,2BAA2B,MAAuB,OAAe,OACrE,IAAI,SAAQ,YAAW;AACrB,OAAI,KAAK,OAEP,CADkB,KACR,MAAK,SAAQ;AACpB,IAAC,KAAa,WAAW,OAAO,KAAK;AACtC,UAAM,KAAK,KAAK;AAChB,YAAQ,CAAC,KAAK,CAAC;KACf;YACO,KAAK,aAAa;IAC3B,MAAM,WAAW;AAEjB,IADkB,SAAS,cAAc,CAC/B,aAAY,YAAW;KAC/B,MAAM,kBAAqC,QAAQ,KAAI,UACrD,wBAAwB,OAAO,OAAO,SAAS,OAAO,IAAI,CAC3D;AACD,aAAQ,QAAQ,IAAI,gBAAgB,CAAC,MAAK,YAAW,EAAE,CAAC,OAAO,GAAI,QAAkB,CAAC,CAAC;MACvF;;IAEJ;EAEJ,MAAM,QAAgB,EAAE;AACxB,SAAO,IAAI,SAAS,SAAS,WAAW;GACtC,MAAM,kBAAqC,EAAE;AAC7C,QAAK,IAAI,IAAI,GAAG,IAAI,kBAAkB,QAAQ,KAAK;IACjD,MAAM,OAAO,kBAAkB,GAAG,kBAAkB;AACpD,QAAI,KAAM,iBAAgB,KAAK,wBAAwB,KAAK,CAAC;;AAE/D,WAAQ,IAAI,gBAAgB,CACzB,WAAW,QAAQ,MAAM,CAAC,CAC1B,MAAM,OAAO;IAChB;;CAGJ,MAAM,cAAc,MAA8B;AAChD,IAAE,gBAAgB;AAClB,MAAI,SAAU,QAAO;AAErB,MAAI,oBAAoB;GACtB,MAAM,QAAQ,EAAE,aAAa;AAC7B,mCAAgC,MAAM,CAAC,MAAK,UAAS,OAAO,UAAU,eAAe,MAAM,CAAC;AAC5F;;EAGF,MAAM,QAAQ,EAAE,cAAc,QAAQ,aAAa,EAAE,aAAa,MAAM,GAAG,EAAE;AAC7E,MAAI,OAAO,OAAQ,gBAAe,MAAM;;AAG1C,QACE,qBAAC;EACC,WAAW,GAAG,qBAAqB,UAAU;EAC7C,QAAQ,WAAW,gBAAgB;EACnC,cAAa,MAAK,EAAE,gBAAgB;EACpC,aAAY,MAAK,EAAE,gBAAgB;EACnC,SAAQ,MAAK,WAAW,EAAE;EAC1B,SAAS,WAAW,KAAM;EAC1B,GAAG;EACH,eAAe,WAAW,SAAS;EAC9B;EACL,GAAI;EACJ,GAAI;aAEH,YACC,qBAAC;GAAE,SAAQ;cACT,oBAAC;IAAK,IAAI;IAAG,MAAM;KAAQ,EAC1B;IACC,EAEN,oBAAC;GACS;GACR,WAAU;GACA;GACV,UAAU;GACV,KAAK;GACL,OAAO,EAAE,SAAS,QAAQ;GAC1B,MAAM;GACN,GAAK,uBAAuB;IAAE,iBAAiB;IAAQ,WAAW;IAAQ;IAC1E;GACc;EAEpB;AAEF,YAAY,cAAc"}
+{"version":3,"file":"dragAndDrop.js","names":[],"sources":["../../src/dragAndDrop/dragAndDrop.tsx"],"sourcesContent":["import type { ChangeEvent, DragEvent } from 'react'\nimport { useRef } from 'react'\n\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport type { IconProp } from '../icon'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs } from '../utils'\nimport type { DragAndDropProps } from './dragAndDrop.types'\n\nconst defaultIcon: IconProp = 'falCloudUpload'\n\nconst defaultText = 'Click or drag files to this area'\n\nconst inputType = 'file'\n\nconst DragAndDropBase = styled.labelBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n  justify-content: center;\n`\n\n/** Prepares uploading files by selecting or dragging. */\nexport const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {\n  const {\n    accept,\n    className,\n    icon = defaultIcon,\n    selectFolderOnClick,\n    selectFolderOnDrop,\n    onFilesAdded,\n    multiple = true,\n    text = defaultText,\n    children,\n    disabled,\n    ...rest\n  } = omitThemingProps(props)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const styles = useStyleConfig('DragAndDrop', props)\n\n  const processFiles = (files: FileList): File[] => Array.from(files).map(file => file)\n\n  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n    const files = processFiles(e?.currentTarget?.files as FileList)\n    if (files?.length) {\n      onFilesAdded?.(files)\n      // Reseting the input type to allow selecting the same file(s)\n      e.currentTarget.type = ''\n      e.currentTarget.type = inputType\n    }\n  }\n\n  const getFilesWebkitDataTransferItems = (dataTransferItems: DataTransferItemList): Promise<File[]> => {\n    const traverseFileTreePromise = (item: FileSystemEntry, path: string = ''): Promise<File[]> =>\n      new Promise(resolve => {\n        if (item.isFile) {\n          const fileEntry = item as FileSystemFileEntry\n          fileEntry.file(file => {\n            ;(file as any).filepath = path + file.name // Save full path with type casting\n            files.push(file)\n            resolve([file])\n          })\n        } else if (item.isDirectory) {\n          const dirEntry = item as FileSystemDirectoryEntry\n          const dirReader = dirEntry.createReader()\n          dirReader.readEntries(entries => {\n            const entriesPromises: Promise<File[]>[] = entries.map(entry =>\n              traverseFileTreePromise(entry, path + dirEntry.name + '/'),\n            )\n            resolve(Promise.all(entriesPromises).then(entries => [].concat(...(entries as any[]))))\n          })\n        }\n      })\n\n    const files: File[] = []\n    return new Promise((resolve, reject) => {\n      const entriesPromises: Promise<File[]>[] = []\n      for (let i = 0; i < dataTransferItems.length; i++) {\n        const item = dataTransferItems[i].webkitGetAsEntry()\n        if (item) entriesPromises.push(traverseFileTreePromise(item))\n      }\n      Promise.all(entriesPromises)\n        .then(() => resolve(files))\n        .catch(reject)\n    })\n  }\n\n  const handleDrop = (e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    if (disabled) return undefined\n\n    if (selectFolderOnDrop) {\n      const items = e.dataTransfer.items\n      getFilesWebkitDataTransferItems(items).then(files => files?.length && onFilesAdded?.(files))\n      return undefined\n    }\n\n    const files = e.dataTransfer?.files ? processFiles(e.dataTransfer.files) : []\n    if (files?.length) onFilesAdded?.(files)\n  }\n\n  return (\n    <DragAndDropBase\n      className={cs('vui-drag-and-drop', className)}\n      cursor={disabled ? 'not-allowed' : 'pointer'}\n      onDragEnter={(e: DragEvent<HTMLElement>) => e.preventDefault()}\n      onDragOver={(e: DragEvent<HTMLElement>) => e.preventDefault()}\n      onDrop={(e: DragEvent<HTMLElement>) => handleDrop(e)}\n      opacity={disabled ? 0.5 : 1}\n      p={5}\n      pointerEvents={disabled ? 'none' : 'auto'}\n      ref={ref}\n      {...styles}\n      {...rest}\n    >\n      {children || (\n        <T display=\"flex\">\n          <Icon mr={1} name={icon} />\n          {text}\n        </T>\n      )}\n      <input\n        accept={accept}\n        className=\"vui-drag-and-drop-hidden-input\"\n        multiple={multiple}\n        onChange={handleFileInput}\n        ref={fileInputRef}\n        style={{ display: 'none' }}\n        type={inputType}\n        {...(selectFolderOnClick && { webkitdirectory: 'true', directory: 'true' })}\n      />\n    </DragAndDropBase>\n  )\n})\n\nDragAndDrop.displayName = 'DragAndDrop'\nexport default DragAndDrop\n"],"mappings":";;;;;;;;;;AAUA,MAAM,cAAwB;AAE9B,MAAM,cAAc;AAEpB,MAAM,YAAY;AAElB,MAAM,kBAAkB,OAAO,QAAQ;;;;;;;AAQvC,MAAa,cAAc,KAAgC,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,WACA,OAAO,aACP,qBACA,oBACA,cACA,WAAW,MACX,OAAO,aACP,UACA,UACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,eAAe,OAAyB,KAAK;CACnD,MAAM,SAAS,eAAe,eAAe,MAAM;CAEnD,MAAM,gBAAgB,UAA4B,MAAM,KAAK,MAAM,CAAC,KAAI,SAAQ,KAAK;CAErF,MAAM,mBAAmB,MAAqC;AAC5D,IAAE,gBAAgB;AAClB,MAAI,SAAU,QAAO;EACrB,MAAM,QAAQ,aAAa,GAAG,eAAe,MAAkB;AAC/D,MAAI,OAAO,QAAQ;AACjB,kBAAe,MAAM;AAErB,KAAE,cAAc,OAAO;AACvB,KAAE,cAAc,OAAO;;;CAI3B,MAAM,mCAAmC,sBAA6D;EACpG,MAAM,2BAA2B,MAAuB,OAAe,OACrE,IAAI,SAAQ,YAAW;AACrB,OAAI,KAAK,OAEP,CADkB,KACR,MAAK,SAAQ;AACpB,IAAC,KAAa,WAAW,OAAO,KAAK;AACtC,UAAM,KAAK,KAAK;AAChB,YAAQ,CAAC,KAAK,CAAC;KACf;YACO,KAAK,aAAa;IAC3B,MAAM,WAAW;AAEjB,IADkB,SAAS,cAAc,CAC/B,aAAY,YAAW;KAC/B,MAAM,kBAAqC,QAAQ,KAAI,UACrD,wBAAwB,OAAO,OAAO,SAAS,OAAO,IAAI,CAC3D;AACD,aAAQ,QAAQ,IAAI,gBAAgB,CAAC,MAAK,YAAW,EAAE,CAAC,OAAO,GAAI,QAAkB,CAAC,CAAC;MACvF;;IAEJ;EAEJ,MAAM,QAAgB,EAAE;AACxB,SAAO,IAAI,SAAS,SAAS,WAAW;GACtC,MAAM,kBAAqC,EAAE;AAC7C,QAAK,IAAI,IAAI,GAAG,IAAI,kBAAkB,QAAQ,KAAK;IACjD,MAAM,OAAO,kBAAkB,GAAG,kBAAkB;AACpD,QAAI,KAAM,iBAAgB,KAAK,wBAAwB,KAAK,CAAC;;AAE/D,WAAQ,IAAI,gBAAgB,CACzB,WAAW,QAAQ,MAAM,CAAC,CAC1B,MAAM,OAAO;IAChB;;CAGJ,MAAM,cAAc,MAA8B;AAChD,IAAE,gBAAgB;AAClB,MAAI,SAAU,QAAO;AAErB,MAAI,oBAAoB;GACtB,MAAM,QAAQ,EAAE,aAAa;AAC7B,mCAAgC,MAAM,CAAC,MAAK,UAAS,OAAO,UAAU,eAAe,MAAM,CAAC;AAC5F;;EAGF,MAAM,QAAQ,EAAE,cAAc,QAAQ,aAAa,EAAE,aAAa,MAAM,GAAG,EAAE;AAC7E,MAAI,OAAO,OAAQ,gBAAe,MAAM;;AAG1C,QACE,qBAAC,iBAAD;EACE,WAAW,GAAG,qBAAqB,UAAU;EAC7C,QAAQ,WAAW,gBAAgB;EACnC,cAAc,MAA8B,EAAE,gBAAgB;EAC9D,aAAa,MAA8B,EAAE,gBAAgB;EAC7D,SAAS,MAA8B,WAAW,EAAE;EACpD,SAAS,WAAW,KAAM;EAC1B,GAAG;EACH,eAAe,WAAW,SAAS;EAC9B;EACL,GAAI;EACJ,GAAI;YAXN,CAaG,YACC,qBAAC,GAAD;GAAG,SAAQ;aAAX,CACE,oBAAC,MAAD;IAAM,IAAI;IAAG,MAAM;IAAQ,GAC1B,KACC;MAEN,oBAAC,SAAD;GACU;GACR,WAAU;GACA;GACV,UAAU;GACV,KAAK;GACL,OAAO,EAAE,SAAS,QAAQ;GAC1B,MAAM;GACN,GAAK,uBAAuB;IAAE,iBAAiB;IAAQ,WAAW;IAAQ;GAC1E,EACc;;EAEpB;AAEF,YAAY,cAAc"}

package/dist/dragAndDrop/dragAndDrop.types.d.ts

@@ -1,9 +1,6 @@
 import { ThemingProps } from "../theme/types.js";
 import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
-
 //#region src/dragAndDrop/dragAndDrop.types.d.ts
 type DragAndDropProps = Omit<BoxProps, 'variant'> & ThemingProps<'DragAndDrop'> & {
   /** Defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */accept?: string; /** Disabled. @default `false` */