@phillips/seldon 1.76.0 → 1.77.0

package/dist/components/Tabs/TabTrigger.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react';
+export interface TabTriggerProps extends ComponentProps<'div'> {
+    /**
+     * Value corresponding to the tab
+     */
+    value: string;
+    /**
+     * Optional onClick handler
+     * @param value
+     * @returns
+     */
+    onTabClick?: (value: string) => void;
+    /**
+     * Tab label
+     */
+    children?: React.ReactNode;
+}
+/**
+ * TabTrigger component that serves as the clickable tab.
+ *
+ * @param {TabTriggerProps} props - The props for the TabTrigger component.
+ * @returns {JSX.Element} The rendered TabTrigger component.
+ */
+declare const TabTrigger: import("react").ForwardRefExoticComponent<Omit<TabTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default TabTrigger;

package/dist/components/Tabs/TabTrigger.js

@@ -0,0 +1,14 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { getCommonProps as f } from "../../utils/index.js";
+import { Trigger as n } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+const p = g(({ value: r, onTabClick: o, children: a, ...s }, e) => {
+  const m = () => {
+    o && o(r);
+  }, { className: t } = f(s, "TabsContainer");
+  return /* @__PURE__ */ i(n, { value: r, className: `${t}__tabs-trigger`, onClick: m, ref: e, children: a });
+});
+p.displayName = "TabTrigger";
+export {
+  p as default
+};

package/dist/components/Tabs/TabsContainer.d.ts

@@ -0,0 +1,47 @@
+import { ComponentProps } from 'react';
+export interface Tab {
+    /**
+     * button label
+     */
+    label: React.ReactNode;
+    /**
+     * Button value
+     */
+    value: string;
+}
+/**
+ * TabsContainer renders a tab interface allowing switching between different content.
+ *
+ * @param {TabsContainerProps} props - The component props containing an array of tabs.
+ * @returns {JSX.Element} The rendered tab component.
+ */
+export interface TabsContainerProps extends ComponentProps<'div'> {
+    tabs: Tab[];
+    /**
+     * Specify the default tab
+     */
+    defaultValue?: string;
+    /**
+     * Aria-label for specific tab list view
+     */
+    tabListLabel?: string;
+    /**
+     * Optional handler when a tab is clicked
+     */
+    onTabClick?: (value: string) => void;
+    /**
+     * TabContent components will be passed here
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ## Overview
+ *
+ * Overview of Tabs component
+ *
+ * [Figma Link](https://www.figma.com/file/hMu9IWH5N3KamJy8tLFdyV?type=design&node-id=10838%3A22184&mode=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-tabs--overview)
+ */
+declare const TabsContainer: import("react").ForwardRefExoticComponent<Omit<TabsContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default TabsContainer;

package/dist/components/Tabs/TabsContainer.js

@@ -0,0 +1,42 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { getCommonProps as u } from "../../utils/index.js";
+import b from "../../node_modules/classnames/index.js";
+import { Root as T, List as N } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+import g from "./TabTrigger.js";
+import { TextVariants as v } from "../Text/types.js";
+import _ from "../Text/Text.js";
+const x = d(
+  ({ className: l, tabs: s = [], tabListLabel: m = "Sale Page Tabs", children: t, defaultValue: i, onTabClick: n, ...c }, f) => {
+    const { className: a, ...p } = u(c, "TabsContainer");
+    return /* @__PURE__ */ o(
+      T,
+      {
+        defaultValue: i || s[0].value,
+        ...p,
+        className: b(`${a}`, l),
+        ref: f,
+        children: [
+          /* @__PURE__ */ o(N, { "aria-label": m, className: `${a}__tabs-list`, children: [
+            s.map((e) => /* @__PURE__ */ r(
+              g,
+              {
+                value: e.value,
+                className: `${a}__tabs-trigger`,
+                onTabClick: n,
+                children: /* @__PURE__ */ r(_, { variant: v.label, children: e.label })
+              },
+              e.value
+            )),
+            /* @__PURE__ */ r("div", { className: `${a}__full-bleed-underline` })
+          ] }),
+          t
+        ]
+      }
+    );
+  }
+);
+x.displayName = "TabsContainer";
+export {
+  x as default
+};

package/dist/components/Tabs/TabsContent.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+export interface TabContentProps extends ComponentProps<'div'> {
+    /**
+     * The value that corresponds to the Trigger
+     */
+    value: string;
+    /**
+     * Content to be displayed when this tab is active
+     */
+    children: React.ReactNode;
+    /**
+     * The className for the Tab content container.
+     */
+    containerClassName?: string;
+}
+/**
+ * TabContent component renders the content for a specific tab.
+ *
+ * @param {TabContentProps} props - The props for the TabContent component.
+ * @returns {JSX.Element} The rendered TabContent component.
+ */
+declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<TabContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default TabsContent;

package/dist/components/Tabs/TabsContent.js

@@ -0,0 +1,26 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Content as i } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+import { forwardRef as p } from "react";
+import { getCommonProps as c } from "../../utils/index.js";
+import f from "../../node_modules/classnames/index.js";
+const l = p(
+  ({ className: b, value: o, containerClassName: a, children: s, ...t }, e) => {
+    const { className: m, ...r } = c(t, "TabsContainer");
+    return /* @__PURE__ */ n(
+      i,
+      {
+        value: o,
+        className: f(`${m}__tabs-content`, a),
+        ...r,
+        ref: e,
+        tabIndex: -1,
+        "aria-hidden": !0,
+        children: s
+      }
+    );
+  }
+);
+l.displayName = "TabsContent";
+export {
+  l as default
+};

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

