@viasat/beam-react 2.0.0

package/lib/InputChoiceGroup/InputChoiceGroup.d.ts

@@ -0,0 +1,65 @@
+import { FormValidator } from '@viasat/beam-shared/components/form';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { InputChoiceGroupOrientation, InputChoiceGroupLayouts } from '@viasat/beam-shared/components/inputChoiceGroup';
+import { Nullable } from '@viasat/beam-shared/utils/types';
+import * as React from 'react';
+export interface InputChoiceGroupProps extends React.ComponentPropsWithoutRef<'fieldset'> {
+    /**
+     * Add a HelperText to a group
+     */
+    helperText?: Nullable<React.ReactElement>;
+    /**
+     * Specify an orientation preference for the group
+     * @default 'vertical'
+     */
+    orientation?: InputChoiceGroupOrientation;
+    /**
+     * Specify if the group should take the full width of its container
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify an orientation preference for the group
+     * @default 'vertical'
+     * @deprecated use `orientation` and `fluid` instead
+     */
+    layout?: InputChoiceGroupLayouts;
+    /**
+     * Specify if group is a required input
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if the group displays with an asterisk
+     * @default false
+     */
+    hideRequiredMarker?: boolean;
+    /**
+     * Add a Label to a group
+     */
+    label?: Nullable<React.ReactElement>;
+    /**
+     * Specify error text and display error state of a group
+     */
+    error?: boolean | string;
+    /**
+     * Specify if a group displays in a read-only state
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if a group displays in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify the theme of the group. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify form validation rules for group
+     */
+    validationRules?: Array<FormValidator>;
+}
+export declare function InputChoiceGroup({ error, theme, label, helperText, layout, orientation: _orientation, fluid: _fluid, validationRules, className: _className, hideRequiredMarker, disabled: _disabled, readOnly: _readOnly, required: _required, ...props }: InputChoiceGroupProps): import("react/jsx-runtime").JSX.Element;
+export default InputChoiceGroup;

package/lib/InputChoiceGroup/InputChoiceGroup.es.js

@@ -0,0 +1,99 @@
+import "../../assets/InputChoiceGroup.css";
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import * as K from "react";
+import a from "clsx";
+import { F as Q, u as U, H as W } from "../../chunks/form.context.CNWjF5qA.js";
+import { useAccessibleId as o } from "../Form/hooks/useAccessibleId.hook.es.js";
+import { InputChoiceGroupProvider as X } from "./InputChoiceGroup.context.es.js";
+import { LabelProvider as Y } from "../Form/contexts/label.context.es.js";
+import { HelperTextProvider as Z } from "../Form/contexts/helperText.context.es.js";
+import { t as ii } from "../../chunks/constants.BBi77pmH.js";
+import { g as ei } from "../../chunks/classNames.DNsS4J__.js";
+const s = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-input-choice-group": "bm-input-choice-group",
+  "bm-input-choice-group__inputs": "bm-input-choice-group__inputs",
+  "bm-input-choice-group--vertical": "bm-input-choice-group--vertical",
+  "bm-input-choice-group--horizontal": "bm-input-choice-group--horizontal",
+  "bm-input-choice-group--horizontalFluid": "bm-input-choice-group--horizontalFluid"
+}, { baseClassNamePrefix: ri, subElementClassPrefix: oi, classModifierPrefix: ti } = ei("input-choice-group");
+function hi({
+  error: i,
+  theme: n,
+  label: c = null,
+  helperText: l = null,
+  layout: t = "vertical",
+  orientation: I,
+  fluid: z,
+  validationRules: C = [],
+  className: F,
+  hideRequiredMarker: P = !1,
+  disabled: N = !1,
+  readOnly: R = !1,
+  required: _ = !1,
+  ...D
+}) {
+  const {
+    name: d,
+    children: E,
+    "aria-invalid": q,
+    "aria-labelledby": B,
+    "aria-describedby": O,
+    ...G
+  } = D, H = z ?? t === "horizontalFluid", u = I ?? (t === "horizontalFluid" ? "horizontal" : t) ?? "vertical", { ctxDisabled: L, ctxReadOnly: M, ctxRequired: $, ctxRegister: j } = K.useContext(Q), { id: p } = o(), { id: k } = o(), { id: m } = o(), { id: b } = o(), { showErrors: w, setErrors: T, isInvalid: A, errorShown: S } = U(), h = !!(i != null && i.length), x = a(c && k, B), V = a(
+    l && m,
+    h && p,
+    S && b,
+    O
+  ), f = !!i || A, e = N || L, g = R || M, v = _ || $;
+  !e && j(d, C, T);
+  const J = a(
+    s[ri],
+    s[`${ti}${u === "horizontal" && H ? "horizontalFluid" : u}`],
+    n && ii(n),
+    F
+  );
+  return /* @__PURE__ */ y(
+    "fieldset",
+    {
+      className: J,
+      "aria-labelledby": x,
+      "aria-describedby": V,
+      "aria-disabled": e || g,
+      "aria-invalid": f || q,
+      ...G,
+      children: [
+        /* @__PURE__ */ r("legend", { id: x, children: /* @__PURE__ */ r(
+          Y,
+          {
+            ctxDisabled: e,
+            ctxRequired: v && !P,
+            children: c
+          }
+        ) }),
+        /* @__PURE__ */ r("div", { className: s[`${oi}inputs`], children: /* @__PURE__ */ r(
+          X,
+          {
+            ctxName: d,
+            ctxError: f,
+            ctxReadOnly: g,
+            ctxRequired: v,
+            ctxDisabled: e,
+            children: E
+          }
+        ) }),
+        /* @__PURE__ */ y(Z, { ctxId: m, ctxDisabled: e, children: [
+          l,
+          h && /* @__PURE__ */ r(W, { id: p, appearance: "negative", children: i })
+        ] }),
+        w(b)
+      ]
+    }
+  );
+}
+export {
+  hi as InputChoiceGroup,
+  hi as default
+};

