@viasat/beam-react 2.0.0

package/lib/TextArea/TextArea.cjs.js

@@ -0,0 +1 @@
+var Ie=require("../../assets/TextArea.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),ge=require("react"),T=require("clsx"),j=require("../../chunks/form.context.B1PXIJNq.js"),ve=require("../../chunks/constants.hwjHOsvT.js"),pe=require("../../chunks/classNames.DAeKwerT.js"),ye=require("../Form/contexts/label.context.cjs.js"),je=require("../Form/contexts/helperText.context.cjs.js"),O=require("../Form/hooks/useUniversalRef.hook.cjs.js"),f=require("../Form/hooks/useAccessibleId.hook.cjs.js");function qe(e){const r=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(r,t,i.get?i:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const q=qe(ge),k=new WeakMap;async function $e(e){const r=e.offsetHeight,t=e.clientHeight,i=r-t;e.style.overflow="hidden",e.scrollHeight===t&&(e.style.height="0");const c=e.scrollHeight;e.style.height=`${c+i}px`}const E=(e,r)=>{const t=k.get(e);if(k.set(e,r),!r){t&&(e.style.height="unset",e.style.overflow="visible");return}$e(e)},s={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-text-area":"bm-text-area","bm-text-area--disabled":"bm-text-area--disabled","bm-text-area--error":"bm-text-area--error","bm-text-area__header":"bm-text-area__header","bm-text-area__counter":"bm-text-area__counter","bm-text-area__field":"bm-text-area__field","bm-text-area__input":"bm-text-area__input","bm-text-area--read-only":"bm-text-area--read-only","bm-text-area--fluid":"bm-text-area--fluid","bm-text-area--hide-resize":"bm-text-area--hide-resize","bm-text-area--cols-width":"bm-text-area--cols-width"},{baseClassNamePrefix:He,subElementClassPrefix:m,classModifierPrefix:n}=pe.getBEMClassNames("text-area"),M=q.forwardRef(function({cols:e,width:r,error:t,theme:i,maxCount:c,label:C=null,fluid:D=!1,helperText:$=null,hideResize:S=!1,autoResize:o=!1,validationRules:V=[],className:z,hideRequiredMarker:L=!1,disabled:B=!1,readOnly:U=!1,required:A=!1,...W},G){const{id:J,name:h,value:_,onChange:g,maxLength:K,"aria-invalid":Q,defaultValue:X,"aria-describedby":Y,...Z}=W,ee=o?!0:S,{refFn:te,ref:v}=O.useUniversalRef(G),{refFn:se,ref:p}=O.useUniversalRef(null),{ctxDisabled:re,ctxReadOnly:ae,ctxRequired:ie,ctxInitialValues:ne,ctxRegister:le}=q.useContext(j.FormContext),{id:ce}=f.useAccessibleId(),{id:H}=f.useAccessibleId(),{id:I}=f.useAccessibleId(),{id:R}=f.useAccessibleId(),N=J||ce,{showErrors:oe,setErrors:de,isInvalid:ue,errorShown:be}=j.useFieldValidator(),xe=K||c,w=!!(t!=null&&t.length),fe=T($&&I,w&&H,be&&R,Y),F=!!t||ue,l=B||re,d=U||ae,P=A||ie,y=X||ne[h];!l&&le(h,V,de);const me=T(s[He],i&&ve.themeClassName(i),D&&s[`${n}fluid`],F&&s[`${n}error`],e&&s[`${n}cols-width`],l&&s[`${n}disabled`],d&&s[`${n}read-only`],ee&&s[`${n}hide-resize`],o&&s[`${n}auto-resize`],z);q.useEffect(()=>{const{current:u}=p,{current:b}=v,{length:x}=_||y||"";u&&(u.textContent=`${x}`),E(b,o)},[o,p,v,_,y]);const he=u=>{g==null||g(u);const{current:b}=p,{current:x}=v,{value:{length:_e}}=x;b&&(b.textContent=`${_e}`),E(x,o)};return a.jsxs("div",{className:me,style:{maxWidth:r},children:[a.jsxs("div",{className:s[`${m}header`],children:[a.jsx(ye.LabelProvider,{ctxHtmlFor:N,ctxDisabled:l,ctxRequired:P&&!L,children:C}),!!c&&a.jsxs("div",{className:s[`${m}counter`],children:[a.jsx("span",{ref:se}),"/",a.jsx("span",{children:c})]})]}),a.jsx("div",{className:s[`${m}field`],children:a.jsx("textarea",{id:N,name:h,ref:te,cols:e,value:_,readOnly:d,disabled:l,required:P,maxLength:xe,onChange:he,"aria-readonly":d,defaultValue:y,"aria-describedby":fe,"aria-disabled":l||d,"aria-invalid":F||Q,className:s[`${m}input`],...Z})}),a.jsxs(je.HelperTextProvider,{ctxId:I,ctxDisabled:l,children:[$,w&&a.jsx(j.HelperText,{id:H,appearance:"negative",children:t})]}),oe(R)]})});exports.TextArea=M;exports.default=M;

