@viasat/beam-react 2.0.0

package/lib/Tabs/Tabs.Item.es.js

@@ -0,0 +1,114 @@
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
+import { useRef as q, useState as G, useMemo as C, useEffect as H } from "react";
+import P from "clsx";
+import { s as r } from "../../chunks/tabs.module.DIdPGCch.js";
+import { useTabs as J } from "./TabsContext.es.js";
+import { g as L } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { Tooltip as Q } from "../Tooltip/Tooltip.es.js";
+import { useIsOverFlowing as U } from "../../utils/hooks/index.es.js";
+import { useKeyboardNavigation as V } from "../../utils/hooks/useKeyboardNavigation.es.js";
+const le = ({
+  value: s,
+  disabled: E = !1,
+  className: F,
+  children: i,
+  icon: c,
+  "aria-label": p,
+  ...S
+}) => {
+  const d = q(null), [T, $] = G(!1), {
+    selectedValue: w,
+    setSelectedValue: u,
+    fluid: M,
+    orientation: m,
+    size: I,
+    disabled: g,
+    onChange: o,
+    tabItems: h,
+    groupRef: l
+  } = J(), a = E || g, b = w === s, v = !!c && !i, { subElementClassPrefix: z } = L("tabs"), e = `${z}item`, K = P(
+    r[e],
+    b && r[`${e}--selected`],
+    m && r[`${e}--${m}`],
+    I && r[`${e}--${I}`],
+    M && m === "horizontal" && r[`${e}--fluid`],
+    a && r[`${e}--disabled`],
+    v && r[`${e}--icon-only`],
+    F
+  ), A = C(
+    () => `tab-${s}-${Math.random().toString(36).slice(2, 9)}`,
+    [s]
+  ), B = () => {
+    a || (u(s), o == null || o(s));
+  }, D = (t, k = !1) => {
+    if (t !== s) {
+      if (!(l != null && l.current)) return;
+      const x = l.current.querySelector(
+        `[data-tab-value="${t}"]`
+      );
+      x && (x.focus(), k && (u(t), o == null || o(t)));
+    }
+  }, { handleKeyDown: O } = V({
+    currentValue: s,
+    items: h || [],
+    containerRef: l || d,
+    dataAttribute: "data-tab-value",
+    disabledClassName: r[`${e}--disabled`],
+    onFocusItem: (t) => D(t, !1),
+    onSelectItem: (t) => {
+      a || (u(t), o == null || o(t));
+    },
+    isHorizontal: m === "horizontal"
+  }), { ref: R, isOverFlowing: j } = U();
+  let f = !1;
+  (!i && c || j) && (f = !0);
+  const _ = () => {
+    a || $(!0);
+  }, N = () => {
+    $(!1);
+  };
+  return H(() => {
+    var t;
+    d.current && ((t = d.current.querySelector(".bm-floatingui-trigger")) == null || t.removeAttribute("aria-expanded"));
+  }, []), /* @__PURE__ */ y(
+    "div",
+    {
+      className: K,
+      ref: d,
+      "data-tab-value": s,
+      role: "tab",
+      id: A,
+      "aria-selected": b,
+      "aria-disabled": a,
+      "aria-controls": `panel-${s}`,
+      tabIndex: a ? -1 : b ? 0 : -1,
+      onKeyDown: a ? void 0 : O,
+      onClick: a ? void 0 : B,
+      onFocus: _,
+      onBlur: N,
+      onMouseEnter: _,
+      onMouseLeave: N,
+      ...S,
+      children: [
+        /* @__PURE__ */ n(
+          Q,
+          {
+            text: p || i,
+            disabled: !f,
+            portalled: !0,
+            open: T && f,
+            children: /* @__PURE__ */ n("div", { className: `${e}__content`, children: /* @__PURE__ */ y("div", { className: `${e}__label`, "aria-label": p, children: [
+              c && /* @__PURE__ */ n("span", { className: `${e}__icon`, children: c }),
+              i && /* @__PURE__ */ n("span", { ref: R, className: `${e}__controlText`, children: i })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ n("span", { className: `${e}__indicator` })
+      ]
+    }
+  );
+};
+export {
+  le as TabsItem
+};

package/lib/Tabs/Tabs.Panel.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),d=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const a=require("../../chunks/tabs.module.B6iC5RD9.js"),m=require("clsx"),q=require("./TabsContext.cjs.js"),T=({value:e,children:l,className:n,...r})=>{const{selectedValue:c}=q.useTabs(),s=c===e,o=`panel-${e}`,{subElementClassPrefix:i}=d.getBEMClassNames("tabs"),t=`${i}panel`,b=m(a.styles[t],s&&a.styles[`${t}--selected`],n);return u.jsx("div",{role:"tabpanel",className:b,"aria-hidden":!s,id:o,"aria-labelledby":`tab-${e}`,...r,children:l})};exports.TabsPanel=T;

package/lib/Tabs/Tabs.Panel.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface TabsPanelProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Specify the value of the panel
+     */
+    value: string;
+    /**
+     * Specify the content of the panel
+     */
+    children: React.ReactNode;
+}
+export declare const TabsPanel: ({ value, children, className: _className, ...props }: TabsPanelProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Tabs/Tabs.Panel.es.js

@@ -0,0 +1,33 @@
+import { jsx as p } from "react/jsx-runtime";
+import { g as b } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as t } from "../../chunks/tabs.module.DIdPGCch.js";
+import d from "clsx";
+import { useTabs as f } from "./TabsContext.es.js";
+const y = ({
+  value: s,
+  children: o,
+  className: l,
+  ...r
+}) => {
+  const { selectedValue: m } = f(), e = m === s, n = `panel-${s}`, { subElementClassPrefix: c } = b("tabs"), a = `${c}panel`, i = d(
+    t[a],
+    e && t[`${a}--selected`],
+    l
+  );
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      role: "tabpanel",
+      className: i,
+      "aria-hidden": !e,
+      id: n,
+      "aria-labelledby": `tab-${s}`,
+      ...r,
+      children: o
+    }
+  );
+};
+export {
+  y as TabsPanel
+};

package/lib/Tabs/Tabs.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),M=require("../Box/Box.cjs.js"),R=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const z=require("clsx"),s=require("../../chunks/tabs.module.B6iC5RD9.js"),w=require("./TabsContext.cjs.js"),g=require("./Tabs.Group.cjs.js"),h=require("./Tabs.Panel.cjs.js"),A=require("./Tabs.Item.cjs.js"),P=require("../Divider/Divider.cjs.js"),i=({orientation:a="horizontal",fluid:n=!1,divider:o=!0,size:c="md",initialSelection:I,disabled:u=!1,contentGutter:b,dividerColor:d="03",onChange:m,children:$,className:S,...C})=>{const{baseClassNamePrefix:G,classModifierPrefix:p,subElementClassPrefix:l}=R.getBEMClassNames("tabs"),V=z(s.styles[G],n&&a==="horizontal"&&s.styles[`${p}fluid`],a==="vertical"&&s.styles[`${p}vertical`],S),[y,x]=t.useState(I),[T,v]=t.useState([]),[_,f]=t.useState(void 0),q=t.Children.toArray($),j=q.find(r=>t.isValidElement(r)&&typeof r.type!="string"&&r.type===g.TabsGroup),N=q.filter(r=>t.isValidElement(r)&&typeof r.type!="string"&&r.type===h.TabsPanel),B=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:s.styles[`${l}wrapper`],style:{paddingInline:b},children:[j,o&&e.jsx(P.Divider,{className:s.styles[`${l}divider`],borderColor:d})]}),e.jsx("div",{className:s.styles[`${l}panels`],style:{paddingInline:b},children:N})]}),D=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:s.styles[`${l}wrapper`],children:[o&&e.jsx(P.Divider,{className:s.styles[`${l}divider`],borderColor:d,orientation:"vertical"}),j]}),N]}),E=t.useMemo(()=>({orientation:a,fluid:n,size:c,selectedValue:y,setSelectedValue:x,tabItems:T,setTabItems:v,onChange:m,disabled:u,groupRef:_,setGroupRef:f}),[a,n,c,y,T,m,u,_,x,v,f]);return e.jsx(w.TabsProvider,{value:E,children:e.jsxs(M.Box,{className:V,...C,children:[a==="horizontal"&&B(),a==="vertical"&&D()]})})};i.Group=g.TabsGroup;i.Panel=h.TabsPanel;i.Item=A.TabsItem;exports.Tabs=i;

