@phillips/seldon 1.51.1 → 1.52.0

package/dist/assets/account_circle.svg.js

@@ -1,5 +1,5 @@
 import * as e from "react";
-const C = (t) => /* @__PURE__ */ e.createElement("svg", { width: 19, height: 20, viewBox: "0 0 19 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M9.5026 0.833984C4.4426 0.833984 0.335938 4.94065 0.335938 10.0007C0.335938 15.0607 4.4426 19.1673 9.5026 19.1673C14.5626 19.1673 18.6693 15.0607 18.6693 10.0007C18.6693 4.94065 14.5626 0.833984 9.5026 0.833984ZM9.5026 3.58398C11.0243 3.58398 12.2526 4.81232 12.2526 6.33398C12.2526 7.85565 11.0243 9.08398 9.5026 9.08398C7.98094 9.08398 6.7526 7.85565 6.7526 6.33398C6.7526 4.81232 7.98094 3.58398 9.5026 3.58398ZM9.5026 16.6007C7.21094 16.6007 5.1851 15.4273 4.0026 13.649C4.0301 11.8248 7.66927 10.8257 9.5026 10.8257C11.3268 10.8257 14.9751 11.8248 15.0026 13.649C13.8201 15.4273 11.7943 16.6007 9.5026 16.6007Z", fill: "#ADADAD" }));
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_11553_447)" }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 5.5C10.5 6.88071 9.38071 8 8 8C6.61929 8 5.5 6.88071 5.5 5.5C5.5 4.11929 6.61929 3 8 3C9.38071 3 10.5 4.11929 10.5 5.5ZM9.5 5.5C9.5 6.32843 8.82843 7 8 7C7.17157 7 6.5 6.32843 6.5 5.5C6.5 4.67157 7.17157 4 8 4C8.82843 4 9.5 4.67157 9.5 5.5Z", fill: "black" }), /* @__PURE__ */ e.createElement("path", { d: "M5.375 10C4.75 10 4.5 10.75 4.5 11.0769V12.5C4.5 12.75 4.25 13 4 13C3.75 13 3.5 12.75 3.5 12.5V11.0769C3.5 10.0148 4.33947 9 5.375 9H10.625C11.6605 9 12.5 10.0148 12.5 11.0769V12.5C12.5 12.75 12.25 13 12 13C11.75 13 11.5 12.75 11.5 12.5V11.0769C11.5 10.75 11.2463 10 10.625 10H5.375Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_11553_447" }, /* @__PURE__ */ e.createElement("rect", { width: 16, height: 16, fill: "white" }))));
 export {
-  C as default
+  t as default
 };

package/dist/components/Accordion/AccordionItem.d.ts

@@ -7,15 +7,19 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
     /**
      * When true, prevents the user from interacting with the item.
      */
-    isLocked: boolean;
+    isLocked?: boolean;
     /**
      * Determines whether the variation on text style is large or small.
      */
     variation: string;
     /**
-     * Text string for the Accordion header for label.
+     * Uniqueid for the Accordion Item.
      */
-    label: string;
+    id: string;
+    /**
+     * Accordion item label.
+     */
+    label: React.ReactNode;
     /**
      * Child element pass in to display as item content.
      */
@@ -25,5 +29,5 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
      */
     hasTransition?: boolean;
 }