package/lib/TextArea/TextArea.d.ts

@@ -0,0 +1,83 @@
+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 TextAreaProps extends React.ComponentPropsWithRef<'textarea'> {
+    /**
+     * Specify the height of TextArea
+     */
+    rows?: number;
+    /**
+     * Specify the width of TextArea
+     */
+    cols?: number;
+    /**
+     * Specify placeholder text for TextArea
+     */
+    placeholder?: string;
+    /**
+     * Specify HelperText for TextArea
+     */
+    helperText?: Nullable<React.ReactElement>;
+    /**
+     * Specify if TextArea is a required input
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if the TextArea displays with an asterisk
+     * @default false
+     */
+    hideRequiredMarker?: boolean;
+    /**
+     * Specify Label for TextArea
+     */
+    label?: Nullable<React.ReactElement>;
+    /**
+     * Specify error text and display error state of a TextArea
+     */
+    error?: boolean | string;
+    /**
+     * Specify if TextArea displays in a read-only state
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if TextArea displays in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify if TextArea is fluid
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify the width of TextArea
+     */
+    width?: string;
+    /**
+     * Specify the theme of the TextArea. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify form validation rules for TextArea
+     */
+    validationRules?: Array<FormValidator>;
+    /**
+     * Specify if TextArea can be manually resized
+     * @default false
+     */
+    hideResize?: boolean;
+    /**
+     * Specify the maximum character count for the TextArea
+     */
+    maxCount?: number;
+    /**
+     * Specify if the TextArea automatically resizes to fit the text
+     * @default false
+     */
+    autoResize?: boolean;
+}
+export declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/lib/TextArea/TextArea.es.js