@@ -0,0 +1,2 @@
+export { default as TabsContainer, type TabsContainerProps } from './TabsContainer';
+export { default as TabsContent, type TabContentProps } from './TabsContent';

package/dist/index.d.ts

@@ -49,5 +49,6 @@ export * from './components/Carousel';
 export * from './components/Detail';
 export * from './patterns/DetailList';
 export * from './components/PinchZoom';
+export * from './components/Tabs';
 export * from './components/SeldonImage';
 export * from './patterns/SaleHeaderBanner';

package/dist/index.js

@@ -1,8 +1,8 @@
-import { PaddingTokens as f, SpacingTokens as l, defaultYear as m, emailValidation as s, encodeURLSearchParams as p, findChildrenExcludingTypes as d, findChildrenOfType as u, generatePaddingClassName as n, getCommonProps as i, noOp as x, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { PaddingTokens as f, SpacingTokens as l, defaultYear as s, emailValidation as m, encodeURLSearchParams as p, findChildrenExcludingTypes as d, findChildrenOfType as u, generatePaddingClassName as n, getCommonProps as x, noOp as i, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
 import { default as P } from "./components/Button/Button.js";
-import { ButtonVariants as T } from "./components/Button/types.js";
-import { default as b } from "./components/IconButton/IconButton.js";
+import { ButtonVariants as b } from "./components/Button/types.js";
+import { default as V } from "./components/IconButton/IconButton.js";
 import { default as B } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as w } from "./site-furniture/Footer/Footer.js";
 import { Grid as D } from "./components/Grid/Grid.js";
@@ -18,18 +18,18 @@ import { LinkVariants as J } from "./components/Link/types.js";
 import { default as Q } from "./components/LinkBlock/LinkBlock.js";
 import { default as _ } from "./components/LinkList/LinkList.js";
 import { default as ee } from "./components/Row/Row.js";
-import { default as re } from "./components/GridItem/GridItem.js";
+import { default as te } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as ae } from "./components/GridItem/types.js";
 import { default as le } from "./components/Search/Search.js";
-import { default as se } from "./components/Select/Select.js";
+import { default as me } from "./components/Select/Select.js";
 import { default as de } from "./components/SplitPanel/SplitPanel.js";
 import { default as ne } from "./patterns/Subscribe/Subscribe.js";
-import { SubscriptionState as xe } from "./patterns/Subscribe/types.js";
+import { SubscriptionState as ie } from "./patterns/Subscribe/types.js";
 import { default as ce } from "./patterns/Social/Social.js";
 import { default as Ce } from "./patterns/ViewingsList/ViewingsList.js";
 import { default as Pe } from "./components/Modal/Modal.js";