-declare const AccordionItem: ({ isLocked, variation, label, isLastItem, hasTransition, children, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionItem: ({ isLocked, variation, id, label, isLastItem, hasTransition, children, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 export default AccordionItem;

package/dist/components/Accordion/AccordionItem.js

@@ -1,108 +1,110 @@
-import { jsxs as g, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { jsxs as g, jsx as o, Fragment as h } from "react/jsx-runtime";
 import { getCommonProps as $ } from "../../utils/index.js";
-import v from "../../assets/plus.svg.js";
-import f from "../../assets/minus.svg.js";
+import f from "../../assets/plus.svg.js";
+import v from "../../assets/minus.svg.js";
 import I from "../../assets/lock.svg.js";
-import a from "../../node_modules/classnames/index.js";
-import { Item as _, Trigger as C, Content as p } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
-import { getIconClasses as u } from "./utils.js";
-const x = ({
+import d from "../../node_modules/classnames/index.js";
+import { Item as _, Trigger as C, Content as x } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import { getIconClasses as p } from "./utils.js";
+const N = ({
   children: n,
-  className: d,
-  baseClassName: o,
-  disable: i,
+  className: s,
+  baseClassName: t,
+  disable: c,
   isLargeVariation: e,
-  id: c
+  id: r
 }) => {
-  const r = i, l = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+  const a = c, l = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
     I,
     {
-      className: u(o, e, "lock"),
-      "data-testid": `${c}-lockedIcon`,
+      className: p(t, e, "lock"),
+      "data-testid": `${r}-lockedIcon`,
       "aria-hidden": !0
     }
-  ) }), m = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    v,
+  ) }), u = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    f,
     {
-      className: u(o, e, "plus"),
-      "data-testid": `${c}-plusIcon`,
+      className: p(t, e, "plus"),
+      "data-testid": `${r}-plusIcon`,
       "aria-hidden": !0
     }
-  ) }), s = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    f,
+  ) }), i = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    v,
     {
-      className: u(o, e, "minus"),
-      "data-testid": `${c}-minusIcon`,
+      className: p(t, e, "minus"),
+      "data-testid": `${r}-minusIcon`,
       "aria-hidden": !0
     }
   ) });
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ o(
     C,
     {
-      "data-disabled": i,
+      "data-disabled": c,
       asChild: !0,
-      className: a(o, { [`${o}--hoverable`]: !i }, d),
-      children: /* @__PURE__ */ g("div", { "data-testid": `${c}-trigger`, children: [
-        /* @__PURE__ */ t("div", { className: a(`${o}__text`, { [`${o}__text--lg`]: e }), children: n }),
-        r && l,
-        !r && m,
-        !r && s
+      className: d(t, { [`${t}--hoverable`]: !c }, s),
+      children: /* @__PURE__ */ g("div", { "data-testid": `${r}-trigger`, children: [
+        /* @__PURE__ */ o("div", { className: d(`${t}__text`, { [`${t}__text--lg`]: e }), children: n }),
+        a && l,
+        !a && u,
+        !a && i
       ] })
     }
   );
-}, N = ({
+}, A = ({
   children: n,
-  baseClassName: d,
-  disable: o,
-  hasTransition: i,
+  baseClassName: s,
+  disable: t,
+  hasTransition: c,
   isLargeVariation: e,
-  className: c
-}) => /* @__PURE__ */ t(h, { children: o && n ? /* @__PURE__ */ t("div", { children: n }) : /* @__PURE__ */ t(
-  p,
+  className: r
+}) => /* @__PURE__ */ o(h, { children: t && n ? /* @__PURE__ */ o("div", { children: n }) : /* @__PURE__ */ o(
+  x,
   {
     asChild: !0,
-    className: a(
-      { [`${d}__content--lg`]: e },
-      { [`${d}--transition`]: i },
-      c
+    className: d(
+      { [`${s}__content--lg`]: e },
+      { [`${s}--transition`]: c },
+      r
     ),
     children: n
   }
-) }), F = ({
-  isLocked: n,
-  variation: d,
-  label: o,
-  isLastItem: i,
-  hasTransition: e = !1,
-  children: c,
-  ...r
+) }), H = ({
+  isLocked: n = !1,
+  variation: s,
+  id: t,
+  label: c,
+  isLastItem: e,
+  hasTransition: r = !1,
+  children: a,
+  ...l
 }) => {
-  const { className: l } = $(r, "Accordion"), m = d === "lg", s = `${l}-item`;
+  const { className: u } = $({ id: t }, "Accordion"), i = s === "lg", m = `${u}-item`;
   return /* @__PURE__ */ g(
     _,
     {
       disabled: n,
-      value: o,
-      className: a(s, { [`${s}__border-bottom`]: !i }),
+      value: t,
+      className: d(m, { [`${m}__border-bottom`]: !e }),
+      ...l,
       children: [
-        /* @__PURE__ */ t(
-          x,
+        /* @__PURE__ */ o(
+          N,
           {
             disable: n,
-            isLargeVariation: m,
-            id: r == null ? void 0 : r.id,
-            baseClassName: `${s}-label`,
-            children: o
+            isLargeVariation: i,
+            id: t,
+            baseClassName: `${m}-label`,
+            children: c
           }
         ),
-        /* @__PURE__ */ t(
-          N,
+        /* @__PURE__ */ o(
+          A,
           {
             disable: n,
-            hasTransition: e,
-            isLargeVariation: m,
-            baseClassName: s,
-            children: c
+            hasTransition: r,
+            isLargeVariation: i,
+            baseClassName: m,
+            children: a
           }
         )
       ]
@@ -110,5 +112,5 @@ const x = ({
   );
 };
 export {
-  F as default
+  H as default
 };

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentProps } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import * as DropdownSelect from '@radix-ui/react-select';
 import { DropdownItem } from './types';
-export interface DropdownProps extends Omit<DropdownSelect.SelectProps, 'defaultValue' | 'dir'>, Omit<ComponentProps<'div'>, 'ref'> {
+export interface DropdownProps extends Omit<DropdownSelect.SelectProps, 'defaultValue' | 'dir'>, ComponentPropsWithoutRef<'div'> {
     /**
      * All options to be listed in the dropdown
      */

package/dist/components/Header/Header.d.ts

@@ -1,13 +1,10 @@
-import * as React from 'react';
-export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Default mobile menu label
-     */
-    defaultMobileMenuLabel?: string;
+import React from 'react';
+import { Component, ComponentProps, ReactElement } from 'react';
+export interface HeaderProps extends ComponentProps<'header'> {
     /**
      * Logo src
      */
-    logo?: React.ReactElement<React.Component> | string;
+    logo?: ReactElement<Component> | string;
     /**
      * Toggle open text
      */
@@ -22,11 +19,10 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     logoText?: string;
 }
 export type HeaderContextType = {
-    defaultMobileMenuLabel: string;
-    expandedItem: string;
-    setExpandedItem: (item: string) => void;
-    isExpanded: boolean;
-    onSelect: (label: string) => void;
+    /**
+     * Used for mobile navigation menu hiding and showing
+     */
+    isMenuOpen: boolean;
     /**
      * Is the user within the search input and searching
      */
@@ -37,5 +33,16 @@ export type HeaderContextType = {
     setIsSearchExpanded: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export declare const HeaderContext: React.Context<HeaderContextType>;
-declare const Header: ({ defaultMobileMenuLabel, logo, className, children, toggleOpenText, toggleCloseText, logoText, ...props }: React.PropsWithChildren<HeaderProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ## Overview
+ *
+ * This component allows navigation, search, login/logout, and language selection and supports desktop and mobile layouts
+ *
+ * [Figma Link Mobile](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10877-33417&node-type=INSTANCE&m=dev)
+ *
+ * [Figma Link Desktop](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10570-6295&node-type=FRAME&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-header--overview)
+ */
+declare const Header: React.ForwardRefExoticComponent<Omit<HeaderProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Header;

package/dist/components/Header/Header.js

@@ -1,79 +1,76 @@
-import { jsxs as _, jsx as t } from "react/jsx-runtime";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import l, { createContext as O, forwardRef as P, useState as h } from "react";
 import s from "../../node_modules/classnames/index.js";
-import * as o from "react";
-import { findChildrenOfType as x, px as a } from "../../utils/index.js";
-import v from "../Search/Search.js";
-import k from "../../assets/PhillipsLogo.svg.js";
-import { defaultHeaderContext as T } from "./utils.js";
-const w = o.createContext(T), D = ({
-  defaultMobileMenuLabel: r = "Main Menu",
-  logo: d = /* @__PURE__ */ t(k, {}),
-  className: S,
-  children: h,
-  toggleOpenText: l = "Open Menu",
-  toggleCloseText: m = "Close Menu",
-  logoText: f = "Home Page",
-  ...E
-}) => {
-  const $ = x(h, v), u = x(h, v, !0), [c, y] = o.useState(!1), [p, i] = o.useState(r), [C, I] = o.useState(!1), n = c ? m : l, N = p !== r, g = function() {
-    y((e) => !e), i(r);
-  }, H = function(e) {
-    i((j) => j === r ? e : r);
-  }, P = (e) => {
-    I(e);
-  };
-  return /* @__PURE__ */ _("header", { ...E, className: s(`${a}-header`, S), children: [
-    /* @__PURE__ */ t("div", { className: `${a}-header__top-row`, children: /* @__PURE__ */ t(
-      "h1",
-      {
-        "data-testid": "header-logo",
-        className: `${a}-header__logo`,
-        tabIndex: n === l ? 0 : -1,
-        children: /* @__PURE__ */ t("a", { href: "/", "aria-label": f, children: typeof d == "object" ? d : /* @__PURE__ */ t("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d, height: "14" }) })
-      }
-    ) }),
-    /* @__PURE__ */ t(
-      "div",
-      {
-        className: s(`${a}-header__overlay`, { [`${a}-header__overlay--active`]: c }),
-        "data-testid": "header-overlay",
-        onClick: g
-      }
-    ),
-    /* @__PURE__ */ t(
-      "button",
-      {
-        "aria-label": n,
-        "data-testid": "mobile-menu-toggle",
-        type: "button",
-        onClick: g,
-        className: s(`${a}-header__toggle-btn`, {
-          [`${a}-header__toggle-btn--open`]: n === m
-        }),
-        children: /* @__PURE__ */ t("span", { children: n })
-      }
-    ),
-    /* @__PURE__ */ _(
-      w.Provider,
-      {
-        value: {
-          defaultMobileMenuLabel: r,
-          expandedItem: p,
-          setExpandedItem: (e) => i(e),
-          isExpanded: N,
-          onSelect: (e) => H(e),
-          isSearchExpanded: C,
-          setIsSearchExpanded: P
-        },
-        children: [
-          /* @__PURE__ */ t("div", { className: s(`${a}-header__nav`, { [`${a}-header__nav--open`]: c }), children: u }),
-          $
-        ]
-      }
-    )
-  ] });
-};
+import { findChildrenOfType as i, findChildrenExcludingTypes as T, px as e } from "../../utils/index.js";
+import j from "../../assets/PhillipsLogo.svg.js";
+import p from "../UserManagement/UserManagement.js";
+import g from "../LanguageSelector/LanguageSelector.js";
+import f from "../Navigation/Navigation.js";
+import { defaultHeaderContext as w } from "./utils.js";
+const I = O(w), L = P(
+  ({
+    logo: d = /* @__PURE__ */ a(j, {}),
+    className: u,
+    children: r,
+    toggleOpenText: _ = "Open Menu",
+    toggleCloseText: v = "Close Menu",
+    logoText: x = "Home Page",
+    ...C
+  }, $) => {
+    const b = i(r, p), m = i(r, g), [c, y] = h(!1), E = i(r, f), N = T(r, [f, p, g]), [n, M] = h(!1), S = n ? v : _, H = function() {
+      M((t) => !t);
+    };
+    return /* @__PURE__ */ o("header", { ...C, className: s(`${e}-header`, u), ref: $, children: [
+      /* @__PURE__ */ o("div", { className: `${e}-header__top-row`, children: [
+        m,
+        " ",
+        /* @__PURE__ */ o(
+          "button",
+          {
+            "aria-label": S,
+            "data-testid": "mobile-menu-toggle",
+            type: "button",
+            onClick: H,
+            className: s(`${e}-header__toggle-btn`, {
+              [`${e}-header__toggle-btn--open`]: n
+            }),
+            children: [
+              /* @__PURE__ */ a("span", {}),
+              " "
+            ]
+          }
+        ),
+        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: "/", "aria-label": x, children: typeof d == "object" ? d : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d, height: "14" }) }) }),
+        b
+      ] }),
+      /* @__PURE__ */ a("div", { className: s(`${e}-header__nav`, { [`${e}-header__nav--closed`]: !n }), children: /* @__PURE__ */ o(
+        I.Provider,
+        {
+          value: {
+            isMenuOpen: n,
+            isSearchExpanded: c,
+            setIsSearchExpanded: y
+          },
+          children: [
+            l.Children.map(
+              E,
+              (t) => l.isValidElement(t) ? l.cloneElement(t, {
+                children: [
+                  ...l.Children.toArray(t.props.children),
+                  m
+                ]
+              }) : t
+            ),
+            N
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ a("div", { className: s(`${e}-header__overlay`, { [`${e}-header__overlay--active`]: c }) })
+    ] });
+  }
+);
+L.displayName = "Header";
 export {
-  w as HeaderContext,
-  D as default
+  I as HeaderContext,
+  L as default
 };

package/dist/components/Header/utils.d.ts

@@ -1,9 +1,2 @@
-export declare const defaultHeaderContext: {
-    defaultMobileMenuLabel: string;
-    expandedItem: string;
-    setExpandedItem: () => void;
-    isExpanded: boolean;
-    onSelect: () => void;
-    isSearchExpanded: boolean;
-    setIsSearchExpanded: () => void;
-};
+import { HeaderContextType } from './Header';
+export declare const defaultHeaderContext: HeaderContextType;

package/dist/components/Header/utils.js

@@ -1,13 +1,9 @@
 import { noOp as e } from "../../utils/index.js";
-const d = {
-  defaultMobileMenuLabel: "",
-  expandedItem: "",
-  setExpandedItem: e,
-  isExpanded: !1,
-  onSelect: e,
+const n = {
+  isMenuOpen: !1,
   isSearchExpanded: !1,
   setIsSearchExpanded: e
 };
 export {
-  d as defaultHeaderContext
+  n as defaultHeaderContext
 };

package/dist/components/LanguageSelector/LanguageSelector.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps } from 'react';
+import { SupportedLanguages } from '../../types/commonTypes';
+export type LanguageOption = {
+    label: string;
+    value: SupportedLanguages;
+};
+export interface LanguageSelectorProps extends ComponentProps<'div'> {
+    /**
+     * Available language options to select from
+     */
+    languageOptions?: LanguageOption[];
+    /**
+     * The currently selected language, shows in the input
+     */
+    currentLanguage?: SupportedLanguages;
+    /**
+     * Called when the language is changed in the dropdown
+     * @param language
+     */
+    onLanguageChange?: (language: SupportedLanguages) => void;
+    /**
+     * hide or show with an opacity transition
+     */
+    isHidden?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * This is used in the Header component to allow users to change the language of the site.  It is a controlled component.
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10570-6295&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-languageselector--overview)
+ */
+declare const LanguageSelector: import("react").ForwardRefExoticComponent<Omit<LanguageSelectorProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export default LanguageSelector;

package/dist/components/LanguageSelector/LanguageSelector.js

@@ -0,0 +1,73 @@
+import { jsxs as b, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { forwardRef as L } from "react";
+import { getCommonProps as N, noOp as x } from "../../utils/index.js";
+import C from "../../node_modules/classnames/index.js";
+import { SupportedLanguages as s } from "../../types/commonTypes.js";
+import S from "../Dropdown/Dropdown.js";
+import k from "../Accordion/Accordion.js";
+import w from "../Accordion/AccordionItem.js";
+import y from "../Navigation/NavigationItem/NavigationItem.js";
+import { LinkVariants as P } from "../Link/types.js";
+import { TextVariants as T } from "../Text/types.js";
+import V from "../Text/Text.js";
+import j from "../Navigation/NavigationList/NavigationList.js";
+const A = ({
+  id: o,
+  value: n,
+  // can't be passed to the accordion
+  onValueChange: r,
+  label: t,
+  options: l,
+  ...m
+}) => /* @__PURE__ */ e(k, { ...m, children: /* @__PURE__ */ e(
+  w,
+  {
+    variation: "sm",
+    id: o != null ? o : "language-selector-accordion",
+    label: /* @__PURE__ */ e(V, { variant: T.snwHeaderLink, children: t }),
+    children: /* @__PURE__ */ e(j, { id: `${o}-navlist`, children: l.map((a) => /* @__PURE__ */ e(
+      y,
+      {
+        label: a.label,
+        onClick: () => r(a.value),
+        navType: P.snwFlyoutLink
+      },
+      a.value
+    )) })
+  }
+) }), E = L(
+  ({
+    className: o,
+    currentLanguage: n = s.en,
+    languageOptions: r = [
+      { label: "English", value: s.en },
+      { label: "中文", value: s.zh }
+    ],
+    onLanguageChange: t = x,
+    id: l,
+    isHidden: m,
+    ...a
+  }, c) => {
+    var g, f;
+    const { className: p, ...v } = N({ id: l }, "LanguageSelector"), d = (f = (g = r.find((i) => i.value === n)) == null ? void 0 : g.label) != null ? f : "English", u = {
+      ...v,
+      ...a,
+      id: l,
+      className: C(p, o, {
+        [`${p}--hidden`]: m
+      }),
+      options: r,
+      value: n,
+      onValueChange: (i) => t(i),
+      label: d
+    };
+    return /* @__PURE__ */ b(h, { children: [
+      /* @__PURE__ */ e(S, { ...u, ref: c }),
+      /* @__PURE__ */ e(A, { ...u, ref: c })
+    ] });
+  }
+);
+E.displayName = "LanguageSelector";
+export {
+  E as default
+};

package/dist/components/LanguageSelector/index.d.ts

@@ -0,0 +1 @@
+export { default as LanguageSelector, type LanguageSelectorProps } from './LanguageSelector';

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes } from 'react';
+import { ComponentProps, ElementType } from 'react';
 import { LinkVariants } from './types';
-export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends ComponentProps<'a'> {
     /**
      * Describes where the link is used. It controls the styling of the link so we apply consistent styles. Defaults to `standalone`.  See the documentation [here](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5731-12815) to see where each variant is used.
      *
@@ -8,19 +8,11 @@ export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
      * @see LinkVariants
      */
     variant?: LinkVariants;
-    /**
-     * The text of the link
-     */
-    children: React.ReactNode;
-    /**
-     * URL to navigate to when clicked
-     */
-    href?: string;
     /**
      * Can be used to render alternative link components like the prefetching `Link` from `@remix-run/react`.
      * This component should handle the `children`, `data-testid`, `id`, `className`, and `href` props.
      */
-    element?: React.ElementType<LinkProps & {
+    element?: ElementType<LinkProps & {
         'data-testid': string;
     }>;
 }

package/dist/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { LinkVariants } from './types';
+export { default as Link, type LinkProps } from './Link';

package/dist/components/Navigation/Navigation.d.ts

@@ -1,10 +1,18 @@
-import * as React from 'react';
-export interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
-    backBtnLabel?: string;
+import React, { ComponentProps } from 'react';
+export interface NavigationProps extends ComponentProps<'nav'> {
     /**
      * Optional visible state
      */
     visible?: boolean;
 }
-declare const Navigation: ({ backBtnLabel, children, className, id, visible, }: React.PropsWithChildren<NavigationProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ## Overview
+ *
+ * This is used within the Header component and displays the site navigation links.  It support both mobile and desktop.
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10570-5784&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-navigation--overview)
+ */
+declare const Navigation: React.ForwardRefExoticComponent<Omit<NavigationProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Navigation;