@phillips/seldon 1.75.4 → 1.77.0

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

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

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,4 +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,14 +1,14 @@
-import { PaddingTokens as f, SpacingTokens as l, defaultYear as m, emailValidation as p, encodeURLSearchParams as s, findChildrenExcludingTypes as d, findChildrenOfType as i, generatePaddingClassName as u, getCommonProps as x, noOp as n, 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 { default as A } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as h } from "./site-furniture/Footer/Footer.js";
-import { Grid as N } from "./components/Grid/Grid.js";
-import { default as w } from "./site-furniture/Header/Header.js";
-import { default as G } from "./components/Navigation/Navigation.js";
-import { default as H } from "./components/Navigation/NavigationItem/NavigationItem.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";
+import { default as v } from "./site-furniture/Header/Header.js";
+import { default as H } from "./components/Navigation/Navigation.js";
+import { default as E } from "./components/Navigation/NavigationItem/NavigationItem.js";
 import { default as O } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
 import { default as U } from "./components/Navigation/NavigationList/NavigationList.js";
 import { default as F } from "./patterns/HeroBanner/HeroBanner.js";
@@ -21,21 +21,21 @@ import { default as ee } from "./components/Row/Row.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 pe } 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 ue } from "./patterns/Subscribe/Subscribe.js";
-import { SubscriptionState as ne } from "./patterns/Subscribe/types.js";
+import { default as ne } from "./patterns/Subscribe/Subscribe.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 Ae } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as he } from "./components/Text/types.js";
-import { default as Ne } from "./components/Text/Text.js";
-import { TextSymbolVariants as we } from "./components/TextSymbol/types.js";
-import { default as Ge } from "./components/TextSymbol/TextSymbol.js";
-import { default as He } from "./components/Accordion/Accordion.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";
+import { TextSymbolVariants as ve } from "./components/TextSymbol/types.js";
+import { default as He } from "./components/TextSymbol/TextSymbol.js";
+import { default as Ee } from "./components/Accordion/Accordion.js";
 import { default as Oe } from "./components/Accordion/AccordionItem.js";
 import { AccordionItemVariant as Ue, AccordionVariants as ze } from "./components/Accordion/types.js";
 import { default as We } from "./patterns/UserManagement/UserManagement.js";
@@ -50,49 +50,56 @@ import { default as $e } from "./components/Video/Video.js";
 import { default as oo } from "./patterns/LanguageSelector/LanguageSelector.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/CollapsibleTrigger.js";
-import { SeldonProvider as uo } from "./providers/SeldonProvider/SeldonProvider.js";
-import { default as no } from "./components/PageContentWrapper/PageContentWrapper.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 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 Ao } from "./patterns/DetailList/DetailList.js";
-import { DetailListAlignment as ho } from "./patterns/DetailList/types.js";
-import { default as No } from "./components/PinchZoom/PinchZoom.js";
-import { default as wo } from "./components/SeldonImage/SeldonImage.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/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 {
-  He as Accordion,
+  Ee as Accordion,
   Oe as AccordionItem,
   Ue as AccordionItemVariant,
   ze as AccordionVariants,
+  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 CollapsibleTrigger,
+  so as CollapsibleContent,
+  po as CollapsibleTrigger,
   ro as ContentPeek,
-  bo as Detail,
-  Ao as DetailList,
-  ho as DetailListAlignment,
-  Te as Drawer,
+  Vo as Detail,
+  Bo as DetailList,
+  wo as DetailListAlignment,
+  be as Drawer,
   Xe as Dropdown,
-  A as ErrorBoundary,
-  h as Footer,
-  N as Grid,
+  B as ErrorBoundary,
+  w as Footer,
+  D as Grid,
   te as GridItem,
   ae as GridItemAlign,
-  w as Header,
+  v as Header,
   F as HeroBanner,
-  b as IconButton,
+  V as IconButton,
   Y as Input,
   oo as LanguageSelector,
   j as Link,
