@viasat/beam-react 2.0.0

package/lib/List/List.es.js

@@ -0,0 +1,83 @@
+import "../../assets/List.css";
+import { jsx as b } from "react/jsx-runtime";
+import g from "clsx";
+import { g as u } from "../../chunks/classNames.DNsS4J__.js";
+import { t as x } from "../../chunks/constants.BBi77pmH.js";
+import { useListKind as f, ListKindProvider as h } from "./ListContext.es.js";
+import { ListItem as p } from "./List.Item.es.js";
+const i = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-list": "bm-list",
+  "bm-list--ordered": "bm-list--ordered",
+  "bm-list--unordered": "bm-list--unordered",
+  "bm-list--unstyled": "bm-list--unstyled",
+  "bm-list--withIcons": "bm-list--withIcons",
+  "bm-list__content": "bm-list__content",
+  "bm-list--indent": "bm-list--indent",
+  "bm-list--sm": "bm-list--sm",
+  "bm-list--wcWithIcons": "bm-list--wcWithIcons",
+  "bm-list__icon": "bm-list__icon",
+  "bm-list--md": "bm-list--md",
+  "bm-list--lg": "bm-list--lg",
+  "bm-list--xl": "bm-list--xl",
+  "bm-list--density-md": "bm-list--density-md",
+  "bm-list--density-md--nested": "bm-list--density-md--nested",
+  "bm-list--density-lg": "bm-list--density-lg",
+  "bm-list--density-lg--nested": "bm-list--density-lg--nested",
+  "bm-list__item": "bm-list__item",
+  "bm-list__item--decimal": "bm-list__item--decimal",
+  "bm-list__item--lower-alpha": "bm-list__item--lower-alpha",
+  "bm-list__item--lower-roman": "bm-list__item--lower-roman",
+  "bm-list__item--disc": "bm-list__item--disc",
+  "bm-list__item--circle": "bm-list__item--circle",
+  "bm-list__item__content": "bm-list__item__content",
+  "bm-list__item--density-md": "bm-list__item--density-md",
+  "bm-list__item--density-lg": "bm-list__item--density-lg",
+  "bm-list__item--sm__icon": "bm-list__item--sm__icon",
+  "bm-list__item--sm": "bm-list__item--sm",
+  "bm-list__item--md__icon": "bm-list__item--md__icon",
+  "bm-list__item--md": "bm-list__item--md",
+  "bm-list__item--lg__icon": "bm-list__item--lg__icon",
+  "bm-list__item--lg": "bm-list__item--lg",
+  "bm-list__item--xl__icon": "bm-list__item--xl__icon",
+  "bm-list__item--xl": "bm-list__item--xl"
+}, w = {
+  ordered: "ol",
+  unordered: "ul",
+  unstyled: "ul",
+  withIcons: "ul"
+}, I = ({ kind: e, ...m }) => {
+  const s = w[e];
+  return /* @__PURE__ */ b(s, { ...m });
+}, $ = ({
+  kind: e,
+  size: m = "md",
+  density: s = "md",
+  indent: _ = !0,
+  theme: n,
+  children: d,
+  className: o,
+  ...r
+}) => {
+  const { kind: c } = f();
+  let t = e || c;
+  t || (t = "ordered");
+  const { baseClassNamePrefix: a, classModifierPrefix: l } = u("list");
+  _ = t === "unstyled" || t === "withIcons" ? _ : !1;
+  const y = g(
+    i[a],
+    t && i[`${l}${t}`],
+    m && i[`${l}${m}`],
+    s && i[`${l}density-${s}`],
+    _ && i[`${l}indent`],
+    n && x(n),
+    o
+  );
+  return /* @__PURE__ */ b(h, { value: { kind: t }, children: /* @__PURE__ */ b(I, { kind: t, className: y, ...r, children: d }) });
+};
+$.Item = p;
+export {
+  $ as List
+};

package/lib/List/ListContext.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("react"),i=e.createContext(void 0),o=({children:t,value:n})=>r.jsx(i.Provider,{value:n,children:t}),s=()=>{const t=e.useContext(i);return t===void 0?{kind:void 0}:t};exports.ListKindProvider=o;exports.useListKind=s;

