@phillips/seldon 1.213.0 → 1.214.0-beta.1

package/dist/components/ComboBox/ComboBox.js

@@ -1,8 +1,8 @@
 import { jsxs as T, jsx as i } from "react/jsx-runtime";
-import { Root as ht, Trigger as _t, Portal as vt, Content as Ct } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { Root as ht, Trigger as _t, Portal as vt, Content as bt } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
 import d from "../../node_modules/classnames/index.js";
-import { Command as bt, CommandInput as yt, CommandList as $t, CommandGroup as wt, CommandItem as gt } from "../../node_modules/cmdk/dist/index.js";
-import Nt, { useState as B, useCallback as g, useRef as k, useMemo as x } from "react";
+import { Command as Ct, CommandInput as yt, CommandList as $t, CommandGroup as wt, CommandItem as gt } from "../../node_modules/cmdk/dist/index.js";
+import Nt, { useState as B, useCallback as g, useRef as x, useMemo as k } from "react";
 import { useOnClickOutside as It } from "../../node_modules/usehooks-ts/dist/index.js";
 import "../../assets/formatted/AccountActive.js";
 import "../../assets/formatted/Account.js";
@@ -33,7 +33,7 @@ import Tt from "../../assets/formatted/ChevronDown.js";
 import "../../assets/formatted/ChevronLeft.js";
 import "../../assets/formatted/ChevronRight.js";
 import "../../assets/formatted/ChevronUp.js";
-import kt from "../../assets/formatted/CloseX.js";
+import xt from "../../assets/formatted/CloseX.js";
 import "../../assets/formatted/ConditionReport.js";
 import "../../assets/formatted/Delete.js";
 import "../../assets/formatted/Download.js";
@@ -84,12 +84,15 @@ import "../../assets/formatted/VolumeMaximum.js";
 import "../../assets/formatted/VolumeMid.js";
 import "../../assets/formatted/VolumeMinimum.js";
 import "../../assets/formatted/WeChat.js";
+import "../../assets/formatted/Clock.js";
 import "../../assets/formatted/LiveNow.js";
-import { getCommonProps as xt, useNormalizedInputProps as Lt } from "../../utils/index.js";
+import { getCommonProps as kt, useNormalizedInputProps as Lt } from "../../utils/index.js";
 import U from "../IconButton/IconButton.js";
 import { ButtonVariants as W } from "../Button/types.js";
 import { usePrevious as Ot } from "../../utils/usePrevious.js";