@@ -0,0 +1,151 @@
+import "../../assets/TextArea.css";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import * as H from "react";
+import D from "clsx";
+import { F as pe, u as ge, H as ve } from "../../chunks/form.context.CNWjF5qA.js";
+import { t as _e } from "../../chunks/constants.BBi77pmH.js";
+import { g as ye } from "../../chunks/classNames.DNsS4J__.js";
+import { LabelProvider as $e } from "../Form/contexts/label.context.es.js";
+import { HelperTextProvider as He } from "../Form/contexts/helperText.context.es.js";
+import { useUniversalRef as M } from "../Form/hooks/useUniversalRef.hook.es.js";
+import { useAccessibleId as u } from "../Form/hooks/useAccessibleId.hook.es.js";
+const V = /* @__PURE__ */ new WeakMap();
+async function we(e) {
+  const s = e.offsetHeight, a = e.clientHeight, o = s - a;
+  e.style.overflow = "hidden", e.scrollHeight === a && (e.style.height = "0");
+  const l = e.scrollHeight;
+  e.style.height = `${l + o}px`;
+}
+const q = (e, s) => {
+  const a = V.get(e);
+  if (V.set(e, s), !s) {
+    a && (e.style.height = "unset", e.style.overflow = "visible");
+    return;
+  }
+  we(e);
+}, t = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-text-area": "bm-text-area",
+  "bm-text-area--disabled": "bm-text-area--disabled",
+  "bm-text-area--error": "bm-text-area--error",
+  "bm-text-area__header": "bm-text-area__header",
+  "bm-text-area__counter": "bm-text-area__counter",
+  "bm-text-area__field": "bm-text-area__field",
+  "bm-text-area__input": "bm-text-area__input",
+  "bm-text-area--read-only": "bm-text-area--read-only",
+  "bm-text-area--fluid": "bm-text-area--fluid",
+  "bm-text-area--hide-resize": "bm-text-area--hide-resize",
+  "bm-text-area--cols-width": "bm-text-area--cols-width"
+}, { baseClassNamePrefix: Ie, subElementClassPrefix: x, classModifierPrefix: r } = ye("text-area"), Le = H.forwardRef(
+  function({
+    cols: e,
+    width: s,
+    error: a,
+    theme: o,
+    maxCount: l,
+    label: L = null,
+    fluid: T = !1,
+    helperText: w = null,
+    hideResize: k = !1,
+    autoResize: d = !1,
+    validationRules: z = [],
+    className: B,
+    hideRequiredMarker: O = !1,
+    disabled: j = !1,
+    readOnly: W = !1,
+    required: S = !1,
+    ...U
+  }, G) {
+    const {
+      id: J,
+      name: p,
+      value: g,
+      onChange: v,
+      maxLength: K,
+      "aria-invalid": Q,
+      defaultValue: X,
+      "aria-describedby": Y,
+      ...Z
+    } = U, A = d ? !0 : k, { refFn: ee, ref: _ } = M(G), { refFn: te, ref: y } = M(null), { ctxDisabled: ae, ctxReadOnly: re, ctxRequired: se, ctxInitialValues: ie, ctxRegister: ne } = H.useContext(pe), { id: le } = u(), { id: I } = u(), { id: N } = u(), { id: R } = u(), E = J || le, { showErrors: de, setErrors: oe, isInvalid: ce, errorShown: me } = ge(), fe = K || l, C = !!(a != null && a.length), be = D(
+      w && N,
+      C && I,
+      me && R,
+      Y
+    ), F = !!a || ce, i = j || ae, c = W || re, P = S || se, $ = X || ie[p];
+    !i && ne(p, z, oe);
+    const he = D(
+      t[Ie],
+      o && _e(o),
+      T && t[`${r}fluid`],
+      F && t[`${r}error`],
+      e && t[`${r}cols-width`],
+      i && t[`${r}disabled`],
+      c && t[`${r}read-only`],
+      A && t[`${r}hide-resize`],
+      d && t[`${r}auto-resize`],
+      B
+    );
+    H.useEffect(() => {
+      const { current: m } = y, { current: f } = _, { length: b } = g || $ || "";
+      m && (m.textContent = `${b}`), q(f, d);
+    }, [d, y, _, g, $]);
+    const ue = (m) => {
+      v == null || v(m);
+      const { current: f } = y, { current: b } = _, {
+        value: { length: xe }
+      } = b;
+      f && (f.textContent = `${xe}`), q(b, d);
+    };
+    return /* @__PURE__ */ h("div", { className: he, style: { maxWidth: s }, children: [
+      /* @__PURE__ */ h("div", { className: t[`${x}header`], children: [
+        /* @__PURE__ */ n(
+          $e,
+          {
+            ctxHtmlFor: E,
+            ctxDisabled: i,
+            ctxRequired: P && !O,
+            children: L
+          }
+        ),
+        !!l && /* @__PURE__ */ h("div", { className: t[`${x}counter`], children: [
+          /* @__PURE__ */ n("span", { ref: te }),
+          "/",
+          /* @__PURE__ */ n("span", { children: l })
+        ] })
+      ] }),
+      /* @__PURE__ */ n("div", { className: t[`${x}field`], children: /* @__PURE__ */ n(
+        "textarea",
+        {
+          id: E,
+          name: p,
+          ref: ee,
+          cols: e,
+          value: g,
+          readOnly: c,
+          disabled: i,
+          required: P,
+          maxLength: fe,
+          onChange: ue,
+          "aria-readonly": c,
+          defaultValue: $,
+          "aria-describedby": be,
+          "aria-disabled": i || c,
+          "aria-invalid": F || Q,
+          className: t[`${x}input`],
+          ...Z
+        }
+      ) }),
+      /* @__PURE__ */ h(He, { ctxId: N, ctxDisabled: i, children: [
+        w,
+        C && /* @__PURE__ */ n(ve, { id: I, appearance: "negative", children: a })
+      ] }),
+      de(R)
+    ] });
+  }
+);
+export {
+  Le as TextArea,
+  Le as default
+};

package/lib/TextArea/index.cjs.js

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

package/lib/TextArea/index.d.ts

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

package/lib/TextArea/index.es.js

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

package/lib/TextField/TextField.cjs.js

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

package/lib/TextField/TextField.d.ts

