@homebound/beam 3.6.0 → 3.8.0

package/dist/truss.css

@@ -1,3 +1,4 @@
+:root { --t-spacing: 8px; }
 /* @truss p:1000 c:animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite */
 .animation_pulse_2s_cubic_bezier_0_4_0_0_6_1_infinite { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
 /* @truss p:1000 c:bd_0 */
@@ -30,18 +31,12 @@
 .bcGray300 { border-color: rgba(221, 220, 220, 1); }
 /* @truss p:2000 c:bcGray400 */
 .bcGray400 { border-color: rgba(201, 201, 201, 1); }
-/* @truss p:2000 c:bcGray600 */
-.bcGray600 { border-color: rgba(141, 141, 141, 1); }
 /* @truss p:2000 c:bcGray700 */
 .bcGray700 { border-color: rgba(100, 100, 100, 1); }
-/* @truss p:2000 c:bcRed400 */
-.bcRed400 { border-color: rgba(248, 113, 113, 1); }
-/* @truss p:2000 c:bcRed600 */
-.bcRed600 { border-color: rgba(220, 38, 38, 1); }
 /* @truss p:2000 c:bcTransparent */
 .bcTransparent { border-color: rgba(0,0,0,0); }
 /* @truss p:2000 c:bcWhite */
-.bcWhite { border-color: rgba(255,255,255,1); }
+.bcWhite { border-color: rgba(255, 255, 255, 1); }
 /* @truss p:2000 c:borderColor_currentColor */
 .borderColor_currentColor { border-color: currentColor; }
 /* @truss p:2000 c:borderRadius_0_0_0_8px */
@@ -91,13 +86,13 @@
 /* @truss p:2000 c:fn */
 .fn { flex: none; }
 /* @truss p:2000 c:gap0 */
-.gap0 { gap: 0px; }
+.gap0 { gap: calc(var(--t-spacing) * 0); }
 /* @truss p:2000 c:gap1 */
-.gap1 { gap: 8px; }
+.gap1 { gap: calc(var(--t-spacing) * 1); }
 /* @truss p:2000 c:gap2 */
-.gap2 { gap: 16px; }
+.gap2 { gap: calc(var(--t-spacing) * 2); }
 /* @truss p:2000 c:gap3 */
-.gap3 { gap: 24px; }
+.gap3 { gap: calc(var(--t-spacing) * 3); }
 /* @truss p:2000 c:gap_12px */
 .gap_12px { gap: 12px; }
 /* @truss p:2000 c:gap_4px */
@@ -190,6 +185,8 @@
 .animationDuration_800ms { animation-duration: 800ms; }
 /* @truss p:3000 c:animationIterationCount_infinite */
 .animationIterationCount_infinite { animation-iteration-count: infinite; }
+/* @truss p:3000 c:animationName_loadingDots */
+.animationName_loadingDots { animation-name: loadingDots; }
 /* @truss p:3000 c:animationName_spin */
 .animationName_spin { animation-name: spin; }
 /* @truss p:3000 c:animationTimingFunction_linear */
@@ -212,16 +209,12 @@
 .backgroundSize_100_100 { background-size: 100% 100%; }
 /* @truss p:3000 c:bgBlue100 */
 .bgBlue100 { background-color: rgba(219, 234, 254, 1); }
-/* @truss p:3000 c:bgBlue200 */
-.bgBlue200 { background-color: rgba(191, 219, 254, 1); }
 /* @truss p:3000 c:bgBlue50 */
 .bgBlue50 { background-color: rgba(239, 246, 255, 1); }
 /* @truss p:3000 c:bgBlue600 */
 .bgBlue600 { background-color: rgba(37, 99, 235, 1); }
 /* @truss p:3000 c:bgBlue700 */
 .bgBlue700 { background-color: rgba(29, 78, 216, 1); }
-/* @truss p:3000 c:bgBlue800 */
-.bgBlue800 { background-color: rgba(30, 64, 175, 1); }
 /* @truss p:3000 c:bgBlue900 */
 .bgBlue900 { background-color: rgba(30, 58, 138, 1); }
 /* @truss p:3000 c:bgGray100 */
@@ -234,8 +227,6 @@
 .bgGray400 { background-color: rgba(201, 201, 201, 1); }
 /* @truss p:3000 c:bgGray50 */
 .bgGray50 { background-color: rgba(255, 253, 253, 1); }
-/* @truss p:3000 c:bgGray600 */
-.bgGray600 { background-color: rgba(141, 141, 141, 1); }
 /* @truss p:3000 c:bgGray700 */
 .bgGray700 { background-color: rgba(100, 100, 100, 1); }
 /* @truss p:3000 c:bgGray800 */
@@ -256,12 +247,10 @@
 .bgRed700 { background-color: rgba(185, 28, 28, 1); }
 /* @truss p:3000 c:bgRed800 */
 .bgRed800 { background-color: rgba(153, 27, 27, 1); }
-/* @truss p:3000 c:bgRed900 */
-.bgRed900 { background-color: rgba(127, 29, 29, 1); }
 /* @truss p:3000 c:bgTransparent */
 .bgTransparent { background-color: rgba(0,0,0,0); }
 /* @truss p:3000 c:bgWhite */
-.bgWhite { background-color: rgba(255,255,255,1); }
+.bgWhite { background-color: rgba(255, 255, 255, 1); }
 /* @truss p:3000 c:bgYellow100 */
 .bgYellow100 { background-color: rgba(254, 249, 195, 1); }
 /* @truss p:3000 c:bgYellow200 */
@@ -270,16 +259,10 @@
 .bgYellow300 { background-color: rgba(253, 224, 71, 1); }
 /* @truss p:3000 c:bgYellow400 */
 .bgYellow400 { background-color: rgba(250, 204, 21, 1); }
-/* @truss p:3000 c:bgYellow900 */
-.bgYellow900 { background-color: rgba(113, 63, 18, 1); }
 /* @truss p:3000 c:bgc_rgba_36_36_36_0_6 */
 .bgc_rgba_36_36_36_0_6 { background-color: rgba(36,36,36,0.6); }
-/* @truss p:3000 c:blue200 */
-.blue200 { color: rgba(191, 219, 254, 1); }
 /* @truss p:3000 c:blue300 */
 .blue300 { color: rgba(147, 197, 253, 1); }
-/* @truss p:3000 c:blue400 */
-.blue400 { color: rgba(96, 165, 250, 1); }
 /* @truss p:3000 c:blue500 */
 .blue500 { color: rgba(59, 130, 246, 1); }
 /* @truss p:3000 c:blue600 */
@@ -301,13 +284,13 @@
 /* @truss p:3000 c:bshBasic */
 .bshBasic { box-shadow: 0px 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);; }
 /* @truss p:3000 c:bshDanger */