@@ -100,42 +107,47 @@ export {
   _ as LinkList,
   J as LinkVariants,
   Pe as Modal,
-  G as Navigation,
-  H as NavigationItem,
+  H as Navigation,
+  E as NavigationItem,
   O as NavigationItemTrigger,
   U as NavigationList,
   f as PaddingTokens,
   C as Page,
-  no as PageContentWrapper,
-  be as Pagination,
-  No as PinchZoom,
+  io as PageContentWrapper,
+  Ve as Pagination,
+  Do as PinchZoom,
   ee as Row,
+  Oo as SaleHeaderBanner,
+  Uo as SaleHeaderBrowseAuctions,
+  Fo as SaleHeaderCountdown,
   le as Search,
-  wo as SeldonImage,
-  uo as SeldonProvider,
-  pe as Select,
+  Eo as SeldonImage,
+  no as SeldonProvider,
+  me as Select,
   ce as Social,
   l as SpacingTokens,
   de as SplitPanel,
-  Ae as StatefulViewingsList,
-  ue as Subscribe,
-  ne as SubscriptionState,
+  Be as StatefulViewingsList,
+  ne as Subscribe,
+  ie as SubscriptionState,
   qe as SupportedLanguages,
-  Ne as Text,
-  we as TextSymbolVariants,
-  Ge as TextSymbols,
-  he as TextVariants,
+  vo as TabsContainer,
+  Ho as TabsContent,
+  De as Text,
+  ve as TextSymbolVariants,
+  He as TextSymbols,
+  we as TextVariants,
   We as UserManagement,
   $e as Video,
   Ce as ViewingsList,
-  m as defaultYear,
-  p as emailValidation,
-  s as encodeURLSearchParams,
+  s as defaultYear,
+  m as emailValidation,
+  p as encodeURLSearchParams,
   d as findChildrenExcludingTypes,
-  i as findChildrenOfType,
-  u as generatePaddingClassName,
+  u as findChildrenOfType,
+  n as generatePaddingClassName,
   x as getCommonProps,
-  n as noOp,
+  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/patterns/SaleHeaderBanner/SaleHeaderBanner.d.ts

@@ -0,0 +1,49 @@
+import { ComponentProps } from 'react';
+import { AuctionState } from './types';
+export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
+    /**
+     * What is the title of the auction?
+     */
+    auctionTitle: React.ReactNode;
+    /**
+     * The URL of the banner image
+     */
+    imageSrcUrl: string;
+    /**
+     * Where is the auction taking place?
+     */
+    location: React.ReactNode;
+    occurrenceInformation: {
+        /**
+         * Depending on auction state, when does the auction open or close
+         */
+        date: React.ReactNode;
+        /**
+         * Clarifies the date based on the auction state
+         */
+        occurrenceLabel: React.ReactNode;
+    }[];
+    /**
+     * What is the current state of the auction?
+     */
+    auctionState: AuctionState;
+    /**
+     * What text should the CTA button display?
+     */
+    ctaLabel?: React.ReactNode;
+    /**
+     * What action does the CTA take?
+     */
+    onClick?: () => void;
+}
+/**
+ * ## Overview
+ *
+ * Sale header banner component, supports 3 states of the auction: pre-sale, open for bidding, and closed.
+ *
+ * [Figma Link](https://www.figma.com/design/OvBXAq48blO1r4qYbeBPjW/RW---Sale-Page-(PLP)?node-id=1-6&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-saleheaderbanner--overview)
+ */
+declare const SaleHeaderBanner: import("react").ForwardRefExoticComponent<Omit<SaleHeaderBannerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default SaleHeaderBanner;

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -0,0 +1,55 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { getCommonProps as u } from "../../utils/index.js";
+import C from "../../node_modules/classnames/index.js";
+import j from "../../components/SeldonImage/SeldonImage.js";
+import { AuctionState as _ } from "./types.js";
+import { TextVariants as s } from "../../components/Text/types.js";
+import t from "../../components/Text/Text.js";
+import F from "../../components/PageContentWrapper/PageContentWrapper.js";
+import H from "../../components/Button/Button.js";
+const P = S(
+  ({
+    auctionTitle: o,
+    imageSrcUrl: f,
+    location: g,
+    auctionState: n,
+    occurrenceInformation: N,
+    ctaLabel: h = "Register to Bid",
+    onClick: v,
+    children: m,
+    className: $,
+    ...i
+  }, c) => {
+    const { className: a, ...l } = u(i, "SaleHeaderBanner"), B = n === _.openForBidding, d = n === _.past;
+    return /* @__PURE__ */ r("div", { ...l, className: C(a, $), ...i, ref: c, children: [
+      /* @__PURE__ */ e(
+        j,
+        {
+          aspectRatio: "16/9",
+          src: f,
+          alt: String(o),
+          objectFit: "cover",
+          className: `${a}__image`
+        }
+      ),
+      /* @__PURE__ */ e(F, { className: `${a}__stack-wrapper`, ...l, ...i, ref: c, children: /* @__PURE__ */ r("div", { className: `${a}__stack`, children: [
+        B && m,
+        /* @__PURE__ */ e(t, { variant: s.title1, children: o }),
+        /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__location`, children: g }),
+        /* @__PURE__ */ r("div", { className: `${a}__occurrence-details`, children: [
+          N.map(({ date: p, occurrenceLabel: x }) => /* @__PURE__ */ r("div", { className: `${a}__occurrence-details-text`, children: [
+            /* @__PURE__ */ e(t, { variant: s.string2, children: x }),
+            /* @__PURE__ */ e(t, { variant: s.string2, className: `${a}__date`, children: p })
+          ] }, String(p))),
+          d && m
+        ] }),
+        !d && /* @__PURE__ */ e(H, { className: `${a}__cta`, onClick: v, children: h })
+      ] }) })
+    ] });
+  }
+);
+P.displayName = "SaleHeaderBanner";
+export {
+  P as default
+};

package/dist/patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+export interface SaleHeaderBrowseAuctionsProps extends ComponentProps<'div'> {
+    ctaLabel?: string;
+    ctaText?: string;
+}
+declare const SaleHeaderBrowseAuctions: import("react").ForwardRefExoticComponent<Omit<SaleHeaderBrowseAuctionsProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export default SaleHeaderBrowseAuctions;

package/dist/patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js

@@ -0,0 +1,20 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { getCommonProps as m } from "../../utils/index.js";
+import { TextVariants as n } from "../../components/Text/types.js";
+import l from "../../components/Text/Text.js";
+import "../../components/Link/types.js";
+import c from "../../components/Link/Link.js";
+const d = i(
+  ({ ctaText: r = "View Calendar", ctaLabel: a = "Browse Upcoming Sale", className: f, ...o }, p) => {
+    const { className: s } = m(o, "SaleHeaderBanner");
+    return /* @__PURE__ */ t("div", { className: `${s}__occurrence-details-text`, children: [
+      /* @__PURE__ */ e(l, { variant: n.string2, children: a }),
+      /* @__PURE__ */ e(c, { href: "/calendar", children: r })
+    ] });
+  }
+);
+d.displayName = "SaleHeaderBrowseAuctions";
+export {
+  d as default
+};

package/dist/patterns/SaleHeaderBanner/SaleHeaderCountdown.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+export interface SaleHeaderCountdownProps extends ComponentProps<'div'> {
+    label?: string;
+    daysLabel?: string;
+    hoursLabel?: string;
+}
+declare const SaleHeaderCountdown: import("react").ForwardRefExoticComponent<Omit<SaleHeaderCountdownProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default SaleHeaderCountdown;

package/dist/patterns/SaleHeaderBanner/SaleHeaderCountdown.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { getCommonProps as f } from "../../utils/index.js";
+import { TextVariants as e } from "../../components/Text/types.js";
+import r from "../../components/Text/Text.js";
+const h = c(
+  ({ label: n = "Lots Close in", daysLabel: s = "Days", hoursLabel: t = "Hours", className: p, ...o }, i) => {
+    const { className: m, ...d } = f(o, "SaleHeaderBanner");
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        id: "PLACEHOLDER FOR TIMER COMPONENT",
+        className: `${m}__countdown-container`,
+        ...d,
+        ...o,
+        ref: i,
+        children: [
+          /* @__PURE__ */ l(r, { variant: e.heading5, children: n }),
+          /* @__PURE__ */ a(r, { variant: e.heading5, children: [
+            "2 ",
+            s
+          ] }),
+          /* @__PURE__ */ a(r, { variant: e.heading5, children: [
+            "17 ",
+            t
+          ] })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "SaleHeaderCountdown";
+export {
+  h as default
+};

package/dist/patterns/SaleHeaderBanner/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SaleHeaderBanner, type SaleHeaderBannerProps } from './SaleHeaderBanner';
+export { default as SaleHeaderBrowseAuctions, type SaleHeaderBrowseAuctionsProps } from './SaleHeaderBrowseAuctions';
+export { default as SaleHeaderCountdown, type SaleHeaderCountdownProps } from './SaleHeaderCountdown';
+export { AuctionState } from './types';

package/dist/patterns/SaleHeaderBanner/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum AuctionState {
+    preSale = "PRESALE",
+    openForBidding = "OPEN_FOR_BIDDING",
+    past = "PAST"
+}

package/dist/patterns/SaleHeaderBanner/types.js

@@ -0,0 +1,4 @@
+var p = /* @__PURE__ */ ((r) => (r.preSale = "PRESALE", r.openForBidding = "OPEN_FOR_BIDDING", r.past = "PAST", r))(p || {});
+export {
+  p as AuctionState
+};

package/dist/scss/componentStyles.scss

@@ -44,6 +44,7 @@
 @use 'patterns/ViewingsList/viewingsList';
 @use 'patterns/Subscribe/subscribe';
 @use 'patterns/Social/social';
+@use 'patterns/SaleHeaderBanner/saleHeaderBanner';
 
 // Site Furniture
 @use 'site-furniture/Header/header';
@@ -51,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/dist/scss/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -0,0 +1,70 @@
+@use '../../allPartials' as *;
+
+.#{$px}-sale-header-banner {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: $spacing-md;
+
+  @include media($size-md, $type: 'min') {
+    flex-direction: row-reverse;
+
+    &__image,
+    &__stack-wrapper {
+      flex: 0 50%;
+    }
+  }
+
+  &__stack {
+    align-items: start;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    padding: $spacing-md 0;
+  }
+
+  // update when adding in actual countdown timer
+  &__countdown-container {
+    align-items: center;
+    border-bottom: 1px solid $light-gray;
+    display: flex;
+    gap: $spacing-sm;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    width: 100%;
+  }
+
+  &__location {
+    font-variation-settings: 'wght' 600;
+    margin: $margin-xsm 0;
+  }
+
+  &__occurrence-details {
+    display: flex;
+    margin-bottom: 1.5rem;
+
+    &-text {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      &:first-child {
+        padding-right: $spacing-md;
+      }
+
+      &:not(:first-child) {
+        border-left: 1px solid $keyline-gray;
+        padding: 0 $spacing-md;
+      }
+    }
+  }
+
+  &__date {
+    font-variation-settings: 'wght' 600;
+  }
+
+  &__cta {
+    margin: $spacing-sm 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.75.4",
+  "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",