package/lib/Tabs/Tabs.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { Box } from '../Box/Box';
+import { TabsOrientation, TabsSize, TabsDividerColor } from '@viasat/beam-shared/components/tabs';
+export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof Box>, 'onChange'> {
+    /**
+     * Specify the orientation of Tabs
+     * @default 'horizontal'
+     */
+    orientation?: TabsOrientation;
+    /**
+     * Specify if Tabs.Items display as fluid
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify if all Tab.Items are disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify if a Divider displays under Tabs.Group
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Specify the size of a Tabs
+     * @default 'md'
+     */
+    size?: TabsSize;
+    /**
+     * Specify the value of the selected item
+     */
+    initialSelection?: string;
+    /**
+     * Specify a call back function to utilize the value of the selected item
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Specify the inline padding value on the inner content of the Tabs for horizontal orientation only
+     */
+    contentGutter?: string;
+    /**
+     * Specify the border color of the divider component
+     * @default '03'
+     */
+    dividerColor?: TabsDividerColor;
+}
+export declare const Tabs: {
+    ({ orientation, fluid, divider, size, initialSelection, disabled, contentGutter, dividerColor, onChange, children, className: _className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    Group: ({ children, className: _className, ...props }: import('./Tabs.Group').TabsGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ value, children, className: _className, ...props }: import('./Tabs.Panel').TabsPanelProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ value, "disabled": _disabled, "className": _className, children, icon, "aria-label": ariaLabel, ...props }: import('./Tabs.Item').TabsItemProps) => import("react/jsx-runtime").JSX.Element;
+};