-const Dt = Nt.forwardRef(function({
+import { TextVariants as Vt } from "../Text/types.js";
+import Dt from "../Text/Text.js";
+const Mt = Nt.forwardRef(function({
   options: n = [],
   className: X,
   id: s,
@@ -111,19 +114,19 @@ const Dt = Nt.forwardRef(function({
   invalidText: it,
   countOfCharsBeforeDropdown: j = 0,
   ...at
-}, D) {
-  const { className: e, ...lt } = xt({ id: s }, "ComboBox"), st = Tt, nt = kt, q = Lt({
+}, V) {
+  const { className: e, ...lt } = kt({ id: s }, "ComboBox"), st = Tt, nt = xt, q = Lt({
     id: s,
     invalid: N,
     invalidText: it,
     type: "text"
-  }), [f, z] = B(!1), [mt, ct] = B(""), G = Ot(p), V = g((t) => t.label || t.value, []), [o, C] = B(() => {
+  }), [f, z] = B(!1), [mt, ct] = B(""), G = Ot(p), D = g((t) => t.label || t.value, []), [o, b] = B(() => {
     if (p !== void 0) {
       const t = n.find((r) => r.value === p);
-      return t ? t.displayValue || V(t) : "";
+      return t ? t.displayValue || D(t) : "";
     }
     return "";
-  }), b = k(null), y = k(null), $ = k(!1), M = k(null), m = g((t) => V(t), [V]), h = p !== void 0, R = h ? p : mt, a = x(() => n.find((t) => t.value === R) || null, [n, R]), _ = x(() => a ? a.displayValue || m(a) : "", [a, m]), c = x(() => {
+  }), C = x(null), y = x(null), $ = x(!1), M = x(null), m = g((t) => D(t), [D]), h = p !== void 0, R = h ? p : mt, a = k(() => n.find((t) => t.value === R) || null, [n, R]), _ = k(() => a ? a.displayValue || m(a) : "", [a, m]), c = k(() => {
     if (!o || a && o === _)
       return n;
     const t = o.toLowerCase().trim();
@@ -147,20 +150,20 @@ const Dt = Nt.forwardRef(function({
     (t) => {
       h || ct(t.value);
       const r = t.displayValue || m(t);
-      C(r), u && u(t.value, t), l(!1), $.current = !0, requestAnimationFrame(() => {
+      b(r), u && u(t.value, t), l(!1), $.current = !0, requestAnimationFrame(() => {
         $.current = !1;
       });
     },
     [h, u, l, m]
   ), pt = (t) => {
-    l(!1), $.current = !0, t.preventDefault(), t.stopPropagation(), u && h && u("", null), C(""), y.current?.focus(), requestAnimationFrame(() => {
+    l(!1), $.current = !0, t.preventDefault(), t.stopPropagation(), u && h && u("", null), b(""), y.current?.focus(), requestAnimationFrame(() => {
       $.current = !1;
     });
   }, ut = () => {
     z(!f), y.current?.focus();
   }, ft = (t) => {
-    C(t), t !== "" && c.length > 0 && l(!0, t);
-  }, K = x(() => {
+    b(t), t !== "" && c.length > 0 && l(!0, t);
+  }, K = k(() => {
     if (h) {
       if (p !== G)
         return a ? _ : o;
@@ -174,9 +177,9 @@ const Dt = Nt.forwardRef(function({
   }, [h, o, p, G, a, _]), E = (t) => {
     if (a) {
       const r = _;
-      r !== K && !t && C(r);
+      r !== K && !t && b(r);
     } else
-      C("");
+      b("");
   }, F = g(() => {
     const t = n.filter((r) => {
       const w = m(r).toLowerCase(), P = r.value.toLowerCase(), A = r.displayValue?.toLowerCase(), v = o.toLowerCase();
@@ -184,9 +187,9 @@ const Dt = Nt.forwardRef(function({
     });
     t.length === 1 && I(t[0]);
   }, [o, n, I, m]);
-  return It(b, (t) => {
-    t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || b.current?.contains(t.target) || t.target === b.current || (F(), E(), l(!1));
-  }), /* @__PURE__ */ T("div", { ref: D, className: d(e, X), id: s, ...lt, ...at, children: [
+  return It(C, (t) => {
+    t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || C.current?.contains(t.target) || t.target === C.current || (F(), E(), l(!1));
+  }), /* @__PURE__ */ T("div", { ref: V, className: d(e, X), id: s, ...lt, ...at, children: [
     L && /* @__PURE__ */ i(
       "input",
       {
@@ -195,14 +198,16 @@ const Dt = Nt.forwardRef(function({
         id: L,
         value: R || "",
         ref: (t) => {
-          typeof D == "function" && t && D(t);
+          typeof V == "function" && t && V(t);
         }
       }
     ),
-    /* @__PURE__ */ T("div", { ref: b, className: `${e}__wrapper`, children: [
+    /* @__PURE__ */ T("div", { ref: C, className: `${e}__wrapper`, children: [
       /* @__PURE__ */ i(
-        "label",
+        Dt,
         {
+          element: "label",
+          variant: Vt.labelMedium,
           htmlFor: `${s}-input`,
           className: d(`${e}__label`, {
             [`${e}__label--hidden`]: et,
@@ -213,7 +218,7 @@ const Dt = Nt.forwardRef(function({
         }
       ),
       /* @__PURE__ */ i(
-        bt,
+        Ct,
         {
           loop: !0,
           onKeyDown: (t) => {
@@ -304,7 +309,7 @@ const Dt = Nt.forwardRef(function({
               }
             ) }),
             f && /* @__PURE__ */ i(vt, { container: rt?.current || document.body, children: /* @__PURE__ */ i(
-              Ct,
+              bt,
               {
                 className: `${e}__content`,
                 "aria-label": tt,
@@ -316,7 +321,7 @@ const Dt = Nt.forwardRef(function({
                   document.activeElement !== y.current && y.current?.focus();
                 },
                 style: {
-                  width: b.current?.offsetWidth || "100%"
+                  width: C.current?.offsetWidth || "100%"
                 },
                 children: /* @__PURE__ */ i($t, { className: `${e}__list`, children: c.length > 0 ? /* @__PURE__ */ i(wt, { className: `${e}__group`, children: c.map((t) => /* @__PURE__ */ i(
                   gt,
@@ -336,11 +341,11 @@ const Dt = Nt.forwardRef(function({
           ] })
         }
       ),
-      q.validation ? q.validation : /* @__PURE__ */ i("p", { className: d(`${e}__validation`), children: " " })
+      q.validation ? q.validation : /* @__PURE__ */ i("p", { className: d(`${e}__empty-validation`), children: " " })
     ] })
   ] });
 });
-Dt.displayName = "ComboBox";
+Mt.displayName = "ComboBox";
 export {
-  Dt as default
+  Mt as default
 };

package/dist/components/ComposedModal/ComposedModal.js

@@ -1,58 +1,58 @@
-import { jsxs as o, jsx as s, Fragment as $ } from "react/jsx-runtime";
-import g from "../../node_modules/classnames/index.js";
+import { jsxs as o, jsx as e, Fragment as _ } from "react/jsx-runtime";
+import h from "../../node_modules/classnames/index.js";
 import { forwardRef as x } from "react";
-import { getCommonProps as b, noOp as C } from "../../utils/index.js";
-import M from "../Divider/Divider.js";
+import { getCommonProps as $, noOp as b } from "../../utils/index.js";
+import g from "../Divider/Divider.js";
 import y from "../Modal/Modal.js";
-import { TextVariants as t } from "../Text/types.js";
-import c from "../Text/Text.js";
+import { TextVariants as C } from "../Text/types.js";
+import M from "../Text/Text.js";
 const j = x(
   ({
-    children: p,
-    className: n,
-    overlayClassName: u,
-    isOpen: f = !1,
-    onClose: h = C,
-    maxHeightValue: N = "60vh",
-    title: r,
+    children: i,
+    className: t,
+    overlayClassName: P,
+    isOpen: c = !1,
+    onClose: p = b,
+    maxHeightValue: f = "60vh",
+    title: N,
     footerContent: m,
-    secondaryButton: d,
-    primaryButton: i,
-    id: e,
+    secondaryButton: r,
+    primaryButton: d,
+    id: s,
     ...l
-  }, _) => {
+  }, n) => {
     const {
       className: a,
-      "data-testid": P,
+      "data-testid": T,
       ...v
-    } = b({ id: e, ...l }, "ComposedModal");
+    } = $({ id: s, ...l }, "ComposedModal");
     return /* @__PURE__ */ o(
       y,
       {
-        isOpen: f,
-        onClose: h,
+        isOpen: c,
+        onClose: p,
         ...l,
         ...v,
-        className: g(`${a}`, n),
-        id: e,
-        ref: _,
+        className: h(`${a}`, t),
+        id: s,
+        ref: n,
+        title: N,
         children: [
-          r ? /* @__PURE__ */ s(c, { variant: t.heading3, className: `${a}__title`, children: r }) : null,
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ e(
             "div",
             {
               className: `${a}__body`,
-              style: { "--max-modal-body-height": N },
-              children: p
+              style: { "--max-modal-body-height": f },
+              children: i
             }
           ),
-          (d || i || m) && /* @__PURE__ */ o($, { children: [
-            /* @__PURE__ */ s(M, { className: `${a}__divider`, id: `${e}-divider` }),
+          (r || d || m) && /* @__PURE__ */ o(_, { children: [
+            /* @__PURE__ */ e(g, { className: `${a}__divider`, id: `${s}-divider` }),
             /* @__PURE__ */ o("div", { className: `${a}__btns-group`, children: [
-              d,
-              i
+              r,
+              d
             ] }),
-            m && /* @__PURE__ */ s(c, { variant: t.heading5, className: `${a}__disclaimer`, children: m })
+            m && /* @__PURE__ */ e(M, { variant: C.bodySmall, className: `${a}__disclaimer`, children: m })
           ] })
         ]
       }

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

@@ -17,6 +17,7 @@ export declare const Playground: {
                 sessionTime: string;
             }[];
             viewingTimes: string[];
+            viewingTimesLabel: string;
             location: string;
             mapLink: string;
         };

package/dist/components/Countdown/Countdown.js

@@ -1,72 +1,111 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { forwardRef as M, useState as j, useEffect as z, useMemo as P } from "react";
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { forwardRef as z, useState as P, useEffect as S, useMemo as _ } from "react";
 import { getCommonProps as E } from "../../utils/index.js";
 import F from "../../node_modules/classnames/index.js";
 import { SupportedLanguages as H } from "../../types/commonTypes.js";
-import { CountdownVariants as m } from "./types.js";
-import { Duration as i } from "./Duration.js";
-import { zhCN as R } from "../../node_modules/date-fns/locale/zh-CN.js";
-import { enUS as S } from "../../node_modules/date-fns/locale/en-US.js";
-import { differenceInDays as h } from "../../node_modules/date-fns/differenceInDays.js";
-import { differenceInHours as w } from "../../node_modules/date-fns/differenceInHours.js";
-import { differenceInMinutes as y } from "../../node_modules/date-fns/differenceInMinutes.js";
-import { differenceInSeconds as I } from "../../node_modules/date-fns/differenceInSeconds.js";
-import { differenceInMilliseconds as U } from "../../node_modules/date-fns/differenceInMilliseconds.js";
-const V = M(
+import { CountdownVariants as c } from "./types.js";
+import { Duration as f } from "./Duration.js";
+import { TextVariants as w } from "../Text/types.js";
+import R from "../Text/Text.js";
+import { zhCN as U } from "../../node_modules/date-fns/locale/zh-CN.js";
+import { enUS as k } from "../../node_modules/date-fns/locale/en-US.js";
+import { differenceInDays as y } from "../../node_modules/date-fns/differenceInDays.js";
+import { differenceInHours as I } from "../../node_modules/date-fns/differenceInHours.js";
+import { differenceInMinutes as x } from "../../node_modules/date-fns/differenceInMinutes.js";
+import { differenceInSeconds as C } from "../../node_modules/date-fns/differenceInSeconds.js";
+import { differenceInMilliseconds as q } from "../../node_modules/date-fns/differenceInMilliseconds.js";
+const A = z(
   ({
     endDateTime: o,
-    formatDurationStr: l,
-    label: u = "Lots Close in",
+    formatDurationStr: m,
+    label: d = "Lots Close in",
     intervalDescription: N,
-    className: C,
+    className: b,
     locale: $ = "en",
-    showBottomBorder: b = !0,
-    variant: f = m.default,
-    getCurrentDateTime: t = () => /* @__PURE__ */ new Date(),
-    ...d
-  }, g) => {
-    const { className: r, ...L } = E(d, "Countdown"), [n, _] = j(t() || /* @__PURE__ */ new Date()), c = $ === H.zh ? R : S, s = {
-      days: h(o, n) > 0 ? h(o, n) : 0,
-      hours: w(o, n) > 0 ? w(o, n) % 24 : 0,
-      minutes: y(o, n) > 0 ? y(o, n) % 60 : 0,
-      seconds: (I(o, n) > 0 ? I(o, n) % 60 : 0) % 60
+    showBottomBorder: g = !0,
+    variant: i = c.default,
+    getCurrentDateTime: e = () => /* @__PURE__ */ new Date(),
+    ...p
+  }, L) => {
+    const { className: r, ...M } = E(p, "Countdown"), [n, V] = P(e() || /* @__PURE__ */ new Date()), a = $ === H.zh ? U : k, s = {
+      days: y(o, n) > 0 ? y(o, n) : 0,
+      hours: I(o, n) > 0 ? I(o, n) % 24 : 0,
+      minutes: x(o, n) > 0 ? x(o, n) % 60 : 0,
+      seconds: (C(o, n) > 0 ? C(o, n) % 60 : 0) % 60
     };
-    z(() => {
-      const a = setInterval(() => {
-        _(t() || /* @__PURE__ */ new Date());
+    S(() => {
+      const u = setInterval(() => {
+        V(e() || /* @__PURE__ */ new Date());
       }, 1e3);
-      return () => clearInterval(a);
-    }, [o, t]);
-    const v = P(() => {
-      const a = t();
-      return !!a && new Date(o).getTime() > a.getTime();
-    }, [o, t]), x = U(o, n) <= 3 * 60 * 1e3;
-    return v ? /* @__PURE__ */ p(
+      return () => clearInterval(u);
+    }, [o, e]);
+    const j = _(() => {
+      const u = e();
+      return !!u && new Date(o).getTime() > u.getTime();
+    }, [o, e]), v = q(o, n) <= 3 * 60 * 1e3, l = i === c.sm ? w.labelSmall : w.labelMedium;
+    return j ? /* @__PURE__ */ h(
       "div",
       {
-        ...L,
-        className: F(r, C, {
-          [`${r}--compact`]: f === m.compact,
-          [`${r}--show-bottom-border`]: b,
-          [`${r}--closing-lot`]: x
+        ...M,
+        className: F(r, b, {
+          [`${r}--compact`]: i === c.compact,
+          [`${r}--sm`]: i === c.sm,
+          [`${r}--show-bottom-border`]: g,
+          [`${r}--closing-lot`]: v
         }),
-        ...d,
-        ref: g,
+        ...p,
+        ref: L,
         children: [
-          /* @__PURE__ */ p("div", { className: `${r}__countdown-container`, role: "timer", "aria-label": u, children: [
-            /* @__PURE__ */ e("span", { className: `${r}__label`, children: u }),
-            s.days > 0 ? /* @__PURE__ */ e(i, { duration: s, unit: "days", locale: c, formatDurationStr: l }) : null,
-            s.days > 0 || s.hours > 0 ? /* @__PURE__ */ e(i, { duration: s, unit: "hours", locale: c, formatDurationStr: l }) : null,
-            s.days === 0 ? /* @__PURE__ */ e(i, { duration: s, unit: "minutes", locale: c, formatDurationStr: l }) : null,
-            s.days === 0 && s.hours === 0 ? /* @__PURE__ */ e(i, { duration: s, unit: "seconds", locale: c, formatDurationStr: l }) : null
+          /* @__PURE__ */ h("div", { className: `${r}__countdown-container`, role: "timer", "aria-label": d, children: [
+            /* @__PURE__ */ t(R, { variant: l, children: d }),
+            s.days > 0 ? /* @__PURE__ */ t(
+              f,
+              {
+                duration: s,
+                unit: "days",
+                locale: a,
+                formatDurationStr: m,
+                textVariant: l
+              }
+            ) : null,
+            s.days > 0 || s.hours > 0 ? /* @__PURE__ */ t(
+              f,
+              {
+                duration: s,
+                unit: "hours",
+                locale: a,
+                formatDurationStr: m,
+                textVariant: l
+              }
+            ) : null,
+            s.days === 0 ? /* @__PURE__ */ t(
+              f,
+              {
+                duration: s,
+                unit: "minutes",
+                locale: a,
+                formatDurationStr: m,
+                textVariant: l
+              }
+            ) : null,
+            s.days === 0 && s.hours === 0 ? /* @__PURE__ */ t(
+              f,
+              {
+                duration: s,
+                unit: "seconds",
+                locale: a,
+                formatDurationStr: m,
+                textVariant: l
+              }
+            ) : null
           ] }),
-          f === m.default ? /* @__PURE__ */ e("span", { children: N }) : null
+          i === c.default ? /* @__PURE__ */ t("span", { children: N }) : null
         ]
       }
     ) : null;
   }
 );
-V.displayName = "Countdown";
+A.displayName = "Countdown";
 export {
-  V as default
+  A as default
 };

package/dist/components/Countdown/Duration.d.ts

@@ -1,8 +1,10 @@
 import { Duration as DurationValue, DurationUnit, Locale } from 'date-fns';
+import { TextVariants } from '../Text';
 export interface DurationProps {
     duration: DurationValue;
     unit: DurationUnit;
     locale: Locale;
     formatDurationStr?: (duration: string) => string;
+    textVariant?: TextVariants;
 }
-export declare const Duration: ({ duration, unit, locale, formatDurationStr }: DurationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Duration: ({ duration, unit, locale, formatDurationStr, textVariant, }: DurationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Countdown/Duration.js

@@ -1,13 +1,21 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { px as m } from "../../utils/index.js";
-import { formatDuration as p } from "../../node_modules/date-fns/formatDuration.js";
-const u = ({ duration: a, unit: s, locale: n, formatDurationStr: i = (r) => r }) => {
-  const r = `${m}-duration`, t = p(a, { format: [s], zero: !0, locale: n }).split(" ");
-  return /* @__PURE__ */ e("div", { className: r, children: [
-    /* @__PURE__ */ o("span", { children: t[0].padStart(2, "0") }),
-    /* @__PURE__ */ o("span", { children: i(t[1]) })
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { px as d } from "../../utils/index.js";
+import { TextVariants as l } from "../Text/types.js";
+import i from "../Text/Text.js";
+import { formatDuration as c } from "../../node_modules/date-fns/formatDuration.js";
+const b = ({
+  duration: m,
+  unit: s,
+  locale: e,
+  formatDurationStr: n = (r) => r,
+  textVariant: t = l.labelMedium
+}) => {
+  const r = `${d}-duration`, o = c(m, { format: [s], zero: !0, locale: e }).split(" ");
+  return /* @__PURE__ */ p("div", { className: r, children: [
+    /* @__PURE__ */ a(i, { variant: t, children: o[0].padStart(2, "0") }),
+    /* @__PURE__ */ a(i, { variant: t, children: n(o[1]) })
   ] });
 };
 export {
-  u as Duration
+  b as Duration
 };

package/dist/components/Countdown/types.d.ts

@@ -1,4 +1,5 @@
 export declare enum CountdownVariants {
     default = "default",
-    compact = "compact"
+    compact = "compact",
+    sm = "sm"
 }

package/dist/components/Countdown/types.js

@@ -1,4 +1,4 @@
-var e = /* @__PURE__ */ ((c) => (c.default = "default", c.compact = "compact", c))(e || {});
+var e = /* @__PURE__ */ ((c) => (c.default = "default", c.compact = "compact", c.sm = "sm", c))(e || {});
 export {
   e as CountdownVariants
 };

package/dist/components/DescriptiveRadioButton/DescriptiveRadioButton.js

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

package/dist/components/Detail/Detail.d.ts

@@ -1,9 +1,11 @@
 import { default as React, ComponentProps } from 'react';
+import { TextVariants } from '../Text';
 export interface DetailProps extends ComponentProps<'div'> {
     hasWrap?: boolean;
     label: React.ReactNode;
     subLabel?: React.ReactNode;
     value: React.ReactNode;
+    textVariant?: TextVariants;
 }
 /**
  * ## Overview

package/dist/components/Detail/Detail.js

@@ -1,21 +1,32 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { getCommonProps as f } from "../../utils/index.js";
-import m from "../../node_modules/classnames/index.js";
-const N = p(
-  ({ className: o = "", hasWrap: t = !0, label: i, subLabel: e, value: n, ...s }, c) => {
-    const { className: a, ...d } = f(s, "Detail");
-    return /* @__PURE__ */ l("div", { ...d, className: m(a, o), ...s, ref: c, children: [
-      /* @__PURE__ */ l("dt", { className: m(`${a}__label`, { [`${a}__label--no-wrap`]: !t }), children: [
-        i,
-        " ",
-        e ? /* @__PURE__ */ r("span", { children: e }) : null
-      ] }),
-      /* @__PURE__ */ r("dd", { className: `${a}__value`, children: n })
+import { getCommonProps as N } from "../../utils/index.js";
+import r from "../../node_modules/classnames/index.js";
+import { TextVariants as b } from "../Text/types.js";
+import m from "../Text/Text.js";
+const h = p(
+  ({ className: t = "", hasWrap: c = !0, label: n, subLabel: l, value: d, textVariant: s = b.labelMedium, ...o }, _) => {
+    const { className: a, ...f } = N(o, "Detail");
+    return /* @__PURE__ */ i("div", { ...f, className: r(a, t), ...o, ref: _, children: [
+      /* @__PURE__ */ i(
+        "dt",
+        {
+          className: r(`${a}__label-section`, {
+            [`${a}__label--no-wrap`]: !c,
+            [`${a}__label-section--has-sub-label`]: l
+          }),
+          children: [
+            /* @__PURE__ */ e(m, { variant: s, className: r(`${a}__label-section--label`), children: n }),
+            " ",
+            l ? /* @__PURE__ */ e(m, { className: `${a}__sub-label`, variant: s, children: l }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("dd", { className: `${a}__value`, children: /* @__PURE__ */ e(m, { variant: s, children: d }) })
     ] });
   }
 );
-N.displayName = "Detail";
+h.displayName = "Detail";
 export {
-  N as default
+  h as default
 };

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

@@ -8,8 +8,15 @@ export declare const Playground: {
     (props: DetailProps): import("react/jsx-runtime").JSX.Element;
     args: {
         label: string;
-        subLabel: string;
-        value: import("react/jsx-runtime").JSX.Element;
+        value: string;
     };
     argTypes: {};
 };
+export declare const WithSubLabel: {
+    (props: DetailProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        subLabel: string;
+        label: string;
+        value: string;
+    };
+};