@@ -0,0 +1,74 @@
+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 TextFieldProps extends React.ComponentPropsWithRef<'input'> {
+    /**
+     * Specify placeholder text for TextField
+     */
+    placeholder?: string;
+    /**
+     * Specify HelperText for TextField
+     */
+    helperText?: Nullable<React.ReactElement>;
+    /**
+     * Specify if TextField is a required input
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if the TextField displays with an asterisk
+     * @default false
+     */
+    hideRequiredMarker?: boolean;
+    /**
+     * Specify Label for TextField
+     */
+    label?: Nullable<React.ReactElement>;
+    /**
+     * Specify error text and display error state of a TextField
+     */
+    error?: boolean | string;
+    /**
+     * Specify if TextField displays in a read-only state
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if TextField displays in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify if TextField is fluid
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify the width of TextField
+     */
+    width?: string;
+    /**
+     * Specify if overflow displays ellipsis
+     * @default false
+     */
+    ellipse?: boolean;
+    /**
+     * Specify content to display before input
+     */
+    contentBefore?: React.ReactNode;
+    /**
+     * Specify content to display after input
+     */
+    contentAfter?: React.ReactNode;
+    /**
+     * Specify the theme of the TextField. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify form validation rules for TextField
+     */
+    validationRules?: Array<FormValidator>;
+}
+export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default TextField;

package/lib/TextField/TextField.es.js

@@ -0,0 +1,111 @@
+import "../../assets/TextField.css";
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import * as N from "react";
+import $ from "clsx";
+import { F as Y, u as Z, H as ee } from "../../chunks/form.context.CNWjF5qA.js";
+import { t as ie } from "../../chunks/constants.BBi77pmH.js";
+import { g as te } from "../../chunks/classNames.DNsS4J__.js";
+import { LabelProvider as le } from "../Form/contexts/label.context.es.js";
+import { HelperTextProvider as se } from "../Form/contexts/helperText.context.es.js";
+import { useUniversalRef as de } from "../Form/hooks/useUniversalRef.hook.es.js";
+import { useAccessibleId as o } from "../Form/hooks/useAccessibleId.hook.es.js";
+const e = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-text-field": "bm-text-field",
+  "bm-text-field--disabled": "bm-text-field--disabled",
+  "bm-text-field--error": "bm-text-field--error",
+  "bm-text-field__field": "bm-text-field__field",
+  "bm-text-field__input": "bm-text-field__input",
+  "bm-text-field--read-only": "bm-text-field--read-only",
+  "bm-text-field__content": "bm-text-field__content",
+  "bm-text-field--fluid": "bm-text-field--fluid",
+  "bm-text-field--ellipsis": "bm-text-field--ellipsis"
+}, { baseClassNamePrefix: ae, subElementClassPrefix: a, classModifierPrefix: s } = te("text-field"), ve = N.forwardRef(
+  function({
+    width: g,
+    error: t,
+    theme: m,
+    label: I = null,
+    contentAfter: c,
+    contentBefore: f,
+    fluid: F = !1,
+    ellipse: P = !1,
+    helperText: b = null,
+    validationRules: R = [],
+    className: C,
+    hideRequiredMarker: D = !1,
+    disabled: E = !1,
+    readOnly: V = !1,
+    required: q = !1,
+    ...H
+  }, w) {
+    const {
+      id: x,
+      name: r,
+      "aria-invalid": M,
+      defaultValue: O,
+      "aria-describedby": T,
+      ...j
+    } = H, { refFn: k } = de(w), { ctxDisabled: B, ctxReadOnly: L, ctxRequired: S, ctxInitialValues: U, ctxRegister: W } = N.useContext(Y), { id: u } = o(), { id: p } = o(), { id: v } = o(), { showErrors: z, setErrors: A, isInvalid: G, errorShown: J } = Z(), _ = !!(t != null && t.length), K = $(
+      b && p,
+      _ && u,
+      J && v,
+      T
+    ), h = !!t || G, i = E || B, d = V || L, y = q || S, Q = O || U[r];
+    !i && W(r, R, A);
+    const X = $(
+      e[ae],
+      m && ie(m),
+      F && e[`${s}fluid`],
+      h && e[`${s}error`],
+      P && e[`${s}ellipsis`],
+      i && e[`${s}disabled`],
+      d && e[`${s}read-only`],
+      C
+    );
+    return /* @__PURE__ */ n("div", { className: X, style: { maxWidth: g }, children: [
+      /* @__PURE__ */ l(
+        le,
+        {
+          ctxHtmlFor: x,
+          ctxDisabled: i,
+          ctxRequired: y && !D,
+          children: I
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: e[`${a}field`], children: [
+        f && /* @__PURE__ */ l("div", { className: e[`${a}content`], children: f }),
+        /* @__PURE__ */ l(
+          "input",
+          {
+            id: x,
+            name: r,
+            ref: k,
+            readOnly: d,
+            disabled: i,
+            required: y,
+            "aria-readonly": d,
+            defaultValue: Q,
+            "aria-describedby": K,
+            "aria-disabled": i || d,
+            "aria-invalid": h || M,
+            className: e[`${a}input`],
+            ...j
+          }
+        ),
+        c && /* @__PURE__ */ l("div", { className: e[`${a}content`], children: c })
+      ] }),
+      /* @__PURE__ */ n(se, { ctxId: p, ctxDisabled: i, children: [
+        b,
+        _ && /* @__PURE__ */ l(ee, { id: u, appearance: "negative", children: t })
+      ] }),
+      z(v)
+    ] });
+  }
+);
+export {
+  ve as TextField,
+  ve as default
+};

