@phillips/seldon 1.172.0 → 1.174.0

package/dist/components/DescriptiveRadioButton/DescriptiveRadioButton.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps } from 'react';
+export interface DescriptiveRadioButtonProps extends Omit<ComponentProps<'input'>, 'type'> {
+    /**
+     * Label for the radio button
+     */
+    labelText: string;
+    /**
+     * Optional description text for the radio button
+     */
+    description?: string;
+    /**
+     * Custom class name for the radio button input
+     */
+    className?: string;
+    /**
+     * Custom class name for the container element
+     */
+    containerClassName?: string;
+    /**
+     * Unique identifier for the radio button
+     */
+    id: string;
+}
+/**
+ * ## Overview
+ *
+ * Renders a styled radio button with a label and an optional description.
+ *
+ * [Figma Link](https://www.figma.com/design/kSxOhnqIhilZ9hIJd3bPgP/RW-Registration?node-id=2774-111402&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-descriptiveradiobutton--overview)
+ */
+declare const DescriptiveRadioButton: import('react').ForwardRefExoticComponent<Omit<DescriptiveRadioButtonProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export default DescriptiveRadioButton;

package/dist/components/DescriptiveRadioButton/DescriptiveRadioButton.js

@@ -0,0 +1,45 @@
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { getCommonProps as N } from "../../utils/index.js";
+import r from "../../node_modules/classnames/index.js";
+import c from "../Text/Text.js";
+import { TextVariants as n } from "../Text/types.js";
+const $ = u(
+  ({ labelText: m, description: a, className: d, containerClassName: l, id: _, ...t }, p) => {
+    const { className: e, ...f } = N(
+      t,
+      "descriptive-radio-button"
+    ), s = _, h = a ? `${s}-desc` : void 0;
+    return /* @__PURE__ */ o(
+      "label",
+      {
+        htmlFor: s,
+        className: r(`${e}__container`, l, {
+          [`${e}__container--selected`]: t.checked
+        }),
+        children: [
+          /* @__PURE__ */ i(
+            "input",
+            {
+              ...f,
+              ...t,
+              ref: p,
+              id: s,
+              type: "radio",
+              className: r(`${e}__input`, d),
+              checked: t.checked
+            }
+          ),
+          /* @__PURE__ */ o("span", { className: `${e}__label-content`, children: [
+            /* @__PURE__ */ i(c, { variant: n.string1, className: `${e}__label-text`, children: m }),
+            a && /* @__PURE__ */ i(c, { variant: n.string2, id: h, className: `${e}__description`, children: a })
+          ] })
+        ]
+      }
+    );
+  }
+);
+$.displayName = "DescriptiveRadioButton";
+export {
+  $ as default
+};

package/dist/components/DescriptiveRadioButton/DescriptiveRadioButton.stories.d.ts

@@ -0,0 +1,10 @@
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<import('./DescriptiveRadioButton').DescriptiveRadioButtonProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (): import("react/jsx-runtime").JSX.Element;
+    args: {};
+    argTypes: {};
+};

package/dist/components/DescriptiveRadioButton/DescriptiveRadioButton.test.d.ts

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

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

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

package/dist/components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps } from 'react';
+import { DescriptiveRadioButtonProps } from '../DescriptiveRadioButton/DescriptiveRadioButton';
+export interface DescriptiveRadioButtonGroupProps extends ComponentProps<'fieldset'> {
+    /**
+     * Legend for the fieldset
+     */
+    legendText: string;
+    /**
+     * Hide the legend visually
+     */
+    hideLegend?: boolean;
+    /**
+     * Array of options to render as DescriptiveRadioButton components
+     * Each option should include label, value, and optionally description and id
+     */
+    options: Array<Omit<DescriptiveRadioButtonProps, 'ref'>>;
+    /**
+     * Name attribute for the radio buttons
+     */
+    name: string;
+    /**
+     * Currently selected value
+     */
+    value: string;
+    /**
+     * Callback function when the selected value changes
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Custom class name for the fieldset
+     */
+    className?: string;
+}
+/**
+ * ## Overview
+ *
+ * [Figma Link](https://www.figma.com/design/kSxOhnqIhilZ9hIJd3bPgP/RW-Registration?node-id=2774-111402&m=dev)
+ *
+ * Renders a group of DescriptiveRadioButton components wrapped in a semantic fieldset.
+ */
+declare const DescriptiveRadioButtonGroup: import('react').ForwardRefExoticComponent<Omit<DescriptiveRadioButtonGroupProps, "ref"> & import('react').RefAttributes<HTMLFieldSetElement>>;
+export default DescriptiveRadioButtonGroup;