package/lib/List/ListContext.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ListKind } from '@viasat/beam-shared/components/list';
+interface ListKindContextProps {
+    kind: ListKind | undefined;
+}
+export declare const ListKindProvider: ({ children, value, }: {
+    children: React.ReactNode;
+    value: ListKindContextProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useListKind: () => ListKindContextProps;
+export {};

package/lib/List/ListContext.es.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as n, useContext as e } from "react";
+const o = n(void 0), c = ({
+  children: t,
+  value: r
+}) => /* @__PURE__ */ i(o.Provider, { value: r, children: t }), x = () => {
+  const t = e(o);
+  return t === void 0 ? { kind: void 0 } : t;
+};
+export {
+  c as ListKindProvider,
+  x as useListKind
+};

package/lib/List/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./List.cjs.js");exports.List=t.List;

package/lib/List/index.d.ts

@@ -0,0 +1,2 @@
+export * from './List';
+export { type ListItemProps } from './List.Item';

package/lib/List/index.es.js

@@ -0,0 +1,4 @@
+import { List as t } from "./List.es.js";
+export {
+  t as List
+};

package/lib/Logo/Logo.cjs.js

@@ -0,0 +1 @@
+var y=require("../../assets/Logo.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),k=require("react"),f=require("clsx"),x=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const l={"bm-logo--clickable":"bm-logo--clickable","bm-logo--inline":"bm-logo--inline","bm-logo--inline-block":"bm-logo--inline-block","bm-logo--block":"bm-logo--block","bm-logo--none":"bm-logo--none"},{baseClassNamePrefix:q,classModifierPrefix:s}=x.getBEMClassNames("logo");function r({logo:i,className:a,size:n,display:b="block",role:t,ariaLabel:c,...e}){if(!i)return null;const m=f(l[q],e.onClick&&l[`${s}clickable`],l[`${s}${b}`],a),u={...n&&{width:n},...e.style},o=!!e.onClick||!!e.onKeyDown,g=()=>t||(c?"img":"presentation");return d.jsx(i,{className:m,role:g(),focusable:o,tabIndex:o?0:void 0,"aria-hidden":o?void 0:!0,style:u,"aria-label":c,...e})}const v=k.memo(r);exports.Logo=v;exports.default=r;

package/lib/Logo/Logo.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { LogoComponentType } from '../../utils/types';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+export interface LogoProps extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'color'> {
+    /**
+     * Specify which Logo to display
+     */
+    logo: LogoComponentType;
+    /**
+     * Pass maxWidth. The height  will scale proportionally with the width.
+     */
+    size?: string;
+    /**
+     * Specify the display property of the Logo
+     */
+    display?: 'inline' | 'inline-block' | 'block' | 'none';
+    /**
+     * Specify the `aria-label` of the Logo
+     */
+    ariaLabel?: string;
+    /**
+     * Specify the theme of the Logo. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+declare function Logo({ logo: LogoComponent, className: _className, size, display, role, ariaLabel, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element | null;
+declare const MemoizedLogo: React.MemoExoticComponent<typeof Logo>;
+export { MemoizedLogo as Logo };
+export default Logo;

package/lib/Logo/Logo.es.js

@@ -0,0 +1,53 @@
+import "../../assets/Logo.css";
+import { jsx as g } from "react/jsx-runtime";
+import f from "react";
+import d from "clsx";
+import { g as k } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+const e = {
+  "bm-logo--clickable": "bm-logo--clickable",
+  "bm-logo--inline": "bm-logo--inline",
+  "bm-logo--inline-block": "bm-logo--inline-block",
+  "bm-logo--block": "bm-logo--block",
+  "bm-logo--none": "bm-logo--none"
+}, { baseClassNamePrefix: u, classModifierPrefix: m } = k("logo");
+function x({
+  logo: i,
+  className: s,
+  size: t,
+  display: a = "block",
+  role: n,
+  ariaLabel: c,
+  ...o
+}) {
+  if (!i) return null;
+  const r = d(
+    e[u],
+    o.onClick && e[`${m}clickable`],
+    e[`${m}${a}`],
+    s
+  ), b = {
+    ...t && {
+      width: t
+    },
+    ...o.style
+  }, l = !!o.onClick || !!o.onKeyDown;
+  return /* @__PURE__ */ g(
+    i,
+    {
+      className: r,
+      role: n || (c ? "img" : "presentation"),
+      focusable: l,
+      tabIndex: l ? 0 : void 0,
+      "aria-hidden": l ? void 0 : !0,
+      style: b,
+      "aria-label": c,
+      ...o
+    }
+  );
+}
+const h = f.memo(x);
+export {
+  h as Logo,
+  x as default
+};

package/lib/Logo/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Logo.cjs.js");exports.Logo=o.Logo;

package/lib/Logo/index.d.ts

@@ -0,0 +1,2 @@
+export { Logo } from './Logo';
+export type { LogoProps } from './Logo';

package/lib/Logo/index.es.js

@@ -0,0 +1,4 @@
+import { Logo as e } from "./Logo.es.js";
+export {
+  e as Logo
+};

package/lib/Menu/ActionListContextWrapper.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("../ActionList/ActionList.context.cjs.js"),r=require("../../chunks/FloatingUI.context.BULqADss.js"),s=({children:t,...e})=>{const{getItemProps:o}=r.useBmFloatingUIContext();return i.jsx(n.ActionListContextProvider,{getItemProps:o,...e,children:t})};exports.ActionListContextWrapper=s;

package/lib/Menu/ActionListContextWrapper.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { ActionListContextValue } from '../ActionList/ActionList.context';
+export declare const ActionListContextWrapper: ({ children, ...props }: Omit<ActionListContextValue, "getItemProps"> & {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/Menu/ActionListContextWrapper.es.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ActionListContextProvider as i } from "../ActionList/ActionList.context.es.js";
+import { a as n } from "../../chunks/FloatingUI.context.2kPXcTvi.js";
+const x = ({
+  children: t,
+  ...o
+}) => {
+  const { getItemProps: r } = n();
+  return /* @__PURE__ */ e(i, { getItemProps: r, ...o, children: t });
+};
+export {
+  x as ActionListContextWrapper
+};

package/lib/Menu/Menu.PopoverContent.cjs.js

@@ -0,0 +1 @@
+var x=require("../../assets/Menu.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const a=require("../Popover/Popover.cjs.js"),l=require("./Menu.context.cjs.js"),b=require("clsx"),p={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-menu__popover-content":"bm-menu__popover-content"},{baseClassNamePrefix:v}=u.getBEMClassNames("menu__popover-content"),_=({children:e,style:t,className:n,...o})=>{const{minWidth:s,maxHeight:r,maxWidth:i}=l.useMenuContext(),m=b(p[v],n);return c.jsx(a.Popover.Content,{className:m,style:{minWidth:s,maxWidth:i,maxHeight:r,...t},...o,children:e})};exports.MenuPopoverContent=_;

package/lib/Menu/Menu.PopoverContent.d.ts

@@ -0,0 +1,8 @@
+import { PopoverContentProps } from '../Popover/Popover.content';
+export interface MenuPopoverContentProps extends PopoverContentProps {
+    /**
+     * Specify custom content for the Menu
+     */
+    children: React.ReactNode;
+}
+export declare const MenuPopoverContent: ({ children, style, className: _className, ...props }: MenuPopoverContentProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Menu/Menu.PopoverContent.es.js

@@ -0,0 +1,37 @@
+import "../../assets/Menu.css";
+import { jsx as p } from "react/jsx-runtime";
+import { g as a } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { Popover as c } from "../Popover/Popover.es.js";
+import { useMenuContext as b } from "./Menu.context.es.js";
+import l from "clsx";
+const u = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-menu__popover-content": "bm-menu__popover-content"
+}, { baseClassNamePrefix: v } = a("menu__popover-content"), N = ({
+  children: o,
+  style: t,
+  className: e,
+  ...m
+}) => {
+  const { minWidth: n, maxHeight: r, maxWidth: s } = b(), i = l(u[v], e);
+  return /* @__PURE__ */ p(
+    c.Content,
+    {
+      className: i,
+      style: {
+        minWidth: n,
+        maxWidth: s,
+        maxHeight: r,
+        ...t
+      },
+      ...m,
+      children: o
+    }
+  );
+};
+export {
+  N as MenuPopoverContent
+};

package/lib/Menu/Menu.Trigger.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../Popover/Popover.cjs.js"),n=require("./Menu.context.cjs.js"),u=require("../ActionList/ActionList.Item.context.cjs.js"),s=require("../ActionList/ActionList.context.cjs.js"),c=({children:r,...i})=>{const t=n.useMenuContext();if(!t)throw new Error("MenuTrigger must be used within a Menu");return e.jsx(n.MenuContext.Provider,{value:t.parentMenuContext,children:e.jsx(s.ActionListParentContextProvider,{children:e.jsx(u.ActionListItemContextProvider,{kind:"flyout",children:e.jsx(o.Popover.Trigger,{...i,children:r})})})})};exports.MenuTrigger=c;

package/lib/Menu/Menu.Trigger.d.ts

@@ -0,0 +1,8 @@
+import { PopoverTriggerProps } from '../Popover/Popover.trigger';
+export interface MenuTriggerProps extends PopoverTriggerProps {
+    /**
+     * The content that will trigger the Menu. Forward refs to the trigger element
+     */
+    children: React.ReactNode;
+}
+export declare const MenuTrigger: ({ children, ...props }: MenuTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Menu/Menu.Trigger.es.js

@@ -0,0 +1,14 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Popover as n } from "../Popover/Popover.es.js";
+import { useMenuContext as i, MenuContext as m } from "./Menu.context.es.js";
+import { ActionListItemContextProvider as u } from "../ActionList/ActionList.Item.context.es.js";
+import { ActionListParentContextProvider as d } from "../ActionList/ActionList.context.es.js";
+const g = ({ children: t, ...o }) => {
+  const e = i();
+  if (!e)
+    throw new Error("MenuTrigger must be used within a Menu");
+  return /* @__PURE__ */ r(m.Provider, { value: e.parentMenuContext, children: /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(u, { kind: "flyout", children: /* @__PURE__ */ r(n.Trigger, { ...o, children: t }) }) }) });
+};
+export {
+  g as MenuTrigger
+};

package/lib/Menu/Menu.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),T=require("../Popover/Popover.cjs.js"),C=require("./Menu.context.cjs.js"),k=require("./Menu.PopoverContent.cjs.js"),F=require("./Menu.Trigger.cjs.js"),j=require("@floating-ui/react"),w=require("./ActionListContextWrapper.cjs.js"),H=require("../ActionList/ActionList.context.cjs.js"),N="12rem",r=({children:O,open:M,onOpenChange:x,maxHeight:d,minWidth:f,maxWidth:m,...o})=>{const e=C.useMenuContext(),[b,g]=t.useState(null),v=t.useRef([]),h=t.useRef([]),n=e===void 0,s=!n,[y,A]=t.useState(o.defaultOpen??!1),P=M??y,i=x??A,_=t.useCallback(l=>{i(!1,l,"click"),e==null||e.close()},[i,e]),p=t.useCallback(l=>{e==null||e.open(l),i(!0)},[i,e]),c=t.useMemo(()=>({parentMenuContext:e,minWidth:f??(e==null?void 0:e.minWidth)??N,maxWidth:m??(e==null?void 0:e.maxWidth),maxHeight:d??(e==null?void 0:e.maxHeight),close:_,open:p}),[_,d,m,f,p,e]),q=t.useCallback((l,u,L)=>{u!=="checkbox"&&u!=="radio"&&u!=="flyout"&&c.close(L)},[c]),I=t.useMemo(()=>[r],[]),R=H.useActionListContext();return a.jsx(C.MenuContext.Provider,{value:c,children:a.jsx(T.Popover,{open:P,onOpenChange:i,placement:n?"bottom-start":"right-start",openOnClick:n,openOnHover:{enabled:s,mouseOnly:!0,move:s,handleClose:j.safePolygon({blockPointerEvents:!0})},openOnFocus:s,flip:!0,hideArrow:!0,portalled:o.portalled??!0,autoHiding:!1,...o,focusConfiguration:{modal:!1,initialFocus:s?-1:0,returnFocus:n,restoreFocus:n,order:["content","reference"],...o.focusConfiguration},listNavigation:{enabled:!0,listRef:v,activeIndex:b,onNavigate:g,loop:!0,focusItemOnHover:!1,focusItemOnOpen:!0,openOnArrowKeyDown:!0,nested:s,...o.listNavigation},typeahead:{enabled:!0,listRef:h,activeIndex:b,onMatch:g,...o.typeahead},role:{enabled:!0,role:"menu",...o.role},children:a.jsx(w.ActionListContextWrapper,{elementsRef:v,labelsRef:h,itemsFocusable:!1,onItemClick:q,insideMenu:!0,allowChildrenTypes:I,parentContext:R,children:O})})})};r.Trigger=F.MenuTrigger;r.PopoverContent=k.MenuPopoverContent;exports.Menu=r;