package/lib/InputChoiceGroup/RadioButtonGroup/RadioButtonGroup.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),t=require("../InputChoiceGroup.cjs.js");function e(u){return o.jsx(t.InputChoiceGroup,{...u})}exports.RadioButtonGroup=e;exports.default=e;

package/lib/InputChoiceGroup/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,4 @@
+import { InputChoiceGroupProps } from '../InputChoiceGroup';
+export type RadioButtonGroupProps = InputChoiceGroupProps;
+export declare function RadioButtonGroup(props: RadioButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export default RadioButtonGroup;

package/lib/InputChoiceGroup/RadioButtonGroup/RadioButtonGroup.es.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { InputChoiceGroup as t } from "../InputChoiceGroup.es.js";
+function i(o) {
+  return /* @__PURE__ */ r(t, { ...o });
+}
+export {
+  i as RadioButtonGroup,
+  i as default
+};

package/lib/InputChoiceGroup/RadioButtonGroup/index.cjs.js

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

package/lib/InputChoiceGroup/RadioButtonGroup/index.d.ts

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

package/lib/InputChoiceGroup/RadioButtonGroup/index.es.js

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

package/lib/InputChoiceGroup/SwitchGroup/SwitchGroup.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),o=require("../InputChoiceGroup.cjs.js");function e(u){return t.jsx(o.InputChoiceGroup,{...u})}exports.SwitchGroup=e;exports.default=e;

package/lib/InputChoiceGroup/SwitchGroup/SwitchGroup.d.ts

@@ -0,0 +1,4 @@
+import { InputChoiceGroupProps } from '../InputChoiceGroup';
+export type SwitchGroupProps = InputChoiceGroupProps;
+export declare function SwitchGroup(props: SwitchGroupProps): import("react/jsx-runtime").JSX.Element;
+export default SwitchGroup;

package/lib/InputChoiceGroup/SwitchGroup/SwitchGroup.es.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import { InputChoiceGroup as t } from "../InputChoiceGroup.es.js";
+function i(o) {
+  return /* @__PURE__ */ r(t, { ...o });
+}
+export {
+  i as SwitchGroup,
+  i as default
+};

package/lib/InputChoiceGroup/SwitchGroup/index.cjs.js

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

package/lib/InputChoiceGroup/SwitchGroup/index.d.ts

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

package/lib/InputChoiceGroup/SwitchGroup/index.es.js

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

package/lib/InputChoiceGroup/index.cjs.js

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

package/lib/InputChoiceGroup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SwitchGroup';
+export * from './CheckboxGroup';
+export * from './RadioButtonGroup';

package/lib/InputChoiceGroup/index.es.js

@@ -0,0 +1,8 @@
+import { SwitchGroup as p } from "./SwitchGroup/SwitchGroup.es.js";
+import { CheckboxGroup as e } from "./CheckboxGroup/CheckboxGroup.es.js";
+import { RadioButtonGroup as x } from "./RadioButtonGroup/RadioButtonGroup.es.js";
+export {
+  e as CheckboxGroup,
+  x as RadioButtonGroup,
+  p as SwitchGroup
+};

package/lib/Label/Label.cjs.js