-import { default as Te } from "./components/Drawer/Drawer.js";
-import { default as be } from "./components/Pagination/Pagination.js";
+import { default as be } from "./components/Drawer/Drawer.js";
+import { default as Ve } from "./components/Pagination/Pagination.js";
 import { default as Be } from "./patterns/ViewingsList/StatefulViewingsList.js";
 import { TextVariants as we } from "./components/Text/types.js";
 import { default as De } from "./components/Text/Text.js";
@@ -48,56 +48,58 @@ import "react";
 import { default as Xe } from "./components/Dropdown/Dropdown.js";
 import { default as $e } from "./components/Video/Video.js";
 import { default as oo } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as to } from "./components/ContentPeek/ContentPeek.js";
+import { default as ro } from "./components/ContentPeek/ContentPeek.js";
 import { default as fo } from "./components/Collapsible/Collapsible.js";
-import { default as mo } from "./components/Collapsible/CollapsibleContent.js";
+import { default as so } from "./components/Collapsible/CollapsibleContent.js";
 import { default as po } from "./components/Collapsible/CollapsibleTrigger.js";
 import { SeldonProvider as no } from "./providers/SeldonProvider/SeldonProvider.js";
-import { default as xo } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { default as io } from "./components/PageContentWrapper/PageContentWrapper.js";
 import { default as co } from "./components/Carousel/Carousel.js";
 import { default as Co } from "./components/Carousel/CarouselContent.js";
 import { default as Po } from "./components/Carousel/CarouselItem.js";
-import { default as To } from "./components/Carousel/CarouselDots.js";
-import { default as bo } from "./components/Detail/Detail.js";
+import { default as bo } from "./components/Carousel/CarouselDots.js";
+import { default as Vo } from "./components/Detail/Detail.js";
 import { default as Bo } from "./patterns/DetailList/DetailList.js";
 import { DetailListAlignment as wo } from "./patterns/DetailList/types.js";
 import { default as Do } from "./components/PinchZoom/PinchZoom.js";