package/lib/Menu/Menu.context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(void 0),n=()=>e.useContext(t);exports.MenuContext=t;exports.useMenuContext=n;

package/lib/Menu/Menu.context.d.ts

@@ -0,0 +1,10 @@
+export interface MenuContextValue {
+    parentMenuContext?: MenuContextValue;
+    close(event?: Event): void;
+    open(event?: Event): void;
+    minWidth?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+}
+export declare const MenuContext: import('react').Context<MenuContextValue | undefined>;
+export declare const useMenuContext: () => MenuContextValue | undefined;

package/lib/Menu/Menu.context.es.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+const o = t(void 0), r = () => e(o);
+export {
+  o as MenuContext,
+  r as useMenuContext
+};

package/lib/Menu/Menu.d.ts

@@ -0,0 +1,39 @@
+import { PopoverProps } from '../Popover/Popover';
+export interface MenuProps extends Omit<PopoverProps, 'listNavigation'> {
+    /**
+     * Specify content and sub-components of the Menu
+     */
+    children: React.ReactNode;
+    /**
+     * Specify if the Menu is open
+     */
+    open?: boolean;
+    /**
+     * Specify if the Menu is open by default
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback function is called when the Menu is opened or closed
+     */
+    onOpenChange?: PopoverProps['onOpenChange'];
+    /**
+     * Specify the maximum height of the menu
+     */
+    maxHeight?: string;
+    /**
+     * Specify the minimum width of the menu
+     *
+     * @default 12rem
+     */
+    minWidth?: string;
+    /**
+     * Specify the maximum width of the menu
+     */
+    maxWidth?: string;
+    listNavigation?: Partial<PopoverProps['listNavigation']>;
+}
+export declare const Menu: {
+    ({ children, open, onOpenChange, maxHeight, minWidth, maxWidth, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, ...props }: import('./Menu.Trigger').MenuTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    PopoverContent: ({ children, style, className: _className, ...props }: import('./Menu.PopoverContent').MenuPopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+};

package/lib/Menu/Menu.es.js

@@ -0,0 +1,118 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useState as b, useRef as I, useCallback as a, useMemo as y } from "react";
+import { Popover as N } from "../Popover/Popover.es.js";
+import { useMenuContext as M, MenuContext as W } from "./Menu.context.es.js";
+import { MenuPopoverContent as D } from "./Menu.PopoverContent.es.js";
+import { MenuTrigger as E } from "./Menu.Trigger.es.js";
+import { safePolygon as _ } from "@floating-ui/react";
+import { ActionListContextWrapper as j } from "./ActionListContextWrapper.es.js";
+import { useActionListContext as K } from "../ActionList/ActionList.context.es.js";
+const S = "12rem", u = ({
+  children: A,
+  open: x,
+  onOpenChange: F,
+  maxHeight: m,
+  minWidth: f,
+  maxWidth: d,
+  ...o
+}) => {
+  const e = M(), [p, h] = b(null), g = I([]), v = I([]), t = e === void 0, n = !t, [P, R] = b(o.defaultOpen ?? !1), T = x ?? P, i = F ?? R, O = a(
+    (s) => {
+      i(!1, s, "click"), e == null || e.close();
+    },
+    [i, e]
+  ), C = a(
+    (s) => {
+      e == null || e.open(s), i(!0);
+    },
+    [i, e]
+  ), r = y(
+    () => ({
+      parentMenuContext: e,
+      minWidth: f ?? (e == null ? void 0 : e.minWidth) ?? S,
+      maxWidth: d ?? (e == null ? void 0 : e.maxWidth),
+      maxHeight: m ?? (e == null ? void 0 : e.maxHeight),
+      close: O,
+      open: C
+    }),
+    [O, m, d, f, C, e]
+  ), k = a(
+    (s, l, L) => {
+      l !== "checkbox" && l !== "radio" && l !== "flyout" && r.close(L);
+    },
+    [r]
+  ), w = y(() => [u], []), H = K();
+  return /* @__PURE__ */ c(W.Provider, { value: r, children: /* @__PURE__ */ c(
+    N,
+    {
+      open: T,
+      onOpenChange: i,
+      placement: t ? "bottom-start" : "right-start",
+      openOnClick: t,
+      openOnHover: {
+        enabled: n,
+        mouseOnly: !0,
+        move: n,
+        handleClose: _({
+          blockPointerEvents: !0
+        })
+      },
+      openOnFocus: n,
+      flip: !0,
+      hideArrow: !0,
+      portalled: o.portalled ?? !0,
+      autoHiding: !1,
+      ...o,
+      focusConfiguration: {
+        modal: !1,
+        initialFocus: n ? -1 : 0,
+        returnFocus: t,
+        restoreFocus: t,
+        order: ["content", "reference"],
+        ...o.focusConfiguration
+      },
+      listNavigation: {
+        enabled: !0,
+        listRef: g,
+        activeIndex: p,
+        onNavigate: h,
+        loop: !0,
+        focusItemOnHover: !1,
+        focusItemOnOpen: !0,
+        openOnArrowKeyDown: !0,
+        nested: n,
+        ...o.listNavigation
+      },
+      typeahead: {
+        enabled: !0,
+        listRef: v,
+        activeIndex: p,
+        onMatch: h,
+        ...o.typeahead
+      },
+      role: {
+        enabled: !0,
+        role: "menu",
+        ...o.role
+      },
+      children: /* @__PURE__ */ c(
+        j,
+        {
+          elementsRef: g,
+          labelsRef: v,
+          itemsFocusable: !1,
+          onItemClick: k,
+          insideMenu: !0,
+          allowChildrenTypes: w,
+          parentContext: H,
+          children: A
+        }
+      )
+    }
+  ) });
+};
+u.Trigger = E;
+u.PopoverContent = D;
+export {
+  u as Menu
+};

package/lib/Menu/Menu.stories.utils.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from '../Button';
+import { BoxProps } from '../Box';
+import { TextProps } from '../Text';
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const VerticalBox: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BoxHeading: (props: TextProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Menu/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Menu.cjs.js"),n=require("./Menu.context.cjs.js");exports.Menu=e.Menu;exports.useMenuContext=n.useMenuContext;

package/lib/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Menu';
+export { useMenuContext } from './Menu.context';

package/lib/Menu/index.es.js

@@ -0,0 +1,6 @@
+import { Menu as r } from "./Menu.es.js";
+import { useMenuContext as n } from "./Menu.context.es.js";
+export {
+  r as Menu,
+  n as useMenuContext
+};

package/lib/NativeSelect/NativeSelect.cjs.js

@@ -0,0 +1 @@
+var _e=require("../../assets/NativeSelect.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),le=require("react"),S=require("clsx"),h=require("../../chunks/form.context.B1PXIJNq.js"),re=require("../../chunks/constants.hwjHOsvT.js"),ne=require("../../chunks/classNames.DAeKwerT.js"),ce=require("../../chunks/helpers.COm6C5Gf.js"),oe=require("../Form/contexts/label.context.cjs.js"),de=require("../Form/contexts/helperText.context.cjs.js"),ue=require("../Form/hooks/useUniversalRef.hook.cjs.js"),y=require("../Form/hooks/useAccessibleId.hook.cjs.js");function be(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const g=be(le),fe=(e,s)=>{if(!ce.isMobileDevice()||!e)return;const{options:t=[]}=e;Array.prototype.forEach.call(t,i=>{const{disabled:b,dataset:d}=i,{disabled:f}=d;f||(i.dataset.disabled=String(b));const{disabled:u}=d;i.disabled=s||u===String(!0)})},me=e=>{const s=!!e.match(new RegExp("^\\p{L}$","u")),t=[" ","ArrowUp","ArrowDown"].includes(e);return s||t},l={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-native-select":"bm-native-select","bm-native-select--disabled":"bm-native-select--disabled","bm-native-select--fluid":"bm-native-select--fluid","bm-native-select--ellipsis":"bm-native-select--ellipsis","bm-native-select__field":"bm-native-select__field","bm-native-select__input":"bm-native-select__input","bm-native-select--error":"bm-native-select--error","bm-native-select--read-only":"bm-native-select--read-only"},{baseClassNamePrefix:ve,subElementClassPrefix:E,classModifierPrefix:o}=ne.getBEMClassNames("native-select"),P=g.forwardRef(function({theme:e,width:s,error:t,children:i,label:b=null,fluid:d=!1,ellipse:f=!0,helperText:u=null,validationRules:w=[],className:A,hideRequiredMarker:M=!1,disabled:k=!1,readOnly:F=!1,required:T=!1,...$},C){const{id:q,name:m,onKeyDown:v,onMouseDown:_,defaultValue:V,"aria-invalid":H,"aria-describedby":B,...U}=$,{refFn:L,ref:x}=ue.useUniversalRef(C),{ctxDisabled:z,ctxReadOnly:W,ctxRequired:G,ctxInitialValues:J,ctxRegister:K}=g.useContext(h.FormContext),{id:D}=y.useAccessibleId(),{id:j}=y.useAccessibleId(),{id:I}=y.useAccessibleId(),{showErrors:Q,setErrors:X,isInvalid:Y,errorShown:Z}=h.useFieldValidator(),N=!!(t!=null&&t.length),ee=S(u&&j,N&&D,Z&&I,B),O=!!t||Y,n=k||z,r=F||W,R=T||G,te=V||J[m];!n&&K(m,w,X);const se=S(l[ve],e&&re.themeClassName(e),d&&l[`${o}fluid`],O&&l[`${o}error`],f&&l[`${o}ellipsis`],n&&l[`${o}disabled`],r&&l[`${o}read-only`],A);g.useEffect(()=>{const{current:a}=x;fe(a,r)},[r,x]);const ie=a=>{const{key:p}=a;v==null||v(a),r&&me(p)&&a.preventDefault()},ae=a=>{if(_==null||_(a),!r)return;a.preventDefault();const{current:p}=x;p.focus()};return c.jsxs("div",{className:se,style:{maxWidth:s},children:[c.jsx(oe.LabelProvider,{ctxHtmlFor:q,ctxDisabled:n,ctxRequired:R&&!M,children:b}),c.jsx("div",{className:l[`${E}field`],children:c.jsx("select",{id:q,name:m,ref:L,disabled:n,required:R,"aria-readonly":r,onKeyDown:ie,defaultValue:te,onMouseDown:ae,"aria-describedby":ee,"aria-disabled":n||r,"aria-invalid":O||H,className:l[`${E}input`],...U,children:i})}),c.jsxs(de.HelperTextProvider,{ctxId:j,ctxDisabled:n,children:[u,N&&c.jsx(h.HelperText,{id:D,appearance:"negative",children:t})]}),Q(I)]})});exports.NativeSelect=P;exports.default=P;

package/lib/NativeSelect/NativeSelect.d.ts

@@ -0,0 +1,62 @@
+import { Nullable } from '@viasat/beam-shared/utils/types';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { FormValidator } from '@viasat/beam-shared/components/form';
+import * as React from 'react';
+export interface NativeSelectProps extends React.ComponentPropsWithRef<'select'> {
+    /**
+     * Specify HelperText for NativeSelect
+     */
+    helperText?: Nullable<React.ReactElement>;
+    /**
+     * Specify Label for NativeSelect
+     */
+    label?: Nullable<React.ReactElement>;
+    /**
+     * Specify if NativeSelect is a required input
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if NativeSelect displays in a read-only state
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if NativeSelect displays in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify error text and display error state of a NativeSelect
+     */
+    error?: boolean | string;
+    /**
+     * Specify if NativeSelect is fluid
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify the width of NativeSelect
+     */
+    width?: string;
+    /**
+     * Specify if overflow displays ellipsis
+     * @default true
+     */
+    ellipse?: boolean;
+    /**
+     * Specify if the NativeSelect displays with an asterisk
+     * @default false
+     */
+    hideRequiredMarker?: boolean;
+    /**
+     * Specify form validation rules for NativeSelect
+     */
+    validationRules?: Array<FormValidator>;
+    /**
+     * Specify the theme of the NativeSelect. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<NativeSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export default NativeSelect;