Merge branch 'main' of github.com:homebound-team/beam into eslint-upg…

…rade
homebound-team · Dec 20, 2023 · 94ea903 · 94ea903
2 parents 5752753 + 9106443
commit 94ea903
Show file tree

Hide file tree

Showing 48 changed files with 790 additions and 255 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.324.3",
+  "version": "2.331.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,7 +78,7 @@
     "@homebound/eslint-config": "^1.10.2",
     "@homebound/rtl-react-router-utils": "1.0.3",
     "@homebound/rtl-utils": "^2.65.0",
-    "@homebound/truss": "^1.131.0",
+    "@homebound/truss": "^1.132.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",

diff --git a/src/Css.ts b/src/Css.ts
@@ -1133,6 +1133,22 @@ class CssBuilder<T extends Properties> {
   fd(value: Properties["flexDirection"]) {
     return this.add("flexDirection", value);
   }
+  /** Sets `flexWrap: "wrap"`. */
+  get fww() {
+    return this.add("flexWrap", "wrap");
+  }
+  /** Sets `flexWrap: "wrap-reverse"`. */
+  get fwr() {
+    return this.add("flexWrap", "wrap-reverse");
+  }
+  /** Sets `flexWrap: "nowrap"`. */
+  get fwnw() {
+    return this.add("flexWrap", "nowrap");
+  }
+  /** Sets `flexWrap: value`. */
+  flexWrap(value: Properties["flexWrap"]) {
+    return this.add("flexWrap", value);
+  }
 
   // float
   /** Sets `float: "left"`. */

diff --git a/src/components/BeamContext.tsx b/src/components/BeamContext.tsx
@@ -69,26 +69,21 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro
 
   // We essentially expose the refs, but with our own getters/setters so that we can
   // have the setters call `tick` to re-render this Provider
-  const context = useMemo<BeamContextState>(
-    () => {
-      return {
-        // These two keys need to trigger re-renders on change
-        modalState: new PretendRefThatTicks(modalRef, tick),
-        drawerContentStack: new PretendRefThatTicks(drawerContentStackRef, tick),
-        // The rest we don't need to re-render when these are mutated, so just expose as-is
-        modalCanCloseChecks: modalCanCloseChecksRef,
-        modalHeaderDiv,
-        modalBodyDiv,
-        modalFooterDiv,
-        drawerCanCloseChecks,
-        drawerCanCloseDetailsChecks,
-        sdHeaderDiv,
-      };
-    },
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [modalBodyDiv, modalFooterDiv],
-  );
+  const context = useMemo<BeamContextState>(() => {
+    return {
+      // These two keys need to trigger re-renders on change
+      modalState: new PretendRefThatTicks(modalRef, tick),
+      drawerContentStack: new PretendRefThatTicks(drawerContentStackRef, tick),
+      // The rest we don't need to re-render when these are mutated, so just expose as-is
+      modalCanCloseChecks: modalCanCloseChecksRef,
+      modalHeaderDiv,
+      modalBodyDiv,
+      modalFooterDiv,
+      drawerCanCloseChecks,
+      drawerCanCloseDetailsChecks,
+      sdHeaderDiv,
+    };
+  }, [modalBodyDiv, modalFooterDiv, modalHeaderDiv, sdHeaderDiv]);
 
   return (
     <BeamContext.Provider value={{ ...context }}>

diff --git a/src/components/Icon.stories.tsx b/src/components/Icon.stories.tsx
@@ -53,6 +53,8 @@ export const Icon = (props: IconProps) => {
     "undoCircle",
     "drag",
     "move",
+    "add",
+    "remove",
   ];
   const alertIcons: IconProps["icon"][] = [
     "errorCircle",
@@ -142,6 +144,14 @@ export const Icon = (props: IconProps) => {
     "car",
     "basement",
     "cube",
+    "cart",
+    "programChange",
+    "architectural",
+    "structural",
+    "mep",
+    "designPackage",
+    "updateDesignPackage",
+    "exteriorStyle",
   ];
   const navigationIcons: IconProps["icon"][] = [
     "projects",

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -249,6 +249,18 @@ export const Icons = {
       d="M6 2H4V20H3V22H7V20H6V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H6V2ZM6 6V13H18V6H6Z"
     />
   ),
+  add: (
+    <>
+      <path d="M13 7H11V11H7V13H11V17H13V13H17V11H13V7Z" />
+      <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" />
+    </>
+  ),
+  remove: (
+    <>
+      <path d="M7 11H17V13H7V11Z" />
+      <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" />
+    </>
+  ),
   // Arrows
   chevronsDown: (
     <>
@@ -333,7 +345,7 @@ export const Icons = {
   ),
   email: (
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       clip-rule="evenodd"
       d="M5 8.00018V16H19V8.00021L13.2 12.3502C12.4889 12.8835 11.5111 12.8835 10.8 12.3502L5 8.00018ZM17.0003 7H6.99976L12 10.7502L17.0003 7ZM3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6V17C21 17.5523 20.5523 18 20 18H4C3.44772 18 3 17.5523 3 17V6Z"
     />
@@ -740,6 +752,52 @@ export const Icons = {
   checkCircleFilled: (
     <path d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM10.001 16.413L6.288 12.708L7.7 11.292L9.999 13.587L15.293 8.293L16.707 9.707L10.001 16.413Z" />
   ),
+  cart: (
+    <>
+      <path d="M21.822 7.431C21.635 7.161 21.328 7 21 7H7.333L6.179 4.23C5.867 3.482 5.143 3 4.333 3H2V5H4.333L9.077 16.385C9.232 16.757 9.596 17 10 17H18C18.417 17 18.79 16.741 18.937 16.352L21.937 8.352C22.052 8.044 22.009 7.7 21.822 7.431ZM17.307 15H10.667L8.167 9H19.557L17.307 15Z" />
+      <path d="M10.5 21C11.3284 21 12 20.3284 12 19.5C12 18.6716 11.3284 18 10.5 18C9.67157 18 9 18.6716 9 19.5C9 20.3284 9.67157 21 10.5 21Z" />
+      <path d="M17.5 21C18.3284 21 19 20.3284 19 19.5C19 18.6716 18.3284 18 17.5 18C16.6716 18 16 18.6716 16 19.5C16 20.3284 16.6716 21 17.5 21Z" />
+    </>
+  ),
+  programChange: (
+    <path
+      d="M3.371 2.373c-1.259.729-2.274 1.34-2.256 1.358.018.018 1.057.624 2.309 1.346L5.7 6.39l.011-.955.01-.955h6.798l.01.955.011.956 2.278-1.316a159.652 159.652 0 0 0 2.309-1.346c.023-.023-4.384-2.608-4.573-2.682-.019-.008-.034.42-.034.95v.963h-6.8V2c0-.528-.013-.958-.03-.957-.016.002-1.06.6-2.319 1.33M1.24 15.54v7.9h15.84V7.64H1.24v7.9m19.506-7.654L19.404 10.2l-1.241 2.14.979.011.978.01v6.398l-.972.01-.973.011 1.329 2.293c.73 1.261 1.336 2.3 1.346 2.31.017.017 2.67-4.553 2.67-4.6 0-.013-.432-.023-.96-.023h-.96v-6.4h.96c.528 0 .96-.015.96-.033 0-.037-2.587-4.528-2.639-4.581-.018-.019-.079.044-.135.14M15.08 15.54v5.9H3.28V9.64h11.8v5.9"
+      fillRule="evenodd"
+    />
+  ),
+  architectural: (
+    <path
+      d="M19.42.256a3.573 3.573 0 0 0-.981.282c-1.12.472-2.032 1.538-2.337 2.732-.049.192-.133.82-.141 1.06-.001.016-3.565.03-7.921.03H.12V24h10.344c11.484 0 10.482.024 11.176-.269a4.103 4.103 0 0 0 2.24-2.304l.12-.314V3.314l-.1-.298a3.968 3.968 0 0 0-.99-1.61A4.136 4.136 0 0 0 20.9.3c-.437-.09-1.089-.11-1.48-.044m1.096 2.006c.7.165 1.299.73 1.5 1.415.057.195.064.865.064 6.45 0 3.428-.007 6.233-.016 6.233-.009 0-.148-.063-.31-.14-.396-.188-.986-.332-1.484-.363-.68-.041-1.486.123-2.05.418l-.235.12c-.02.009-.027-2.647-.015-6.24.019-5.745.027-6.273.089-6.475a2.079 2.079 0 0 1 2.457-1.418M15.958 13.41c-.01 6.574-.006 7.071.059 7.368.08.364.264.889.382 1.089a.667.667 0 0 1 .081.175c0 .024-2.703.038-7.16.038H2.16V6.36h13.808l-.01 7.05m-9.005-1.685c-2.623 2.255-2.651 2.28-2.754 2.479-.412.796.403 1.684 1.261 1.375.088-.032.165-.058.17-.058.005-.001.01.647.01 1.439v1.44H13v-3.084l.15.03c.376.074.66 0 .923-.241.229-.211.325-.421.326-.716a.886.886 0 0 0-.251-.663c-.133-.14-4.806-4.006-4.842-4.006-.011 0-1.07.902-2.353 2.005m3.277 1.334.77.633V16.4H7.64v-2.626l.847-.727c.737-.634.854-.721.91-.674.034.03.409.338.833.686m10.511 4.898c.446.157.876.515 1.141.952l.138.227.013.595c.011.509.001.634-.069.864a2.083 2.083 0 0 1-1.425 1.384c-1.077.28-2.195-.367-2.515-1.456-.092-.314-.084-.888.016-1.215.21-.678.833-1.251 1.536-1.411.326-.075.86-.047 1.165.06"
+      fillRule="evenodd"
+    />
+  ),
+  structural: (
+    <path d="M7.304 4.48C3.778 7.516 2.447 8.64 2.377 8.64c-.073 0-.098.022-.1.09-.002.066-.224.28-.844.81-.949.812-1.04.928-1.044 1.343-.001.126.022.29.052.363.208.521.803.782 1.31.575.094-.039.458-.317.819-.626l.648-.555H4.28v-.917l3.869-3.332c2.127-1.832 3.907-3.362 3.954-3.399.084-.068.15-.015 3.781 2.982l3.696 3.051.011.807.011.808H21.531l.275.222c.339.274.511.35.794.35.38 0 .705-.201.892-.552.064-.119.086-.231.086-.44 0-.319-.083-.517-.304-.727C23.091 9.321 12.186.321 12.158.32c-.012 0-2.196 1.872-4.854 4.16M2.29 15.67l.01 2.03.99.011.99.01V13.64H2.279l.011 2.03m17.31.011v2.04l.99-.01.99-.011.01-2.03.011-2.03H19.6v2.041M2.28 21.793c0 1.166.025 1.322.259 1.595.078.091.227.207.331.258.183.091.231.094 1.3.107l1.11.013v-2.004l-.49-.011-.49-.011-.011-.49-.011-.49H2.28v1.033m17.311-.543-.011.49-.49.011-.49.011v2.004l1.11-.013c1.069-.013 1.117-.016 1.3-.107.104-.051.253-.167.331-.258.234-.273.259-.429.259-1.595V20.76h-1.998l-.011.49M7.64 22.76v1h3.12v-2H7.64v1m5.48 0v1h3.12v-2h-3.12v1" />
+  ),
+  mep: (
+    <path
+      d="M8.32.262a2.994 2.994 0 0 0-.56.203c-.397.194-.922.713-1.109 1.097-.243.497-.25.572-.25 2.787L6.4 6.359l-1.33.01-1.33.011-.01 2.55-.011 2.55H5.274l.017 1.53c.018 1.686.026 1.752.296 2.55a5.657 5.657 0 0 0 3.483 3.52l.369.131.011 2.364.01 2.365 2.55.01 2.55.011v-4.715l.218-.064a5.731 5.731 0 0 0 3.936-4.122c.137-.554.166-.956.166-2.286V11.48H20.281l-.011-2.55-.01-2.55-1.308-.011-1.308-.01-.012-2.07-.012-2.069-.112-.32A2.565 2.565 0 0 0 15.913.316c-.251-.082-.37-.096-.833-.095-.615.001-.856.055-1.28.288-.375.206-.831.68-1.015 1.054-.253.515-.264.624-.264 2.827l-.001 1.97h-.994l-.017-2.05c-.013-1.697-.027-2.086-.078-2.256C11.155 1.13 10.437.451 9.536.26A3.38 3.38 0 0 0 8.32.262m.92 1.998c.247.128.24.07.24 1.989V6H8.4V4.278c0-1.88.001-1.891.231-2.015.142-.078.462-.079.609-.003m6.152.021c.244.149.248.179.248 2.038V6h-1.122l.011-1.757.011-1.757.1-.107a.68.68 0 0 1 .18-.141.775.775 0 0 1 .572.043M18.24 8.92v.56H5.76V8.36h12.48v.56m-1.37 4.03c-.015 1.219-.025 1.38-.101 1.659-.367 1.335-1.313 2.297-2.637 2.681-.303.087-.363.09-2.072.09H10.3l-.358-.112c-1.241-.388-2.15-1.298-2.527-2.528-.11-.358-.11-.368-.126-1.75l-.015-1.39h9.613l-.017 1.35m-4.31 7.731v1.281l-.55-.011-.55-.011-.011-1.27-.01-1.27h1.121v1.281"
+      fillRule="evenodd"
+    />
+  ),
+  designPackage: (
+    <path
+      d="M6.591 5.633A1308.744 1308.744 0 0 0 .876 10.58c-.445.429-.438 1.092.016 1.481.165.141.469.259.668.259.181 0 .452-.115.66-.28l.2-.158.01 4.759.01 4.759h19.52v-4.94c0-2.717.007-4.94.015-4.94s.091.027.185.06c.213.075.333.075.584.001.699-.208.942-1.094.444-1.615-.07-.073-.772-.665-1.56-1.315L20.197 7.47l.614-.625c.338-.344.681-.724.762-.845.289-.428.427-1.092.348-1.672-.092-.669-.347-1.197-.8-1.649-.516-.517-1.076-.756-1.841-.789-.391-.017-.509-.007-.779.067-.559.154-.72.268-1.654 1.173-.471.457-.868.83-.883.83-.015 0-.878-.702-1.919-1.56A241.53 241.53 0 0 0 12.146.843l-5.555 4.79m6.769-1.207c.627.518 1.14.954 1.14.968 0 .014-1.242 1.243-2.76 2.73l-2.76 2.703-.606 2.537a134.196 134.196 0 0 0-.595 2.547c.006.007 1.115-.207 2.466-.474l2.455-.486 3.04-3.032 3.04-3.032.568.466.567.467.003 4.79.002 4.79H4.44v-9.268l3.85-3.323c2.118-1.828 3.868-3.324 3.89-3.325.022-.001.553.423 1.18.942m6.256-.412c.202.155.304.372.304.652v.228l-.628.633c-.346.348-.641.633-.657.633-.024 0-.908-.711-1.067-.859-.042-.039.09-.184.672-.739l.725-.691.253.016c.199.013.283.04.398.127M16.657 7.14c.297.242.54.449.541.46.001.011-1.231 1.253-2.738 2.76l-2.74 2.74-.63.126c-.347.07-.635.122-.64.117-.006-.006.073-.351.175-.767l.185-.756 2.625-2.568c1.444-1.413 2.638-2.565 2.653-2.56.016.004.272.206.569.448"
+      fillRule="evenodd"
+    />
+  ),
+  updateDesignPackage: (
+    <path
+      d="M6.34 5.463C3.37 8.025.798 10.25.624 10.408c-.371.338-.478.537-.475.881a.953.953 0 0 0 .343.732c.165.141.469.259.67.259.173 0 .44-.111.636-.264l.182-.141.01 4.742L2 21.36h6.573c7.298 0 6.786.019 7.082-.269.234-.226.322-.427.322-.731 0-.393-.189-.697-.556-.894l-.161-.086-5.61-.011-5.61-.01v-9.267l3.863-3.329c2.125-1.831 3.884-3.32 3.91-3.309.067.029 2.285 1.867 2.299 1.905.006.017-1.116 1.136-2.494 2.486L9.112 10.3l-.213.012-.213.012-.062.268c-.033.147-.331 1.401-.662 2.785a111.038 111.038 0 0 0-.589 2.529c.007.007 1.118-.205 2.47-.471l2.457-.484 3.046-3.042 3.047-3.042.562.469.562.468.011 2.528c.012 2.477.014 2.532.097 2.711.108.235.337.456.56.541.209.08.612.061.803-.038.182-.094.374-.301.468-.506.08-.172.085-.255.096-1.87.007-.93.018-1.69.025-1.69.007 0 .083.029.168.065.196.082.539.056.762-.058.189-.097.398-.323.484-.524.126-.298.05-.767-.163-.997a34.338 34.338 0 0 0-1.108-.939 1093.61 1093.61 0 0 1-1.473-1.22l-.453-.376.678-.685c.738-.748.872-.943.993-1.456.089-.378.056-1.131-.065-1.49-.256-.759-.754-1.328-1.461-1.666a2.682 2.682 0 0 0-1.199-.252 2.34 2.34 0 0 0-1.139.263c-.306.151-.344.184-1.681 1.483l-.34.33-1.914-1.579a242.13 242.13 0 0 0-1.92-1.576c-.003.001-2.436 2.098-5.406 4.66m12.782-1.502c.235.12.371.352.391.666l.017.258-.638.641-.637.641-.497-.409a26.934 26.934 0 0 1-.557-.464c-.051-.047-.001-.114.38-.498.241-.244.561-.55.71-.68.253-.221.284-.236.472-.236.122 0 .262.032.359.081m-2.656 3.323.366.304-2.756 2.756L11.32 13.1l-.63.126c-.347.07-.636.121-.644.113a9.854 9.854 0 0 1 .159-.738l.173-.726.901-.892c.495-.491 1.693-1.667 2.661-2.614l1.759-1.72.201.165c.11.09.365.302.566.47m3.854 9.601c-.366.07-.687.404-.76.79-.022.119-.04.545-.04.948v.732l-.89.012c-.822.012-.902.02-1.05.099a1.007 1.007 0 0 0-.538.894c0 .377.202.712.538.894.148.079.228.087 1.046.099l.886.012.014.868c.013.809.02.879.106 1.054.051.104.163.251.248.328.149.134.474.265.66.265.186 0 .511-.131.66-.265.085-.077.197-.224.248-.328.086-.175.093-.245.106-1.054l.014-.868.886-.012c.962-.014 1.019-.026 1.28-.268.199-.185.266-.366.266-.725s-.067-.54-.266-.725c-.261-.242-.318-.254-1.28-.268l-.886-.012-.016-.868c-.017-.949-.034-1.029-.269-1.297-.225-.257-.599-.375-.963-.305"
+      fillRule="evenodd"
+    />
+  ),
+  exteriorStyle: (
+    <path
+      d="m11.378 2.08-1.158.998-.078-.109a6.796 6.796 0 0 0-.36-.405 4.617 4.617 0 0 0-4.099-1.383c-1.436.233-2.759 1.221-3.384 2.527-.35.73-.478 1.362-.446 2.192.023.599.106 1.025.292 1.488l.104.26-.157.166A6.027 6.027 0 0 0 .787 9.985a5.927 5.927 0 0 0-.001 3.855c.292.87.765 1.625 1.437 2.297a5.61 5.61 0 0 0 1.389 1.044l.349.186-.011 2.206-.01 2.207-1.97.01-1.97.011V23.8h24v-2h-1.52v-9.918l.185.117a.96.96 0 0 0 1.16-.088L24 11.75v-1.173l-.17-.165c-.093-.09-2.645-2.202-5.67-4.693a5312.503 5312.503 0 0 1-5.562-4.583c-.053-.046-.217.081-1.22.944M7.24 3.235c.756.241 1.446.931 1.684 1.685.115.363.141.94.06 1.319-.091.426-.279.79-.7 1.355-.203.272-.364.498-.357.504l.513.371c.275.199.598.449.718.556.477.428.946 1.215 1.13 1.895.079.293.092.434.091 1.02 0 .588-.013.723-.092.999-.394 1.371-1.392 2.39-2.749 2.807-.332.102-.41.11-1.078.112-.636.002-.757-.009-1.04-.09-1.153-.332-2.032-1.061-2.542-2.108-.323-.663-.378-.918-.375-1.74.002-.833.062-1.108.377-1.748.347-.703.705-1.093 1.56-1.7.253-.18.475-.339.493-.355.019-.015-.133-.25-.336-.522-.563-.753-.756-1.238-.756-1.895 0-1.182.858-2.263 1.999-2.52.362-.082 1.056-.054 1.4.055m9.305 3.745c2.917 2.404 3.954 3.281 3.952 3.34-.001.044-.006 2.501-.01 5.46l-.007 5.38H8.92v-3.793l.348-.186a5.61 5.61 0 0 0 1.389-1.044 5.558 5.558 0 0 0 1.082-1.465c1.153-2.22.814-4.862-.867-6.761l-.238-.269.103-.258c.22-.55.28-.906.282-1.664.001-.686.003-.702.095-.776.052-.042.393-.334.759-.65s.677-.574.691-.574c.014 0 1.806 1.467 3.981 3.26M6.92 19.54v1.62h-.96v-3.24h.96v1.62"
+      fillRule="evenodd"
+    />
+  ),
 };
 
 export type IconKey = keyof typeof Icons;
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
@@ -1,8 +1,11 @@
-import React, { LabelHTMLAttributes } from "react";
+import React, { LabelHTMLAttributes, ReactNode } from "react";
 import { VisuallyHidden } from "react-aria";
-import { Css } from "src/Css";
+import { Css, Font, Only, Palette, Xss } from "src/Css";
+import { Icon } from "src";
 
-interface LabelProps {
+type LabelXss = Font | "color";
+
+interface LabelProps<X> {
   // We don't usually have `fooProps`-style props, but this is for/from react-aria
   labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
   label: string;
@@ -11,22 +14,38 @@ interface LabelProps {
   hidden?: boolean;
   contrast?: boolean;
   multiline?: boolean;
+  tooltip?: ReactNode;
+  // Removes margin bottom if true - This is different from InlineLabel. InlineLabel expects to be rendered visually within the field element. Rather just on the same line.
+  inline?: boolean;
+  xss?: X;
 }
 
 /** An internal helper component for rendering form labels. */
-export const Label = React.memo((props: LabelProps) => {
-  const { labelProps, label, hidden, suffix, contrast = false, ...others } = props;
+function LabelComponent<X extends Only<Xss<LabelXss>, X>>(props: LabelProps<X>) {
+  const { labelProps, label, hidden, suffix, contrast = false, tooltip, inline, xss, ...others } = props;
   const labelEl = (
-    <label {...labelProps} {...others} css={Css.dib.sm.gray700.mbPx(4).if(contrast).white.$}>
+    <label
+      {...labelProps}
+      {...others}
+      css={{ ...Css.dif.aic.gap1.sm.gray700.mbPx(inline ? 0 : 4).if(contrast).white.$, ...xss }}
+    >
       {label}
       {suffix && ` ${suffix}`}
+      {tooltip && (
+        <span css={Css.fs0.$}>
+          <Icon icon="infoCircle" tooltip={tooltip} inc={2} color={contrast ? Palette.White : Palette.Gray700} />
+        </span>
+      )}
     </label>
   );
   return hidden ? <VisuallyHidden>{labelEl}</VisuallyHidden> : labelEl;
-});
+}
+
+export const Label = React.memo(LabelComponent) as typeof LabelComponent;
 
+type InlineLabelProps = Omit<LabelProps<unknown>, "xss" | "inline">;
 /** Used for showing labels within text fields. */
-export function InlineLabel({ labelProps, label, contrast, multiline = false, ...others }: LabelProps) {
+export function InlineLabel({ labelProps, label, contrast, multiline = false, ...others }: InlineLabelProps) {
   return (
     <label
       {...labelProps}