package/lib/TextField/TextField.figma.d.ts

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

package/lib/TextField/index.cjs.js

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

package/lib/TextField/index.d.ts

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

package/lib/TextField/index.es.js

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

package/lib/Toasts/Toast.cjs.js

@@ -0,0 +1 @@
+var X=require("../../assets/Toast.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),A=require("clsx"),D=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const M=require("../../chunks/helpers.COm6C5Gf.js"),P=require("../CloseButton/CloseButton.cjs.js"),W=require("../../chunks/CheckCircleOutline.iRHrT_Eb.js"),L=require("../../chunks/ErrorOutline.Cb78OesH.js"),U=require("../../chunks/InfoOutlined.C-WIrH0D.js"),z=require("../../chunks/WarningOutlined.BPePPeyt.js"),e=require("react"),E=require("../../chunks/ToastContext.BJK1U8nL.js"),K="enterAnimation",G="exitAnimation",H="enterFirstAnimation",n={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-toast":"bm-toast","bm-toast__lil-diss-button":"bm-toast__lil-diss-button","bm-toast__content":"bm-toast__content","bm-toast__content--lite":"bm-toast__content--lite","bm-toast__heading":"bm-toast__heading","bm-toast__inner-content":"bm-toast__inner-content","bm-toast__body":"bm-toast__body","bm-toast__actions":"bm-toast__actions","bm-toast--lite":"bm-toast--lite","bm-toast__icon":"bm-toast__icon","bm-toast--anim-entering":"bm-toast--anim-entering",enterAnimation:K,"bm-toast--anim-exiting":"bm-toast--anim-exiting",exitAnimation:G,"bm-toast--anim-first-entering":"bm-toast--anim-first-entering","bm-toast--information":"bm-toast--information","bm-toast--negative":"bm-toast--negative","bm-toast--positive":"bm-toast--positive","bm-toast--warning":"bm-toast--warning",enterFirstAnimation:H},{baseClassNamePrefix:J,subElementClassPrefix:s,classModifierPrefix:c}=D.getBEMClassNames("toast"),Q={information:t.jsx(U.SvgInfoOutlined,{"aria-label":"Information Icon"}),positive:t.jsx(W.SvgCheckCircleOutline,{"aria-label":"Success Icon"}),negative:t.jsx(L.SvgErrorOutline,{"aria-label":"Error Icon"}),warning:t.jsx(z.SvgWarningOutlined,{"aria-label":"Warning Icon"})},V=({actions:i,appearance:l="information",body:u,className:T,dismissible:$=!0,heading:v,hideIcon:O=!1,icon:q,lite:m=!1,onClose:b,autoDismiss:x=!0,isDismissed:I,id:d,duration:h,isFirstToast:S,...k})=>{const{removeToast:_}=E.useToast(),[o,j]=e.useState(!1),[C,y]=e.useState(!1),N=e.useRef(null),F=m?"sm":"md",w=A(n[J],m&&n[`${c}lite`],l&&n[`${c}${l}`],I&&n[`${c}anim-exiting`],S?n[`${c}anim-first-entering`]:n[`${c}anim-entering`],T),p=A(n[`${s}content`],m&&n[`${s}content--lite`]),r=e.useCallback(()=>{b&&b(),d&&_&&_(d)},[b,d,_]),f=e.useCallback(a=>{a.key==="Escape"&&o&&r()},[o,r]);e.useEffect(()=>{const a=h||E.DEFAULT_TOAST_TIMEOUT_DURATION;x&&setTimeout(()=>{r()},a)},[h,x,r]),e.useEffect(()=>(o&&document.addEventListener("keydown",f),()=>{document.removeEventListener("keydown",f)}),[o,f]);const B=()=>{j(!0)},R=()=>{j(!1)};return e.useEffect(()=>{const{current:a}=N;if(a&&o&&i&&!C&&document.activeElement===document.body){const g=M.findFirstFocusableElement(a);g==null||g.focus(),y(!0)}},[C,o,i]),t.jsxs("div",{tabIndex:i?-1:0,"aria-live":"polite",role:"alert",className:w,onFocus:B,onBlur:R,ref:N,...k,children:[!O&&t.jsx("span",{className:`${s}icon`,children:q||Q[l]}),t.jsxs("div",{className:p,children:[!m&&v&&t.jsx("div",{className:`${s}heading`,children:v}),(u||i)&&t.jsxs("div",{className:`${s}inner-content`,children:[u&&t.jsx("div",{className:`${s}body`,children:u}),i&&t.jsx("div",{className:`${s}actions`,children:i})]})]}),$&&t.jsx("div",{className:`${s}lil-diss-button`,children:t.jsx(P.CloseButton,{"aria-label":"Dismiss toast",size:F,onClick:r})})]})};exports.Toast=V;