-import { default as vo } from "./components/SeldonImage/SeldonImage.js";
-import { default as Ho } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
-import { default as Eo } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
-import { default as Oo } from "./patterns/SaleHeaderBanner/SaleHeaderCountdown.js";
-import { AuctionState as Uo } from "./patterns/SaleHeaderBanner/types.js";
+import { default as vo } from "./components/Tabs/TabsContainer.js";
+import { default as Ho } from "./components/Tabs/TabsContent.js";
+import { default as Eo } from "./components/SeldonImage/SeldonImage.js";
+import { default as Oo } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
+import { default as Uo } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
+import { default as Fo } from "./patterns/SaleHeaderBanner/SaleHeaderCountdown.js";
+import { AuctionState as Yo } from "./patterns/SaleHeaderBanner/types.js";
 export {
   Ee as Accordion,
   Oe as AccordionItem,
   Ue as AccordionItemVariant,
   ze as AccordionVariants,
-  Uo as AuctionState,
+  Yo as AuctionState,
   Ze as AuthState,
   Ke as Breadcrumb,
   P as Button,
-  T as ButtonVariants,
+  b as ButtonVariants,
   co as Carousel,
   Co as CarouselContent,
-  To as CarouselDots,
+  bo as CarouselDots,
   Po as CarouselItem,
   fo as Collapsible,
-  mo as CollapsibleContent,
+  so as CollapsibleContent,
   po as CollapsibleTrigger,
-  to as ContentPeek,
-  bo as Detail,
+  ro as ContentPeek,
+  Vo as Detail,
   Bo as DetailList,
   wo as DetailListAlignment,
-  Te as Drawer,
+  be as Drawer,
   Xe as Dropdown,
   B as ErrorBoundary,
   w as Footer,
   D as Grid,
-  re as GridItem,
+  te as GridItem,
   ae as GridItemAlign,
   v as Header,
   F as HeroBanner,
-  b as IconButton,
+  V as IconButton,
   Y as Input,
   oo as LanguageSelector,
   j as Link,
@@ -111,24 +113,26 @@ export {
   U as NavigationList,
   f as PaddingTokens,
   C as Page,
-  xo as PageContentWrapper,
-  be as Pagination,
+  io as PageContentWrapper,
+  Ve as Pagination,
   Do as PinchZoom,
   ee as Row,
-  Ho as SaleHeaderBanner,
-  Eo as SaleHeaderBrowseAuctions,
-  Oo as SaleHeaderCountdown,
+  Oo as SaleHeaderBanner,
+  Uo as SaleHeaderBrowseAuctions,
+  Fo as SaleHeaderCountdown,
   le as Search,
-  vo as SeldonImage,
+  Eo as SeldonImage,
   no as SeldonProvider,
-  se as Select,
+  me as Select,
   ce as Social,
   l as SpacingTokens,
   de as SplitPanel,
   Be as StatefulViewingsList,
   ne as Subscribe,
-  xe as SubscriptionState,
+  ie as SubscriptionState,
   qe as SupportedLanguages,
+  vo as TabsContainer,
+  Ho as TabsContent,
   De as Text,
   ve as TextSymbolVariants,
   He as TextSymbols,
@@ -136,14 +140,14 @@ export {
   We as UserManagement,
   $e as Video,
   Ce as ViewingsList,
-  m as defaultYear,
-  s as emailValidation,
+  s as defaultYear,
+  m as emailValidation,
   p as encodeURLSearchParams,
   d as findChildrenExcludingTypes,
   u as findChildrenOfType,
   n as generatePaddingClassName,
-  i as getCommonProps,
-  x as noOp,
+  x as getCommonProps,
+  i as noOp,
   g as px,
   c as useNormalizedInputProps
 };

package/dist/node_modules/@radix-ui/react-roving-focus/dist/index.js

@@ -0,0 +1,180 @@
+import * as s from "react";
+import { composeEventHandlers as p } from "../../primitive/dist/index.js";
+import { createCollection as V } from "../../react-collection/dist/index.js";
+import { useComposedRefs as j } from "../../react-compose-refs/dist/index.js";
+import { createContextScope as z } from "../../react-context/dist/index.js";
+import { useId as q } from "../../react-id/dist/index.js";
+import { Primitive as x } from "../../react-primitive/dist/index.js";
+import { useCallbackRef as J } from "../../react-use-callback-ref/dist/index.js";
+import { useControllableState as Q } from "../../react-use-controllable-state/dist/index.js";
+import { useDirection as W } from "../../react-direction/dist/index.js";
+import { jsx as d } from "react/jsx-runtime";
+var h = "rovingFocusGroup.onEntryFocus", X = { bubbles: !1, cancelable: !0 }, b = "RovingFocusGroup", [y, G, Z] = V(b), [$, Fe] = z(
+  b,
+  [Z]
+), [ee, oe] = $(b), N = s.forwardRef(
+  (e, r) => /* @__PURE__ */ d(y.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ d(y.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ d(te, { ...e, ref: r }) }) })
+);
+N.displayName = b;
+var te = s.forwardRef((e, r) => {
+  const {
+    __scopeRovingFocusGroup: c,
+    orientation: o,
+    loop: F = !1,
+    dir: g,
+    currentTabStopId: R,
+    defaultCurrentTabStopId: E,
+    onCurrentTabStopIdChange: m,
+    onEntryFocus: u,
+    preventScrollOnEntryFocus: w = !1,
+    ...C
+  } = e, v = s.useRef(null), I = j(r, v), t = W(g), [f = null, T] = Q({
+    prop: R,
+    defaultProp: E,
+    onChange: m
+  }), [a, i] = s.useState(!1), S = J(u), k = G(c), A = s.useRef(!1), [L, D] = s.useState(0);
+  return s.useEffect(() => {
+    const n = v.current;
+    if (n)
+      return n.addEventListener(h, S), () => n.removeEventListener(h, S);
+  }, [S]), /* @__PURE__ */ d(
+    ee,
+    {
+      scope: c,
+      orientation: o,
+      dir: t,
+      loop: F,
+      currentTabStopId: f,
+      onItemFocus: s.useCallback(
+        (n) => T(n),
+        [T]
+      ),
+      onItemShiftTab: s.useCallback(() => i(!0), []),
+      onFocusableItemAdd: s.useCallback(
+        () => D((n) => n + 1),
+        []
+      ),
+      onFocusableItemRemove: s.useCallback(
+        () => D((n) => n - 1),
+        []
+      ),
+      children: /* @__PURE__ */ d(
+        x.div,
+        {
+          tabIndex: a || L === 0 ? -1 : 0,
+          "data-orientation": o,
+          ...C,
+          ref: I,
+          style: { outline: "none", ...e.style },
+          onMouseDown: p(e.onMouseDown, () => {
+            A.current = !0;
+          }),
+          onFocus: p(e.onFocus, (n) => {
+            const U = !A.current;
+            if (n.target === n.currentTarget && U && !a) {
+              const P = new CustomEvent(h, X);
+              if (n.currentTarget.dispatchEvent(P), !P.defaultPrevented) {
+                const _ = k().filter((l) => l.focusable), B = _.find((l) => l.active), Y = _.find((l) => l.id === f), H = [B, Y, ..._].filter(
+                  Boolean
+                ).map((l) => l.ref.current);
+                M(H, w);
+              }
+            }
+            A.current = !1;
+          }),
+          onBlur: p(e.onBlur, () => i(!1))
+        }
+      )
+    }
+  );
+}), O = "RovingFocusGroupItem", K = s.forwardRef(
+  (e, r) => {
+    const {
+      __scopeRovingFocusGroup: c,
+      focusable: o = !0,
+      active: F = !1,
+      tabStopId: g,
+      ...R
+    } = e, E = q(), m = g || E, u = oe(O, c), w = u.currentTabStopId === m, C = G(c), { onFocusableItemAdd: v, onFocusableItemRemove: I } = u;
+    return s.useEffect(() => {
+      if (o)
+        return v(), () => I();
+    }, [o, v, I]), /* @__PURE__ */ d(
+      y.ItemSlot,
+      {
+        scope: c,
+        id: m,
+        focusable: o,
+        active: F,
+        children: /* @__PURE__ */ d(
+          x.span,
+          {
+            tabIndex: w ? 0 : -1,
+            "data-orientation": u.orientation,
+            ...R,
+            ref: r,
+            onMouseDown: p(e.onMouseDown, (t) => {
+              o ? u.onItemFocus(m) : t.preventDefault();
+            }),
+            onFocus: p(e.onFocus, () => u.onItemFocus(m)),
+            onKeyDown: p(e.onKeyDown, (t) => {
+              if (t.key === "Tab" && t.shiftKey) {
+                u.onItemShiftTab();
+                return;
+              }
+              if (t.target !== t.currentTarget) return;
+              const f = se(t, u.orientation, u.dir);
+              if (f !== void 0) {
+                if (t.metaKey || t.ctrlKey || t.altKey || t.shiftKey) return;
+                t.preventDefault();
+                let a = C().filter((i) => i.focusable).map((i) => i.ref.current);
+                if (f === "last") a.reverse();
+                else if (f === "prev" || f === "next") {
+                  f === "prev" && a.reverse();
+                  const i = a.indexOf(t.currentTarget);
+                  a = u.loop ? ce(a, i + 1) : a.slice(i + 1);
+                }
+                setTimeout(() => M(a));
+              }
+            })
+          }
+        )
+      }
+    );
+  }
+);
+K.displayName = O;
+var re = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function ne(e, r) {
+  return r !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
+}
+function se(e, r, c) {
+  const o = ne(e.key, c);
+  if (!(r === "vertical" && ["ArrowLeft", "ArrowRight"].includes(o)) && !(r === "horizontal" && ["ArrowUp", "ArrowDown"].includes(o)))
+    return re[o];
+}
+function M(e, r = !1) {
+  const c = document.activeElement;
+  for (const o of e)
+    if (o === c || (o.focus({ preventScroll: r }), document.activeElement !== c)) return;
+}
+function ce(e, r) {
+  return e.map((c, o) => e[(r + o) % e.length]);
+}
+var ge = N, Re = K;
+export {
+  Re as Item,
+  ge as Root,
+  N as RovingFocusGroup,
+  K as RovingFocusGroupItem,
+  Fe as createRovingFocusGroupScope
+};