@@ -0,0 +1 @@
+var D=require("../../assets/Label.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),O=require("react"),y=require("clsx");require("../../chunks/form.context.B1PXIJNq.js");const F=require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const M=require("../../chunks/constants.hwjHOsvT.js"),R=require("../../chunks/classNames.DAeKwerT.js");function S(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(l,t,s.get?s:{enumerable:!0,get:()=>e[t]})}}return l.default=e,Object.freeze(l)}const $=S(O),a={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-label":"bm-label","bm-label--disabled":"bm-label--disabled","bm-label--required":"bm-label--required","bm-label__optional":"bm-label__optional","bm-label__tooltip":"bm-label__tooltip","bm-label--no-box":"bm-label--no-box"},{baseClassNamePrefix:k,subElementClassPrefix:o,classModifierPrefix:b}=R.getBEMClassNames("label");function i({theme:e,tooltip:l,children:t,optional:s,className:n,required:c=!1,disabled:m=!1,...d}){const{htmlFor:u,id:x,..._}=d,{ctxHtmlFor:f,ctxDisabled:p,ctxRequired:q,ctxClassName:g,ctxId:j}=$.useContext(F.LabelContext),N=u||f,h=c||q,C=m||p,P=x||j,v=y(a[k],e&&M.themeClassName(e),h&&!s&&a[`${b}required`],C&&a[`${b}disabled`],g,n);return r.jsxs("div",{className:v,children:[r.jsxs("label",{htmlFor:N,id:P,..._,children:[t,s&&r.jsx("span",{className:a[`${o}optional`],children:s})]}),l&&r.jsx("span",{className:a[`${o}tooltip`],children:l})]})}exports.Label=i;exports.default=i;

package/lib/Label/Label.d.ts

@@ -0,0 +1,32 @@
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import * as React from 'react';
+export interface LabelProps extends React.ComponentPropsWithoutRef<'label'> {
+    /**
+     * Specify if the Label displays disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify if the Label displays as required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if the Label displays as optional
+     */
+    optional?: React.ReactNode;
+    /**
+     * Specify the text for Label
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify if the icon displays to add a Tooltip
+     */
+    tooltip?: React.ReactElement;
+    /**
+     * Specify the theme of the Label. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+export declare function Label({ theme, tooltip, children, optional, className: _className, required: _required, disabled: _disabled, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export default Label;

package/lib/Label/Label.es.js

@@ -0,0 +1,50 @@
+import "../../assets/Label.css";
+import { jsxs as t, jsx as m } from "react/jsx-runtime";
+import * as v from "react";
+import j from "clsx";
+import "../../chunks/form.context.CNWjF5qA.js";
+import { LabelContext as k } from "../Form/contexts/label.context.es.js";
+import "../Form/contexts/helperText.context.es.js";
+import { t as E } from "../../chunks/constants.BBi77pmH.js";
+import { g as L } from "../../chunks/classNames.DNsS4J__.js";
+const e = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-label": "bm-label",
+  "bm-label--disabled": "bm-label--disabled",
+  "bm-label--required": "bm-label--required",
+  "bm-label__optional": "bm-label__optional",
+  "bm-label__tooltip": "bm-label__tooltip",
+  "bm-label--no-box": "bm-label--no-box"
+}, { baseClassNamePrefix: M, subElementClassPrefix: r, classModifierPrefix: b } = L("label");
+function A({
+  theme: s,
+  tooltip: a,
+  children: o,
+  optional: l,
+  className: i,
+  required: d = !1,
+  disabled: c = !1,
+  ...n
+}) {
+  const { htmlFor: p, id: x, ...f } = n, { ctxHtmlFor: u, ctxDisabled: _, ctxRequired: h, ctxClassName: N, ctxId: C } = v.useContext(k), q = p || u, g = d || h, F = c || _, P = x || C, $ = j(
+    e[M],
+    s && E(s),
+    g && !l && e[`${b}required`],
+    F && e[`${b}disabled`],
+    N,
+    i
+  );
+  return /* @__PURE__ */ t("div", { className: $, children: [
+    /* @__PURE__ */ t("label", { htmlFor: q, id: P, ...f, children: [
+      o,
+      l && /* @__PURE__ */ m("span", { className: e[`${r}optional`], children: l })
+    ] }),
+    a && /* @__PURE__ */ m("span", { className: e[`${r}tooltip`], children: a })
+  ] });
+}
+export {
+  A as Label,
+  A as default
+};

package/lib/Label/Label.figma.d.ts

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

package/lib/Label/index.cjs.js

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

package/lib/Label/index.d.ts

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

package/lib/Label/index.es.js

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

