From 41dff2a36f02a393d09117dd75f519ceb7fcdfcd Mon Sep 17 00:00:00 2001
From: Brandon <bdow@homebound.com>
Date: Thu, 14 Dec 2023 09:14:55 -0500
Subject: [PATCH 01/10] feat: Allow Tag to support custom bg and text color via
 xss (#981)

---
 src/components/Tag.stories.tsx | 1 +
 src/components/Tag.tsx         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Tag.stories.tsx b/src/components/Tag.stories.tsx
index 23c62fe65..21f292a3e 100644
--- a/src/components/Tag.stories.tsx
+++ b/src/components/Tag.stories.tsx
@@ -23,6 +23,7 @@ export function NoIcon() {
       <div css={Css.wPx(200).$}>
         <Tag text="Tag text that will truncate as it is too long." />
       </div>
+      <Tag text="Custom color" xss={Css.bgPurple200.$} />
     </div>
   );
 }
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 30298c295..92ab0bce3 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -2,7 +2,7 @@ import { Icon, IconKey } from "src/components";
 import { Css, Margin, Only, Xss } from "src/Css";
 import { useTestIds } from "src/utils";
 
-type TagXss = Margin;
+type TagXss = Margin | "backgroundColor" | "color";
 export type TagType = "info" | "caution" | "warning" | "success" | "neutral";
 interface TagProps<X> {
   text: string;

From 2e6738f55debfc2d0d8d8a1257c5e86922a1dec9 Mon Sep 17 00:00:00 2001
From: Homebound Bot <eng@homebound.com>
Date: Thu, 14 Dec 2023 14:17:45 +0000
Subject: [PATCH 02/10] chore(release): 2.328.0 [skip ci]

## [2.328.0](https://github.com/homebound-team/beam/compare/v2.327.1...v2.328.0) (2023-12-14)

### Features

* Allow Tag to support custom bg and text color via xss ([#981](https://github.com/homebound-team/beam/issues/981)) ([41dff2a](https://github.com/homebound-team/beam/commit/41dff2a36f02a393d09117dd75f519ceb7fcdfcd))
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3c9334e4e..2c1b2748a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.327.1",
+  "version": "2.328.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",

From 8bc5dc0719c3d827808e8ca4bcaabbdd18ca870f Mon Sep 17 00:00:00 2001
From: Brandon <bdow@homebound.com>
Date: Thu, 14 Dec 2023 11:15:43 -0500
Subject: [PATCH 03/10] feat: Update Switch component styling (#982)

Adds new 'labelStyle: "centered"'. This will stack the label on top of
the switch and center both elements in the column. Updates how tooltips
are rendered for Switches. Now includes an icon to denote there is a
tooltip, rather than requiring the user to discover it by hovering over
it.

Adds this tooltip functionality to the Label component, though it is
only currently used by Switch. At some point it would be good to move
all Tooltips to this sort of UX.
---
 src/components/Label.tsx      |  35 ++++++++---
 src/inputs/Switch.stories.tsx |   8 +++
 src/inputs/Switch.tsx         | 115 ++++++++++++++++------------------
 3 files changed, 90 insertions(+), 68 deletions(-)

diff --git a/src/components/Label.tsx b/src/components/Label.tsx
index 84e817edc..1f96b1ea2 100644
--- 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}
diff --git a/src/inputs/Switch.stories.tsx b/src/inputs/Switch.stories.tsx
index dc32124e8..1567372a8 100644
--- a/src/inputs/Switch.stories.tsx
+++ b/src/inputs/Switch.stories.tsx
@@ -98,6 +98,14 @@ export const LabelStyles = () => {
       <SwitchComponent label="Example Label" onChange={setSelected} selected={selected} labelStyle="hidden" />
       <h2 css={Css.baseMd.mb1.mt3.pt2.bt.bGray200.$}>Left</h2>
       <SwitchComponent label="Example Label" onChange={setSelected} selected={selected} labelStyle="left" />
+      <h2 css={Css.baseMd.mb1.mt3.pt2.bt.bGray200.$}>Centered</h2>
+      <SwitchComponent
+        label="Example Label"
+        tooltip="Tooltip example"
+        onChange={setSelected}
+        selected={selected}
+        labelStyle="centered"
+      />
     </div>
   );
 };
diff --git a/src/inputs/Switch.tsx b/src/inputs/Switch.tsx
index 17a78e661..3450392a9 100644
--- a/src/inputs/Switch.tsx
+++ b/src/inputs/Switch.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useRef } from "react";
 import { useFocusRing, useHover, useSwitch, VisuallyHidden } from "react-aria";
-import { maybeTooltip, resolveTooltip } from "src/components";
+import { resolveTooltip } from "src/components";
 import { Label } from "src/components/Label";
 import { Css, Palette } from "src/Css";
 import { Icon } from "../components/Icon";
@@ -16,7 +16,7 @@ export interface SwitchProps {
   /** Input label */
   label: string;
   /** Where to put the label. */
-  labelStyle?: "form" | "inline" | "filter" | "hidden" | "left"; // TODO: Update `labelStyle` to make consistent with other `labelStyle` properties in the library
+  labelStyle?: "form" | "inline" | "filter" | "hidden" | "left" | "centered"; // TODO: Update `labelStyle` to make consistent with other `labelStyle` properties in the library
   /** Whether or not to hide the label */
   hideLabel?: boolean;
   /** Handler when the interactive element state changes. */
@@ -25,6 +25,8 @@ export interface SwitchProps {
   selected: boolean;
   /** Whether to include icons like the check mark */
   withIcon?: boolean;
+  /** Adds tooltip for the switch */
+  tooltip?: ReactNode;
 }
 
 export function Switch(props: SwitchProps) {
@@ -46,74 +48,67 @@ export function Switch(props: SwitchProps) {
   const { inputProps } = useSwitch({ ...ariaProps, "aria-label": label }, state, ref);
   const { isFocusVisible: isKeyboardFocus, focusProps } = useFocusRing(otherProps);
   const { hoverProps, isHovered } = useHover(ariaProps);
-  const tooltip = resolveTooltip(disabled);
+  const tooltip = resolveTooltip(disabled, props.tooltip);
 
-  return maybeTooltip({
-    title: tooltip,
-    placement: "top",
-    children: (
-      <label
-        {...hoverProps}
+  return (
+    <div
+      {...hoverProps}
+      css={{
+        ...Css.relative.cursorPointer.df.w("max-content").selectNone.$,
+        ...(labelStyle === "form" && Css.fdc.$),
+        ...(labelStyle === "left" && Css.w100.aic.$),
+        ...(labelStyle === "inline" && Css.gap2.aic.$),
+        ...(labelStyle === "filter" && Css.jcsb.gap1.aic.wa.sm.$),
+        ...(labelStyle === "centered" && Css.fdc.aic.$),
+        ...(isDisabled && Css.cursorNotAllowed.gray400.$),
+      }}
+    >
+      {labelStyle !== "inline" && labelStyle !== "hidden" && (
+        <div css={Css.if(labelStyle === "left").w50.$}>
+          <Label
+            label={label}
+            tooltip={tooltip}
+            xss={Css.if(labelStyle === "filter").gray900.$}
+            inline={labelStyle === "left" || labelStyle === "filter"}
+          />
+        </div>
+      )}
+      {/* Background */}
+      <div
+        aria-hidden="true"
         css={{
-          ...Css.relative.cursorPointer.df.w("max-content").smMd.selectNone.$,
-          ...(labelStyle === "form" && Css.fdc.$),
-          ...(labelStyle === "left" && Css.w100.fdr.$),
-          ...(labelStyle === "inline" && Css.gap2.aic.$),
-          ...(labelStyle === "filter" && Css.jcsb.gap1.aic.wa.sm.$),
-          ...(isDisabled && Css.cursorNotAllowed.gray400.$),
+          ...Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
+          ...(isHovered && switchHoverStyles),
+          ...(isKeyboardFocus && switchFocusStyles),
+          ...(isDisabled && Css.bgGray300.$),
+          ...(isSelected && Css.bgBlue700.$),
+          ...(isSelected && isHovered && switchSelectedHoverStyles),
         }}
-        aria-label={label}
       >
-        {(labelStyle === "form" || labelStyle === "left") && (
-          <div css={Css.if(labelStyle === "left").w50.$}>
-            <Label label={label} />
-          </div>
-        )}
-        {labelStyle === "filter" && <span>{label}</span>}
-        {/* Background */}
+        {/* Circle */}
         <div
-          aria-hidden="true"
           css={{
-            ...Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
-            ...(isHovered && switchHoverStyles),
-            ...(isKeyboardFocus && switchFocusStyles),
-            ...(isDisabled && Css.bgGray300.$),
-            ...(isSelected && Css.bgBlue700.$),
-            ...(isSelected && isHovered && switchSelectedHoverStyles),
+            ...switchCircleDefaultStyles(compact),
+            ...(isDisabled && Css.bgGray100.$),
+            ...(isSelected && switchCircleSelectedStyles(compact)),
           }}
         >
-          {/* Circle */}
-          <div
-            css={{
-              ...switchCircleDefaultStyles(compact),
-              ...(isDisabled && Css.bgGray100.$),
-              ...(isSelected && switchCircleSelectedStyles(compact)),
-            }}
-          >
-            {/* Icon */}
-            {withIcon && (
-              <Icon icon={isSelected ? "check" : "x"} color={isSelected ? Palette.Blue700 : Palette.Gray400} />
-            )}
-          </div>
+          {/* Icon */}
+          {withIcon && (
+            <Icon icon={isSelected ? "check" : "x"} color={isSelected ? Palette.Blue700 : Palette.Gray400} />
+          )}
         </div>
-        {/* Since we are using childGap, we must wrap the label in an element and
+      </div>
+      {/* Since we are using childGap, we must wrap the label in an element and
         match the height of the icon for horizontal alignment */}
-        {labelStyle === "inline" && (
-          <span
-            css={{
-              // LineHeight is conditionally applied to handle compact version text alignment
-              ...Css.if(compact).add("lineHeight", "1").$,
-            }}
-          >
-            {label}
-          </span>
-        )}
-        <VisuallyHidden>
-          <input ref={ref} {...inputProps} {...focusProps} />
-        </VisuallyHidden>
-      </label>
-    ),
-  });
+      {labelStyle === "inline" && (
+        <Label label={label} tooltip={tooltip} inline xss={Css.smMd.gray900.if(compact).add("lineHeight", "1").$} />
+      )}
+      <VisuallyHidden>
+        <input ref={ref} {...inputProps} {...focusProps} />
+      </VisuallyHidden>
+    </div>
+  );
 }
 
 /** Styles */

From 3da849d9e6bd063c87fe221140721e015d2340ef Mon Sep 17 00:00:00 2001
From: Homebound Bot <eng@homebound.com>
Date: Thu, 14 Dec 2023 16:18:37 +0000
Subject: [PATCH 04/10] chore(release): 2.329.0 [skip ci]

## [2.329.0](https://github.com/homebound-team/beam/compare/v2.328.0...v2.329.0) (2023-12-14)

### Features

* Update Switch component styling ([#982](https://github.com/homebound-team/beam/issues/982)) ([8bc5dc0](https://github.com/homebound-team/beam/commit/8bc5dc0719c3d827808e8ca4bcaabbdd18ca870f))
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2c1b2748a..2b5138009 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.328.0",
+  "version": "2.329.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",

From ee42c576b4c74b1213adc853f25c538ddc3ecc0e Mon Sep 17 00:00:00 2001
From: Brandon <bdow@homebound.com>
Date: Thu, 14 Dec 2023 11:50:43 -0500
Subject: [PATCH 05/10] feat: Update GridTable's cardStyle (#983)

Adds 'GridStyle.nonHeaderRowCss' to directly apply styles to non-header
row elements. Adds 'GridStyle.rowHoverCss' to apply hover styles to
non-header row elements Updates cardStyle to take advantage of the new
styles to provide a box-shadow and border color change when hovering
over a row. Updates cardStyle to apply more styles directly on the row
element rather than on the individual cells
---
 src/components/Table/GridTable.tsx      |  6 +++---
 src/components/Table/TableStyles.tsx    | 20 +++++++++++---------
 src/components/Table/components/Row.tsx |  8 +++++++-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/Table/GridTable.tsx b/src/components/Table/GridTable.tsx
index e8eac1f14..4d6cb300b 100644
--- a/src/components/Table/GridTable.tsx
+++ b/src/components/Table/GridTable.tsx
@@ -437,7 +437,7 @@ function renderDiv<R extends Kinded>(
       <div
         css={{
           ...(style.betweenRowsCss ? Css.addIn(`& > div > *`, style.betweenRowsCss).$ : {}),
-          ...(style.firstNonHeaderRowCss ? Css.addIn(`& > div:first-of-type > *`, style.firstNonHeaderRowCss).$ : {}),
+          ...(style.firstNonHeaderRowCss ? Css.addIn(`& > div:first-of-type`, style.firstNonHeaderRowCss).$ : {}),
           ...(style.lastRowCss && Css.addIn("& > div:last-of-type", style.lastRowCss).$),
         }}
       >
@@ -475,7 +475,7 @@ function renderTable<R extends Kinded>(
         ...Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
         ...Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {})
           // removes border between header and second row
-          .addIn("& > tbody > tr:first-of-type > *", style.firstNonHeaderRowCss || {}).$,
+          .addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,
         ...Css.addIn("& > tbody > tr:last-of-type", style.lastRowCss).$,
         ...Css.addIn("& > thead > tr:first-of-type", style.firstRowCss).$,
         ...style.rootCss,
@@ -669,7 +669,7 @@ const VirtualRoot = memoizeOne<(gs: GridStyle, columns: GridColumn<any>[], id: s
             ...(isHeader
               ? Css.addIn("& > div:first-of-type > *", gs.firstRowCss).$
               : {
-                  ...Css.addIn("& > div:first-of-type > *", gs.firstNonHeaderRowCss).$,
+                  ...Css.addIn("& > div:first-of-type", gs.firstNonHeaderRowCss).$,
                   ...Css.addIn("& > div:last-of-type > *", gs.lastRowCss).$,
                 }),
             ...gs.rootCss,
diff --git a/src/components/Table/TableStyles.tsx b/src/components/Table/TableStyles.tsx
index 089ca39fb..97bfcd283 100644
--- a/src/components/Table/TableStyles.tsx
+++ b/src/components/Table/TableStyles.tsx
@@ -15,6 +15,8 @@ export interface GridStyle {
   lastRowCss?: Properties;
   /** Applied on the first row of the table (could be the Header or Totals row). */
   firstRowCss?: Properties;
+  /** Applied to every non-header row of the table */
+  nonHeaderRowCss?: Properties;
   /** Applied to the first non-header row, i.e. if you want to cancel out `betweenRowsCss`. */
   firstNonHeaderRowCss?: Properties;
   /** Applied to all cell divs (via a selector off the base div). */
@@ -39,7 +41,9 @@ export interface GridStyle {
   /** Applied if there is a fallback/overflow message showing. */
   firstRowMessageCss?: Properties;
   /** Applied on hover if a row has a rowLink/onClick set. */
-  rowHoverColor?: Palette;
+  rowHoverColor?: Palette | "none";
+  /** Applied on hover of a row */
+  nonHeaderRowHoverCss?: Properties;
   /** Default content to put into an empty cell */
   emptyCell?: ReactNode;
   presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> &
@@ -209,18 +213,16 @@ export const condensedStyle: GridStyle = {
 export const cardStyle: GridStyle = {
   ...defaultStyle,
   betweenRowsCss: {},
-  firstNonHeaderRowCss: Css.mt2.$,
-  cellCss: Css.p2.my1.bt.bb.bGray400.$,
-  firstCellCss: Css.bl.add({ borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }).$,
-  lastCellCss: Css.br.add({ borderTopRightRadius: "4px", borderBottomRightRadius: "4px" }).$,
+  nonHeaderRowCss: Css.br4.overflowHidden.ba.bGray400.mt2.add("transition", "all 240ms").$,
+  firstRowCss: Css.bl.br.bGray200.borderRadius("8px 8px 0 0").overflowHidden.$,
+  cellCss: Css.p2.$,
   // Undo the card look & feel for the header
   headerCellCss: {
     ...defaultStyle.headerCellCss,
-    ...Css.add({
-      border: "none",
-      borderRadius: "unset",
-    }).p1.m0.xsMd.gray700.$,
+    ...Css.p1.m0.xsMd.gray700.$,
   },
+  rowHoverColor: "none",
+  nonHeaderRowHoverCss: Css.bshHover.bGray700.$,
 };
 
 export function resolveStyles(style: GridStyle | GridStyleDef): GridStyle {
diff --git a/src/components/Table/components/Row.tsx b/src/components/Table/components/Row.tsx
index 96d74e3a3..95da77496 100644
--- a/src/components/Table/components/Row.tsx
+++ b/src/components/Table/components/Row.tsx
@@ -75,15 +75,21 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
 
   const revealOnRowHoverClass = "revealOnRowHover";
 
-  const showRowHoverColor = !reservedRowKinds.includes(row.kind) && !omitRowHover;
+  const showRowHoverColor = !reservedRowKinds.includes(row.kind) && !omitRowHover && style.rowHoverColor !== "none";
 
   const rowStyleCellCss = maybeApplyFunction(row as any, rowStyle?.cellCss);
   const rowCss = {
+    ...(!reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss),
     // Optionally include the row hover styles, by default they should be turned on.
     ...(showRowHoverColor && {
       // Even though backgroundColor is set on the cellCss, the hover target is the row.
       "&:hover > *": Css.bgColor(style.rowHoverColor ?? Palette.Blue100).$,
     }),
+    ...(!reservedRowKinds.includes(row.kind) &&
+      style.nonHeaderRowHoverCss && {
+        // Need to spread this to make TS happy.
+        ":hover": { ...style.nonHeaderRowHoverCss },
+      }),
     // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
     ...(as === "table" ? {} : Css.relative.df.fg1.fs1.addIn("&>*", Css.flexNone.$).$),
     // Apply `cursorPointer` to the row if it has a link or `onClick` value.

From 70105e78faeb9220ba5c11316d728996a3a90099 Mon Sep 17 00:00:00 2001
From: Homebound Bot <eng@homebound.com>
Date: Thu, 14 Dec 2023 16:53:25 +0000
Subject: [PATCH 06/10] chore(release): 2.330.0 [skip ci]

## [2.330.0](https://github.com/homebound-team/beam/compare/v2.329.0...v2.330.0) (2023-12-14)

### Features

* Update GridTable's cardStyle ([#983](https://github.com/homebound-team/beam/issues/983)) ([ee42c57](https://github.com/homebound-team/beam/commit/ee42c576b4c74b1213adc853f25c538ddc3ecc0e))
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2b5138009..fe4119133 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.329.0",
+  "version": "2.330.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",

From 05b34f6033d93a6023f422edefded84433091797 Mon Sep 17 00:00:00 2001
From: Brandon <bdow@homebound.com>
Date: Thu, 14 Dec 2023 13:10:26 -0500
Subject: [PATCH 07/10] feat: Support indentation of rows (#984)

---
 src/components/Table/GridTable.stories.tsx | 27 ++++++++++++++++++++++
 src/components/Table/TableStyles.tsx       | 14 ++++++++++-
 src/components/Table/components/Row.tsx    |  8 ++++++-
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/GridTable.stories.tsx b/src/components/Table/GridTable.stories.tsx
index dcf020e31..e4a561509 100644
--- a/src/components/Table/GridTable.stories.tsx
+++ b/src/components/Table/GridTable.stories.tsx
@@ -517,6 +517,33 @@ export const StyleCard = newStory(() => {
   );
 }, {});
 
+export const LeveledStyleCard = newStory(() => {
+  const nameColumn: GridColumn<NestedRow> = {
+    header: () => "Name",
+    parent: (row) => row.name,
+    child: (row) => row.name,
+    grandChild: (row) => row.name,
+    add: () => "Add",
+  };
+  const valueColumn: GridColumn<NestedRow> = {
+    header: () => "Value",
+    parent: (row) => row.name,
+    child: (row) => row.name,
+    grandChild: (row) => row.name,
+    add: () => "Add",
+    w: "200px",
+  };
+  return (
+    <div css={Css.wPx(550).$}>
+      <GridTable
+        style={cardStyle}
+        columns={[collapseColumn<NestedRow>(), selectColumn<NestedRow>(), nameColumn, valueColumn]}
+        rows={rowsWithHeader}
+      />
+    </div>
+  );
+}, {});
+
 export const StyleCardWithOneColumn = newStory(() => {
   const nameColumn: GridColumn<Row> = { header: "Name", data: ({ name }) => name };
   return (
diff --git a/src/components/Table/TableStyles.tsx b/src/components/Table/TableStyles.tsx
index 97bfcd283..cf973f236 100644
--- a/src/components/Table/TableStyles.tsx
+++ b/src/components/Table/TableStyles.tsx
@@ -51,7 +51,15 @@ export interface GridStyle {
   /** Minimum table width in pixels. Used when calculating columns sizes */
   minWidthPx?: number;
   /** Css to apply at each level of a parent/child nested table. */
-  levels?: Record<number, { cellCss?: Properties; firstContentColumn?: Properties }>;
+  levels?: Record<
+    number,
+    {
+      /** Number of pixels to indent the row. This value will be subtracted from the "first content column" width. First content column is the first column that is not an 'action' column (i.e. non-checkbox or non-collapse button column) */
+      rowIndent?: number;
+      cellCss?: Properties;
+      firstContentColumn?: Properties;
+    }
+  >;
   /** Allows for customization of the background color used to denote an "active" row */
   activeBgColor?: Palette;
   /** Defines styles for the group row which holds the selected rows that have been filtered out */
@@ -223,6 +231,10 @@ export const cardStyle: GridStyle = {
   },
   rowHoverColor: "none",
   nonHeaderRowHoverCss: Css.bshHover.bGray700.$,
+  levels: {
+    1: { rowIndent: 24 },
+    2: { rowIndent: 48 },
+  },
 };
 
 export function resolveStyles(style: GridStyle | GridStyleDef): GridStyle {
diff --git a/src/components/Table/components/Row.tsx b/src/components/Table/components/Row.tsx
index 95da77496..771e7c256 100644
--- a/src/components/Table/components/Row.tsx
+++ b/src/components/Table/components/Row.tsx
@@ -78,6 +78,8 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
   const showRowHoverColor = !reservedRowKinds.includes(row.kind) && !omitRowHover && style.rowHoverColor !== "none";
 
   const rowStyleCellCss = maybeApplyFunction(row as any, rowStyle?.cellCss);
+  const levelIndent = style.levels && style.levels[level]?.rowIndent;
+
   const rowCss = {
     ...(!reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss),
     // Optionally include the row hover styles, by default they should be turned on.
@@ -90,6 +92,7 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
         // Need to spread this to make TS happy.
         ":hover": { ...style.nonHeaderRowHoverCss },
       }),
+    ...(levelIndent && Css.mlPx(levelIndent).$),
     // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
     ...(as === "table" ? {} : Css.relative.df.fg1.fs1.addIn("&>*", Css.flexNone.$).$),
     // Apply `cursorPointer` to the row if it has a link or `onClick` value.
@@ -289,7 +292,10 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
             // Apply cell highlight styles to active cell and hover
             ...Css.if(applyCellHighlight && isCellActive).br4.boxShadow(`inset 0 0 0 1px ${Palette.Blue700}`).$,
             // Define the width of the column on each cell. Supports col spans.
-            width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")})`,
+            // If we have a 'levelIndent' defined, then subtract that amount from the first content column's width to ensure all columns will still line up properly
+            width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${
+              applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""
+            })`,
             ...(typeof column.mw === "string" ? Css.mw(column.mw).$ : {}),
           };
 

From c2e1bcd115b9f037d8318dba8d2b4333c59e8244 Mon Sep 17 00:00:00 2001
From: Homebound Bot <eng@homebound.com>
Date: Thu, 14 Dec 2023 18:13:20 +0000
Subject: [PATCH 08/10] chore(release): 2.331.0 [skip ci]

## [2.331.0](https://github.com/homebound-team/beam/compare/v2.330.0...v2.331.0) (2023-12-14)

### Features

* Support indentation of rows ([#984](https://github.com/homebound-team/beam/issues/984)) ([05b34f6](https://github.com/homebound-team/beam/commit/05b34f6033d93a6023f422edefded84433091797))
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fe4119133..9b64afdfa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.330.0",
+  "version": "2.331.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",

From e2a06bd6022663fc4b4c858b390de551ce483093 Mon Sep 17 00:00:00 2001
From: Stephen Haberman <shaberman@homebound.com>
Date: Fri, 15 Dec 2023 10:03:01 -0600
Subject: [PATCH 09/10] fix: Fix Switch not toggling. (#985)

---
 src/inputs/Switch.stories.tsx |  1 -
 src/inputs/Switch.test.tsx    | 41 +++++++++++++++++++++++++++++++++++
 src/inputs/Switch.tsx         | 36 ++++++++++++++++--------------
 3 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 src/inputs/Switch.test.tsx

diff --git a/src/inputs/Switch.stories.tsx b/src/inputs/Switch.stories.tsx
index 1567372a8..c4cb5e3b7 100644
--- a/src/inputs/Switch.stories.tsx
+++ b/src/inputs/Switch.stories.tsx
@@ -123,7 +123,6 @@ type SwitchWrapperProps = Omit<SwitchProps, "onChange" | "selected"> &
 
 function SwitchWrapper({ isHovered, isFocused, ...props }: SwitchWrapperProps) {
   const [selected, setSelected] = useState<boolean>(props.selected || false);
-
   return (
     <div
       css={{
diff --git a/src/inputs/Switch.test.tsx b/src/inputs/Switch.test.tsx
new file mode 100644
index 000000000..8c79a123f
--- /dev/null
+++ b/src/inputs/Switch.test.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { Switch as SwitchComponent, SwitchProps } from "src/inputs";
+import { click, render } from "src/utils/rtl";
+
+describe("Switch", () => {
+  it("can change", async () => {
+    const onChange = jest.fn();
+    // Given a switch
+    const r = await render(<SwitchTest label="Age" onChange={onChange} />);
+    // Then it defaults no checked
+    expect(r.age).not.toBeChecked();
+    // And when we click it, it flips to checked
+    click(r.age);
+    expect(r.age).toBeChecked();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    // And if we click it again, it flips back to unchecked
+    click(r.age);
+    expect(r.age).not.toBeChecked();
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+});
+
+type SwitchTestProps = Omit<SwitchProps, "onChange" | "selected"> & {
+  onChange?: (value: boolean) => void;
+  selected?: boolean;
+};
+
+function SwitchTest({ selected: initSelected, onChange: _onChange, ...props }: SwitchTestProps) {
+  const [selected, setSelected] = useState(initSelected || false);
+  return (
+    <SwitchComponent
+      labelStyle="inline"
+      selected={selected}
+      onChange={(value) => {
+        _onChange?.(value);
+        setSelected(value);
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/src/inputs/Switch.tsx b/src/inputs/Switch.tsx
index 3450392a9..96e482ca9 100644
--- a/src/inputs/Switch.tsx
+++ b/src/inputs/Switch.tsx
@@ -4,7 +4,7 @@ import { resolveTooltip } from "src/components";
 import { Label } from "src/components/Label";
 import { Css, Palette } from "src/Css";
 import { Icon } from "../components/Icon";
-import { toToggleState } from "../utils";
+import { toToggleState, useTestIds } from "../utils";
 
 export interface SwitchProps {
   /** Whether the element should receive focus on render. */
@@ -17,7 +17,7 @@ export interface SwitchProps {
   label: string;
   /** Where to put the label. */
   labelStyle?: "form" | "inline" | "filter" | "hidden" | "left" | "centered"; // TODO: Update `labelStyle` to make consistent with other `labelStyle` properties in the library
-  /** Whether or not to hide the label */
+  /** Whether to hide the label */
   hideLabel?: boolean;
   /** Handler when the interactive element state changes. */
   onChange: (value: boolean) => void;
@@ -49,12 +49,13 @@ export function Switch(props: SwitchProps) {
   const { isFocusVisible: isKeyboardFocus, focusProps } = useFocusRing(otherProps);
   const { hoverProps, isHovered } = useHover(ariaProps);
   const tooltip = resolveTooltip(disabled, props.tooltip);
+  const tid = useTestIds(otherProps, label);
 
   return (
-    <div
+    <label
       {...hoverProps}
       css={{
-        ...Css.relative.cursorPointer.df.w("max-content").selectNone.$,
+        ...Css.relative.cursorPointer.df.wmaxc.selectNone.$,
         ...(labelStyle === "form" && Css.fdc.$),
         ...(labelStyle === "left" && Css.w100.aic.$),
         ...(labelStyle === "inline" && Css.gap2.aic.$),
@@ -105,9 +106,9 @@ export function Switch(props: SwitchProps) {
         <Label label={label} tooltip={tooltip} inline xss={Css.smMd.gray900.if(compact).add("lineHeight", "1").$} />
       )}
       <VisuallyHidden>
-        <input ref={ref} {...inputProps} {...focusProps} />
+        <input ref={ref} {...inputProps} {...focusProps} {...tid} />
       </VisuallyHidden>
-    </div>
+    </label>
   );
 }
 
@@ -122,22 +123,25 @@ export const switchFocusStyles = Css.bshFocus.$;
 export const switchSelectedHoverStyles = Css.bgBlue900.$;
 
 // Circle inside Switcher/Toggle element styles
-const switchCircleDefaultStyles = (isCompact: boolean) => ({
-  ...Css.wPx(circleDiameter(isCompact))
-    .hPx(circleDiameter(isCompact))
-    .br100.bgWhite.bshBasic.absolute.leftPx(2)
-    .topPx(2).transition.df.aic.jcc.$,
-  svg: Css.hPx(toggleHeight(isCompact) / 2).wPx(toggleHeight(isCompact) / 2).$,
-});
+function switchCircleDefaultStyles(isCompact: boolean) {
+  return {
+    ...Css.wPx(circleDiameter(isCompact))
+      .hPx(circleDiameter(isCompact))
+      .br100.bgWhite.bshBasic.absolute.leftPx(2)
+      .topPx(2).transition.df.aic.jcc.$,
+    svg: Css.hPx(toggleHeight(isCompact) / 2).wPx(toggleHeight(isCompact) / 2).$,
+  };
+}
 
 /**
  * Affecting the `left` property due to transitions only working when there is
  * a previous value to work from.
  *
- * Calculation is as follow:
+ * Calculation is as follows:
  * - `100%` is the toggle width
  * - `${circleDiameter(isCompact)}px` is the circle diameter
  * - `2px` is to keep 2px edge spacing.
  */
-const switchCircleSelectedStyles = (isCompact: boolean) =>
-  Css.left(`calc(100% - ${circleDiameter(isCompact)}px - 2px);`).$;
+function switchCircleSelectedStyles(isCompact: boolean) {
+  return Css.left(`calc(100% - ${circleDiameter(isCompact)}px - 2px);`).$;
+}

From 9106443c00a69ff69dae1c5ccb40dd1458a758ba Mon Sep 17 00:00:00 2001
From: Homebound Bot <eng@homebound.com>
Date: Fri, 15 Dec 2023 16:05:56 +0000
Subject: [PATCH 10/10] chore(release): 2.331.1 [skip ci]

## [2.331.1](https://github.com/homebound-team/beam/compare/v2.331.0...v2.331.1) (2023-12-15)

### Bug Fixes

* Fix Switch not toggling. ([#985](https://github.com/homebound-team/beam/issues/985)) ([e2a06bd](https://github.com/homebound-team/beam/commit/e2a06bd6022663fc4b4c858b390de551ce483093))
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9b64afdfa..15c0d4799 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.331.0",
+  "version": "2.331.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",