package/lib/Tabs/Tabs.es.js

@@ -0,0 +1,117 @@
+import { jsx as o, jsxs as a, Fragment as T } from "react/jsx-runtime";
+import { useState as m, Children as F, isValidElement as C, useMemo as k } from "react";
+import { Box as q } from "../Box/Box.es.js";
+import { g as H } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import J from "clsx";
+import { s as e } from "../../chunks/tabs.module.DIdPGCch.js";
+import { TabsProvider as K } from "./TabsContext.es.js";
+import { TabsGroup as z } from "./Tabs.Group.es.js";
+import { TabsPanel as E } from "./Tabs.Panel.es.js";
+import { TabsItem as L } from "./Tabs.Item.es.js";
+import { Divider as V } from "../Divider/Divider.es.js";
+const i = ({
+  orientation: s = "horizontal",
+  fluid: l = !1,
+  divider: n = !0,
+  size: c = "md",
+  initialSelection: G,
+  disabled: p = !1,
+  contentGutter: f,
+  dividerColor: d = "03",
+  onChange: u,
+  children: M,
+  className: j,
+  ...w
+}) => {
+  const { baseClassNamePrefix: A, classModifierPrefix: b, subElementClassPrefix: t } = H("tabs"), B = J(
+    e[A],
+    l && s === "horizontal" && e[`${b}fluid`],
+    s === "vertical" && e[`${b}vertical`],
+    j
+  ), [v, y] = m(
+    G
+  ), [x, N] = m([]), [h, g] = m(
+    void 0
+  ), P = F.toArray(M), $ = P.find(
+    (r) => C(r) && typeof r.type != "string" && r.type === z
+  ), I = P.filter(
+    (r) => C(r) && typeof r.type != "string" && r.type === E
+  ), R = () => /* @__PURE__ */ a(T, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: e[`${t}wrapper`],
+        style: { paddingInline: f },
+        children: [
+          $,
+          n && /* @__PURE__ */ o(
+            V,
+            {
+              className: e[`${t}divider`],
+              borderColor: d
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: e[`${t}panels`],
+        style: { paddingInline: f },
+        children: I
+      }
+    )
+  ] }), S = () => /* @__PURE__ */ a(T, { children: [
+    /* @__PURE__ */ a("div", { className: e[`${t}wrapper`], children: [
+      n && /* @__PURE__ */ o(
+        V,
+        {
+          className: e[`${t}divider`],
+          borderColor: d,
+          orientation: "vertical"
+        }
+      ),
+      $
+    ] }),
+    I
+  ] }), D = k(
+    () => ({
+      orientation: s,
+      fluid: l,
+      size: c,
+      selectedValue: v,
+      setSelectedValue: y,
+      tabItems: x,
+      setTabItems: N,
+      onChange: u,
+      disabled: p,
+      groupRef: h,
+      setGroupRef: g
+    }),
+    [
+      s,
+      l,
+      c,
+      v,
+      x,
+      u,
+      p,
+      h,
+      y,
+      N,
+      g
+    ]
+  );
+  return /* @__PURE__ */ o(K, { value: D, children: /* @__PURE__ */ a(q, { className: B, ...w, children: [
+    s === "horizontal" && R(),
+    s === "vertical" && S()
+  ] }) });
+};
+i.Group = z;
+i.Panel = E;
+i.Item = L;
+export {
+  i as Tabs
+};