package/dist/node_modules/@radix-ui/react-tabs/dist/index.js

@@ -0,0 +1,163 @@
+import * as v from "react";
+import { composeEventHandlers as p } from "../../primitive/dist/index.js";
+import { createContextScope as x } from "../node_modules/@radix-ui/react-context/dist/index.js";
+import { createRovingFocusGroupScope as C, Root as E, Item as F } from "../../react-roving-focus/dist/index.js";
+import { Presence as w } from "../node_modules/@radix-ui/react-presence/dist/index.js";
+import { Primitive as b } from "../../react-primitive/dist/index.js";
+import { useDirection as D } from "../../react-direction/dist/index.js";
+import { useControllableState as V } from "../../react-use-controllable-state/dist/index.js";
+import { useId as G } from "../../react-id/dist/index.js";
+import { jsx as u } from "react/jsx-runtime";
+var g = "Tabs", [L, Q] = x(g, [
+  C
+]), h = C(), [$, T] = L(g), I = v.forwardRef(
+  (e, r) => {
+    const {
+      __scopeTabs: s,
+      value: t,
+      onValueChange: n,
+      defaultValue: c,
+      orientation: o = "horizontal",
+      dir: d,
+      activationMode: f = "automatic",
+      ...m
+    } = e, i = D(d), [a, l] = V({
+      prop: t,
+      onChange: n,
+      defaultProp: c
+    });
+    return /* @__PURE__ */ u(
+      $,
+      {
+        scope: s,
+        baseId: G(),
+        value: a,
+        onValueChange: l,
+        orientation: o,
+        dir: i,
+        activationMode: f,
+        children: /* @__PURE__ */ u(
+          b.div,
+          {
+            dir: i,
+            "data-orientation": o,
+            ...m,
+            ref: r
+          }
+        )
+      }
+    );
+  }
+);
+I.displayName = g;
+var R = "TabsList", _ = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, loop: t = !0, ...n } = e, c = T(R, s), o = h(s);
+    return /* @__PURE__ */ u(
+      E,
+      {
+        asChild: !0,
+        ...o,
+        orientation: c.orientation,
+        dir: c.dir,
+        loop: t,
+        children: /* @__PURE__ */ u(
+          b.div,
+          {
+            role: "tablist",
+            "aria-orientation": c.orientation,
+            ...n,
+            ref: r
+          }
+        )
+      }
+    );
+  }
+);
+_.displayName = R;
+var y = "TabsTrigger", A = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, value: t, disabled: n = !1, ...c } = e, o = T(y, s), d = h(s), f = N(o.baseId, t), m = P(o.baseId, t), i = t === o.value;
+    return /* @__PURE__ */ u(
+      F,
+      {
+        asChild: !0,
+        ...d,
+        focusable: !n,
+        active: i,
+        children: /* @__PURE__ */ u(
+          b.button,
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": i,
+            "aria-controls": m,
+            "data-state": i ? "active" : "inactive",
+            "data-disabled": n ? "" : void 0,
+            disabled: n,
+            id: f,
+            ...c,
+            ref: r,
+            onMouseDown: p(e.onMouseDown, (a) => {
+              !n && a.button === 0 && a.ctrlKey === !1 ? o.onValueChange(t) : a.preventDefault();
+            }),
+            onKeyDown: p(e.onKeyDown, (a) => {
+              [" ", "Enter"].includes(a.key) && o.onValueChange(t);
+            }),
+            onFocus: p(e.onFocus, () => {
+              const a = o.activationMode !== "manual";
+              !i && !n && a && o.onValueChange(t);
+            })
+          }
+        )
+      }
+    );
+  }
+);
+A.displayName = y;
+var S = "TabsContent", M = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, value: t, forceMount: n, children: c, ...o } = e, d = T(S, s), f = N(d.baseId, t), m = P(d.baseId, t), i = t === d.value, a = v.useRef(i);
+    return v.useEffect(() => {
+      const l = requestAnimationFrame(() => a.current = !1);
+      return () => cancelAnimationFrame(l);
+    }, []), /* @__PURE__ */ u(w, { present: n || i, children: ({ present: l }) => /* @__PURE__ */ u(
+      b.div,
+      {
+        "data-state": i ? "active" : "inactive",
+        "data-orientation": d.orientation,
+        role: "tabpanel",
+        "aria-labelledby": f,
+        hidden: !l,
+        id: m,
+        tabIndex: 0,
+        ...o,
+        ref: r,
+        style: {
+          ...e.style,
+          animationDuration: a.current ? "0s" : void 0
+        },
+        children: l && c
+      }
+    ) });
+  }
+);
+M.displayName = S;
+function N(e, r) {
+  return `${e}-trigger-${r}`;
+}
+function P(e, r) {
+  return `${e}-content-${r}`;
+}
+var U = I, W = _, X = A, Y = M;
+export {
+  Y as Content,
+  W as List,
+  U as Root,
+  I as Tabs,
+  M as TabsContent,
+  _ as TabsList,
+  A as TabsTrigger,
+  X as Trigger,
+  Q as createTabsScope
+};