package/lib/Toasts/Toast.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode, default as React } from 'react';
+import { ToastAppearances } from '@viasat/beam-shared/components/toast';
+export interface InternalToastProps extends ToastProps {
+    /**
+     * internal - animation handling inside the Toast
+     */
+    isDismissed?: boolean;
+    isFirstToast?: boolean;
+}
+export interface ToastProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Specify heading text for Toast
+     */
+    heading?: ReactNode;
+    /**
+     * Specify body text for Toast
+     */
+    body?: ReactNode;
+    /**
+     * Specify a different icon for Toast
+     */
+    icon?: ReactNode;
+    /**
+     * Specify if the icon displays on the Toast
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Displays the lite version of the Toast
+     */
+    lite?: boolean;
+    /**
+     * Specify if the Toast renders with a CloseButton. If autoDismiss is set to false than the toast will remain manually dismissible.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Specify if Toast auto dismisses
+     * @default true
+     */
+    autoDismiss?: boolean;
+    /**
+     * Number of milliseconds before toast is automatically dismissed. Default is 7000 milliseconds.
+     * @default 7000
+     */
+    duration?: number;
+    /**
+     * Specify the appearance of a Toast
+     */
+    appearance?: ToastAppearances;
+    /**
+     * Specify if actions display on the Toast
+     */
+    actions?: ReactNode;
+    /**
+     * Specify a callback function to be called while Toast closes
+     */
+    onClose?: () => void;
+}
+export declare const Toast: ({ actions, appearance, body, className: _className, dismissible, heading, hideIcon, icon, lite, onClose, autoDismiss, isDismissed, id, duration, isFirstToast, ...props }: InternalToastProps) => React.ReactElement;

package/lib/Toasts/Toast.es.js