package/lib/Tabs/TabsContext.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),r=t.createContext(void 0),n=({children:e,value:s})=>o.jsx(r.Provider,{value:s,children:e}),i=()=>{const e=t.useContext(r);if(!e)throw new Error("useTabs must be used within a TabsProvider");return e};exports.TabsProvider=n;exports.useTabs=i;

package/lib/Tabs/TabsContext.d.ts

@@ -0,0 +1,21 @@
+import { default as React, RefObject } from 'react';
+import { TabsOrientation, TabsSize } from '@viasat/beam-shared/components/tabs';
+interface TabsContextProps {
+    orientation?: TabsOrientation;
+    fluid?: boolean;
+    size?: TabsSize;
+    selectedValue?: string;
+    setSelectedValue: (value: string) => void;
+    tabItems: string[];
+    setTabItems: (items: string[]) => void;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    groupRef?: RefObject<HTMLDivElement>;
+    setGroupRef: (ref: RefObject<HTMLDivElement>) => void;
+}
+export declare const TabsProvider: ({ children, value, }: {
+    children: React.ReactNode;
+    value: TabsContextProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTabs: () => TabsContextProps;
+export {};

package/lib/Tabs/TabsContext.es.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as s, useContext as n } from "react";
+const r = s(void 0), u = ({
+  children: t,
+  value: o
+}) => /* @__PURE__ */ e(r.Provider, { value: o, children: t }), b = () => {
+  const t = n(r);
+  if (!t)
+    throw new Error("useTabs must be used within a TabsProvider");
+  return t;
+};
+export {
+  u as TabsProvider,
+  b as useTabs
+};

package/lib/Tabs/index.cjs.js

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

package/lib/Tabs/index.d.ts

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

package/lib/Tabs/index.es.js

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

package/lib/Text/Text.cjs.js

@@ -0,0 +1 @@
+var M=require("../../assets/Text.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),A=require("clsx"),N=require("react"),x=require("../../chunks/constants.hwjHOsvT.js"),E=require("../../chunks/classNames.DAeKwerT.js"),p=`${x.prefix}sem-typo-`,_="compact-",k={"heading-6xl":"h1","heading-5xl":"h2","heading-4xl":"h3","heading-3xl":"h4","heading-2xl":"h5","heading-xl":"h6","heading-lg":"h6","heading-md":"h6","heading-sm":"h6","heading-xs":"h6","heading-alt-6xl":"h1","heading-alt-5xl":"h2","heading-alt-4xl":"h3","heading-alt-3xl":"h4","heading-alt-2xl":"h5","heading-alt-xl":"h6","heading-alt-lg":"h6","heading-alt-md":"h6","heading-alt-sm":"h6","heading-alt-xs":"h6","body-2xl":"span","body-xl":"span","body-lg":"span","body-md":"span","body-sm":"span","body-xs":"span","detail-xl":"span","detail-lg":"span","detail-md":"span","detail-sm":"span","detail-xs":"span","label-2xl":"span","label-xl":"span","label-lg":"span","label-md":"span","label-sm":"span","label-xs":"span"},e={"bm-sem-typo-heading-6xl":"bm-sem-typo-heading-6xl","bm-sem-typo-heading-5xl":"bm-sem-typo-heading-5xl","bm-sem-typo-heading-4xl":"bm-sem-typo-heading-4xl","bm-sem-typo-heading-3xl":"bm-sem-typo-heading-3xl","bm-sem-typo-heading-2xl":"bm-sem-typo-heading-2xl","bm-sem-typo-heading-alt-6xl":"bm-sem-typo-heading-alt-6xl","bm-sem-typo-heading-alt-5xl":"bm-sem-typo-heading-alt-5xl","bm-sem-typo-heading-alt-4xl":"bm-sem-typo-heading-alt-4xl","bm-sem-typo-heading-alt-3xl":"bm-sem-typo-heading-alt-3xl","bm-sem-typo-heading-alt-2xl":"bm-sem-typo-heading-alt-2xl","bm-sem-typo-heading-xl":"bm-sem-typo-heading-xl","bm-sem-typo-heading-lg":"bm-sem-typo-heading-lg","bm-sem-typo-heading-md":"bm-sem-typo-heading-md","bm-sem-typo-heading-sm":"bm-sem-typo-heading-sm","bm-sem-typo-heading-xs":"bm-sem-typo-heading-xs","bm-sem-typo-heading-alt-xl":"bm-sem-typo-heading-alt-xl","bm-sem-typo-heading-alt-lg":"bm-sem-typo-heading-alt-lg","bm-sem-typo-heading-alt-md":"bm-sem-typo-heading-alt-md","bm-sem-typo-heading-alt-sm":"bm-sem-typo-heading-alt-sm","bm-sem-typo-heading-alt-xs":"bm-sem-typo-heading-alt-xs","bm-sem-typo-body-xs":"bm-sem-typo-body-xs","bm-sem-typo-body-sm":"bm-sem-typo-body-sm","bm-sem-typo-body-md":"bm-sem-typo-body-md","bm-sem-typo-body-lg":"bm-sem-typo-body-lg","bm-sem-typo-body-xl":"bm-sem-typo-body-xl","bm-sem-typo-body-2xl":"bm-sem-typo-body-2xl","bm-sem-typo-detail-xs":"bm-sem-typo-detail-xs","bm-sem-typo-detail-sm":"bm-sem-typo-detail-sm","bm-sem-typo-detail-md":"bm-sem-typo-detail-md","bm-sem-typo-detail-lg":"bm-sem-typo-detail-lg","bm-sem-typo-detail-xl":"bm-sem-typo-detail-xl","bm-sem-typo-label-xs":"bm-sem-typo-label-xs","bm-sem-typo-label-sm":"bm-sem-typo-label-sm","bm-sem-typo-label-md":"bm-sem-typo-label-md","bm-sem-typo-label-lg":"bm-sem-typo-label-lg","bm-sem-typo-label-xl":"bm-sem-typo-label-xl","bm-sem-typo-label-2xl":"bm-sem-typo-label-2xl","bm-sem-typo-compact-body-xs":"bm-sem-typo-compact-body-xs","bm-sem-typo-compact-body-sm":"bm-sem-typo-compact-body-sm","bm-sem-typo-compact-body-md":"bm-sem-typo-compact-body-md","bm-sem-typo-compact-body-lg":"bm-sem-typo-compact-body-lg","bm-sem-typo-compact-body-xl":"bm-sem-typo-compact-body-xl","bm-sem-typo-compact-body-2xl":"bm-sem-typo-compact-body-2xl","bm-sem-typo-compact-label-xs":"bm-sem-typo-compact-label-xs","bm-sem-typo-compact-label-sm":"bm-sem-typo-compact-label-sm","bm-sem-typo-compact-label-md":"bm-sem-typo-compact-label-md","bm-sem-typo-compact-label-lg":"bm-sem-typo-compact-label-lg","bm-sem-typo-compact-label-xl":"bm-sem-typo-compact-label-xl","bm-sem-typo-compact-label-2xl":"bm-sem-typo-compact-label-2xl","bm-text":"bm-text","bm-text--normal":"bm-text--normal","bm-text--breakAll":"bm-text--breakAll","bm-text--breakWord":"bm-text--breakWord","bm-text--start":"bm-text--start","bm-text--center":"bm-text--center","bm-text--end":"bm-text--end","bm-text--block":"bm-text--block","bm-text--truncate":"bm-text--truncate","bm-text--italic":"bm-text--italic","bm-text--underline":"bm-text--underline","bm-text--strikethrough":"bm-text--strikethrough","bm-text--heading-regular":"bm-text--heading-regular","bm-text--heading-bold":"bm-text--heading-bold","bm-text--body-regular":"bm-text--body-regular","bm-text--body-bold":"bm-text--body-bold","bm-text--primary":"bm-text--primary","bm-text--secondary":"bm-text--secondary","bm-text--positive":"bm-text--positive","bm-text--warning":"bm-text--warning","bm-text--negative":"bm-text--negative","bm-text--infoPrimary":"bm-text--infoPrimary","bm-text--infoSecondary":"bm-text--infoSecondary","bm-text--selected":"bm-text--selected","bm-text--disabled":"bm-text--disabled","bm-text--primaryInverse":"bm-text--primaryInverse","bm-text--secondaryInverse":"bm-text--secondaryInverse","bm-text--expressive":"bm-text--expressive","bm-text--expressiveStronger":"bm-text--expressiveStronger","bm-text--expressiveInverse":"bm-text--expressiveInverse","bm-text--expressiveInverseStronger":"bm-text--expressiveInverseStronger"},{baseClassNamePrefix:C,classModifierPrefix:t}=E.getBEMClassNames("text"),y=N.forwardRef(({kind:m="body-md",color:b,theme:a,as:n,bold:s,alignment:l,wordBreak:o,truncate:i,block:r,compact:g,strikethrough:c,underline:h,italic:u,children:v,className:$,...f},S)=>{const I=n||k[m],d=!m.includes("body");s&&d&&console.warn("The `bold` prop is not supported for heading, label or detail `kind` variants. Use the `bold` for body `kind` variants.");const P=A(e[C],a&&x.themeClassName(a),m&&e[`${p}${m}`],g&&e[`${p}${_}${m}`],s&&!d&&e[`${t}body-bold`],b&&e[`${t}${b}`],o&&e[`${t}${o}`],l&&e[`${t}${l}`],r&&e[`${t}block`],i&&e[`${t}truncate`],c&&e[`${t}strikethrough`],h&&e[`${t}underline`],u&&e[`${t}italic`],$);return T.jsx(I,{ref:S,className:P,...f,children:v})});y.displayName="Text";exports.Text=y;

package/lib/Text/Text.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+import { TextAlignment, TextColor, TextKind, TextWordBreak } from '@viasat/beam-shared/components/text';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * The text content
+     */
+    children: React.ReactNode;
+    /**
+     * Specify the theme of the Text. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify if Text displays as a heading, body, detail, or label variant
+     * @default 'body-md'
+     */
+    kind?: TextKind;
+    /**
+     * Specifies the color of the text
+     *
+     */
+    color?: TextColor;
+    /**
+     * Specify if Text is bold. This prop only works for body `kinds`
+     */
+    bold?: boolean;
+    /**
+     * Specifies which HTML component to wrap the text content in
+     */
+    as?: React.ElementType;
+    /**
+     * Sets css text-align to either start, center, or end
+     */
+    alignment?: TextAlignment;
+    /**
+     * Sets the css word-break property
+     */
+    wordBreak?: TextWordBreak;
+    /**
+     * Truncates the text with ellipsis if it exceeds the container
+     */
+    truncate?: boolean;
+    /**
+     * Changes the css display to block
+     */
+    block?: boolean;
+    /**
+     * Reduces the line-height of body and label `kind` variants
+     */
+    compact?: boolean;
+    /**
+     * Adds a strikethrough to the text
+     */
+    strikethrough?: boolean;
+    /**
+     * Underlines the text
+     */
+    underline?: boolean;
+    /**
+     * Italicizes the text
+     */
+    italic?: boolean;
+}
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<Element>>;

package/lib/Text/Text.es.js

@@ -0,0 +1,175 @@
+import "../../assets/Text.css";
+import { jsx as I } from "react/jsx-runtime";
+import _ from "clsx";
+import A from "react";
+import { p as P, t as E } from "../../chunks/constants.BBi77pmH.js";
+import { g as N } from "../../chunks/classNames.DNsS4J__.js";
+const d = `${P}sem-typo-`, T = "compact-", k = {
+  // defaults
+  "heading-6xl": "h1",
+  "heading-5xl": "h2",
+  "heading-4xl": "h3",
+  "heading-3xl": "h4",
+  "heading-2xl": "h5",
+  "heading-xl": "h6",
+  "heading-lg": "h6",
+  "heading-md": "h6",
+  "heading-sm": "h6",
+  "heading-xs": "h6",
+  "heading-alt-6xl": "h1",
+  "heading-alt-5xl": "h2",
+  "heading-alt-4xl": "h3",
+  "heading-alt-3xl": "h4",
+  "heading-alt-2xl": "h5",
+  "heading-alt-xl": "h6",
+  "heading-alt-lg": "h6",
+  "heading-alt-md": "h6",
+  "heading-alt-sm": "h6",
+  "heading-alt-xs": "h6",
+  "body-2xl": "span",
+  "body-xl": "span",
+  "body-lg": "span",
+  "body-md": "span",
+  "body-sm": "span",
+  "body-xs": "span",
+  "detail-xl": "span",
+  "detail-lg": "span",
+  "detail-md": "span",
+  "detail-sm": "span",
+  "detail-xs": "span",
+  "label-2xl": "span",
+  "label-xl": "span",
+  "label-lg": "span",
+  "label-md": "span",
+  "label-sm": "span",
+  "label-xs": "span"
+}, e = {
+  "bm-sem-typo-heading-6xl": "bm-sem-typo-heading-6xl",
+  "bm-sem-typo-heading-5xl": "bm-sem-typo-heading-5xl",
+  "bm-sem-typo-heading-4xl": "bm-sem-typo-heading-4xl",
+  "bm-sem-typo-heading-3xl": "bm-sem-typo-heading-3xl",
+  "bm-sem-typo-heading-2xl": "bm-sem-typo-heading-2xl",
+  "bm-sem-typo-heading-alt-6xl": "bm-sem-typo-heading-alt-6xl",
+  "bm-sem-typo-heading-alt-5xl": "bm-sem-typo-heading-alt-5xl",
+  "bm-sem-typo-heading-alt-4xl": "bm-sem-typo-heading-alt-4xl",
+  "bm-sem-typo-heading-alt-3xl": "bm-sem-typo-heading-alt-3xl",
+  "bm-sem-typo-heading-alt-2xl": "bm-sem-typo-heading-alt-2xl",
+  "bm-sem-typo-heading-xl": "bm-sem-typo-heading-xl",
+  "bm-sem-typo-heading-lg": "bm-sem-typo-heading-lg",
+  "bm-sem-typo-heading-md": "bm-sem-typo-heading-md",
+  "bm-sem-typo-heading-sm": "bm-sem-typo-heading-sm",
+  "bm-sem-typo-heading-xs": "bm-sem-typo-heading-xs",
+  "bm-sem-typo-heading-alt-xl": "bm-sem-typo-heading-alt-xl",
+  "bm-sem-typo-heading-alt-lg": "bm-sem-typo-heading-alt-lg",
+  "bm-sem-typo-heading-alt-md": "bm-sem-typo-heading-alt-md",
+  "bm-sem-typo-heading-alt-sm": "bm-sem-typo-heading-alt-sm",
+  "bm-sem-typo-heading-alt-xs": "bm-sem-typo-heading-alt-xs",
+  "bm-sem-typo-body-xs": "bm-sem-typo-body-xs",
+  "bm-sem-typo-body-sm": "bm-sem-typo-body-sm",
+  "bm-sem-typo-body-md": "bm-sem-typo-body-md",
+  "bm-sem-typo-body-lg": "bm-sem-typo-body-lg",
+  "bm-sem-typo-body-xl": "bm-sem-typo-body-xl",
+  "bm-sem-typo-body-2xl": "bm-sem-typo-body-2xl",
+  "bm-sem-typo-detail-xs": "bm-sem-typo-detail-xs",
+  "bm-sem-typo-detail-sm": "bm-sem-typo-detail-sm",
+  "bm-sem-typo-detail-md": "bm-sem-typo-detail-md",
+  "bm-sem-typo-detail-lg": "bm-sem-typo-detail-lg",
+  "bm-sem-typo-detail-xl": "bm-sem-typo-detail-xl",
+  "bm-sem-typo-label-xs": "bm-sem-typo-label-xs",
+  "bm-sem-typo-label-sm": "bm-sem-typo-label-sm",
+  "bm-sem-typo-label-md": "bm-sem-typo-label-md",
+  "bm-sem-typo-label-lg": "bm-sem-typo-label-lg",
+  "bm-sem-typo-label-xl": "bm-sem-typo-label-xl",
+  "bm-sem-typo-label-2xl": "bm-sem-typo-label-2xl",
+  "bm-sem-typo-compact-body-xs": "bm-sem-typo-compact-body-xs",
+  "bm-sem-typo-compact-body-sm": "bm-sem-typo-compact-body-sm",
+  "bm-sem-typo-compact-body-md": "bm-sem-typo-compact-body-md",
+  "bm-sem-typo-compact-body-lg": "bm-sem-typo-compact-body-lg",
+  "bm-sem-typo-compact-body-xl": "bm-sem-typo-compact-body-xl",
+  "bm-sem-typo-compact-body-2xl": "bm-sem-typo-compact-body-2xl",
+  "bm-sem-typo-compact-label-xs": "bm-sem-typo-compact-label-xs",
+  "bm-sem-typo-compact-label-sm": "bm-sem-typo-compact-label-sm",
+  "bm-sem-typo-compact-label-md": "bm-sem-typo-compact-label-md",
+  "bm-sem-typo-compact-label-lg": "bm-sem-typo-compact-label-lg",
+  "bm-sem-typo-compact-label-xl": "bm-sem-typo-compact-label-xl",
+  "bm-sem-typo-compact-label-2xl": "bm-sem-typo-compact-label-2xl",
+  "bm-text": "bm-text",
+  "bm-text--normal": "bm-text--normal",
+  "bm-text--breakAll": "bm-text--breakAll",
+  "bm-text--breakWord": "bm-text--breakWord",
+  "bm-text--start": "bm-text--start",
+  "bm-text--center": "bm-text--center",
+  "bm-text--end": "bm-text--end",
+  "bm-text--block": "bm-text--block",
+  "bm-text--truncate": "bm-text--truncate",
+  "bm-text--italic": "bm-text--italic",
+  "bm-text--underline": "bm-text--underline",
+  "bm-text--strikethrough": "bm-text--strikethrough",
+  "bm-text--heading-regular": "bm-text--heading-regular",
+  "bm-text--heading-bold": "bm-text--heading-bold",
+  "bm-text--body-regular": "bm-text--body-regular",
+  "bm-text--body-bold": "bm-text--body-bold",
+  "bm-text--primary": "bm-text--primary",
+  "bm-text--secondary": "bm-text--secondary",
+  "bm-text--positive": "bm-text--positive",
+  "bm-text--warning": "bm-text--warning",
+  "bm-text--negative": "bm-text--negative",
+  "bm-text--infoPrimary": "bm-text--infoPrimary",
+  "bm-text--infoSecondary": "bm-text--infoSecondary",
+  "bm-text--selected": "bm-text--selected",
+  "bm-text--disabled": "bm-text--disabled",
+  "bm-text--primaryInverse": "bm-text--primaryInverse",
+  "bm-text--secondaryInverse": "bm-text--secondaryInverse",
+  "bm-text--expressive": "bm-text--expressive",
+  "bm-text--expressiveStronger": "bm-text--expressiveStronger",
+  "bm-text--expressiveInverse": "bm-text--expressiveInverse",
+  "bm-text--expressiveInverseStronger": "bm-text--expressiveInverseStronger"
+}, { baseClassNamePrefix: C, classModifierPrefix: t } = N("text"), M = A.forwardRef(
+  ({
+    kind: m = "body-md",
+    color: b,
+    theme: a,
+    as: x,
+    bold: s,
+    alignment: l,
+    wordBreak: o,
+    truncate: y,
+    block: n,
+    compact: i,
+    strikethrough: r,
+    underline: g,
+    italic: h,
+    children: c,
+    className: v,
+    ...f
+  }, u) => {
+    const $ = x || k[m], p = !m.includes("body");
+    s && p && console.warn(
+      "The `bold` prop is not supported for heading, label or detail `kind` variants. Use the `bold` for body `kind` variants."
+    );
+    const S = _(
+      e[C],
+      a && E(a),
+      // no need to redo typography tokens, fonts are already defined in typography.classes.css
+      m && e[`${d}${m}`],
+      // no need to redo compact typography tokens, if a font does not support compact, this class will
+      // not exist and therefore not be applied
+      i && e[`${d}${T}${m}`],
+      s && !p && e[`${t}body-bold`],
+      b && e[`${t}${b}`],
+      o && e[`${t}${o}`],
+      l && e[`${t}${l}`],
+      n && e[`${t}block`],
+      y && e[`${t}truncate`],
+      r && e[`${t}strikethrough`],
+      g && e[`${t}underline`],
+      h && e[`${t}italic`],
+      v
+    );
+    return /* @__PURE__ */ I($, { ref: u, className: S, ...f, children: c });
+  }
+);
+M.displayName = "Text";
+export {
+  M as Text
+};

package/lib/Text/index.cjs.js

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

package/lib/Text/index.d.ts

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

package/lib/Text/index.es.js

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