package/dist/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-context/dist/index.js

@@ -0,0 +1,55 @@
+import * as i from "react";
+import { jsx as h } from "react/jsx-runtime";
+function $(t, x = []) {
+  let o = [];
+  function C(u, e) {
+    const n = i.createContext(e), r = o.length;
+    o = [...o, e];
+    const m = (a) => {
+      var v;
+      const { scope: c, children: S, ...p } = a, f = ((v = c == null ? void 0 : c[t]) == null ? void 0 : v[r]) || n, _ = i.useMemo(() => p, Object.values(p));
+      return /* @__PURE__ */ h(f.Provider, { value: _, children: S });
+    };
+    m.displayName = u + "Provider";
+    function d(a, c) {
+      var f;
+      const S = ((f = c == null ? void 0 : c[t]) == null ? void 0 : f[r]) || n, p = i.useContext(S);
+      if (p) return p;
+      if (e !== void 0) return e;
+      throw new Error(`\`${a}\` must be used within \`${u}\``);
+    }
+    return [m, d];
+  }
+  const s = () => {
+    const u = o.map((e) => i.createContext(e));
+    return function(n) {
+      const r = (n == null ? void 0 : n[t]) || u;
+      return i.useMemo(
+        () => ({ [`__scope${t}`]: { ...n, [t]: r } }),
+        [n, r]
+      );
+    };
+  };
+  return s.scopeName = t, [C, l(s, ...x)];
+}
+function l(...t) {
+  const x = t[0];
+  if (t.length === 1) return x;
+  const o = () => {
+    const C = t.map((s) => ({
+      useScope: s(),
+      scopeName: s.scopeName
+    }));
+    return function(u) {
+      const e = C.reduce((n, { useScope: r, scopeName: m }) => {
+        const a = r(u)[`__scope${m}`];
+        return { ...n, ...a };
+      }, {});
+      return i.useMemo(() => ({ [`__scope${x.scopeName}`]: e }), [e]);
+    };
+  };
+  return o.scopeName = x.scopeName, o;
+}
+export {
+  $ as createContextScope
+};

