@viasat/beam-react 2.0.0

package/lib/Dialog/Dialog.Body.es.js

@@ -0,0 +1,31 @@
+import { jsxs as p, jsx as d } from "react/jsx-runtime";
+import g from "clsx";
+import { forwardRef as u, useLayoutEffect as y } from "react";
+import { useMergeRefs as v } from "@floating-ui/react";
+import { g as w } from "../../chunks/classNames.DNsS4J__.js";
+import { t as x } from "../../chunks/constants.BBi77pmH.js";
+import { s as N } from "../../chunks/dialog.module.D6BI3ubv.js";
+import { useDialogContext as h } from "./Dialog.context.es.js";
+import { useIsOverFlowing as C } from "../../utils/hooks/index.es.js";
+const R = u(
+  ({ children: t, className: m, text: s, ...i }, a) => {
+    const { theme: e, setOverflowing: o } = h(), { ref: f, isOverFlowing: r } = C(), l = v([a, f]);
+    y(() => {
+      o && o(r);
+    }, [r, o]);
+    const { subElementClassPrefix: n } = w("dialog"), c = g(
+      e && x(e),
+      N[`${n}body`],
+      m
+    );
+    return /* @__PURE__ */ p("div", { className: c, ...i, ref: l, children: [
+      s && /* @__PURE__ */ d("span", { children: s }),
+      t
+    ] });
+  }
+), b = R;
+b.displayName = "Dialog.Body";
+export {
+  b as Body,
+  R as Root
+};

package/lib/Dialog/Dialog.Content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),y=require("clsx"),d=require("../../chunks/classNames.DAeKwerT.js"),x=require("../../chunks/constants.hwjHOsvT.js"),t=require("../../chunks/dialog.module.COfowyPc.js"),C=require("../FloatingUI/FloatingUI.content.cjs.js"),f=require("./Dialog.context.cjs.js");function s({children:o,className:n,...a}){const{theme:e,size:i,overlay:l}=f.useDialogContext(),r=l===!1?"transparent":!0,{baseClassNamePrefix:c,classModifierPrefix:u}=d.getBEMClassNames("dialog"),m=y(t.styles[c],t.styles[`${u}${i}`],e&&x.themeClassName(e),n);return g.jsx(C.Content,{className:m,skipFloatingStyles:!0,overlay:r,...a,children:o})}s.displayName="Dialog.Content";exports.Content=s;