@@ -0,0 +1,131 @@
+import "../../assets/Toast.css";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import S from "clsx";
+import { g as U } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { f as W } from "../../chunks/helpers.Wv7n4ip7.js";
+import { CloseButton as j } from "../CloseButton/CloseButton.es.js";
+import { S as z } from "../../chunks/CheckCircleOutline.Bn3mTuUE.js";
+import { S as K } from "../../chunks/ErrorOutline._gBx3dtF.js";
+import { S as q } from "../../chunks/InfoOutlined.D3_Iy2PA.js";
+import { S as G } from "../../chunks/WarningOutlined.B3hTzZPs.js";
+import { useState as E, useRef as H, useCallback as I, useEffect as v } from "react";
+import { u as J, D as Q } from "../../chunks/ToastContext.DzKCvrgk.js";
+const V = "enterAnimation", X = "exitAnimation", Y = "enterFirstAnimation", e = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-toast": "bm-toast",
+  "bm-toast__lil-diss-button": "bm-toast__lil-diss-button",
+  "bm-toast__content": "bm-toast__content",
+  "bm-toast__content--lite": "bm-toast__content--lite",
+  "bm-toast__heading": "bm-toast__heading",
+  "bm-toast__inner-content": "bm-toast__inner-content",
+  "bm-toast__body": "bm-toast__body",
+  "bm-toast__actions": "bm-toast__actions",
+  "bm-toast--lite": "bm-toast--lite",
+  "bm-toast__icon": "bm-toast__icon",
+  "bm-toast--anim-entering": "bm-toast--anim-entering",
+  enterAnimation: V,
+  "bm-toast--anim-exiting": "bm-toast--anim-exiting",
+  exitAnimation: X,
+  "bm-toast--anim-first-entering": "bm-toast--anim-first-entering",
+  "bm-toast--information": "bm-toast--information",
+  "bm-toast--negative": "bm-toast--negative",
+  "bm-toast--positive": "bm-toast--positive",
+  "bm-toast--warning": "bm-toast--warning",
+  enterFirstAnimation: Y
+}, { baseClassNamePrefix: Z, subElementClassPrefix: n, classModifierPrefix: m } = U("toast"), tt = {
+  information: /* @__PURE__ */ t(q, { "aria-label": "Information Icon" }),
+  positive: /* @__PURE__ */ t(z, { "aria-label": "Success Icon" }),
+  negative: /* @__PURE__ */ t(K, { "aria-label": "Error Icon" }),
+  warning: /* @__PURE__ */ t(G, { "aria-label": "Warning Icon" })
+}, ut = ({
+  actions: s,
+  appearance: c = "information",
+  body: l,
+  className: T,
+  dismissible: C = !0,
+  heading: p,
+  hideIcon: F = !1,
+  icon: O,
+  lite: r = !1,
+  onClose: b,
+  autoDismiss: h = !0,
+  isDismissed: k,
+  id: d,
+  duration: x,
+  isFirstToast: w,
+  ...y
+}) => {
+  const { removeToast: f } = J(), [o, A] = E(!1), [N, D] = E(!1), $ = H(null), B = r ? "sm" : "md", L = S(
+    e[Z],
+    r && e[`${m}lite`],
+    c && e[`${m}${c}`],
+    k && e[`${m}anim-exiting`],
+    w ? e[`${m}anim-first-entering`] : e[`${m}anim-entering`],
+    T
+  ), M = S(
+    e[`${n}content`],
+    r && e[`${n}content--lite`]
+  ), i = I(() => {
+    b && b(), d && f && f(d);
+  }, [b, d, f]), u = I(
+    (a) => {
+      a.key === "Escape" && o && i();
+    },
+    [o, i]
+  );
+  v(() => {
+    h && setTimeout(() => {
+      i();
+    }, x || Q);
+  }, [x, h, i]), v(() => (o && document.addEventListener("keydown", u), () => {
+    document.removeEventListener("keydown", u);
+  }), [o, u]);
+  const P = () => {
+    A(!0);
+  }, R = () => {
+    A(!1);
+  };
+  return v(() => {
+    const { current: a } = $;
+    if (a && o && s && !N && document.activeElement === document.body) {
+      const _ = W(a);
+      _ == null || _.focus(), D(!0);
+    }
+  }, [N, o, s]), /* @__PURE__ */ g(
+    "div",
+    {
+      tabIndex: s ? -1 : 0,
+      "aria-live": "polite",
+      role: "alert",
+      className: L,
+      onFocus: P,
+      onBlur: R,
+      ref: $,
+      ...y,
+      children: [
+        !F && /* @__PURE__ */ t("span", { className: `${n}icon`, children: O || tt[c] }),
+        /* @__PURE__ */ g("div", { className: M, children: [
+          !r && p && /* @__PURE__ */ t("div", { className: `${n}heading`, children: p }),
+          (l || s) && /* @__PURE__ */ g("div", { className: `${n}inner-content`, children: [
+            l && /* @__PURE__ */ t("div", { className: `${n}body`, children: l }),
+            s && /* @__PURE__ */ t("div", { className: `${n}actions`, children: s })
+          ] })
+        ] }),
+        C && /* @__PURE__ */ t("div", { className: `${n}lil-diss-button`, children: /* @__PURE__ */ t(
+          j,
+          {
+            "aria-label": "Dismiss toast",
+            size: B,
+            onClick: i
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  ut as Toast
+};