package/dist/components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js

@@ -0,0 +1,42 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { getCommonProps as v } from "../../utils/index.js";
+import b from "../../node_modules/classnames/index.js";
+import h from "../DescriptiveRadioButton/DescriptiveRadioButton.js";
+const N = g(
+  ({ legendText: t, hideLegend: d = !0, options: e, name: o, value: l, onValueChange: m, className: u, ...c }, n) => {
+    const { className: a, ...p } = v(c, "descriptive-radio-button-group");
+    if (!e || e.length === 0)
+      return null;
+    const s = `${o}_radio-button-group`;
+    return /* @__PURE__ */ f(
+      "fieldset",
+      {
+        ...p,
+        className: b(a, u),
+        ref: n,
+        name: o,
+        role: "radiogroup",
+        "aria-labelledby": s,
+        children: [
+          /* @__PURE__ */ i("legend", { id: s, className: d ? `${a}__sr-only` : void 0, children: t }),
+          e.map((r) => /* @__PURE__ */ i(
+            h,
+            {
+              ...r,
+              name: o,
+              checked: l === r.value,
+              onChange: () => m(String(r.value ?? "")),
+              id: r.id
+            },
+            r.id
+          ))
+        ]
+      }
+    );
+  }
+);
+N.displayName = "DescriptiveRadioButtonGroup";
+export {
+  N as default
+};

package/dist/components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.stories.d.ts

@@ -0,0 +1,21 @@
+import { DescriptiveRadioButtonGroupProps } from './DescriptiveRadioButtonGroup';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<DescriptiveRadioButtonGroupProps, "ref"> & import('react').RefAttributes<HTMLFieldSetElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: DescriptiveRadioButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        legendText: string;
+        name: string;
+        value: string;
+        options: {
+            value: string;
+            labelText: string;
+            description: string;
+            id: string;
+        }[];
+    };
+    argTypes: {};
+};

package/dist/components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.test.d.ts

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

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

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

package/dist/components/Input/Input.d.ts

@@ -4,6 +4,14 @@ export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'>
      * Optional className to be applied to the `<input>` node
      */
     className?: string;
+    /**
+     * Optional adornment to be displayed before the input value
+     */
+    inputAdornment?: string | React.ReactNode;
+    /**
+     * Optional position to place the adornment. Defaults to 'start'
+     */
+    adornmentPosition?: 'start' | 'end';
     /**
      * Optionally provide the default value of the `<input>`. Should not be passed into controlled input!
      */

package/dist/components/Input/Input.js