package/lib/Dialog/Dialog.Content.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface DialogContentProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Specify custom content for the Dialog
+     */
+    children: ReactNode;
+}
+export declare function Content({ children, className: _className, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Content {
+    var displayName: string;
+}

package/lib/Dialog/Dialog.Content.es.js

@@ -0,0 +1,33 @@
+import { jsx as p } from "react/jsx-runtime";
+import c from "clsx";
+import { g as C } from "../../chunks/classNames.DNsS4J__.js";
+import { t as x } from "../../chunks/constants.BBi77pmH.js";
+import { s as e } from "../../chunks/dialog.module.D6BI3ubv.js";
+import { Content as g } from "../FloatingUI/FloatingUI.content.es.js";
+import { useDialogContext as y } from "./Dialog.context.es.js";
+function N({
+  children: s,
+  className: o,
+  ...a
+}) {
+  const { theme: t, size: r, overlay: m } = y(), i = m === !1 ? "transparent" : !0, { baseClassNamePrefix: n, classModifierPrefix: l } = C("dialog"), f = c(
+    e[n],
+    e[`${l}${r}`],
+    t && x(t),
+    o
+  );
+  return /* @__PURE__ */ p(
+    g,
+    {
+      className: f,
+      skipFloatingStyles: !0,
+      overlay: i,
+      ...a,
+      children: s
+    }
+  );
+}
+N.displayName = "Dialog.Content";
+export {
+  N as Content
+};

package/lib/Dialog/Dialog.Footer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("clsx"),c=require("react"),u=require("../../chunks/classNames.DAeKwerT.js"),r=require("../../chunks/dialog.module.COfowyPc.js"),l=3,g=({children:t,className:o,...i})=>{const{baseClassNamePrefix:a,subElementClassPrefix:s}=u.getBEMClassNames("dialog__footer"),n=c.useMemo(()=>c.Children.toArray(t).slice(0,l),[t]);process.env.NODE_ENV!=="production"&&n.length>l&&console.warn(`Dialog.Footer: received ${n.length} children but supports only ${l}. Extra children were trimmed.`);const[x,y,d]=n;return e.jsxs(e.Fragment,{children:[e.jsx(N,{}),e.jsxs("div",{className:m(r.styles[a],o),...i,children:[e.jsxs("div",{className:r.styles[`${s}actions`],children:[x,y]}),d&&e.jsx("div",{className:r.styles[`${s}tertiaryActions`],children:d})]})]})};g.displayName="Dialog.Footer";const N=c.memo(function(o){const{className:i,...a}=o,{subElementClassPrefix:s}=u.getBEMClassNames("dialog");return e.jsx("span",{"aria-hidden":"true",...a,className:m(r.styles[`${s}footer__divider`],i)})});exports.Footer=g;

package/lib/Dialog/Dialog.Footer.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, ComponentPropsWithRef } from 'react';
+export interface DialogFooterProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Specify the actions to be displayed in the footer.
+     * If more than 3 actions are provided, only the first 3 will be rendered
+     */
+    children: ReactNode;
+}
+export declare const Footer: {
+    ({ children, className, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/Dialog/Dialog.Footer.es.js

@@ -0,0 +1,37 @@
+import { jsx as c, jsxs as n, Fragment as N } from "react/jsx-runtime";
+import d from "clsx";
+import { memo as g, useMemo as h, Children as x } from "react";
+import { g as p } from "../../chunks/classNames.DNsS4J__.js";
+import { s as r } from "../../chunks/dialog.module.D6BI3ubv.js";
+const l = 3, v = ({ children: s, className: o, ...t }) => {
+  const { baseClassNamePrefix: i, subElementClassPrefix: e } = p("dialog__footer"), a = h(() => x.toArray(s).slice(0, l), [s]);
+  process.env.NODE_ENV !== "production" && a.length > l && console.warn(
+    `Dialog.Footer: received ${a.length} children but supports only ${l}. Extra children were trimmed.`
+  );
+  const [f, u, m] = a;
+  return /* @__PURE__ */ n(N, { children: [
+    /* @__PURE__ */ c(y, {}),
+    /* @__PURE__ */ n("div", { className: d(r[i], o), ...t, children: [
+      /* @__PURE__ */ n("div", { className: r[`${e}actions`], children: [
+        f,
+        u
+      ] }),
+      m && /* @__PURE__ */ c("div", { className: r[`${e}tertiaryActions`], children: m })
+    ] })
+  ] });
+};
+v.displayName = "Dialog.Footer";
+const y = g(function(o) {
+  const { className: t, ...i } = o, { subElementClassPrefix: e } = p("dialog");
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      "aria-hidden": "true",
+      ...i,
+      className: d(r[`${e}footer__divider`], t)
+    }
+  );
+});
+export {
+  v as Footer
+};

package/lib/Dialog/Dialog.Header.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("clsx"),x=require("react"),q=require("../../chunks/CheckCircleOutline.iRHrT_Eb.js"),y=require("../../chunks/ErrorOutline.Cb78OesH.js"),E=require("../../chunks/InfoOutline.Gr8gkm5N.js"),I=require("../../chunks/WarningOutlined.BPePPeyt.js"),u=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const i=require("../../chunks/dialog.module.COfowyPc.js"),$=require("../Tooltip/Tooltip.cjs.js"),B=require("../CloseButton/CloseButton.cjs.js"),O=require("../../chunks/FloatingUI.context.BULqADss.js"),S=require("./Dialog.context.cjs.js"),c={positive:"Success",warning:"Warning",negative:"Error",information:"Information"},k=({icon:t,appearance:l,iconAriaLabel:s})=>{const o=x.useMemo(()=>({positive:e.jsx(q.SvgCheckCircleOutline,{role:"img","aria-label":s||c.positive}),warning:e.jsx(I.SvgWarningOutlined,{role:"img","aria-label":s||c.warning}),negative:e.jsx(y.SvgErrorOutline,{role:"img","aria-label":s||c.negative}),information:e.jsx(E.SvgInfoOutline,{role:"img","aria-label":s||c.information})}),[s]),{subElementClassPrefix:r}=u.getBEMClassNames("dialog__header"),a=m(i.styles[`${r}icon`],l&&i.styles[`${r}icon--${l}`]);return!t&&!l?null:e.jsx("div",{className:a,children:t||(l?o[l]:null)})},w=({ariaLabel:t="Close dialog"})=>{const{subElementClassPrefix:l}=u.getBEMClassNames("dialog__header"),{setOpen:s}=O.useBmFloatingUIContext(),o=x.useCallback(r=>{s==null||s(!1,r,"click")},[s]);return e.jsx("div",{className:i.styles[`${l}close-trigger`],children:e.jsx($.Tooltip,{text:t,children:e.jsx(B.CloseButton,{"aria-label":t,size:"lg",onClick:o})})})},C=({children:t,className:l,dismissible:s=!0,appearance:o,closeButtonAriaLabel:r="Close dialog",heading:a,description:g,icon:f,iconAriaLabel:h,divider:d=!0,disableDividerOnOverflow:j=!1,...v})=>{const{baseClassNamePrefix:_,subElementClassPrefix:n}=u.getBEMClassNames("dialog__header"),{overflowing:N}=S.useDialogContext(),b=d===!0||d===!1&&!j&&N;return e.jsxs("div",{className:m(i.styles[_],l),...v,children:[e.jsxs("div",{className:i.styles[`${n}row`],children:[e.jsx(k,{icon:f,appearance:o,iconAriaLabel:h}),a&&e.jsx("h2",{className:i.styles[`${n}heading`],children:a}),s&&e.jsx(w,{ariaLabel:r})]}),g&&e.jsx("p",{className:i.styles[`${n}description`],children:g}),t&&e.jsx("div",{className:i.styles[`${n}children`],children:t}),b&&e.jsx("hr",{"aria-hidden":"true",className:i.styles[`${n}divider`]})]})};C.displayName="Dialog.Header";exports.Header=C;

package/lib/Dialog/Dialog.Header.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
+import { DialogAppearance } from '@viasat/beam-shared/components/dialog';
+export interface DialogHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Add heading text for the Dialog
+     */
+    heading?: ReactNode;
+    /**
+     * Specify if the Dialog can be dismissed
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Specify an aria-label for the close button
+     * @default 'Close dialog'
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Specify if the Dialog displays a top divider
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Disable the divider when the content is overflowing
+     * @default false
+     */
+    disableDividerOnOverflow?: boolean;
+    /**
+     * Specify the appearance of the heading. `icon` is required to render appearance
+     */
+    appearance?: DialogAppearance;
+    /**
+     * Specify an icon next to heading
+     */
+    icon?: ReactElement;
+    /**
+     * Specify an aria-label for the icon
+     */
+    iconAriaLabel?: string;
+    /**
+     * Add description text to the header
+     */
+    description?: string;
+    /**
+     * Add custom content to the header
+     */
+    children?: ReactNode;
+    /**
+     * Specify a callback function for when the close button is activated
+     */
+    onDismiss?: () => void;
+}
+export declare const Header: {
+    ({ children, className, dismissible, appearance, closeButtonAriaLabel, heading, description, icon, iconAriaLabel, divider, disableDividerOnOverflow, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/Dialog/Dialog.Header.es.js

@@ -0,0 +1,95 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import u from "clsx";
+import { useMemo as S, useCallback as b } from "react";
+import { S as w } from "../../chunks/CheckCircleOutline.Bn3mTuUE.js";
+import { S as E } from "../../chunks/ErrorOutline._gBx3dtF.js";
+import { S as I } from "../../chunks/InfoOutline.Co5VGOxN.js";
+import { S as _ } from "../../chunks/WarningOutlined.B3hTzZPs.js";
+import { g as c } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as r } from "../../chunks/dialog.module.D6BI3ubv.js";
+import { Tooltip as k } from "../Tooltip/Tooltip.es.js";
+import { CloseButton as B } from "../CloseButton/CloseButton.es.js";
+import { a as P } from "../../chunks/FloatingUI.context.2kPXcTvi.js";
+import { useDialogContext as D } from "./Dialog.context.es.js";
+const m = {
+  positive: "Success",
+  warning: "Warning",
+  negative: "Error",
+  information: "Information"
+}, O = ({ icon: s, appearance: i, iconAriaLabel: o }) => {
+  const a = S(
+    () => ({
+      positive: /* @__PURE__ */ e(
+        w,
+        {
+          role: "img",
+          "aria-label": o || m.positive
+        }
+      ),
+      warning: /* @__PURE__ */ e(
+        _,
+        {
+          role: "img",
+          "aria-label": o || m.warning
+        }
+      ),
+      negative: /* @__PURE__ */ e(
+        E,
+        {
+          role: "img",
+          "aria-label": o || m.negative
+        }
+      ),
+      information: /* @__PURE__ */ e(
+        I,
+        {
+          role: "img",
+          "aria-label": o || m.information
+        }
+      )
+    }),
+    [o]
+  ), { subElementClassPrefix: l } = c("dialog__header"), n = u(
+    r[`${l}icon`],
+    i && r[`${l}icon--${i}`]
+  );
+  return !s && !i ? null : /* @__PURE__ */ e("div", { className: n, children: s || (i ? a[i] : null) });
+}, j = ({ ariaLabel: s = "Close dialog" }) => {
+  const { subElementClassPrefix: i } = c("dialog__header"), { setOpen: o } = P(), a = b(
+    (l) => {
+      o == null || o(!1, l, "click");
+    },
+    [o]
+  );
+  return /* @__PURE__ */ e("div", { className: r[`${i}close-trigger`], children: /* @__PURE__ */ e(k, { text: s, children: /* @__PURE__ */ e(B, { "aria-label": s, size: "lg", onClick: a }) }) });
+}, y = ({
+  children: s,
+  className: i,
+  dismissible: o = !0,
+  appearance: a,
+  closeButtonAriaLabel: l = "Close dialog",
+  heading: n,
+  description: g,
+  icon: C,
+  iconAriaLabel: h,
+  divider: d = !0,
+  disableDividerOnOverflow: v = !1,
+  ...p
+}) => {
+  const { baseClassNamePrefix: x, subElementClassPrefix: t } = c("dialog__header"), { overflowing: N } = D(), $ = d === !0 || d === !1 && !v && N;
+  return /* @__PURE__ */ f("div", { className: u(r[x], i), ...p, children: [
+    /* @__PURE__ */ f("div", { className: r[`${t}row`], children: [
+      /* @__PURE__ */ e(O, { icon: C, appearance: a, iconAriaLabel: h }),
+      n && /* @__PURE__ */ e("h2", { className: r[`${t}heading`], children: n }),
+      o && /* @__PURE__ */ e(j, { ariaLabel: l })
+    ] }),
+    g && /* @__PURE__ */ e("p", { className: r[`${t}description`], children: g }),
+    s && /* @__PURE__ */ e("div", { className: r[`${t}children`], children: s }),
+    $ && /* @__PURE__ */ e("hr", { "aria-hidden": "true", className: r[`${t}divider`] })
+  ] });
+};
+y.displayName = "Dialog.Header";
+export {
+  y as Header
+};

package/lib/Dialog/Dialog.Trigger.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("../../chunks/FloatingUI.context.BULqADss.js");const l=require("../FloatingUI/FloatingUI.trigger.cjs.js"),t=require("../FloatingUI/FloatingUI.trigger.close.cjs.js");require("../FloatingUI/FloatingUI.content.cjs.js");const g=({children:e,...r})=>i.jsx(l.Trigger,{...r,children:e});g.displayName="Dialog.Trigger";const o=({children:e,...r})=>i.jsx(t.CloseTrigger,{...r,children:e});o.displayName="Dialog.CloseTrigger";exports.CloseTrigger=o;exports.Trigger=g;

package/lib/Dialog/Dialog.Trigger.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { TriggerProps } from '../FloatingUI/FloatingUI.trigger';
+export interface DialogTriggerProps extends TriggerProps {
+    /**
+     * The content that will trigger the Dialog. Forwards refs to the trigger element
+     */
+    children: ReactNode;
+}
+export declare const Trigger: {
+    ({ children, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface DialogCloseTriggerProps extends TriggerProps {
+    /**
+     * The content that will close the Dialog. Forwards refs to the trigger element
+     */
+    children: ReactNode;
+}
+export declare const CloseTrigger: {
+    ({ children, ...props }: DialogCloseTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/Dialog/Dialog.Trigger.es.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import "../../chunks/FloatingUI.context.2kPXcTvi.js";
+import { Trigger as o } from "../FloatingUI/FloatingUI.trigger.es.js";
+import { CloseTrigger as e } from "../FloatingUI/FloatingUI.trigger.close.es.js";
+import "../FloatingUI/FloatingUI.content.es.js";
+const s = ({ children: r, ...g }) => /* @__PURE__ */ i(o, { ...g, children: r });
+s.displayName = "Dialog.Trigger";
+const m = ({ children: r, ...g }) => /* @__PURE__ */ i(e, { ...g, children: r });
+m.displayName = "Dialog.CloseTrigger";
+export {
+  m as CloseTrigger,
+  s as Trigger
+};

package/lib/Dialog/Dialog.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),s=require("../FloatingUI/FloatingUI.root.cjs.js"),_=require("./Dialog.context.cjs.js"),r=require("./Dialog.Trigger.cjs.js"),c=require("./Dialog.Content.cjs.js"),D=require("./Dialog.Body.cjs.js"),b=require("./Dialog.Footer.cjs.js"),q=require("./Dialog.Header.cjs.js");function o({children:t,size:l="md",focusConfiguration:e,theme:a,role:n,...g}){const u={modal:!0,...typeof e=="object"?e:{}},d=n??{enabled:!0,role:"dialog"};return i.jsx(s.FloatingUIRoot,{openOnClick:!0,arrow:void 0,focusConfiguration:u,transitionConfig:{duration:0},role:d,middleware:[],placement:void 0,...g,children:i.jsx(_.DialogProvider,{theme:a,size:l,overlay:!0,children:t})})}o.displayName="Dialog";o.Trigger=r.Trigger;o.CloseTrigger=r.CloseTrigger;o.Header=q.Header;o.Content=c.Content;o.Body=D.Body;o.Footer=b.Footer;exports.Dialog=o;exports.default=o;

package/lib/Dialog/Dialog.context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),o=t.createContext(void 0),l=({overlay:e=!0,theme:r,size:i,children:n})=>{const[s,u]=t.useState(!1);return a.jsx(o.Provider,{value:{theme:r,size:i,overflowing:s,setOverflowing:u},children:n})},c=()=>{const e=t.useContext(o);if(!e)throw new Error("useDialogContext must be used within a DialogProvider");return e};exports.DialogProvider=l;exports.useDialogContext=c;

package/lib/Dialog/Dialog.context.d.ts

@@ -0,0 +1,19 @@
+import { default as React, ReactNode } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils';
+import { DialogSize } from '@viasat/beam-shared/components/dialog';
+interface DialogContextProps {
+    theme?: ThemeTypes;
+    size?: DialogSize;
+    overlay?: boolean;
+    overflowing?: boolean;
+    setOverflowing?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+interface DialogProviderProps {
+    theme: DialogContextProps['theme'];
+    size: DialogContextProps['size'];
+    overlay?: DialogContextProps['overlay'];
+    children: ReactNode;
+}
+export declare const DialogProvider: React.FC<DialogProviderProps>;
+export declare const useDialogContext: () => DialogContextProps;
+export {};

package/lib/Dialog/Dialog.context.es.js

@@ -0,0 +1,20 @@
+import { jsx as a } from "react/jsx-runtime";
+import l, { createContext as u, useContext as c } from "react";
+const e = u(void 0), f = ({
+  overlay: t = !0,
+  theme: o,
+  size: r,
+  children: n
+}) => {
+  const [i, s] = l.useState(!1);
+  return /* @__PURE__ */ a(e.Provider, { value: { theme: o, size: r, overflowing: i, setOverflowing: s }, children: n });
+}, g = () => {
+  const t = c(e);
+  if (!t)
+    throw new Error("useDialogContext must be used within a DialogProvider");
+  return t;
+};
+export {
+  f as DialogProvider,
+  g as useDialogContext
+};

package/lib/Dialog/Dialog.d.ts

@@ -0,0 +1,77 @@
+import { default as React } from 'react';
+import { FloatingPortalProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';
+import { ThemeTypes } from '@viasat/beam-shared/utils';
+import { DialogSize } from '@viasat/beam-shared/components/dialog';
+import { FloatingUIProps } from '../FloatingUI/FloatingUI.context';
+export interface DialogProps extends Omit<FloatingUIProps, 'arrow' | 'offset' | 'autoHiding' | 'autoPlacement' | 'flip' | 'listNavigation' | 'middleware' | 'openOnClick' | 'openOnFocus' | 'openOnHover' | 'placement' | 'rootContext' | 'shift' | 'transitionConfig' | 'typeahead'> {
+    /**
+     * Specify the theme of the Dialog. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify content and sub-components of the Dialog
+     *
+     */
+    children: React.ReactNode;
+    /**
+     * Specify the default open state
+     */
+    defaultOpen?: boolean;
+    /**
+     * Specify the display state
+     */
+    open?: boolean;
+    /**
+     * @todo Uncomment when we allow different dialog placements
+     *
+     * Specify if the Dialog should have an overlay
+     * @default true
+     */
+    /**
+     * Callback function that receives change in visibility state of the FloatingUI
+     *
+     * <a href="https://floating-ui.com/docs/react#open-event-callback" target="_blank" rel="noopener noreferrer">
+     *     onOpenChange
+     * </a>
+     *
+     */
+    onOpenChange?: UseFloatingOptions['onOpenChange'];
+    /**
+     * Specify if the Dialog is portalled
+     */
+    portalled?: boolean | FloatingPortalProps;
+    /**
+     * Adds base screen reader props to the reference and floating elements for a given `role`
+     */
+    role?: UseRoleProps;
+    /**
+     * Specify the size of the Dialog
+     * @default md
+     */
+    size?: DialogSize;
+}
+export declare function Dialog({ children, size, focusConfiguration: _focusConfiguration, theme, role: _role, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dialog {
+    var displayName: string;
+    var Trigger: {
+        ({ children, ...props }: import("./Dialog.Trigger").DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    var CloseTrigger: {
+        ({ children, ...props }: import("./Dialog.Trigger").DialogCloseTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    var Header: {
+        ({ children, className, dismissible, appearance, closeButtonAriaLabel, heading, description, icon, iconAriaLabel, divider, disableDividerOnOverflow, ...props }: import("./Dialog.Header").DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    var Content: typeof import("./Dialog.Content").Content;
+    var Body: React.ForwardRefExoticComponent<Omit<import("./Dialog.Body").DialogBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+        displayName: string;
+    };
+    var Footer: {
+        ({ children, className, ...props }: import("./Dialog.Footer").DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+}
+export default Dialog;

package/lib/Dialog/Dialog.es.js

@@ -0,0 +1,52 @@
+import { jsx as e } from "react/jsx-runtime";
+import { FloatingUIRoot as d } from "../FloatingUI/FloatingUI.root.es.js";
+import { DialogProvider as g } from "./Dialog.context.es.js";
+import { Trigger as f, CloseTrigger as p } from "./Dialog.Trigger.es.js";
+import { Content as u } from "./Dialog.Content.es.js";
+import { Body as s } from "./Dialog.Body.es.js";
+import { Footer as c } from "./Dialog.Footer.es.js";
+import { Header as C } from "./Dialog.Header.es.js";
+function o({
+  children: t,
+  size: i = "md",
+  // overlay = true,
+  focusConfiguration: r,
+  theme: m,
+  role: n,
+  ...a
+}) {
+  const l = {
+    modal: !0,
+    ...typeof r == "object" ? r : {}
+  };
+  return /* @__PURE__ */ e(
+    d,
+    {
+      openOnClick: !0,
+      arrow: void 0,
+      focusConfiguration: l,
+      transitionConfig: {
+        duration: 0
+      },
+      role: n ?? {
+        enabled: !0,
+        role: "dialog"
+      },
+      middleware: [],
+      placement: void 0,
+      ...a,
+      children: /* @__PURE__ */ e(g, { theme: m, size: i, overlay: !0, children: t })
+    }
+  );
+}
+o.displayName = "Dialog";
+o.Trigger = f;
+o.CloseTrigger = p;
+o.Header = C;
+o.Content = u;
+o.Body = s;
+o.Footer = c;
+export {
+  o as Dialog,
+  o as default
+};

package/lib/Dialog/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Dialog.cjs.js");exports.Dialog=e.Dialog;exports.default=e.Dialog;

package/lib/Dialog/index.d.ts

@@ -0,0 +1,8 @@
+import { default as Dialog } from './Dialog';
+export type { DialogBodyProps } from './Dialog.Body';
+export type { DialogContentProps } from './Dialog.Content';
+export type { DialogHeaderProps } from './Dialog.Header';
+export type { DialogFooterProps } from './Dialog.Footer';
+export type { DialogTriggerProps, DialogCloseTriggerProps } from './Dialog.Trigger';
+export * from './Dialog';
+export default Dialog;

package/lib/Dialog/index.es.js

@@ -0,0 +1,5 @@
+import { Dialog as a } from "./Dialog.es.js";
+export {
+  a as Dialog,
+  a as default
+};

package/lib/Divider/Divider.cjs.js

@@ -0,0 +1 @@
+var P=require("../../assets/Divider.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),N=require("clsx"),l=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const C=require("react"),r={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-divider--vertical":"bm-divider--vertical","bm-divider":"bm-divider","bm-divider--horizontal":"bm-divider--horizontal","bm-divider__wrapper":"bm-divider__wrapper","bm-divider__content":"bm-divider__content","bm-divider__icon":"bm-divider__icon","bm-divider--icon-only":"bm-divider--icon-only","bm-divider__text":"bm-divider__text","bm-divider--border-width-md":"bm-divider--border-width-md","bm-divider--border-width-lg":"bm-divider--border-width-lg","bm-divider--border-width-xl":"bm-divider--border-width-xl","bm-divider--border-style-dashed":"bm-divider--border-style-dashed","bm-divider--border-style-dotted":"bm-divider--border-style-dotted","bm-divider--border-color-border-00":"bm-divider--border-color-border-00","bm-divider--border-color-border-00-alt":"bm-divider--border-color-border-00-alt","bm-divider--border-color-border-01":"bm-divider--border-color-border-01","bm-divider--border-color-border-02":"bm-divider--border-color-border-02","bm-divider--border-color-border-03":"bm-divider--border-color-border-03","bm-divider--border-color-border-strong":"bm-divider--border-color-border-strong","bm-divider--border-color-border-positive":"bm-divider--border-color-border-positive","bm-divider--border-color-border-warning":"bm-divider--border-color-border-warning","bm-divider--border-color-border-negative":"bm-divider--border-color-border-negative","bm-divider--border-color-border-info-primary":"bm-divider--border-color-border-info-primary","bm-divider--border-color-border-info-secondary":"bm-divider--border-color-border-info-secondary","bm-divider--border-color-border-positive-strong":"bm-divider--border-color-border-positive-strong","bm-divider--border-color-border-warning-strong":"bm-divider--border-color-border-warning-strong","bm-divider--border-color-border-negative-strong":"bm-divider--border-color-border-negative-strong","bm-divider--border-color-border-info-primary-strong":"bm-divider--border-color-border-info-primary-strong","bm-divider--border-color-border-info-secondary-strong":"bm-divider--border-color-border-info-secondary-strong","bm-divider--border-color-border-inverse":"bm-divider--border-color-border-inverse","bm-divider--align-start":"bm-divider--align-start","bm-divider--align-end":"bm-divider--align-end"},{baseClassNamePrefix:j,classModifierPrefix:e,subElementClassPrefix:b,variablePrefix:q}=l.getBEMClassNames("divider"),m=C.forwardRef((v,a)=>{const{children:o,orientation:n="horizontal",borderColor:c="00",borderWidth:g="md",borderStyle:y="solid",alignContent:h="center",length:p,inset:x="0",icon:i,className:$,...t}=v,s=!!(o||i),f=!!(i&&!o),_=l.generateSpacingClasses({[`p${n==="vertical"?"y":"x"}`]:x}),w=N(r[j],r[`${e}${n}`],r[`${e}border-width-${g}`],r[`${e}border-style-${y}`],r[`${e}border-color-border-${c}`],s&&r[`${e}align-${h}`],f&&r[`${e}icon-only`],_,$),u={[`${q}-length`]:p||"100%",...t.style};return d.jsx("div",{ref:a,className:w,role:"separator","aria-orientation":n,style:u,...t,children:d.jsx("div",{className:`${b}wrapper`,children:s&&d.jsxs("div",{className:`${b}content`,children:[i&&d.jsx("span",{className:`${b}icon`,children:i}),o&&d.jsx("span",{className:`${b}text`,children:o})]})})})});m.displayName="Divider";exports.Divider=m;

package/lib/Divider/Divider.d.ts

@@ -0,0 +1,48 @@
+import { default as React, ReactNode } from 'react';
+import { Spacing as DividerSpacing } from '@viasat/beam-shared/utils';
+import { DividerBorderColor, DividerOrientation, DividerBorderWidth, DividerBorderStyle, DividerAlignContent } from '@viasat/beam-shared/components/divider';
+export interface DividerProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * Add text to the Divider
+     */
+    children?: ReactNode;
+    /**
+     * Specify the direction of the Divider
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Specify the border color of the divider line
+     * @default '00'
+     */
+    borderColor?: DividerBorderColor;
+    /**
+     * Add equal padding to each side of the Divider
+     * @default '0'
+     */
+    inset?: DividerSpacing;
+    /**
+     * Specify the width of the divider line
+     * @default 'md'
+     */
+    borderWidth?: DividerBorderWidth;
+    /**
+     * Specify the style of the divider line
+     * @default 'solid'
+     */
+    borderStyle?: DividerBorderStyle;
+    /**
+     * Specify the length of the Divider
+     */
+    length?: string;
+    /**
+     * Add an icon to the Divider
+     */
+    icon?: ReactNode;
+    /**
+     * Align content to the divider line
+     * @default 'center'
+     */
+    alignContent?: DividerAlignContent;
+}
+export declare const Divider: React.ForwardRefExoticComponent<Omit<DividerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;