package/lib/Link/Link.cjs.js

@@ -0,0 +1 @@
+var N=require("../../assets/Link.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),h=require("clsx"),p=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const i={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-link":"bm-link","bm-link--disabled":"bm-link--disabled","bm-link--hide-underline":"bm-link--hide-underline","bm-link--sm":"bm-link--sm","bm-link__icon":"bm-link__icon","bm-link--md":"bm-link--md","bm-link--lg":"bm-link--lg","bm-link--xl":"bm-link--xl","bm-link--primary":"bm-link--primary","bm-link--primary--disabled":"bm-link--primary--disabled","bm-link--secondary":"bm-link--secondary","bm-link--secondary--disabled":"bm-link--secondary--disabled","bm-link--body-bold":"bm-link--body-bold"},{baseClassNamePrefix:f,subElementClassPrefix:d,classModifierPrefix:n}=p.getBEMClassNames("link");function g({appearance:m="primary",size:e,disabled:l=!1,iconBefore:b,iconAfter:r,bold:k=!1,href:c,onClick:a,hideUnderline:o=!1,children:t,className:y,...u}){const x=l?"span":"a",$=h(i[f],e&&i[`${n}${e}`],l&&i[`${n}disabled`],m&&i[`${n}${m}`],o&&i[`${n}hide-underline`],k&&i[`${n}body-bold`],y);return s.jsxs(x,{className:$,"aria-disabled":l,...!l&&{href:c},...!l&&a&&{onClick:a},...u,children:[e&&b&&s.jsx("span",{className:i[`${d}icon`],children:b}),t,e&&r&&s.jsx("span",{className:i[`${d}icon`],children:r})]})}exports.Link=g;

package/lib/Link/Link.d.ts

