@viasat/beam-react 2.0.0

package/lib/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { AvatarSize, AvatarGroupLayout } from '@viasat/beam-shared/components/avatar';
+export interface AvatarGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Add Avatars to create a group
+     */
+    children: ReactNode;
+    /**
+     * Specify if the AvatarGroup wraps
+     * @default false
+     */
+    wrapping?: boolean;
+    /**
+     * Specify the max number of avatars displayed in the group.
+     * @default 5
+     */
+    maxCount?: number;
+    /**
+     * Specify the size of all Avatars
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Specify the layout of the group.
+     * @default 'stacked'
+     */
+    layout?: AvatarGroupLayout;
+}
+export declare const AvatarGroup: ({ children: _children, wrapping, size, layout, className: _className, maxCount, ...props }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Avatar/AvatarGroup.es.js

@@ -0,0 +1,68 @@
+import { jsxs as $, jsx as v } from "react/jsx-runtime";
+import S, { useState as O, useMemo as W, Children as j, isValidElement as y } from "react";
+import { Box as B } from "../Box/Box.es.js";
+import { s, g as k, a as x, A as h, c as z, b as E, d as G, e as I } from "../../chunks/Avatar.C9tpC3sT.js";
+import T from "clsx";
+import { useResizeObserver as _ } from "../../utils/hooks/index.es.js";
+import { a as F } from "../../chunks/constants.BBi77pmH.js";
+import { c as V } from "../../chunks/CSSLookup.Cjf6o2Gz.js";
+import { Tooltip as q } from "../Tooltip/Tooltip.es.js";
+function D(o) {
+  return o.type === h;
+}
+const te = ({
+  children: o,
+  wrapping: c,
+  size: t = "md",
+  layout: n = "stacked",
+  className: g,
+  maxCount: m = 5,
+  ...A
+}) => {
+  const w = T(
+    s[k],
+    c && s[`${x}wrapping`],
+    s[`${x}${n}-${t}`],
+    g
+  ), [M, b] = O(m), a = W(() => j.toArray(o).filter(
+    (e) => y(e) && D(e) ? !0 : (console.warn("Invalid child type in Avatar.Group. Only Avatar is allowed."), !1)
+  ), [o]), C = () => {
+    const { current: e } = f;
+    if (e && !c) {
+      const { clientWidth: l } = e, P = a.map(
+        (r) => V(
+          E[r.props.size || t] - G(t, n)
+        )
+      ).reduce(
+        (r, d, R) => r.total + d + I(t, n) > l ? r : { total: r.total + d, count: R + 1 },
+        { total: 0, count: 0 }
+      );
+      b(Math.min(P.count, m));
+    }
+  }, { ref: f } = _(
+    C,
+    F,
+    [t]
+  ), i = M - 1, p = a.length - i, u = p > 1, N = a.slice(i).map(({ props: e }) => e.name).filter(Boolean).join(", ");
+  return /* @__PURE__ */ $(B, { className: w, ref: f, ...A, children: [
+    a.map(
+      (e, l) => S.cloneElement(e, {
+        size: e.props.size || t,
+        // NOTE: instead of splicing avatars, if we make it hidden, when avatar is already loaded it doesn't get unmounted when resizing window / container
+        hidden: u && l >= i
+      })
+    ),
+    u && /* @__PURE__ */ v(q, { text: N, portalled: !0, children: /* @__PURE__ */ v(
+      h,
+      {
+        name: `+${p}`,
+        tabIndex: 0,
+        size: t,
+        className: s[`${z}overflow`]
+      }
+    ) })
+  ] });
+};
+export {
+  te as AvatarGroup
+};

package/lib/Avatar/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../chunks/Avatar.CKJ80I6h.js"),a=require("./AvatarGroup.cjs.js"),t=Object.assign(r.Avatar,{Group:a.AvatarGroup});exports.Avatar=t;

package/lib/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+declare const AvatarWithGroup: import('react').ForwardRefExoticComponent<import('./Avatar').AvatarProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Group: ({ children: _children, wrapping, size, layout, className: _className, maxCount, ...props }: import('./AvatarGroup').AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { AvatarWithGroup as Avatar };

package/lib/Avatar/index.es.js

@@ -0,0 +1,6 @@
+import { A as r } from "../../chunks/Avatar.C9tpC3sT.js";
+import { AvatarGroup as a } from "./AvatarGroup.es.js";
+const p = Object.assign(r, { Group: a });
+export {
+  p as Avatar
+};

package/lib/Badge/Badge.cjs.js

@@ -0,0 +1 @@
+var A=require("../../assets/Badge.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),u=require("../../chunks/classNames.DAeKwerT.js"),o=require("../../chunks/constants.hwjHOsvT.js"),f=require("react"),j=require("../../chunks/ErrorOutline.Cb78OesH.js"),d=require("../../chunks/InfoOutlined.C-WIrH0D.js"),$=require("../../chunks/WarningOutlined.BPePPeyt.js"),q=require("../../utils/spacing.cjs.js"),I=require("clsx");function L(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const a=L(f),M=e=>a.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},a.createElement("g",{clipPath:"url(#clip0_501_330)"},a.createElement("path",{d:"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z",fill:"currentColor"})),a.createElement("defs",null,a.createElement("clipPath",{id:"clip0_501_330"},a.createElement("rect",{width:24,height:24,fill:"none"})))),B="badge",{baseClassNamePrefix:k,subElementClassPrefix:c,classModifierPrefix:b}=u.getBEMClassNames(B),R={positive:"Success",warning:"Warning",negative:"Error",infoPrimary:"Information",infoSecondary:"Information"},i={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-badge":"bm-badge","bm-badge__icon":"bm-badge__icon","bm-badge__label":"bm-badge__label","bm-badge--sm":"bm-badge--sm","bm-badge--md":"bm-badge--md","bm-badge--positive-strong":"bm-badge--positive-strong","bm-badge--positive-medium":"bm-badge--positive-medium","bm-badge--positive-subtle":"bm-badge--positive-subtle","bm-badge--warning-strong":"bm-badge--warning-strong","bm-badge--warning-medium":"bm-badge--warning-medium","bm-badge--warning-subtle":"bm-badge--warning-subtle","bm-badge--negative-strong":"bm-badge--negative-strong","bm-badge--negative-medium":"bm-badge--negative-medium","bm-badge--negative-subtle":"bm-badge--negative-subtle","bm-badge--infoPrimary-strong":"bm-badge--infoPrimary-strong","bm-badge--infoPrimary-medium":"bm-badge--infoPrimary-medium","bm-badge--infoPrimary-subtle":"bm-badge--infoPrimary-subtle","bm-badge--infoSecondary-strong":"bm-badge--infoSecondary-strong","bm-badge--infoSecondary-medium":"bm-badge--infoSecondary-medium","bm-badge--infoSecondary-subtle":"bm-badge--infoSecondary-subtle"},T={positive:M,warning:$.SvgWarningOutlined,negative:j.SvgErrorOutline,infoPrimary:d.SvgInfoOutlined,infoSecondary:d.SvgInfoOutlined},v=f.forwardRef(({appearance:e="infoPrimary",size:t="sm",emphasis:n="strong",hideIcon:s=!1,icon:p,children:y,className:P,iconAriaLabel:S,theme:m,productType:g,expressive:l,...C},_)=>{const w=T[e],h=p||w,O=S||R[e],[N,x]=q.partitionSpacingProps(C),E=I(m&&o.themeClassName(m),g&&o.productTypeThemeClassName(g),l&&o.expressiveThemeClassName(l),i[k],i[`${b}${e}`],i[`${b}${e}-${n}`],i[`${b}${t}`],...u.generateSpacingClasses(N),P);return r.jsxs("span",{ref:_,className:E,...x,children:[!s&&r.jsx("span",{role:"img","aria-label":O,className:i[`${c}icon`],children:r.jsx(h,{})}),r.jsx("span",{className:i[`${c}label`],children:y})]})});exports.Badge=v;exports.default=v;

package/lib/Badge/Badge.d.ts

@@ -0,0 +1,51 @@
+import { BadgeAppearance, BadgeEmphasis, BadgeSize } from '@viasat/beam-shared/components/badge';
+import { ProductType, ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { IconComponentType } from '../../utils/types';
+import { SpacingProps } from '../../utils/spacing';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ExpressThemes } from '@viasat/beam-tokens/utils';
+export interface BadgeProps extends ComponentPropsWithRef<'div'>, SpacingProps {
+    /**
+     * Specify the appearance of the Badge
+     */
+    appearance?: BadgeAppearance;
+    /**
+     * Specify the theme of the Badge
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the size of the Badge
+     * @default 'sm'
+     */
+    size?: BadgeSize;
+    /**
+     * Specify the emphasis of the Badge
+     */
+    emphasis?: BadgeEmphasis;
+    /**
+     * Specify if the icon displays on the Badge
+     */
+    hideIcon?: boolean;
+    /**
+     * Specify a different icon for the Badge
+     */
+    icon?: IconComponentType;
+    /**
+     * Provide text for the Badge
+     */
+    children: ReactNode;
+    /**
+     * Specify the aria-label for the icon, announced by screen readers
+     */
+    iconAriaLabel?: string;
+    /**
+     * Specify the productType of a Badge
+     */
+    productType?: ProductType;
+    /**
+     * Specify an expressive theme for the Badge
+     */
+    expressive?: ExpressThemes;
+}
+export declare const Badge: import('react').ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export default Badge;

package/lib/Badge/Badge.es.js

@@ -0,0 +1,91 @@
+import "../../assets/Badge.css";
+import { jsxs as N, jsx as m } from "react/jsx-runtime";
+import { g as E, a as x } from "../../chunks/classNames.DNsS4J__.js";
+import { t as L, d as $, m as I } from "../../chunks/constants.BBi77pmH.js";
+import * as a from "react";
+import { forwardRef as M } from "react";
+import { S as B } from "../../chunks/ErrorOutline._gBx3dtF.js";
+import { S as b } from "../../chunks/InfoOutlined.D3_Iy2PA.js";
+import { S as O } from "../../chunks/WarningOutlined.B3hTzZPs.js";
+import { partitionSpacingProps as k } from "../../utils/spacing.es.js";
+import A from "clsx";
+const Z = (e) => /* @__PURE__ */ a.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ a.createElement("g", { clipPath: "url(#clip0_501_330)" }, /* @__PURE__ */ a.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z", fill: "currentColor" })), /* @__PURE__ */ a.createElement("defs", null, /* @__PURE__ */ a.createElement("clipPath", { id: "clip0_501_330" }, /* @__PURE__ */ a.createElement("rect", { width: 24, height: 24, fill: "none" })))), j = "badge", { baseClassNamePrefix: R, subElementClassPrefix: t, classModifierPrefix: n } = E(j), T = {
+  positive: "Success",
+  warning: "Warning",
+  negative: "Error",
+  infoPrimary: "Information",
+  infoSecondary: "Information"
+}, i = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-badge": "bm-badge",
+  "bm-badge__icon": "bm-badge__icon",
+  "bm-badge__label": "bm-badge__label",
+  "bm-badge--sm": "bm-badge--sm",
+  "bm-badge--md": "bm-badge--md",
+  "bm-badge--positive-strong": "bm-badge--positive-strong",
+  "bm-badge--positive-medium": "bm-badge--positive-medium",
+  "bm-badge--positive-subtle": "bm-badge--positive-subtle",
+  "bm-badge--warning-strong": "bm-badge--warning-strong",
+  "bm-badge--warning-medium": "bm-badge--warning-medium",
+  "bm-badge--warning-subtle": "bm-badge--warning-subtle",
+  "bm-badge--negative-strong": "bm-badge--negative-strong",
+  "bm-badge--negative-medium": "bm-badge--negative-medium",
+  "bm-badge--negative-subtle": "bm-badge--negative-subtle",
+  "bm-badge--infoPrimary-strong": "bm-badge--infoPrimary-strong",
+  "bm-badge--infoPrimary-medium": "bm-badge--infoPrimary-medium",
+  "bm-badge--infoPrimary-subtle": "bm-badge--infoPrimary-subtle",
+  "bm-badge--infoSecondary-strong": "bm-badge--infoSecondary-strong",
+  "bm-badge--infoSecondary-medium": "bm-badge--infoSecondary-medium",
+  "bm-badge--infoSecondary-subtle": "bm-badge--infoSecondary-subtle"
+}, W = {
+  positive: Z,
+  warning: O,
+  negative: B,
+  infoPrimary: b,
+  infoSecondary: b
+}, V = M(
+  ({
+    appearance: e = "infoPrimary",
+    size: g = "sm",
+    emphasis: d = "strong",
+    hideIcon: l = !1,
+    icon: c,
+    children: f,
+    className: u,
+    iconAriaLabel: p,
+    theme: s,
+    productType: r,
+    expressive: o,
+    ...v
+  }, y) => {
+    const C = W[e], S = c || C, P = p || T[e], [w, h] = k(v), _ = A(
+      s && L(s),
+      r && $(r),
+      o && I(o),
+      i[R],
+      i[`${n}${e}`],
+      i[`${n}${e}-${d}`],
+      i[`${n}${g}`],
+      ...x(w),
+      u
+    );
+    return /* @__PURE__ */ N("span", { ref: y, className: _, ...h, children: [
+      !l && /* @__PURE__ */ m(
+        "span",
+        {
+          role: "img",
+          "aria-label": P,
+          className: i[`${t}icon`],
+          children: /* @__PURE__ */ m(S, {})
+        }
+      ),
+      /* @__PURE__ */ m("span", { className: i[`${t}label`], children: f })
+    ] });
+  }
+);
+export {
+  V as Badge,
+  V as default
+};

package/lib/Badge/Badge.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Badge/index.cjs.js

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

package/lib/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/lib/Badge/index.es.js

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

package/lib/BadgeDot/BadgeDot.cjs.js

@@ -0,0 +1 @@
+var p=require("../../assets/BadgeDot.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),$=require("clsx"),c=require("react"),q=require("../../chunks/constants.hwjHOsvT.js"),N=require("../../chunks/classNames.DAeKwerT.js"),M={infoPrimary:"Primary Info",infoSecondary:"Secondary Info",positive:"Positive",warning:"Warning",negative:"Error"},s={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-badge-dot":"bm-badge-dot","bm-badge-dot--infoPrimary":"bm-badge-dot--infoPrimary","bm-badge-dot--infoSecondary":"bm-badge-dot--infoSecondary","bm-badge-dot--positive":"bm-badge-dot--positive","bm-badge-dot--warning":"bm-badge-dot--warning","bm-badge-dot--negative":"bm-badge-dot--negative","bm-badge-dot--subtle":"bm-badge-dot--subtle","bm-badge-dot--strong":"bm-badge-dot--strong"},j=c.forwardRef(({children:e,theme:r,overrideDotColor:i,appearance:a="infoPrimary",emphasis:b="strong",className:l,style:f,"aria-label":d,...y},u)=>{const{baseClassNamePrefix:o,classModifierPrefix:n,variablePrefix:v}=N.getBEMClassNames("badge-dot"),g=c.useMemo(()=>`${o}-${Math.random().toString(36).slice(2,9)}`,[o]),P=`${v}-color`;let t;d?t=d:e||(t=M[a]);const S={...i&&{[P]:i},...f},x=$(s[o],b&&s[`${n}${b}`],a&&s[`${n}${a}`],r&&q.themeClassName(r),l);return m.jsx("span",{ref:u,"aria-describedby":e?g:void 0,className:x,style:S,"aria-label":t,...y,children:e&&m.jsx("span",{id:g,children:e})})});exports.BadgeDot=j;

package/lib/BadgeDot/BadgeDot.d.ts

@@ -0,0 +1,35 @@
+import { BadgeDotAppearance as Appearance, BadgeDotEmphasis as Emphasis } from '@viasat/beam-shared/components/badgeDot';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+/**
+ * # A11y things that a user must do:
+ * - aria-label: use when no visible text is present to add a description to the dot
+ *
+ * # A11y things that we should do:
+ * - aria-describedby: to associate the dot with the text if text is present
+ * - aria-label: to add a description to the dot when no visible text is present
+ */
+export interface BadgeDotProps extends React.ComponentPropsWithoutRef<'span'> {
+    /**
+     * Provide text for the BadgeDot
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the theme of the BadgeDot. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the appearance of the BadgeDot
+     * @default 'infoPrimary'
+     */
+    appearance?: Appearance;
+    /**
+     * Specify the emphasis of the BadgeDot
+     * @default 'strong'
+     */
+    emphasis?: Emphasis;
+    /**
+     * Overrides default dot color
+     */
+    overrideDotColor?: string;
+}
+export declare const BadgeDot: import('react').ForwardRefExoticComponent<BadgeDotProps & import('react').RefAttributes<HTMLSpanElement>>;

package/lib/BadgeDot/BadgeDot.es.js

@@ -0,0 +1,71 @@
+import "../../assets/BadgeDot.css";
+import { jsx as g } from "react/jsx-runtime";
+import $ from "clsx";
+import { forwardRef as x, useMemo as u } from "react";
+import { t as N } from "../../chunks/constants.BBi77pmH.js";
+import { g as w } from "../../chunks/classNames.DNsS4J__.js";
+const C = {
+  infoPrimary: "Primary Info",
+  infoSecondary: "Secondary Info",
+  positive: "Positive",
+  warning: "Warning",
+  negative: "Error"
+}, r = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-badge-dot": "bm-badge-dot",
+  "bm-badge-dot--infoPrimary": "bm-badge-dot--infoPrimary",
+  "bm-badge-dot--infoSecondary": "bm-badge-dot--infoSecondary",
+  "bm-badge-dot--positive": "bm-badge-dot--positive",
+  "bm-badge-dot--warning": "bm-badge-dot--warning",
+  "bm-badge-dot--negative": "bm-badge-dot--negative",
+  "bm-badge-dot--subtle": "bm-badge-dot--subtle",
+  "bm-badge-dot--strong": "bm-badge-dot--strong"
+}, j = x(
+  ({
+    children: o,
+    theme: i,
+    overrideDotColor: b,
+    appearance: a = "infoPrimary",
+    emphasis: d = "strong",
+    className: f,
+    style: l,
+    "aria-label": s,
+    ...c
+  }, y) => {
+    const { baseClassNamePrefix: e, classModifierPrefix: m, variablePrefix: v } = w("badge-dot"), n = u(
+      () => `${e}-${Math.random().toString(36).slice(2, 9)}`,
+      [e]
+    ), p = `${v}-color`;
+    let t;
+    s ? t = s : o || (t = C[a]);
+    const P = {
+      ...b && {
+        [p]: b
+      },
+      ...l
+    }, S = $(
+      r[e],
+      d && r[`${m}${d}`],
+      a && r[`${m}${a}`],
+      i && N(i),
+      f
+    );
+    return /* @__PURE__ */ g(
+      "span",
+      {
+        ref: y,
+        "aria-describedby": o ? n : void 0,
+        className: S,
+        style: P,
+        "aria-label": t,
+        ...c,
+        children: o && /* @__PURE__ */ g("span", { id: n, children: o })
+      }
+    );
+  }
+);
+export {
+  j as BadgeDot
+};

package/lib/BadgeDot/index.cjs.js

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

package/lib/BadgeDot/index.d.ts

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

package/lib/BadgeDot/index.es.js

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

package/lib/Box/Box.cjs.js

@@ -0,0 +1 @@
+var q=require("../../assets/Box.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),w=require("clsx"),y=require("react"),n=require("../../chunks/classNames.DAeKwerT.js"),$=require("../../chunks/constants.hwjHOsvT.js"),C=require("../../utils/spacing.cjs.js"),b={"bm-box--border-width-none":"bm-box--border-width-none","bm-box--border-width-md":"bm-box--border-width-md","bm-box--border-width-lg":"bm-box--border-width-lg","bm-box--border-width-xl":"bm-box--border-width-xl","bm-box--border-width-divider":"bm-box--border-width-divider","bm-box--surface-00":"bm-box--surface-00","bm-box--surface-00-alt":"bm-box--surface-00-alt","bm-box--surface-01":"bm-box--surface-01","bm-box--surface-02":"bm-box--surface-02","bm-box--surface-03":"bm-box--surface-03","bm-box--surface-positive":"bm-box--surface-positive","bm-box--surface-warning":"bm-box--surface-warning","bm-box--surface-negative":"bm-box--surface-negative","bm-box--surface-info-primary":"bm-box--surface-info-primary","bm-box--surface-info-secondary":"bm-box--surface-info-secondary","bm-box--surface-positive-strong":"bm-box--surface-positive-strong","bm-box--surface-warning-strong":"bm-box--surface-warning-strong","bm-box--surface-negative-strong":"bm-box--surface-negative-strong","bm-box--surface-info-primary-strong":"bm-box--surface-info-primary-strong","bm-box--surface-info-secondary-strong":"bm-box--surface-info-secondary-strong","bm-box--surface-selected":"bm-box--surface-selected","bm-box--surface-selected-subtle":"bm-box--surface-selected-subtle","bm-box--surface-highlight":"bm-box--surface-highlight","bm-box--surface-transparent":"bm-box--surface-transparent","bm-box--surface-inverse":"bm-box--surface-inverse","bm-box--surface-expressive":"bm-box--surface-expressive","bm-box--surface-expressive-stronger":"bm-box--surface-expressive-stronger","bm-box--surface-expressive-inverse":"bm-box--surface-expressive-inverse","bm-box--border-00":"bm-box--border-00","bm-box--border-00-alt":"bm-box--border-00-alt","bm-box--border-01":"bm-box--border-01","bm-box--border-02":"bm-box--border-02","bm-box--border-03":"bm-box--border-03","bm-box--border-strong":"bm-box--border-strong","bm-box--border-positive":"bm-box--border-positive","bm-box--border-warning":"bm-box--border-warning","bm-box--border-negative":"bm-box--border-negative","bm-box--border-info-primary":"bm-box--border-info-primary","bm-box--border-info-secondary":"bm-box--border-info-secondary","bm-box--border-positive-strong":"bm-box--border-positive-strong","bm-box--border-warning-strong":"bm-box--border-warning-strong","bm-box--border-negative-strong":"bm-box--border-negative-strong","bm-box--border-info-primary-strong":"bm-box--border-info-primary-strong","bm-box--border-info-secondary-strong":"bm-box--border-info-secondary-strong","bm-box--border-selected":"bm-box--border-selected","bm-box--border-focus":"bm-box--border-focus","bm-box--border-inverse":"bm-box--border-inverse","bm-box--border-expressive":"bm-box--border-expressive","bm-box--border-expressive-stronger":"bm-box--border-expressive-stronger","bm-box--border-transparent":"bm-box--border-transparent","bm-box--radius-none":"bm-box--radius-none","bm-box--radius-xs":"bm-box--radius-xs","bm-box--radius-sm":"bm-box--radius-sm","bm-box--radius-md":"bm-box--radius-md","bm-box--radius-lg":"bm-box--radius-lg","bm-box--radius-round":"bm-box--radius-round","bm-box--shadow-none":"bm-box--shadow-none","bm-box--shadow-sm":"bm-box--shadow-sm","bm-box--shadow-md":"bm-box--shadow-md","bm-box--shadow-lg":"bm-box--shadow-lg","bm-box--shadow-overlay":"bm-box--shadow-overlay"},N=y.forwardRef((d,i)=>{const{backgroundColor:o,borderColor:e,borderWidth:s,borderRadius:m,as:t="div",shadow:a,children:c,className:u,theme:x,...f}=d,{baseClassNamePrefix:g,classModifierPrefix:r}=n.getBEMClassNames("box"),[l,p]=C.partitionSpacingProps(f),v=w(b[g],o&&b[`${r}surface-${o}`],e&&b[`${r}border-${e}`],s&&b[`${r}border-width-${s}`],m&&b[`${r}radius-${m}`],...n.generateSpacingClasses(l),a&&b[`${r}shadow-${a}`],x&&$.themeClassName(x),u);return h.jsx(t,{ref:i,className:v,...p,children:c})});exports.Box=N;

package/lib/Box/Box.d.ts

@@ -0,0 +1,40 @@
+import { default as React, ReactNode } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils';
+import { BoxBorderWidth, BoxBackgroundColor, BoxBorderColor, BoxBorderRadius, BoxShadow } from '@viasat/beam-shared/components/box';
+import { SpacingProps } from '../../utils/spacing';
+export interface BoxProps extends React.ComponentPropsWithRef<'div'>, SpacingProps {
+    /**
+     * Provide content for the Box
+     */
+    children?: ReactNode;
+    /**
+     * Specify the background color of a Box
+     */
+    backgroundColor?: BoxBackgroundColor;
+    /**
+     * Specify the border color of a Box
+     */
+    borderColor?: BoxBorderColor;
+    /**
+     * Specify the border width of a Box
+     */
+    borderWidth?: BoxBorderWidth;
+    /**
+     * Specify the border radius of a Box
+     */
+    borderRadius?: BoxBorderRadius;
+    /**
+     * Specify the HTML element type of a Box
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /**
+     * Specify if a Box has a shadow
+     */
+    shadow?: BoxShadow;
+    /**
+     * Specify the theme of a Box
+     */
+    theme?: ThemeTypes;
+}
+export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/lib/Box/Box.es.js

@@ -0,0 +1,97 @@
+import "../../assets/Box.css";
+import { jsx as v } from "react/jsx-runtime";
+import h from "clsx";
+import { forwardRef as w } from "react";
+import { g as y, a as $ } from "../../chunks/classNames.DNsS4J__.js";
+import { t as C } from "../../chunks/constants.BBi77pmH.js";
+import { partitionSpacingProps as N } from "../../utils/spacing.es.js";
+const b = {
+  "bm-box--border-width-none": "bm-box--border-width-none",
+  "bm-box--border-width-md": "bm-box--border-width-md",
+  "bm-box--border-width-lg": "bm-box--border-width-lg",
+  "bm-box--border-width-xl": "bm-box--border-width-xl",
+  "bm-box--border-width-divider": "bm-box--border-width-divider",
+  "bm-box--surface-00": "bm-box--surface-00",
+  "bm-box--surface-00-alt": "bm-box--surface-00-alt",
+  "bm-box--surface-01": "bm-box--surface-01",
+  "bm-box--surface-02": "bm-box--surface-02",
+  "bm-box--surface-03": "bm-box--surface-03",
+  "bm-box--surface-positive": "bm-box--surface-positive",
+  "bm-box--surface-warning": "bm-box--surface-warning",
+  "bm-box--surface-negative": "bm-box--surface-negative",
+  "bm-box--surface-info-primary": "bm-box--surface-info-primary",
+  "bm-box--surface-info-secondary": "bm-box--surface-info-secondary",
+  "bm-box--surface-positive-strong": "bm-box--surface-positive-strong",
+  "bm-box--surface-warning-strong": "bm-box--surface-warning-strong",
+  "bm-box--surface-negative-strong": "bm-box--surface-negative-strong",
+  "bm-box--surface-info-primary-strong": "bm-box--surface-info-primary-strong",
+  "bm-box--surface-info-secondary-strong": "bm-box--surface-info-secondary-strong",
+  "bm-box--surface-selected": "bm-box--surface-selected",
+  "bm-box--surface-selected-subtle": "bm-box--surface-selected-subtle",
+  "bm-box--surface-highlight": "bm-box--surface-highlight",
+  "bm-box--surface-transparent": "bm-box--surface-transparent",
+  "bm-box--surface-inverse": "bm-box--surface-inverse",
+  "bm-box--surface-expressive": "bm-box--surface-expressive",
+  "bm-box--surface-expressive-stronger": "bm-box--surface-expressive-stronger",
+  "bm-box--surface-expressive-inverse": "bm-box--surface-expressive-inverse",
+  "bm-box--border-00": "bm-box--border-00",
+  "bm-box--border-00-alt": "bm-box--border-00-alt",
+  "bm-box--border-01": "bm-box--border-01",
+  "bm-box--border-02": "bm-box--border-02",
+  "bm-box--border-03": "bm-box--border-03",
+  "bm-box--border-strong": "bm-box--border-strong",
+  "bm-box--border-positive": "bm-box--border-positive",
+  "bm-box--border-warning": "bm-box--border-warning",
+  "bm-box--border-negative": "bm-box--border-negative",
+  "bm-box--border-info-primary": "bm-box--border-info-primary",
+  "bm-box--border-info-secondary": "bm-box--border-info-secondary",
+  "bm-box--border-positive-strong": "bm-box--border-positive-strong",
+  "bm-box--border-warning-strong": "bm-box--border-warning-strong",
+  "bm-box--border-negative-strong": "bm-box--border-negative-strong",
+  "bm-box--border-info-primary-strong": "bm-box--border-info-primary-strong",
+  "bm-box--border-info-secondary-strong": "bm-box--border-info-secondary-strong",
+  "bm-box--border-selected": "bm-box--border-selected",
+  "bm-box--border-focus": "bm-box--border-focus",
+  "bm-box--border-inverse": "bm-box--border-inverse",
+  "bm-box--border-expressive": "bm-box--border-expressive",
+  "bm-box--border-expressive-stronger": "bm-box--border-expressive-stronger",
+  "bm-box--border-transparent": "bm-box--border-transparent",
+  "bm-box--radius-none": "bm-box--radius-none",
+  "bm-box--radius-xs": "bm-box--radius-xs",
+  "bm-box--radius-sm": "bm-box--radius-sm",
+  "bm-box--radius-md": "bm-box--radius-md",
+  "bm-box--radius-lg": "bm-box--radius-lg",
+  "bm-box--radius-round": "bm-box--radius-round",
+  "bm-box--shadow-none": "bm-box--shadow-none",
+  "bm-box--shadow-sm": "bm-box--shadow-sm",
+  "bm-box--shadow-md": "bm-box--shadow-md",
+  "bm-box--shadow-lg": "bm-box--shadow-lg",
+  "bm-box--shadow-overlay": "bm-box--shadow-overlay"
+}, E = w((d, i) => {
+  const {
+    backgroundColor: o,
+    borderColor: e,
+    borderWidth: s,
+    borderRadius: m,
+    as: n = "div",
+    shadow: a,
+    children: t,
+    className: c,
+    theme: x,
+    ...f
+  } = d, { baseClassNamePrefix: u, classModifierPrefix: r } = y("box"), [g, p] = N(f), l = h(
+    b[u],
+    o && b[`${r}surface-${o}`],
+    e && b[`${r}border-${e}`],
+    s && b[`${r}border-width-${s}`],
+    m && b[`${r}radius-${m}`],
+    ...$(g),
+    a && b[`${r}shadow-${a}`],
+    x && C(x),
+    c
+  );
+  return /* @__PURE__ */ v(n, { ref: i, className: l, ...p, children: t });
+});
+export {
+  E as Box
+};

package/lib/Box/index.cjs.js

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

package/lib/Box/index.d.ts

@@ -0,0 +1 @@
+export * from './Box';

package/lib/Box/index.es.js

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

package/lib/Breadcrumbs/Breadcrumbs.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),s=require("react"),d=require("clsx"),q=require("../../chunks/constants.hwjHOsvT.js"),x=require("../../chunks/classNames.DAeKwerT.js"),r=require("../../chunks/BreadcrumbsItem.BkT8MeqE.js"),{baseClassNamePrefix:M,subElementClassPrefix:i,classModifierPrefix:P}=x.getBEMClassNames("breadcrumbs");function v(t){return t.type===r.BreadcrumbItem}function $({children:t,wrap:n=!0,itemsBeforeCollapse:f=1,itemsAfterCollapse:y=1,theme:u,className:p,...B}){const I=d(r.styles[M],u&&q.themeClassName(u),n&&r.styles[`${P}wrap`],p),N=d(r.styles[`${i}item`],r.styles[`${i}item--ellipsis`]),a=s.useMemo(()=>s.Children.toArray(t).filter(e=>s.isValidElement(e)?v(e)?!0:(console.warn(`Invalid child type in Breadcrumbs: ${e.type}. Only BreadcrumbsItem is allowed.`),!1):!1),[t]),m=s.useMemo(()=>a,[a,n,f,y,N]),C=s.useMemo(()=>e=>e.map((l,c)=>{const o=c===e.length-1;return s.cloneElement(l,{isCurrent:o,href:o?void 0:l.props.href,key:l.key||c})}),[m]);return b.jsx("nav",{"aria-label":"Breadcrumbs",className:I,...B,children:b.jsx("ol",{className:r.styles[`${i}list`],children:C(m)})})}exports.Breadcrumb=$;

package/lib/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Pass items to the Breadcrumb
+     */
+    children: React.ReactNode;
+    /**
+     * Specify if items wrap or collapse to an ellipsis
+     * @ignore
+     */
+    wrap?: boolean;
+    /**
+     * Specify how many items show before ellipsis
+     * @ignore
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * Specify how many items show after ellipsis
+     * @ignore
+     */
+    itemsAfterCollapse?: number;
+    /**
+     * Specify the theme of the Breadcrumbs. By default, it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+export declare function Breadcrumb({ children, wrap, itemsBeforeCollapse, itemsAfterCollapse, theme, className: _className, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;