@@ -1,85 +1,99 @@
-import { jsxs as P, jsx as d } from "react/jsx-runtime";
-import * as R from "react";
-import n from "../../node_modules/classnames/index.js";
-import { px as t, useNormalizedInputProps as k } from "../../utils/index.js";
-const z = R.forwardRef(
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import * as z from "react";
+import p from "../../node_modules/classnames/index.js";
+import { px as t, useNormalizedInputProps as F } from "../../utils/index.js";
+const q = z.forwardRef(
   ({
-    className: p,
-    defaultValue: o,
-    disabled: u,
-    hideLabel: $,
-    id: a,
-    inline: m,
-    invalid: c,
-    invalidText: _,
-    labelText: b,
-    onChange: h,
-    onClick: f,
-    placeholder: v,
-    readOnly: e,
-    size: x = "md",
-    type: s = "text",
-    value: w,
-    warn: N,
-    warnText: y,
-    isSkeletonLoading: l,
-    ...r
-  }, I) => {
-    const i = k({
-      disabled: u,
-      id: a,
-      invalid: c,
-      invalidText: _,
-      readOnly: e,
-      type: s,
-      warn: N,
-      warnText: y
-    }), j = n(`${t}-${s}-input`, `${t}-input`, `${t}-input--${x}`, {
-      [`${t}-input--inline`]: m,
-      [`${t}-input--readonly`]: e,
-      [`${t}-input--disabled`]: i.disabled,
-      [`${t}-input--invalid`]: i.invalid,
-      [`${t}-input--warn`]: i.warn,
-      [`${p}__wrapper`]: p,
-      [`${t}-input--hidden`]: r.hidden
-    });
-    return /* @__PURE__ */ P("div", { className: j, children: [
-      /* @__PURE__ */ d(
+    className: s,
+    inputAdornment: i,
+    adornmentPosition: l = "start",
+    defaultValue: _,
+    disabled: h,
+    hideLabel: w,
+    id: e,
+    inline: b,
+    invalid: N,
+    invalidText: f,
+    labelText: v,
+    onChange: x,
+    onClick: y,
+    placeholder: I,
+    readOnly: d,
+    size: T = "md",
+    type: u = "text",
+    value: C,
+    warn: P,
+    warnText: j,
+    isSkeletonLoading: r,
+    ...o
+  }, k) => {
+    const a = F({
+      disabled: h,
+      id: e,
+      invalid: N,
+      invalidText: f,
+      readOnly: d,
+      type: u,
+      warn: P,
+      warnText: j
+    }), R = p(`${t}-${u}-input`, `${t}-input`, `${t}-input--${T}`, {
+      [`${t}-input--inline`]: b,
+      [`${t}-input--readonly`]: d,
+      [`${t}-input--disabled`]: a.disabled,
+      [`${t}-input--invalid`]: a.invalid,
+      [`${t}-input--warn`]: a.warn,
+      [`${s}__wrapper`]: s,
+      [`${t}-input--hidden`]: o.hidden
+    }), m = [
+      "text",
+      "number",
+      "password",
+      "email",
+      "tel",
+      "url",
+      "search",
+      "date",
+      "datetime-local",
+      "month",
+      "time",
+      "week"
+    ].includes(a.type ?? ""), $ = {
+      className: i && m ? p(`${t}-input__wrapper__input`, s, { [`${t}-skeleton`]: r }) : p(`${t}-input__input`, s, { [`${t}-skeleton`]: r }),
+      "data-testid": e,
+      disabled: a.disabled,
+      id: e,
+      onChange: x,
+      onClick: y,
+      placeholder: r ? "" : I,
+      readOnly: d,
+      ref: k,
+      type: a.type,
+      ...a.type !== "checkbox" && a.type !== "radio" ? { value: C, defaultValue: _ } : {},
+      ...o
+    };
+    return /* @__PURE__ */ c("div", { className: R, children: [
+      /* @__PURE__ */ n(
         "label",
         {
-          "data-testid": `label-${a}`,
-          htmlFor: a,
-          className: n(`${t}-input__label`, {
-            [`${t}-input__label--hidden`]: $,
-            [`${t}-skeleton`]: l
+          "data-testid": `label-${e}`,
+          htmlFor: e,
+          className: p(`${t}-input__label`, {
+            [`${t}-input__label--hidden`]: w,
+            [`${t}-skeleton`]: r
           }),
-          children: b
+          children: v
         }
       ),
-      /* @__PURE__ */ d(
-        "input",
-        {
-          className: n(`${t}-input__input`, p, {
-            [`${t}-skeleton`]: l
-          }),
-          "data-testid": a,
-          disabled: i.disabled,
-          id: a,
-          onChange: h,
-          onClick: f,
-          placeholder: l ? "" : v,
-          readOnly: e,
-          ref: I,
-          type: i.type,
-          ...i.type !== "checkbox" && i.type !== "radio" ? { value: w, defaultValue: o } : {},
-          ...r
-        }
-      ),
-      i.validation ? i.validation : /* @__PURE__ */ d("p", { className: n(`${t}-input__validation`), children: " " })
+      i && m ? /* @__PURE__ */ c("div", { className: `${t}-input__wrapper`, "data-testid": `wrapper-${e}`, children: [
+        l === "start" && /* @__PURE__ */ n("span", { className: `${t}-input__wrapper__adornment`, id: "adornment", "data-testid": `adornment-${e}`, children: i }),
+        /* @__PURE__ */ n("input", { ...$ }),
+        l === "end" && /* @__PURE__ */ n("span", { className: `${t}-input__wrapper__adornment`, id: "adornment", "data-testid": `adornment-${e}`, children: i })
+      ] }) : /* @__PURE__ */ n("input", { ...$ }),
+      a.validation ? a.validation : /* @__PURE__ */ n("p", { className: p(`${t}-input__validation`), children: " " })
     ] });
   }
 );
-z.displayName = "Input";
+q.displayName = "Input";
 export {
-  z as default
+  q as default
 };

package/dist/components/Input/Input.stories.d.ts

@@ -80,6 +80,17 @@ export declare const CheckboxInput: {
                 type: string;
             };
         };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
         labelText: {
             control: {
                 type: string;
@@ -177,6 +188,17 @@ export declare const RangeInput: {
                 type: string;
             };
         };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
         labelText: {
             control: {
                 type: string;
@@ -270,6 +292,17 @@ export declare const ControlledInput: {
                 type: string;
             };
         };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
         labelText: {
             control: {
                 type: string;
@@ -329,6 +362,104 @@ export declare const CustomLabel: {
     };
     argTypes: {};
 };
+export declare const InputWithAdornment: {
+    ({ playgroundWidth, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        labelText: string;
+        playgroundWidth: number;
+        size: string;
+        inputAdornment: import("react/jsx-runtime").JSX.Element;
+        adornmentPosition: string;
+    };
+    argTypes: {
+        className: {
+            control: {
+                type: string;
+            };
+        };
+        defaultValue: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        invalid: {
+            control: {
+                type: string;
+            };
+        };
+        invalidText: {
+            control: {
+                type: string;
+            };
+        };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        labelText: {
+            control: {
+                type: string;
+            };
+        };
+        onChange: {
+            action: string;
+        };
+        onClick: {
+            action: string;
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+        };
+        playgroundWidth: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        type: {
+            control: {
+                type: string;
+            };
+        };
+        value: {
+            control: {
+                type: string;
+            };
+        };
+        warn: {
+            control: {
+                type: string;
+            };
+        };
+        warnText: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
 export declare const Playground: {
     ({ playgroundWidth, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
     args: {
@@ -369,6 +500,17 @@ export declare const Playground: {
                 type: string;
             };
         };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
         labelText: {
             control: {
                 type: string;

package/dist/index.d.ts

@@ -89,3 +89,5 @@ export * from './patterns/BidSnapshot';
 export * from './patterns/FilterMenu';
 export * from './patterns/ObjectTile';
 export * from './utils/hooks';
+export * from './components/DescriptiveRadioButton';
+export * from './components/DescriptiveRadioButtonGroup';

package/dist/index.js

@@ -1,14 +1,14 @@
 import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, focusElementById as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
-import { SSRMediaQuery as P, ssrMediaQueryStyle as B } from "./providers/SeldonProvider/utils.js";
+import { SSRMediaQuery as B, ssrMediaQueryStyle as P } from "./providers/SeldonProvider/utils.js";
 import { usePendingState as I } from "./utils/hooks.js";
-import { AuctionStatus as V, LotStatus as b, SupportedLanguages as y } from "./types/commonTypes.js";
-import { default as k } from "./components/Button/Button.js";
-import { ButtonVariants as F } from "./components/Button/types.js";
-import { default as D } from "./components/IconButton/IconButton.js";
+import { AuctionStatus as V, LotStatus as b, SupportedLanguages as v } from "./types/commonTypes.js";
+import { default as h } from "./components/Button/Button.js";
+import { ButtonVariants as w } from "./components/Button/types.js";
+import { default as F } from "./components/IconButton/IconButton.js";
 import { default as M } from "./components/Accordion/Accordion.js";
 import { default as E } from "./components/Accordion/AccordionItem.js";
-import { AccordionItemVariant as U, AccordionVariants as O } from "./components/Accordion/types.js";
+import { AccordionItemVariant as R, AccordionVariants as U } from "./components/Accordion/types.js";
 import { default as Q } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
@@ -27,17 +27,17 @@ import { default as ie } from "./components/Detail/Detail.js";
 import { default as ne } from "./components/Drawer/Drawer.js";
 import { default as ce } from "./components/Dropdown/Dropdown.js";
 import { default as Ce } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as Pe } from "./components/Grid/Grid.js";
+import { default as Be } from "./components/Grid/Grid.js";
 import { default as Ae } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as Le } from "./components/GridItem/types.js";
 import { default as be } from "./components/Input/Input.js";
-import { default as he } from "./components/Link/Link.js";
-import { LinkVariants as we } from "./components/Link/types.js";
-import { default as ve } from "./components/LinkBlock/LinkBlock.js";
+import { default as ye } from "./components/Link/Link.js";
+import { LinkVariants as ke } from "./components/Link/types.js";
+import { default as De } from "./components/LinkBlock/LinkBlock.js";
 import { default as He } from "./components/LinkList/LinkList.js";
 import { default as Ne } from "./components/Modal/Modal.js";
 import { default as Ge } from "./components/Navigation/Navigation.js";
-import { default as Oe } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as Ue } from "./components/Navigation/NavigationItem/NavigationItem.js";
 import { default as Qe } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
 import { default as ze } from "./components/Navigation/NavigationList/NavigationList.js";
 import { default as Ye } from "./components/Pagination/Pagination.js";
@@ -53,17 +53,17 @@ import { default as pt } from "./components/Tabs/TabsContent.js";
 import { Tag as it, default as xt } from "./components/Tags/Tags.js";
 import { TextAlignments as gt, TextVariants as ct } from "./components/Text/types.js";
 import { default as Ct } from "./components/Text/Text.js";
-import { TextSymbolVariants as Pt } from "./components/TextSymbol/types.js";
+import { TextSymbolVariants as Bt } from "./components/TextSymbol/types.js";
 import { default as At } from "./components/TextSymbol/TextSymbol.js";
 import { default as Lt } from "./components/Video/Video.js";
 import { default as bt } from "./patterns/DetailList/DetailList.js";
-import { DetailListAlignment as ht } from "./patterns/DetailList/types.js";
-import { default as wt } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
-import { default as vt } from "./patterns/HeroBanner/HeroBanner.js";
+import { DetailListAlignment as yt } from "./patterns/DetailList/types.js";
+import { default as kt } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
+import { default as Dt } from "./patterns/HeroBanner/HeroBanner.js";
 import { default as Ht } from "./patterns/LanguageSelector/LanguageSelector.js";
 import { default as Nt } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
 import { default as Gt } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
-import { default as Ot } from "./patterns/Social/Social.js";
+import { default as Ut } from "./patterns/Social/Social.js";
 import { default as Qt } from "./patterns/Subscribe/Subscribe.js";
 import { SubscriptionState as zt } from "./patterns/Subscribe/types.js";
 import { AuthState as Yt } from "./patterns/UserManagement/types.js";
@@ -79,17 +79,17 @@ import { default as uo } from "./components/PageContentWrapper/PageContentWrappe
 import { default as xo } from "./components/PhoneNumberPicker/PhoneNumberPicker.js";
 import { default as go } from "./patterns/FiltersInline/FiltersInline.js";
 import { FilterButtonIconType as So, FilterButtonType as Co } from "./patterns/FiltersInline/types.js";
-import { default as Po } from "./patterns/SaleCard/SaleCard.js";
+import { default as Bo } from "./patterns/SaleCard/SaleCard.js";
 import { SaleCardActions as Ao } from "./patterns/SaleCard/SaleCardActions.js";
 import { SaleCardVariants as Lo } from "./patterns/SaleCard/types.js";
 import { default as bo } from "./patterns/ViewingDetails/ViewingDetails.js";
-import { default as ho } from "./site-furniture/Footer/Footer.js";
-import { default as wo } from "./site-furniture/Header/Header.js";
-import { default as vo } from "./components/AddToCalendar/AddToCalendar.js";
+import { default as yo } from "./site-furniture/Footer/Footer.js";
+import { default as ko } from "./site-furniture/Header/Header.js";
+import { default as Do } from "./components/AddToCalendar/AddToCalendar.js";
 import { default as Ho } from "./components/Article/Article.js";
 import { default as No } from "./components/Countdown/Countdown.js";
 import { CountdownVariants as Go } from "./components/Countdown/types.js";
-import { default as Oo } from "./components/Divider/Divider.js";
+import { default as Uo } from "./components/Divider/Divider.js";
 import { default as Qo } from "./components/FavoritingTileButton/FavoritingTileButton.js";
 import { default as zo } from "./components/Filter/Filter.js";
 import { default as Yo } from "./components/Filter/FilterInput.js";
@@ -105,13 +105,15 @@ import { default as pr } from "./patterns/BidSnapshot/BidMessage.js";
 import { BidMessageVariants as ir, BidStatusEnum as xr } from "./patterns/BidSnapshot/types.js";
 import { default as gr } from "./patterns/FilterMenu/FilterMenu.js";
 import { default as Sr } from "./patterns/ObjectTile/ObjectTile.js";
+import { default as Tr } from "./components/DescriptiveRadioButton/DescriptiveRadioButton.js";
+import { default as Pr } from "./components/DescriptiveRadioButtonGroup/DescriptiveRadioButtonGroup.js";
 export {
   M as Accordion,
   E as AccordionItem,
-  U as AccordionItemVariant,
-  O as AccordionVariants,
+  R as AccordionItemVariant,
+  U as AccordionVariants,
   sr as AccountPageHeader,
-  vo as AddToCalendar,
+  Do as AddToCalendar,
   Ho as Article,
   V as AuctionStatus,
   Yt as AuthState,
@@ -120,8 +122,8 @@ export {
   dr as BidSnapshot,
   xr as BidStatusEnum,
   Q as Breadcrumb,
-  k as Button,
-  F as ButtonVariants,
+  h as Button,
+  w as ButtonVariants,
   Y as Carousel,
   q as CarouselArrows,
   K as CarouselContent,
@@ -136,15 +138,17 @@ export {
   pe as ContentPeekHeightUnits,
   No as Countdown,
   Go as CountdownVariants,
+  Tr as DescriptiveRadioButton,
+  Pr as DescriptiveRadioButtonGroup,
   ie as Detail,
   bt as DetailList,
-  ht as DetailListAlignment,
-  Oo as Divider,
+  yt as DetailListAlignment,
+  Uo as Divider,
   ne as Drawer,
   ce as Dropdown,
   Ce as ErrorBoundary,
   so as ExitGateCard,
-  wt as FavoritesCollectionTile,
+  kt as FavoritesCollectionTile,
   Qo as FavoritingTileButton,
   zo as Filter,
   So as FilterButtonIconType,
@@ -153,25 +157,25 @@ export {
   Yo as FilterInput,
   gr as FilterMenu,
   go as FiltersInline,
-  ho as Footer,
-  Pe as Grid,
+  yo as Footer,
+  Be as Grid,
   Ae as GridItem,
   Le as GridItemAlign,
-  wo as Header,
-  vt as HeroBanner,
+  ko as Header,
+  Dt as HeroBanner,
   z as Icon,
-  D as IconButton,
+  F as IconButton,
   be as Input,
   Ht as LanguageSelector,
-  he as Link,
-  ve as LinkBlock,
+  ye as Link,
+  De as LinkBlock,
   He as LinkList,
-  we as LinkVariants,
+  ke as LinkVariants,
   mo as Loader,
   b as LotStatus,
   Ne as Modal,
   Ge as Navigation,
-  Oe as NavigationItem,
+  Ue as NavigationItem,
   Qe as NavigationItemTrigger,
   ze as NavigationList,
   Sr as ObjectTile,
@@ -183,8 +187,8 @@ export {
   Ko as Pictogram,
   qe as PinchZoom,
   Ke as Row,
-  P as SSRMediaQuery,
-  Po as SaleCard,
+  B as SSRMediaQuery,
+  Bo as SaleCard,
   Ao as SaleCardActions,
   Lo as SaleCardVariants,
   Nt as SaleHeaderBanner,
@@ -194,13 +198,13 @@ export {
   eo as SeldonProvider,
   ot as Select,
   at as SelectVariants,
-  Ot as Social,
+  Ut as Social,
   f as SpacingTokens,
   st as SplitPanel,
   Kt as StatefulViewingsList,
   Qt as Subscribe,
   zt as SubscriptionState,
-  y as SupportedLanguages,
+  v as SupportedLanguages,
   dt as TabsContainer,
   pt as TabsContent,
   it as Tag,
@@ -208,7 +212,7 @@ export {
   Ct as Text,
   gt as TextAlignments,
   _o as TextArea,
-  Pt as TextSymbolVariants,
+  Bt as TextSymbolVariants,
   At as TextSymbols,
   ct as TextVariants,
   er as Toast,
@@ -227,7 +231,7 @@ export {
   x as getCommonProps,
   n as noOp,
   g as px,
-  B as ssrMediaQueryStyle,
+  P as ssrMediaQueryStyle,
   c as useNormalizedInputProps,
   I as usePendingState,
   ar as useToast

package/dist/scss/componentStyles.scss

@@ -53,6 +53,8 @@
 @use 'components/Toast/toast';
 @use 'components/ExitGateCard/exitGateCard';
 @use 'components/ComposedModal/composedModal';
+@use 'components/DescriptiveRadioButton/descriptiveRadioButton';
+@use 'components/DescriptiveRadioButtonGroup/descriptiveRadioButtonGroup';
 
 // Patterns
 @use 'patterns/HeroBanner/heroBanner';

package/dist/scss/components/DescriptiveRadioButton/_descriptiveRadioButton.scss

@@ -0,0 +1,52 @@
+@use '../../allPartials' as *;
+
+.#{$px}-descriptive-radio-button {
+  &__container {
+    align-items: flex-start;
+    background: $white;
+    border: 1px solid $light-gray;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    padding: $spacing-sm;
+
+    &--selected,
+    &:has(input:focus-visible) {
+      border: 1.5px solid $pure-black;
+    }
+  }
+
+  &__input {
+    accent-color: $light-gray;
+    cursor: pointer;
+    height: 1rem;
+    margin-right: $spacing-sm;
+    margin-top: 2px;
+    width: 1rem;
+
+    @media (min-width: $breakpoint-md) {
+      margin-top: $spacing-micro;
+    }
+  }
+
+  &__input:checked {
+    accent-color: $pure-black;
+  }
+
+  &__label-content {
+    align-items: flex-start;
+    cursor: pointer;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: $spacing-sm;
+  }
+
+  &__label-text {
+    font-variation-settings: 'wght' 600;
+  }
+
+  &__description {
+    display: block;
+  }
+}

package/dist/scss/components/DescriptiveRadioButtonGroup/_descriptiveRadioButtonGroup.scss

@@ -0,0 +1,27 @@
+@use '../../allPartials' as *;
+
+.#{$px}-descriptive-radio-button-group {
+  // Hide the fieldset border and padding
+  border: none;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  margin: 0;
+  padding: 0;
+
+  @media (min-width: $breakpoint-md) {
+    gap: $spacing-md;
+  }
+
+  // Visually hide the legend
+  &__sr-only {
+    border: 0 !important;
+    clip: rect(0, 0, 0, 0) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+  }
+}

package/dist/scss/components/Input/_input.scss

@@ -27,6 +27,53 @@ $lg: #{$px}-input--lg;
     }
   }
 
+  &__wrapper {
+    @include text($string2);
+
+    accent-color: $soft-black;
+    align-items: center;
+    border: 1px solid $keyline-gray;
+    border-radius: 0.1875rem;
+    display: inline-flex;
+    font-variation-settings: 'wght' 600;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+    padding: $padding-xsm;
+    position: relative;
+
+    &::placeholder {
+      font-variation-settings: 'wght' 400;
+    }
+
+    &:focus-visible,
+    &:focus-within {
+      outline: 1px solid $pure-black;
+    }
+
+    .#{$px}-input__wrapper__input,
+    .#{$px}-input__input {
+      border: none;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    &__adornment {
+      align-items: center;
+      display: flex;
+      margin-right: 0.25rem;
+      user-select: none;
+      user-select: none;
+      user-select: none;
+      user-select: none;
+      white-space: nowrap;
+    }
+  }
+
   &__input {
     @include text($string2);
 
@@ -60,7 +107,8 @@ $lg: #{$px}-input--lg;
     flex-flow: row wrap;
     gap: 1rem;
 
-    .#{$px}-input__input {
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
       align-self: center;
       width: unset;
     }
@@ -72,7 +120,8 @@ $lg: #{$px}-input--lg;
     cursor: default;
 
     .#{$px}-input__label,
-    .#{$px}-input__input {
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
       color: inherit;
     }
     .#{$px}-input__label:hover,
@@ -86,7 +135,8 @@ $lg: #{$px}-input--lg;
     pointer-events: none;
 
     .#{$px}-input__label,
-    .#{$px}-input__input {
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
       cursor: default;
     }
 
@@ -109,7 +159,8 @@ $lg: #{$px}-input--lg;
       color: $pure-black;
     }
 
-    .#{$px}-input__input {
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
       border: 1px solid $error-red;
       box-shadow: inset 0 0 3px 3px $error-pink;
 
@@ -117,6 +168,12 @@ $lg: #{$px}-input--lg;
         outline: 1px solid $error-red;
       }
     }
+
+    .#{$px}-input__wrapper .#{$px}-input__input {
+      border: none;
+      box-shadow: none;
+      outline: none;
+    }
   }
 
   // warn

package/dist/scss/components/Toggle/_toggle.scss

@@ -77,7 +77,8 @@ $lg: #{$px}-input--lg;
   }
 
   // Hide actual checkbox input
-  .#{$px}-input__input {
+  .#{$px}-input__input,
+  .#{$px}-input__wrapper {
     @include hidden;
 
     margin-bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.172.0",
+  "version": "1.174.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"