@@ -0,0 +1,48 @@
+import { LinkAppearances, LinkSizes } from '@viasat/beam-shared/components/link';
+import * as React from 'react';
+export interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {
+    /**
+     * Specify the appearance of a Link
+     * @default primary
+     */
+    appearance?: LinkAppearances;
+    /**
+     * Specify the size of a Link
+     */
+    size?: LinkSizes;
+    /**
+     * Specify if the Link is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify if the Link displays icon before the text
+     */
+    iconBefore?: React.ReactNode;
+    /**
+     * Specify if the Link displays icon after the text
+     */
+    iconAfter?: React.ReactNode;
+    /**
+     * Specify if the Link displays as bold
+     */
+    bold?: boolean;
+    /**
+     * Specify the target link for the href attribute
+     */
+    href: string;
+    /**
+     * Specify a custom onClick handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    /**
+     * Specify if Link displays with an underline
+     * @default false
+     */
+    hideUnderline?: boolean;
+    /**
+     * Provide text for the Link
+     */
+    children: React.ReactNode;
+}
+export declare function Link({ appearance, size, disabled, iconBefore, iconAfter, bold, href, onClick, hideUnderline, children, className: _className, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/lib/Link/Link.es.js

@@ -0,0 +1,65 @@
+import "../../assets/Link.css";
+import { jsxs as $, jsx as r } from "react/jsx-runtime";
+import h from "clsx";
+import { g } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+const i = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-link": "bm-link",
+  "bm-link--disabled": "bm-link--disabled",
+  "bm-link--hide-underline": "bm-link--hide-underline",
+  "bm-link--sm": "bm-link--sm",
+  "bm-link__icon": "bm-link__icon",
+  "bm-link--md": "bm-link--md",
+  "bm-link--lg": "bm-link--lg",
+  "bm-link--xl": "bm-link--xl",
+  "bm-link--primary": "bm-link--primary",
+  "bm-link--primary--disabled": "bm-link--primary--disabled",
+  "bm-link--secondary": "bm-link--secondary",
+  "bm-link--secondary--disabled": "bm-link--secondary--disabled",
+  "bm-link--body-bold": "bm-link--body-bold"
+}, { baseClassNamePrefix: u, subElementClassPrefix: d, classModifierPrefix: m } = g("link");
+function v({
+  appearance: s = "primary",
+  size: n,
+  disabled: l = !1,
+  iconBefore: b,
+  iconAfter: e,
+  bold: k = !1,
+  href: o,
+  onClick: a,
+  hideUnderline: c = !1,
+  children: t,
+  className: y,
+  ...p
+}) {
+  const f = l ? "span" : "a", x = h(
+    i[u],
+    n && i[`${m}${n}`],
+    l && i[`${m}disabled`],
+    s && i[`${m}${s}`],
+    c && i[`${m}hide-underline`],
+    k && i[`${m}body-bold`],
+    y
+  );
+  return /* @__PURE__ */ $(
+    f,
+    {
+      className: x,
+      "aria-disabled": l,
+      ...!l && { href: o },
+      ...!l && a && { onClick: a },
+      ...p,
+      children: [
+        n && b && /* @__PURE__ */ r("span", { className: i[`${d}icon`], children: b }),
+        t,
+        n && e && /* @__PURE__ */ r("span", { className: i[`${d}icon`], children: e })
+      ]
+    }
+  );
+}
+export {
+  v as Link
+};

package/lib/Link/index.cjs.js

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

package/lib/Link/index.d.ts

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

package/lib/Link/index.es.js

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

package/lib/List/List.Item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const u=require("./ListContext.cjs.js"),m=require("react");function d(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const l=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,l.get?l:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const i=d(m),f=e=>i.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},i.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM5 4.99H8C8 6.65 6.66 8 5 8V4.99ZM5 12V10C7.76 10 10 7.75 10 4.99H12C12 8.86 8.87 12 5 12ZM5 18L8.5 13.5L11 16.51L14.5 12L19 18H5Z",fill:"currentColor"})),p=({children:e,icon:t,style:s,className:l,...a})=>{const{subElementClassPrefix:r}=o.getBEMClassNames("list"),{kind:c}=u.useListKind();return c==="withIcons"&&!t&&(t=n.jsx(f,{})),n.jsx("li",{className:l,style:s,...a,children:n.jsxs("span",{className:`${r}content`,children:[c==="withIcons"&&n.jsx("span",{className:`${r}icon`,children:t}),n.jsx("span",{children:e})]})})};exports.ListItem=p;

package/lib/List/List.Item.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface ListItemProps extends React.ComponentPropsWithoutRef<'li'> {
+    /**
+     * Specify the text for List.Item
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an Icon for the List.Item
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * @param {React.ReactNode} children - Specify the text for List.Item
+ * @param {React.ReactNode} icon - Specify an Icon for the list item
+ */
+export declare const ListItem: ({ children, icon, style: _style, className: _className, ...props }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/lib/List/List.Item.es.js

@@ -0,0 +1,21 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { g as c } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { useListKind as p } from "./ListContext.es.js";
+import * as i from "react";
+const d = (s) => /* @__PURE__ */ i.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...s }, /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM5 4.99H8C8 6.65 6.66 8 5 8V4.99ZM5 12V10C7.76 10 10 7.75 10 4.99H12C12 8.86 8.87 12 5 12ZM5 18L8.5 13.5L11 16.51L14.5 12L19 18H5Z", fill: "currentColor" })), g = ({
+  children: s,
+  icon: t,
+  style: o,
+  className: r,
+  ...a
+}) => {
+  const { subElementClassPrefix: l } = c("list"), { kind: n } = p();
+  return n === "withIcons" && !t && (t = /* @__PURE__ */ e(d, {})), /* @__PURE__ */ e("li", { className: r, style: o, ...a, children: /* @__PURE__ */ m("span", { className: `${l}content`, children: [
+    n === "withIcons" && /* @__PURE__ */ e("span", { className: `${l}icon`, children: t }),
+    /* @__PURE__ */ e("span", { children: s })
+  ] }) });
+};
+export {
+  g as ListItem
+};

package/lib/List/List.cjs.js

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

package/lib/List/List.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils';
+import { ListKind, ListSize, ListDensity } from '@viasat/beam-shared/components/list';
+export interface ListProps extends React.ComponentPropsWithoutRef<'ol'> {
+    /**
+     * Add list items to create a List
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the kind of List
+     */
+    kind?: ListKind;
+    /**
+     * Specify the size of List
+     */
+    size?: ListSize;
+    /**
+     * Specify the density of the List
+     */
+    density?: ListDensity;
+    /**
+     * Specify if the List has an indentation.
+     * `indent` can only be applied to icon and unstyled lists.
+     */
+    indent?: boolean;
+    /**
+     * Specify the theme of the List
+     */
+    theme?: ThemeTypes;
+}
+/**
+ * @param {ListKind} kind - Specify the kind of List
+ * @param {ListSize} size - Specify the size of List
+ * @param {ListDensity} density - Specify the density of the List
+ * @param {boolean} indent - Specify if the List has an indentation
+ * @param {ThemeTypes} mode - Specify an override for the theme mode
+ */
+export declare const List: {
+    ({ kind: _kind, size, density, indent, theme, children, className: _className, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, icon, style: _style, className: _className, ...props }: import('./List.Item').ListItemProps) => import("react/jsx-runtime").JSX.Element;
+};