package/dist/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence/dist/index.js

@@ -0,0 +1,75 @@
+import * as a from "react";
+import { useComposedRefs as E } from "../../../../../react-compose-refs/dist/index.js";
+import { useLayoutEffect as M } from "../../../../../react-use-layout-effect/dist/index.js";
+function T(n, e) {
+  return a.useReducer((r, t) => {
+    const o = e[r][t];
+    return o != null ? o : r;
+  }, n);
+}
+var R = (n) => {
+  const { present: e, children: r } = n, t = v(e), o = typeof r == "function" ? r({ present: t.isPresent }) : a.Children.only(r), c = E(t.ref, P(o));
+  return typeof r == "function" || t.isPresent ? a.cloneElement(o, { ref: c }) : null;
+};
+R.displayName = "Presence";
+function v(n) {
+  const [e, r] = a.useState(), t = a.useRef({}), o = a.useRef(n), c = a.useRef("none"), A = n ? "mounted" : "unmounted", [N, s] = T(A, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  return a.useEffect(() => {
+    const i = l(t.current);
+    c.current = N === "mounted" ? i : "none";
+  }, [N]), M(() => {
+    const i = t.current, m = o.current;
+    if (m !== n) {
+      const u = c.current, d = l(i);
+      n ? s("MOUNT") : d === "none" || (i == null ? void 0 : i.display) === "none" ? s("UNMOUNT") : s(m && u !== d ? "ANIMATION_OUT" : "UNMOUNT"), o.current = n;
+    }
+  }, [n, s]), M(() => {
+    var i;
+    if (e) {
+      let m;
+      const p = (i = e.ownerDocument.defaultView) != null ? i : window, u = (f) => {
+        const g = l(t.current).includes(f.animationName);
+        if (f.target === e && g && (s("ANIMATION_END"), !o.current)) {
+          const O = e.style.animationFillMode;
+          e.style.animationFillMode = "forwards", m = p.setTimeout(() => {
+            e.style.animationFillMode === "forwards" && (e.style.animationFillMode = O);
+          });
+        }
+      }, d = (f) => {
+        f.target === e && (c.current = l(t.current));
+      };
+      return e.addEventListener("animationstart", d), e.addEventListener("animationcancel", u), e.addEventListener("animationend", u), () => {
+        p.clearTimeout(m), e.removeEventListener("animationstart", d), e.removeEventListener("animationcancel", u), e.removeEventListener("animationend", u);
+      };
+    } else
+      s("ANIMATION_END");
+  }, [e, s]), {
+    isPresent: ["mounted", "unmountSuspended"].includes(N),
+    ref: a.useCallback((i) => {
+      i && (t.current = getComputedStyle(i)), r(i);
+    }, [])
+  };
+}
+function l(n) {
+  return (n == null ? void 0 : n.animationName) || "none";
+}
+function P(n) {
+  var t, o;
+  let e = (t = Object.getOwnPropertyDescriptor(n.props, "ref")) == null ? void 0 : t.get, r = e && "isReactWarning" in e && e.isReactWarning;
+  return r ? n.ref : (e = (o = Object.getOwnPropertyDescriptor(n, "ref")) == null ? void 0 : o.get, r = e && "isReactWarning" in e && e.isReactWarning, r ? n.props.ref : n.props.ref || n.ref);
+}
+export {
+  R as Presence
+};

package/dist/scss/componentStyles.scss

@@ -52,4 +52,5 @@
 @use 'components/Detail/detail';
 @use 'patterns/DetailList/detailList';
 @use 'components/PinchZoom/pinchZoom';
+@use 'components/Tabs/tabs';
 @use 'components/SeldonImage/seldonImage';

package/dist/scss/components/Tabs/_tabs.scss

@@ -0,0 +1,75 @@
+@use '../../allPartials' as *;
+
+.#{$px}-tabs-container {
+  @include text($body2);
+
+  width: 100%;
+
+  &__tabs-list {
+    display: flex;
+    gap: 1rem;
+    overflow: hidden; /* Prevent overflow */
+    padding: 0 $padding-md;
+    position: relative;
+  }
+
+  &__tabs-trigger {
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    padding: 0 0 $padding-sm;
+    transition:
+      background 0.2s ease,
+      font-weight 0.2s ease-out,
+      border-bottom 0.2s ease-out;
+
+    &:focus-visible {
+      box-shadow: rgb(11, 11, 12) 0 0 0 1px inset;
+      outline: none;
+    }
+
+    .#{$px}-text {
+      color: $button-hover;
+      cursor: pointer;
+      font-size: $body-size2;
+      line-height: $body-line-height-size2;
+
+      &:hover {
+        color: $pure-black;
+      }
+    }
+  }
+
+  &__tabs-trigger[data-state='active'] {
+    border-bottom: 2px solid $pure-black;
+    color: $pure-black;
+
+    &:focus-visible {
+      box-shadow: rgb(11, 11, 12) 0 0 0 1px inset;
+      outline: none;
+    }
+    .#{$px}-text {
+      color: $pure-black;
+      font-variation-settings: 'wght' 600;
+
+      &:hover {
+        color: $button-hover;
+      }
+    }
+  }
+
+  /* Underline effect for active tab */
+  &__full-bleed-underline {
+    background: $light-gray;
+    bottom: 0;
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    transition: transform 0.2s ease; /* Underline animation */
+  }
+
+  &__tabs-content {
+    padding: 20px 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.76.0",
+  "version": "1.77.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -45,6 +45,7 @@
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@types/dompurify": "^3.0.5",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",