-.bshDanger { box-shadow: 0px 0px 0px 2px rgba(255,255,255,1), 0px 0px 0px 4px rgba(153, 27, 27, 1); }
+.bshDanger { box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(153, 27, 27, 1); }
 /* @truss p:3000 c:bshFocus */
-.bshFocus { box-shadow: 0px 0px 0px 2px rgba(255,255,255,1), 0px 0px 0px 4px rgba(29, 78, 216, 1); }
+.bshFocus { box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(29, 78, 216, 1); }
 /* @truss p:3000 c:bshModal */
 .bshModal { box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04); }
 /* @truss p:3000 c:cg3 */
-.cg3 { column-gap: 24px; }
+.cg3 { column-gap: calc(var(--t-spacing) * 3); }
 /* @truss p:3000 c:cli_inset_50 */
 .cli_inset_50 { clip: inset(50%); }
 /* @truss p:3000 c:clp_none */
@@ -472,8 +455,6 @@
 .pointerEvents_none { pointer-events: none; }
 /* @truss p:3000 c:red200 */
 .red200 { color: rgba(254, 202, 202, 1); }
-/* @truss p:3000 c:red400 */
-.red400 { color: rgba(248, 113, 113, 1); }
 /* @truss p:3000 c:red500 */
 .red500 { color: rgba(239, 68, 68, 1); }
 /* @truss p:3000 c:red600 */
@@ -527,7 +508,7 @@
 /* @truss p:3000 c:wbo_vertical */
 .wbo_vertical { -webkit-box-orient: vertical; }
 /* @truss p:3000 c:white */
-.white { color: rgba(255,255,255,1); }
+.white { color: rgba(255, 255, 255, 1); }
 /* @truss p:3000 c:whiteSpace_initial */
 .whiteSpace_initial { white-space: initial; }
 /* @truss p:3000 c:whiteSpace_normal */
@@ -566,8 +547,6 @@
 .z_999999 { z-index: 999999; }
 /* @truss p:3000.5 c:ai_var */
 .ai_var { align-items: var(--alignItems); }
-/* @truss p:3000.5 c:animationName_var */
-.animationName_var { animation-name: var(--animationName); }
 /* @truss p:3000.5 c:backgroundImage_var */
 .backgroundImage_var { background-image: var(--backgroundImage); }
 /* @truss p:3000.5 c:bgColor_var */
@@ -637,7 +616,7 @@
 /* @truss p:4000 c:bot_0 */
 .bot_0 { bottom: 0; }
 /* @truss p:4000 c:bottom0 */
-.bottom0 { bottom: 0px; }
+.bottom0 { bottom: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:bottom_4px */
 .bottom_4px { bottom: 4px; }
 /* @truss p:4000 c:brs_solid */
@@ -651,9 +630,9 @@
 /* @truss p:4000 c:h100 */
 .h100 { height: 100%; }
 /* @truss p:4000 c:h2 */
-.h2 { height: 16px; }
+.h2 { height: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:h5 */
-.h5 { height: 40px; }
+.h5 { height: calc(var(--t-spacing) * 5); }
 /* @truss p:4000 c:h_10px */
 .h_10px { height: 10px; }
 /* @truss p:4000 c:h_114px */
@@ -689,17 +668,17 @@
 /* @truss p:4000 c:l_0 */
 .l_0 { left: 0; }
 /* @truss p:4000 c:left0 */
-.left0 { left: 0px; }
+.left0 { left: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:left1 */
-.left1 { left: 8px; }
+.left1 { left: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:left3 */
-.left3 { left: 24px; }
-/* @truss p:4000 c:left_0px */
-.left_0px { left: 0px; }
+.left3 { left: calc(var(--t-spacing) * 3); }
+/* @truss p:4000 c:left_0 */
+.left_0 { left: calc(var(--t-spacing) * 0); }
+/* @truss p:4000 c:left_100 */
+.left_100 { left: calc(var(--t-spacing) * 100); }
 /* @truss p:4000 c:left_2px */
 .left_2px { left: 2px; }
-/* @truss p:4000 c:left_800px */
-.left_800px { left: 800px; }
 /* @truss p:4000 c:maxh_50 */
 .maxh_50 { max-height: 50%; }
 /* @truss p:4000 c:maxh_74px */
@@ -723,15 +702,15 @@
 /* @truss p:4000 c:maxw_550px */
 .maxw_550px { max-width: 550px; }
 /* @truss p:4000 c:mb0 */
-.mb0 { margin-bottom: 0px; }
+.mb0 { margin-bottom: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:mb1 */
-.mb1 { margin-bottom: 8px; }
+.mb1 { margin-bottom: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:mb2 */
-.mb2 { margin-bottom: 16px; }
+.mb2 { margin-bottom: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:mb3 */
-.mb3 { margin-bottom: 24px; }
+.mb3 { margin-bottom: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:mb4 */
-.mb4 { margin-bottom: 32px; }
+.mb4 { margin-bottom: calc(var(--t-spacing) * 4); }
 /* @truss p:4000 c:mb_12px */
 .mb_12px { margin-bottom: 12px; }
 /* @truss p:4000 c:mb_2px */
@@ -757,29 +736,29 @@
 /* @truss p:4000 c:minWidth_fit_content */
 .minWidth_fit_content { min-width: fit-content; }
 /* @truss p:4000 c:ml0 */
-.ml0 { margin-left: 0px; }
+.ml0 { margin-left: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:ml1 */
-.ml1 { margin-left: 8px; }
+.ml1 { margin-left: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:ml2 */
-.ml2 { margin-left: 16px; }
+.ml2 { margin-left: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:ml_12px */
 .ml_12px { margin-left: 12px; }
 /* @truss p:4000 c:ml_4px */
 .ml_4px { margin-left: 4px; }
-/* @truss p:4000 c:ml_neg8px */
-.ml_neg8px { margin-left: -8px; }
+/* @truss p:4000 c:ml_neg1 */
+.ml_neg1 { margin-left: calc(var(--t-spacing) * -1); }
 /* @truss p:4000 c:mla */
 .mla { margin-left: auto; }
 /* @truss p:4000 c:mr0 */
-.mr0 { margin-right: 0px; }
+.mr0 { margin-right: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:mr1 */
-.mr1 { margin-right: 8px; }
+.mr1 { margin-right: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:mr2 */
-.mr2 { margin-right: 16px; }
+.mr2 { margin-right: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:mr3 */
-.mr3 { margin-right: 24px; }
+.mr3 { margin-right: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:mr4 */
-.mr4 { margin-right: 32px; }
+.mr4 { margin-right: calc(var(--t-spacing) * 4); }
 /* @truss p:4000 c:mr_10px */
 .mr_10px { margin-right: 10px; }
 /* @truss p:4000 c:mr_12px */
@@ -791,11 +770,11 @@
 /* @truss p:4000 c:mra */
 .mra { margin-right: auto; }
 /* @truss p:4000 c:mt0 */
-.mt0 { margin-top: 0px; }
+.mt0 { margin-top: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:mt1 */
-.mt1 { margin-top: 8px; }
+.mt1 { margin-top: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:mt2 */
-.mt2 { margin-top: 16px; }
+.mt2 { margin-top: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:mt_12px */
 .mt_12px { margin-top: 12px; }
 /* @truss p:4000 c:mt_2px */
@@ -819,13 +798,13 @@
 /* @truss p:4000 c:oys */
 .oys { overflow-y: scroll; }
 /* @truss p:4000 c:pb0 */
-.pb0 { padding-bottom: 0px; }
+.pb0 { padding-bottom: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:pb1 */
-.pb1 { padding-bottom: 8px; }
+.pb1 { padding-bottom: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:pb2 */
-.pb2 { padding-bottom: 16px; }
+.pb2 { padding-bottom: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:pb3 */
-.pb3 { padding-bottom: 24px; }
+.pb3 { padding-bottom: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:pb_12px */
 .pb_12px { padding-bottom: 12px; }
 /* @truss p:4000 c:pb_25px */
@@ -837,15 +816,15 @@
 /* @truss p:4000 c:pb_6px */
 .pb_6px { padding-bottom: 6px; }
 /* @truss p:4000 c:pl0 */
-.pl0 { padding-left: 0px; }
+.pl0 { padding-left: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:pl1 */
-.pl1 { padding-left: 8px; }
+.pl1 { padding-left: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:pl2 */
-.pl2 { padding-left: 16px; }
+.pl2 { padding-left: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:pl3 */
-.pl3 { padding-left: 24px; }
+.pl3 { padding-left: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:pl4 */
-.pl4 { padding-left: 32px; }
+.pl4 { padding-left: calc(var(--t-spacing) * 4); }
 /* @truss p:4000 c:pl_10px */
 .pl_10px { padding-left: 10px; }
 /* @truss p:4000 c:pl_12px */
@@ -858,14 +837,16 @@
 .pl_4px { padding-left: 4px; }
 /* @truss p:4000 c:pl_6px */
 .pl_6px { padding-left: 6px; }
+/* @truss p:4000 c:pl_8px */
+.pl_8px { padding-left: 8px; }
 /* @truss p:4000 c:pr0 */
-.pr0 { padding-right: 0px; }
+.pr0 { padding-right: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:pr1 */
-.pr1 { padding-right: 8px; }
+.pr1 { padding-right: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:pr2 */
-.pr2 { padding-right: 16px; }
+.pr2 { padding-right: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:pr3 */
-.pr3 { padding-right: 24px; }
+.pr3 { padding-right: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:pr_10px */
 .pr_10px { padding-right: 10px; }
 /* @truss p:4000 c:pr_12px */
@@ -876,14 +857,16 @@
 .pr_4px { padding-right: 4px; }
 /* @truss p:4000 c:pr_6px */
 .pr_6px { padding-right: 6px; }
+/* @truss p:4000 c:pr_8px */
+.pr_8px { padding-right: 8px; }
 /* @truss p:4000 c:pt0 */
-.pt0 { padding-top: 0px; }
+.pt0 { padding-top: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:pt1 */
-.pt1 { padding-top: 8px; }
+.pt1 { padding-top: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:pt2 */
-.pt2 { padding-top: 16px; }
+.pt2 { padding-top: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:pt3 */
-.pt3 { padding-top: 24px; }
+.pt3 { padding-top: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:pt_12px */
 .pt_12px { padding-top: 12px; }
 /* @truss p:4000 c:pt_25px */
@@ -897,19 +880,19 @@
 /* @truss p:4000 c:r_0 */
 .r_0 { right: 0; }
 /* @truss p:4000 c:right0 */
-.right0 { right: 0px; }
+.right0 { right: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:right1 */
-.right1 { right: 8px; }
+.right1 { right: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:right3 */
-.right3 { right: 24px; }
+.right3 { right: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:right_12px */
 .right_12px { right: 12px; }
 /* @truss p:4000 c:top0 */
-.top0 { top: 0px; }
+.top0 { top: calc(var(--t-spacing) * 0); }
 /* @truss p:4000 c:top1 */
-.top1 { top: 8px; }
+.top1 { top: calc(var(--t-spacing) * 1); }
 /* @truss p:4000 c:top3 */
-.top3 { top: 24px; }
+.top3 { top: calc(var(--t-spacing) * 3); }
 /* @truss p:4000 c:top_2px */
 .top_2px { top: 2px; }
 /* @truss p:4000 c:top_48px */
@@ -923,7 +906,7 @@
 /* @truss p:4000 c:w100 */
 .w100 { width: 100%; }
 /* @truss p:4000 c:w2 */
-.w2 { width: 16px; }
+.w2 { width: calc(var(--t-spacing) * 2); }
 /* @truss p:4000 c:w50 */
 .w50 { width: 50%; }
 /* @truss p:4000 c:w_10px */
@@ -1026,8 +1009,8 @@
 .top_var { top: var(--top); }
 /* @truss p:4000.5 c:w_var */
 .w_var { width: var(--width); }
-/* @truss p:8000 c:selection_bgGray800 */
-.selection_bgGray800::selection { background-color: rgba(53, 53, 53, 1); }
+/* @truss p:8000.5 c:selection_bgColor_var */
+.selection_bgColor_var::selection { background-color: var(--selection_backgroundColor); }
 /* @truss @property */
 @property --background { syntax: "*"; inherits: false; }
 /* @truss @property */
@@ -1039,8 +1022,6 @@
 /* @truss @property */
 @property --alignItems { syntax: "*"; inherits: false; }
 /* @truss @property */
-@property --animationName { syntax: "*"; inherits: false; }
-/* @truss @property */
 @property --backgroundImage { syntax: "*"; inherits: false; }
 /* @truss @property */
 @property --backgroundColor { syntax: "*"; inherits: false; }
@@ -1138,6 +1119,8 @@
 @property --top { syntax: "*"; inherits: false; }
 /* @truss @property */
 @property --width { syntax: "*"; inherits: false; }
+/* @truss @property */
+@property --selection_backgroundColor { syntax: "*"; inherits: false; }
 /* @truss arbitrary:start */
 .beam-bhp:hover:not(:has(.beam-bhc:hover)) .beam-bhc {
   border-style: solid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "type": "module",
   "author": "Homebound",
   "license": "MIT",
@@ -32,19 +32,24 @@
   },
   "scripts": {
     "start": "yarn storybook",
-    "build": "yarn tsup-node --config tsup.config.ts && yarn copy:truss",
-    "build:truss": "truss",
+    "build": "yarn generate:design-tokens && yarn tsup-node --config tsup.config.ts && yarn copy:truss",
+    "build:truss": "yarn generate:design-tokens && truss",
+    "generate:design-tokens": "tsx scripts/generate-design-tokens.ts",
+    "validate:tokens": "tsx scripts/validate-tokens.ts",
+    "check:token-drift": "tsx scripts/check-token-drift.ts",
     "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint": "eslint --ext js,ts,tsx src",
-    "lint:fix": "eslint --ext js,ts,tsx --fix src",
+    "lint:ci": "eslint --ext js,ts,tsx src --cache --cache-location .eslintcache --quiet",
+    "lint:fix": "eslint --ext js,ts,tsx --fix --cache --cache-location .eslintcache src",
+    "lint:fix:files": "eslint --ext js,ts,tsx --fix --cache --cache-location .eslintcache",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 9000",
     "chromatic": "chromatic --project-token=074248da7284 --exit-once-uploaded --only-changed",
     "copy": "npx copyfiles -u 1 \"./src/**/*.css\" \"./dist/\"",
     "copy:truss": "cp \"./src/Css.json\" \"./dist/Css.json\"",
     "copy-to-internal-frontend": "cp -r dist/* ~/homebound/internal-frontend/node_modules/@homebound/beam/dist/",
-    "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,mdx}\"",
+    "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,mdx}\" \"tokens/**/*.json\"",
     "type-check": "yarn tsc"
   },
   "dependencies": {
@@ -89,12 +94,12 @@
     "@homebound/eslint-config": "^1.10.2",
     "@homebound/rtl-react-router-utils": "1.3.0",
     "@homebound/rtl-utils": "^2.71.0",
-    "@homebound/truss": "^2.21.3",
+    "@homebound/truss": "2.25.0",
     "@homebound/tsconfig": "^1.1.1",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-links": "^10.2.19",
-    "@storybook/react-vite": "^10.2.19",
+    "@storybook/addon-links": "^10.4.0",
+    "@storybook/react-vite": "^10.4.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -109,7 +114,7 @@
     "chromatic": "^15.3.0",
     "conventional-changelog-conventionalcommits": "^9.3.0",
     "eslint": "^8.52.0",
-    "eslint-plugin-storybook": "^10.2.19",
+    "eslint-plugin-storybook": "^10.4.0",
     "husky": "^5.1.1",
     "jsdom": "^29.0.0",
     "mobx": "^6.15.0",
@@ -119,8 +124,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "semantic-release": "^24.2.9",
-    "storybook": "^10.2.19",
+    "storybook": "^10.4.0",
     "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
     "typescript": "5.9.3",
     "vite": "^8.0.0",
     "vitest": "^4.1.0",