From ea37465920c2b4d8c954ffad553c3136b126991a Mon Sep 17 00:00:00 2001
From: Georgina <gehalper@microsoft.com>
Date: Fri, 11 Jul 2025 17:37:07 -0400
Subject: [PATCH 1/4] fix draggableLine, use spinButton for numbers, use
 fileUploadLine from NME

---
 .../src/fluent/hoc/buttonLine.tsx             | 29 ++++++----
 .../src/fluent/hoc/fileUploadLine.tsx         |  7 ++-
 .../src/fluent/hoc/propertyLine.tsx           |  2 +-
 .../src/fluent/primitives/draggable.tsx       | 54 ++++++++++++++++++
 .../src/fluent/primitives/spinButton.tsx      | 21 +++++--
 .../src/lines/buttonLineComponent.tsx         |  4 +-
 .../src/lines/draggableLineComponent.tsx      | 45 +++++++--------
 .../draggableLineWithButtonComponent.tsx      | 55 ++++++++++---------
 .../src/lines/fileButtonLineComponent.tsx     |  3 +-
 .../src/lines/floatLineComponent.tsx          | 26 ++++++++-
 .../src/lines/messageLineComponent.tsx        | 16 +++++-
 11 files changed, 190 insertions(+), 72 deletions(-)
 create mode 100644 packages/dev/sharedUiComponents/src/fluent/primitives/draggable.tsx

diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx
index 7c361b796c6..cc0a65343ee 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx
@@ -1,6 +1,7 @@
-import { Body1, Button, makeStyles, tokens } from "@fluentui/react-components";
+import { Body1, Button as FluentButton, makeStyles, tokens } from "@fluentui/react-components";
 import { LineContainer } from "./propertyLine";
 import type { FunctionComponent } from "react";
+import type { FluentIcon } from "@fluentui/react-icons";
 
 const useButtonLineStyles = makeStyles({
     button: {
@@ -8,12 +9,11 @@ const useButtonLineStyles = makeStyles({
     },
 });
 
-export type ButtonLineProps = {
-    label: string;
+export type ButtonProps = {
     onClick: () => void;
+    icon?: FluentIcon;
+    label: string;
     disabled?: boolean;
-    icon?: string;
-    title?: string;
 };
 
 /**
@@ -21,13 +21,22 @@ export type ButtonLineProps = {
  * @param props Button props plus a label
  * @returns A button inside a line
  */
-export const ButtonLine: FunctionComponent<ButtonLineProps> = (props) => {
-    const classes = useButtonLineStyles();
+export const ButtonLine: FunctionComponent<ButtonProps> = (props) => {
     return (
         <LineContainer>
-            <Button className={classes.button} {...props}>
-                <Body1>{props.label}</Body1>
-            </Button>
+            <Button {...props} />
         </LineContainer>
     );
 };
+
+export const Button: FunctionComponent<ButtonProps> = (props) => {
+    const classes = useButtonLineStyles();
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { icon: Icon, ...buttonProps } = props;
+
+    return (
+        <FluentButton iconPosition="after" className={classes.button} {...buttonProps} icon={Icon && <Icon />}>
+            <Body1>{props.label}</Body1>
+        </FluentButton>
+    );
+};
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx
index 64a8c8dc06b..7c155b2060c 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx
@@ -1,9 +1,10 @@
 import { useRef } from "react";
 import type { FunctionComponent } from "react";
 import { ButtonLine } from "./buttonLine";
-import type { ButtonLineProps } from "./buttonLine";
+import type { ButtonProps } from "./buttonLine";
+import { DocumentAdd16Regular } from "@fluentui/react-icons";
 
-type FileUploadLineProps = Omit<ButtonLineProps, "onClick"> & {
+type FileUploadLineProps = Omit<ButtonProps, "onClick"> & {
     onClick: (files: FileList) => void;
     accept: string;
 };
@@ -25,7 +26,7 @@ export const FileUploadLine: FunctionComponent<FileUploadLineProps> = (props) =>
 
     return (
         <>
-            <ButtonLine onClick={handleButtonClick} label={props.label}></ButtonLine>
+            <ButtonLine onClick={handleButtonClick} icon={DocumentAdd16Regular} label={props.label}></ButtonLine>
             <input ref={inputRef} type="file" accept={props.accept} style={{ display: "none" }} onChange={handleChange} />
         </>
     );
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx
index eed22909864..ece3f22fa44 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx
@@ -11,13 +11,13 @@ const usePropertyLineStyles = makeStyles({
         width: "100%",
         display: "flex",
         flexDirection: "column", // Stack line + expanded content
+        padding: `${tokens.spacingVerticalXS} 0px`,
         borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     },
     line: {
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-start",
-        padding: `${tokens.spacingVerticalXS} 0px`,
         width: "100%",
     },
     label: {
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/draggable.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/draggable.tsx
new file mode 100644
index 00000000000..c20c49d08e4
--- /dev/null
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/draggable.tsx
@@ -0,0 +1,54 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+import { DeleteFilled } from "@fluentui/react-icons";
+import { LineContainer } from "../hoc/propertyLine";
+
+export type DraggableLineProps = {
+    format: string;
+    data: string;
+    tooltip: string;
+    label: string;
+    onDelete?: () => void;
+};
+
+const useDraggableStyles = makeStyles({
+    draggable: {
+        display: "inline-flex",
+        alignItems: "center",
+        columnGap: tokens.spacingHorizontalS,
+        cursor: "grab",
+        textAlign: "center",
+        boxSizing: "border-box",
+        borderBottom: "black",
+        margin: `${tokens.spacingVerticalXS} 0px`,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        ":hover": {
+            backgroundColor: tokens.colorBrandBackground2Hover,
+        },
+    },
+    icon: {
+        pointerEvents: "auto", // re‑enable interaction
+        display: "flex",
+        alignItems: "center",
+    },
+});
+
+export const DraggableLine: React.FunctionComponent<DraggableLineProps> = (props) => {
+    const classes = useDraggableStyles();
+    return (
+        <div
+            className={classes.draggable}
+            title={props.tooltip}
+            draggable={true}
+            onDragStart={(event) => {
+                event.dataTransfer.setData(props.format, props.data);
+            }}
+        >
+            <LineContainer>
+                {props.label}
+                {props.onDelete && <DeleteFilled className={classes.icon} onClick={props.onDelete} />}
+            </LineContainer>
+        </div>
+    );
+};
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx
index 50d90437cef..39424fa1b0b 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx
@@ -2,7 +2,7 @@ import { makeStyles, SpinButton as FluentSpinButton } from "@fluentui/react-comp
 import type { SpinButtonOnChangeData, SpinButtonChangeEvent } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
 import { useCallback, useState } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import { PropertyLine, type BaseComponentProps, type PropertyLineProps } from "../hoc/propertyLine";
 
 const useSpinStyles = makeStyles({
     base: {
@@ -11,19 +11,24 @@ const useSpinStyles = makeStyles({
     },
 });
 
-export type SpinButtonProps = BaseComponentProps<number>;
+export type SpinButtonProps = BaseComponentProps<number> & {
+    precision?: number; // Optional precision for the spin button
+    step?: number; // Optional step value for the spin button
+    min?: number;
+    max?: number;
+};
 
 export const SpinButton: FunctionComponent<SpinButtonProps> = (props) => {
     const classes = useSpinStyles();
 
-    const [spinButtonValue, setSpinButtonValue] = useState<number | null>(props.value);
+    const [spinButtonValue, setSpinButtonValue] = useState<number>(props.value);
 
     const onSpinButtonChange = useCallback(
         (_ev: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {
             // Stop propagation of the event to prevent it from bubbling up
             _ev.stopPropagation();
 
-            if (data.value !== undefined) {
+            if (data.value != null) {
                 setSpinButtonValue(data.value);
             } else if (data.displayValue !== undefined) {
                 const newValue = parseFloat(data.displayValue);
@@ -37,7 +42,13 @@ export const SpinButton: FunctionComponent<SpinButtonProps> = (props) => {
 
     return (
         <div className={classes.base}>
-            <FluentSpinButton value={spinButtonValue} onChange={onSpinButtonChange} />
+            <FluentSpinButton {...props} value={spinButtonValue} onChange={onSpinButtonChange} />
         </div>
     );
 };
+
+export const SpinButtonPropertyLine: FunctionComponent<SpinButtonProps & PropertyLineProps> = (props) => (
+    <PropertyLine {...props}>
+        <SpinButton {...props} />
+    </PropertyLine>
+);
diff --git a/packages/dev/sharedUiComponents/src/lines/buttonLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/buttonLineComponent.tsx
index e50edb0bec3..4d89d0bee05 100644
--- a/packages/dev/sharedUiComponents/src/lines/buttonLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/buttonLineComponent.tsx
@@ -16,7 +16,9 @@ export class ButtonLineComponent extends React.Component<IButtonLineComponentPro
     }
 
     renderFluent() {
-        return <ButtonLine label={this.props.label} icon={this.props.icon} title={this.props.label} onClick={this.props.onClick} disabled={this.props.isDisabled} />;
+        // NOTE when callsit replaces usage of this with the ButtonLine, can pass in a true fluent icon
+        const fluentIcon = this.props.icon ? () => <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className="icon" /> : undefined;
+        return <ButtonLine label={this.props.label} icon={fluentIcon} onClick={this.props.onClick} disabled={this.props.isDisabled} />;
     }
     renderOriginal() {
         return (
diff --git a/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
index 47d9268d5cf..cedcd0a930f 100644
--- a/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
@@ -1,28 +1,29 @@
-import * as React from "react";
+import { useContext } from "react";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
+import { DraggableLine } from "shared-ui-components/fluent/primitives/draggable";
 
-export interface IButtonLineComponentProps {
+export type DraggableLineProps = {
     format: string;
     data: string;
     tooltip: string;
-}
+};
 
-export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
-    constructor(props: IButtonLineComponentProps) {
-        super(props);
+export const DraggableLineComponent: React.FunctionComponent<DraggableLineProps> = (props) => {
+    const useFluent = useContext(ToolContext);
+    if (useFluent) {
+        // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the Block_Foo lives
+        return <DraggableLine {...props} label={props.data.replace("Block", "")} />;
     }
-
-    override render() {
-        return (
-            <div
-                className="draggableLine"
-                title={this.props.tooltip}
-                draggable={true}
-                onDragStart={(event) => {
-                    event.dataTransfer.setData(this.props.format, this.props.data);
-                }}
-            >
-                {this.props.data.replace("Block", "")}
-            </div>
-        );
-    }
-}
+    return (
+        <div
+            className="draggableLine"
+            title={props.tooltip}
+            draggable={true}
+            onDragStart={(event) => {
+                event.dataTransfer.setData(props.format, props.data);
+            }}
+        >
+            {props.data.replace("Block", "")}
+        </div>
+    );
+};
diff --git a/packages/dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx b/packages/dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx
index b050b55f2d0..d96e0ef795f 100644
--- a/packages/dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx
@@ -1,6 +1,8 @@
-import * as React from "react";
+import { useContext } from "react";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
+import { DraggableLine } from "../fluent/primitives/draggable";
 
-export interface IDraggableLineWithButtonComponent {
+export type DraggableLineProps = {
     format: string;
     data: string;
     tooltip: string;
@@ -8,34 +10,33 @@ export interface IDraggableLineWithButtonComponent {
     onIconClick: (value: string) => void;
     iconTitle: string;
     lenSuffixToRemove?: number;
-}
+};
 
-export class DraggableLineWithButtonComponent extends React.Component<IDraggableLineWithButtonComponent> {
-    constructor(props: IDraggableLineWithButtonComponent) {
-        super(props);
+export const DraggableLineWithButtonComponent: React.FunctionComponent<DraggableLineProps> = (props) => {
+    const useFluent = useContext(ToolContext);
+    if (useFluent) {
+        // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the data string lives
+        return <DraggableLine {...props} label={props.data.substring(0, props.data.length - (props.lenSuffixToRemove ?? 6))} onDelete={() => props.onIconClick(props.data)} />;
     }
-
-    override render() {
-        return (
+    return (
+        <div
+            className="draggableLine withButton"
+            title={props.tooltip}
+            draggable={true}
+            onDragStart={(event) => {
+                event.dataTransfer.setData(props.format, props.data);
+            }}
+        >
+            {props.data.substring(0, props.data.length - (props.lenSuffixToRemove ?? 6))}
             <div
-                className="draggableLine withButton"
-                title={this.props.tooltip}
-                draggable={true}
-                onDragStart={(event) => {
-                    event.dataTransfer.setData(this.props.format, this.props.data);
+                className="icon"
+                onClick={() => {
+                    props.onIconClick(props.data);
                 }}
+                title={props.iconTitle}
             >
-                {this.props.data.substring(0, this.props.data.length - (this.props.lenSuffixToRemove ?? 6))}
-                <div
-                    className="icon"
-                    onClick={() => {
-                        this.props.onIconClick(this.props.data);
-                    }}
-                    title={this.props.iconTitle}
-                >
-                    <img className="img" title={this.props.iconTitle} src={this.props.iconImage} />
-                </div>
+                <img className="img" title={props.iconTitle} src={props.iconImage} />
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
diff --git a/packages/dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx
index fba6e293333..ce2c64a2d77 100644
--- a/packages/dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx
@@ -30,7 +30,8 @@ export class FileButtonLine extends React.Component<IFileButtonLineProps> {
     }
 
     renderFluent() {
-        return <FileUploadLine {...this.props} onClick={(file) => this.props.onClick(file[0])} />;
+        const { icon, ...fileProps } = this.props;
+        return <FileUploadLine {...fileProps} onClick={(file) => this.props.onClick(file[0])} />;
     }
 
     renderOriginal() {
diff --git a/packages/dev/sharedUiComponents/src/lines/floatLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/floatLineComponent.tsx
index f77ef4b2e67..5acee7c1931 100644
--- a/packages/dev/sharedUiComponents/src/lines/floatLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/floatLineComponent.tsx
@@ -8,6 +8,9 @@ import { conflictingValuesPlaceholder } from "./targetsProxy";
 import { InputArrowsComponent } from "./inputArrowsComponent";
 import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyCommandToClipboard";
 import copyIcon from "../imgs/copy.svg";
+import { NumberInputPropertyLine } from "../fluent/hoc/inputPropertyLine";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
+import { SpinButtonPropertyLine } from "shared-ui-components/fluent/primitives/spinButton";
 
 interface IFloatLineComponentProps {
     label: string;
@@ -212,7 +215,25 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
         }
     }
 
-    override render() {
+    renderFluent() {
+        const props = {
+            label: this.props.label,
+            value: Number(this.state.value),
+            onChange: (value: number) => this.updateValue(value.toString()),
+            min: this.props.min,
+            max: this.props.max,
+            precision: this.props.digits ?? (this.props.isInteger ? 0 : undefined),
+            disabled: this.props.disabled,
+            step: this.props.step ? parseFloat(this.props.step) : undefined,
+        };
+
+        if (this.props.arrows) {
+            return <SpinButtonPropertyLine {...props} />;
+        }
+        return <NumberInputPropertyLine {...props} />;
+    }
+
+    renderOriginal() {
         let valueAsNumber: number;
 
         if (this.props.isInteger) {
@@ -295,4 +316,7 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
             </>
         );
     }
+    override render() {
+        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;
+    }
 }
diff --git a/packages/dev/sharedUiComponents/src/lines/messageLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/messageLineComponent.tsx
index d3327e062c0..09779e62a3f 100644
--- a/packages/dev/sharedUiComponents/src/lines/messageLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/messageLineComponent.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
+import { MessageBar } from "../fluent/primitives/messageBar";
 
 interface IMessageLineComponentProps {
     text: string;
@@ -13,7 +15,16 @@ export class MessageLineComponent extends React.Component<IMessageLineComponentP
         super(props);
     }
 
-    override render() {
+    renderFluent() {
+        return (
+            <MessageBar
+                title=""
+                message={this.props.text}
+                intent={this.props.color === "Red" ? "error" : this.props.color === "Green" ? "success" : this.props.color === "Yellow" ? "warning" : "info"}
+            />
+        );
+    }
+    renderOriginal() {
         if (this.props.icon) {
             return (
                 <div className="iconMessageLine">
@@ -35,4 +46,7 @@ export class MessageLineComponent extends React.Component<IMessageLineComponentP
             </div>
         );
     }
+    override render() {
+        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;
+    }
 }

From 08411d264bd5463ef218c09d084f222aae9eac8f Mon Sep 17 00:00:00 2001
From: Georgina <gehalper@microsoft.com>
Date: Fri, 11 Jul 2025 20:08:26 -0400
Subject: [PATCH 2/4] pr comments and restructure files to make propertyline
 distinction more clear

---
 .../src/components/Button.tsx                 |  5 +--
 .../src/fluent/hoc/buttonLine.tsx             | 31 ++-----------------
 .../src/fluent/hoc/fileUploadLine.tsx         |  6 ++--
 .../booleanBadgePropertyLine.tsx}             |  2 +-
 .../checkboxPropertyLine.tsx                  |  4 +--
 .../{ => propertyLines}/colorPropertyLine.tsx | 14 ++++-----
 .../dropdownPropertyLine.tsx                  |  4 +--
 .../hexPropertyLine.tsx}                      |  4 +--
 .../{ => propertyLines}/inputPropertyLine.tsx |  4 +--
 .../{ => propertyLines}/linkPropertyLine.tsx  |  2 +-
 .../hoc/{ => propertyLines}/propertyLine.tsx  |  4 +--
 .../switchPropertyLine.tsx                    |  4 +--
 .../syncedSliderPropertyLine.tsx}             |  8 ++---
 .../{ => propertyLines}/textPropertyLine.tsx  |  0
 .../vectorPropertyLine.tsx                    | 10 +++---
 .../src/fluent/primitives/button.tsx          | 28 +++++++++++++++++
 .../src/fluent/primitives/checkbox.tsx        |  2 +-
 .../src/fluent/primitives/colorPicker.tsx     |  2 +-
 .../src/fluent/primitives/draggable.tsx       |  2 +-
 .../src/fluent/primitives/dropdown.tsx        |  2 +-
 .../src/fluent/primitives/gradient.tsx        |  2 +-
 .../src/fluent/primitives/input.tsx           |  2 +-
 .../src/fluent/primitives/spinButton.tsx      |  5 +--
 .../src/fluent/primitives/switch.tsx          |  2 +-
 .../src/fluent/primitives/syncedSlider.tsx    |  2 +-
 .../src/fluent/primitives/textarea.tsx        |  2 +-
 .../src/lines/booleanLineComponent.tsx        |  4 +--
 .../src/lines/checkBoxLineComponent.tsx       |  2 +-
 .../src/lines/colorLineComponent.tsx          |  4 +--
 .../src/lines/draggableLineComponent.tsx      | 13 +++-----
 .../src/lines/floatLineComponent.tsx          |  2 +-
 .../src/lines/optionsLineComponent.tsx        |  2 +-
 .../src/lines/sliderLineComponent.tsx         |  4 +--
 .../src/lines/textInputLineComponent.tsx      |  2 +-
 .../src/lines/textLineComponent.tsx           |  8 ++---
 .../src/lines/vector3LineComponent.tsx        |  2 +-
 .../src/split/splitContainer.tsx              |  5 ++-
 37 files changed, 102 insertions(+), 99 deletions(-)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{readonlyBooleanLine.tsx => propertyLines/booleanBadgePropertyLine.tsx} (83%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/checkboxPropertyLine.tsx (79%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/colorPropertyLine.tsx (69%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/dropdownPropertyLine.tsx (92%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{hexLineComponent.tsx => propertyLines/hexPropertyLine.tsx} (78%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/inputPropertyLine.tsx (85%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/linkPropertyLine.tsx (91%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/propertyLine.tsx (95%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/switchPropertyLine.tsx (85%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{syncedSliderLine.tsx => propertyLines/syncedSliderPropertyLine.tsx} (57%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/textPropertyLine.tsx (100%)
 rename packages/dev/sharedUiComponents/src/fluent/hoc/{ => propertyLines}/vectorPropertyLine.tsx (85%)
 create mode 100644 packages/dev/sharedUiComponents/src/fluent/primitives/button.tsx

diff --git a/packages/dev/sharedUiComponents/src/components/Button.tsx b/packages/dev/sharedUiComponents/src/components/Button.tsx
index abca3fc4d4a..ebeab2182f0 100644
--- a/packages/dev/sharedUiComponents/src/components/Button.tsx
+++ b/packages/dev/sharedUiComponents/src/components/Button.tsx
@@ -2,7 +2,8 @@ import type { PropsWithChildren } from "react";
 import * as styles from "./Button.module.scss";
 import { ClassNames } from "./classNames";
 
-export type ButtonProps = {
+// Will be deleted after fluent work complete
+export type ButtonComponentProps = {
     disabled?: boolean;
     active?: boolean;
     onClick?: () => void;
@@ -12,7 +13,7 @@ export type ButtonProps = {
     backgroundColor?: string;
 };
 
-export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {
+export const Button: React.FC<PropsWithChildren<ButtonComponentProps>> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {
     return (
         <button
             className={ClassNames(
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx
index cc0a65343ee..6f6bd9cc4c0 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx
@@ -1,20 +1,7 @@
-import { Body1, Button as FluentButton, makeStyles, tokens } from "@fluentui/react-components";
-import { LineContainer } from "./propertyLine";
+import { LineContainer } from "./propertyLines/propertyLine";
 import type { FunctionComponent } from "react";
-import type { FluentIcon } from "@fluentui/react-icons";
-
-const useButtonLineStyles = makeStyles({
-    button: {
-        border: `1px solid ${tokens.colorBrandBackground}`,
-    },
-});
-
-export type ButtonProps = {
-    onClick: () => void;
-    icon?: FluentIcon;
-    label: string;
-    disabled?: boolean;
-};
+import { Button } from "../primitives/button";
+import type { ButtonProps } from "../primitives/button";
 
 /**
  * Wraps a button with a label in a line container
@@ -28,15 +15,3 @@ export const ButtonLine: FunctionComponent<ButtonProps> = (props) => {
         </LineContainer>
     );
 };
-
-export const Button: FunctionComponent<ButtonProps> = (props) => {
-    const classes = useButtonLineStyles();
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { icon: Icon, ...buttonProps } = props;
-
-    return (
-        <FluentButton iconPosition="after" className={classes.button} {...buttonProps} icon={Icon && <Icon />}>
-            <Body1>{props.label}</Body1>
-        </FluentButton>
-    );
-};
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx
index 7c155b2060c..c8921eb6ffc 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx
@@ -1,8 +1,8 @@
 import { useRef } from "react";
 import type { FunctionComponent } from "react";
 import { ButtonLine } from "./buttonLine";
-import type { ButtonProps } from "./buttonLine";
-import { DocumentAdd16Regular } from "@fluentui/react-icons";
+import type { ButtonProps } from "../primitives/button";
+import { ArrowUploadRegular } from "@fluentui/react-icons";
 
 type FileUploadLineProps = Omit<ButtonProps, "onClick"> & {
     onClick: (files: FileList) => void;
@@ -26,7 +26,7 @@ export const FileUploadLine: FunctionComponent<FileUploadLineProps> = (props) =>
 
     return (
         <>
-            <ButtonLine onClick={handleButtonClick} icon={DocumentAdd16Regular} label={props.label}></ButtonLine>
+            <ButtonLine onClick={handleButtonClick} icon={ArrowUploadRegular} label={props.label}></ButtonLine>
             <input ref={inputRef} type="file" accept={props.accept} style={{ display: "none" }} onChange={handleChange} />
         </>
     );
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/readonlyBooleanLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/booleanBadgePropertyLine.tsx
similarity index 83%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/readonlyBooleanLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/booleanBadgePropertyLine.tsx
index ff6c10d6171..d85ba85779a 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/readonlyBooleanLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/booleanBadgePropertyLine.tsx
@@ -8,7 +8,7 @@ import type { PropertyLineProps } from "./propertyLine";
  * @param props - The properties for the PropertyLine, including the boolean value to display.
  * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.
  */
-export const ReadonlyBooleanLine: FunctionComponent<PropertyLineProps & { value: boolean }> = (props) => (
+export const BooleanBadgePropertyLine: FunctionComponent<PropertyLineProps & { value: boolean }> = (props) => (
     <PropertyLine label={props.label}>
         <PresenceBadge status={props.value ? "available" : "do-not-disturb"} outOfOffice={true} />
     </PropertyLine>
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/checkboxPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/checkboxPropertyLine.tsx
similarity index 79%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/checkboxPropertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/checkboxPropertyLine.tsx
index 1d09fce9fad..29c6e0e61c4 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/checkboxPropertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/checkboxPropertyLine.tsx
@@ -1,8 +1,8 @@
 import { PropertyLine } from "./propertyLine";
 import type { PropertyLineProps } from "./propertyLine";
 import type { FunctionComponent } from "react";
-import { Checkbox } from "../primitives/checkbox";
-import type { CheckboxProps } from "../primitives/checkbox";
+import { Checkbox } from "../../primitives/checkbox";
+import type { CheckboxProps } from "../../primitives/checkbox";
 
 /**
  * Wraps a checkbox in a property line
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx
similarity index 69%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx
index 9f91c52e4ff..c092b583d55 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx
@@ -3,12 +3,12 @@ import { forwardRef, useState } from "react";
 
 import type { PropertyLineProps } from "./propertyLine";
 import { PropertyLine } from "./propertyLine";
-import { SyncedSliderLine } from "./syncedSliderLine";
+import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine";
 
 import type { Color3 } from "core/Maths/math.color";
 import { Color4 } from "core/Maths/math.color";
-import { ColorPickerPopup } from "../primitives/colorPicker";
-import type { ColorPickerProps } from "../primitives/colorPicker";
+import { ColorPickerPopup } from "../../primitives/colorPicker";
+import type { ColorPickerProps } from "../../primitives/colorPicker";
 
 export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;
 
@@ -45,10 +45,10 @@ const ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((pr
             {...props}
             expandedContent={
                 <>
-                    <SyncedSliderLine label="R" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "r")} />
-                    <SyncedSliderLine label="G" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "g")} />
-                    <SyncedSliderLine label="B" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "b")} />
-                    {color instanceof Color4 && <SyncedSliderLine label="A" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, "a")} />}
+                    <SyncedSliderPropertyLine label="R" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "r")} />
+                    <SyncedSliderPropertyLine label="G" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "g")} />
+                    <SyncedSliderPropertyLine label="B" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, "b")} />
+                    {color instanceof Color4 && <SyncedSliderPropertyLine label="A" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, "a")} />}
                 </>
             }
         >
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/dropdownPropertyLine.tsx
similarity index 92%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/dropdownPropertyLine.tsx
index b2624385b41..f74f63c0267 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/dropdownPropertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/dropdownPropertyLine.tsx
@@ -1,6 +1,6 @@
 import type { Nullable } from "core/types";
-import { Dropdown } from "../primitives/dropdown";
-import type { AcceptedDropdownValue, DropdownProps } from "../primitives/dropdown";
+import { Dropdown } from "../../primitives/dropdown";
+import type { AcceptedDropdownValue, DropdownProps } from "../../primitives/dropdown";
 import { PropertyLine } from "./propertyLine";
 import type { PropertyLineProps } from "./propertyLine";
 import type { FunctionComponent } from "react";
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/hexLineComponent.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/hexPropertyLine.tsx
similarity index 78%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/hexLineComponent.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/hexPropertyLine.tsx
index aaf85e7886d..3fe38025dff 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/hexLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/hexPropertyLine.tsx
@@ -1,8 +1,8 @@
 import { PropertyLine } from "./propertyLine";
 import type { PropertyLineProps } from "./propertyLine";
 import type { FunctionComponent } from "react";
-import { InputHexField } from "../primitives/colorPicker";
-import type { InputHexProps } from "../primitives/colorPicker";
+import { InputHexField } from "../../primitives/colorPicker";
+import type { InputHexProps } from "../../primitives/colorPicker";
 
 /**
  * Wraps a hex input in a property line
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/inputPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/inputPropertyLine.tsx
similarity index 85%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/inputPropertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/inputPropertyLine.tsx
index d92f9919621..a78d5b47743 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/inputPropertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/inputPropertyLine.tsx
@@ -1,8 +1,8 @@
 import { PropertyLine } from "./propertyLine";
 import type { PropertyLineProps } from "./propertyLine";
 import type { FunctionComponent } from "react";
-import { NumberInput, TextInput } from "../primitives/input";
-import type { InputProps } from "../primitives/input";
+import { NumberInput, TextInput } from "../../primitives/input";
+import type { InputProps } from "../../primitives/input";
 
 /**
  * Wraps a text input in a property line
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/linkPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/linkPropertyLine.tsx
similarity index 91%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/linkPropertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/linkPropertyLine.tsx
index f2cf734f481..911b31474c6 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/linkPropertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/linkPropertyLine.tsx
@@ -1,6 +1,6 @@
 import { Body1 } from "@fluentui/react-components";
 import { PropertyLine } from "./propertyLine";
-import { Link } from "../primitives/link";
+import { Link } from "../../primitives/link";
 import type { PropertyLineProps } from "./propertyLine";
 import type { FunctionComponent } from "react";
 
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx
similarity index 95%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx
index ece3f22fa44..2c4c9e27a21 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/propertyLine.tsx
@@ -3,8 +3,8 @@ import { Collapse } from "@fluentui/react-motion-components-preview";
 import { AddFilled, CopyRegular, SubtractFilled } from "@fluentui/react-icons";
 import type { FunctionComponent, HTMLProps, PropsWithChildren } from "react";
 import { useContext, useState, forwardRef } from "react";
-import { copyCommandToClipboard } from "../../copyCommandToClipboard";
-import { ToolContext } from "./fluentToolWrapper";
+import { copyCommandToClipboard } from "../../../copyCommandToClipboard";
+import { ToolContext } from "../fluentToolWrapper";
 
 const usePropertyLineStyles = makeStyles({
     container: {
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/switchPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/switchPropertyLine.tsx
similarity index 85%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/switchPropertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/switchPropertyLine.tsx
index 608c699de7d..a69fd05de83 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/switchPropertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/switchPropertyLine.tsx
@@ -1,8 +1,8 @@
 import { PropertyLine } from "./propertyLine";
 import type { PropertyLineProps } from "./propertyLine";
 import type { FunctionComponent } from "react";
-import { Switch } from "../primitives/switch";
-import type { SwitchProps } from "../primitives/switch";
+import { Switch } from "../../primitives/switch";
+import type { SwitchProps } from "../../primitives/switch";
 /**
  * Wraps a switch in a property line
  * @param props - The properties for the switch and property line
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/syncedSliderLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/syncedSliderPropertyLine.tsx
similarity index 57%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/syncedSliderLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/syncedSliderPropertyLine.tsx
index f00b558af3e..4e12039b850 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/syncedSliderLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/syncedSliderPropertyLine.tsx
@@ -1,16 +1,16 @@
 import { PropertyLine } from "./propertyLine";
 import type { PropertyLineProps } from "./propertyLine";
-import { SyncedSliderInput } from "../primitives/syncedSlider";
-import type { SyncedSliderProps } from "../primitives/syncedSlider";
+import { SyncedSliderInput } from "../../primitives/syncedSlider";
+import type { SyncedSliderProps } from "../../primitives/syncedSlider";
 import type { FunctionComponent } from "react";
 
-type SyncedSliderLineProps = SyncedSliderProps & PropertyLineProps;
+type SyncedSliderPropertyProps = SyncedSliderProps & PropertyLineProps;
 /**
  * Renders a simple wrapper around the SyncedSliderInput
  * @param props
  * @returns
  */
-export const SyncedSliderLine: FunctionComponent<SyncedSliderLineProps> = (props): React.ReactElement => {
+export const SyncedSliderPropertyLine: FunctionComponent<SyncedSliderPropertyProps> = (props): React.ReactElement => {
     const { label, description, ...sliderProps } = props;
     return (
         <PropertyLine label={label} description={description}>
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/textPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/textPropertyLine.tsx
similarity index 100%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/textPropertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/textPropertyLine.tsx
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx
similarity index 85%
rename from packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx
rename to packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx
index 3dc8bf29e59..13f6ff05a18 100644
--- a/packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx
@@ -5,7 +5,7 @@ import { Body1 } from "@fluentui/react-components";
 import { PropertyLine } from "./propertyLine";
 import type { BaseComponentProps, PropertyLineProps } from "./propertyLine";
 
-import { SyncedSliderLine } from "./syncedSliderLine";
+import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine";
 
 import { Quaternion, Vector4 } from "core/Maths/math.vector";
 import type { Vector3 } from "core/Maths/math.vector";
@@ -63,10 +63,10 @@ const TensorPropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3 | Ve
             {...props}
             expandedContent={
                 <>
-                    <SyncedSliderLine label="X" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, "x")} />
-                    <SyncedSliderLine label="Y" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, "y")} />
-                    <SyncedSliderLine label="Z" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, "z")} />
-                    {vector instanceof Vector4 && <SyncedSliderLine label="W" value={vector.w} min={min} max={max} onChange={(val) => onChange(val, "w")} />}
+                    <SyncedSliderPropertyLine label="X" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, "x")} />
+                    <SyncedSliderPropertyLine label="Y" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, "y")} />
+                    <SyncedSliderPropertyLine label="Z" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, "z")} />
+                    {vector instanceof Vector4 && <SyncedSliderPropertyLine label="W" value={vector.w} min={min} max={max} onChange={(val) => onChange(val, "w")} />}
                 </>
             }
         >
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/button.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/button.tsx
new file mode 100644
index 00000000000..d97904b4835
--- /dev/null
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/button.tsx
@@ -0,0 +1,28 @@
+import { Body1, Button as FluentButton, makeStyles, tokens } from "@fluentui/react-components";
+import type { FunctionComponent } from "react";
+import type { FluentIcon } from "@fluentui/react-icons";
+
+const useButtonLineStyles = makeStyles({
+    button: {
+        border: `1px solid ${tokens.colorBrandBackground}`,
+    },
+});
+
+export type ButtonProps = {
+    onClick: () => void;
+    icon?: FluentIcon;
+    label: string;
+    disabled?: boolean;
+};
+
+export const Button: FunctionComponent<ButtonProps> = (props) => {
+    const classes = useButtonLineStyles();
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { icon: Icon, ...buttonProps } = props;
+
+    return (
+        <FluentButton iconPosition="after" className={classes.button} {...buttonProps} icon={Icon && <Icon />}>
+            <Body1>{props.label}</Body1>
+        </FluentButton>
+    );
+};
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
index 6207167c63e..7298468bc15 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
@@ -3,7 +3,7 @@ import type { ChangeEvent, FunctionComponent } from "react";
 
 import { Checkbox as FluentCheckbox } from "@fluentui/react-components";
 import { useEffect, useState } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine";
 
 export type CheckboxProps = BaseComponentProps<boolean>;
 /**
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx
index c346c558cd8..f6d04f4d5bd 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/colorPicker.tsx
@@ -23,7 +23,7 @@ import {
 } from "@fluentui/react-components";
 import type { SpinButtonChangeEvent, SpinButtonOnChangeData, ColorPickerProps as FluentColorPickerProps, InputOnChangeData } from "@fluentui/react-components";
 import { Color3, Color4 } from "core/Maths/math.color";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine";
 
 const useColorPickerStyles = makeStyles({
     colorPickerContainer: {
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/draggable.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/draggable.tsx
index c20c49d08e4..cd4269204a2 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/draggable.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/draggable.tsx
@@ -1,6 +1,6 @@
 import { makeStyles, tokens } from "@fluentui/react-components";
 import { DeleteFilled } from "@fluentui/react-icons";
-import { LineContainer } from "../hoc/propertyLine";
+import { LineContainer } from "../hoc/propertyLines/propertyLine";
 
 export type DraggableLineProps = {
     format: string;
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx
index cd43efa6a1b..483e8127388 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx
@@ -1,7 +1,7 @@
 import { Dropdown as FluentDropdown, makeStyles, Option } from "@fluentui/react-components";
 import { useEffect, useMemo, useState } from "react";
 import type { FunctionComponent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine";
 import type { Nullable } from "core/types";
 
 const useDropdownStyles = makeStyles({
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/gradient.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/gradient.tsx
index a2271116123..bdbfdd7d1c5 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/gradient.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/gradient.tsx
@@ -5,7 +5,7 @@ import { makeStyles, tokens } from "@fluentui/react-components";
 import { SyncedSliderInput } from "./syncedSlider";
 import { Color3, Color4 } from "core/Maths/math.color";
 import { ColorPickerPopup } from "./colorPicker";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine";
 import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "core/Misc/gradients";
 import { GradientBlockColorStep } from "core/Materials/Node/Blocks/gradientBlock";
 
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/input.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/input.tsx
index b1c1798557e..c73f1f78775 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/input.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/input.tsx
@@ -2,7 +2,7 @@ import type { FunctionComponent, KeyboardEvent, ChangeEvent } from "react";
 import { useEffect, useState } from "react";
 
 import { Input as FluentInput, makeStyles } from "@fluentui/react-components";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine";
 
 const useInputStyles = makeStyles({
     text: {
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx
index 39424fa1b0b..5c7fdf0ddf6 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx
@@ -2,7 +2,8 @@ import { makeStyles, SpinButton as FluentSpinButton } from "@fluentui/react-comp
 import type { SpinButtonOnChangeData, SpinButtonChangeEvent } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
 import { useCallback, useState } from "react";
-import { PropertyLine, type BaseComponentProps, type PropertyLineProps } from "../hoc/propertyLine";
+import type { BaseComponentProps, PropertyLineProps } from "../hoc/propertyLines/propertyLine";
+import { PropertyLine } from "../hoc/propertyLines/propertyLine";
 
 const useSpinStyles = makeStyles({
     base: {
@@ -21,7 +22,7 @@ export type SpinButtonProps = BaseComponentProps<number> & {
 export const SpinButton: FunctionComponent<SpinButtonProps> = (props) => {
     const classes = useSpinStyles();
 
-    const [spinButtonValue, setSpinButtonValue] = useState<number>(props.value);
+    const [spinButtonValue, setSpinButtonValue] = useState(props.value);
 
     const onSpinButtonChange = useCallback(
         (_ev: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => {
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/switch.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/switch.tsx
index eec05e23191..9e697e141cf 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/switch.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/switch.tsx
@@ -3,7 +3,7 @@ import type { ChangeEvent, FunctionComponent } from "react";
 
 import { makeStyles, Switch as FluentSwitch } from "@fluentui/react-components";
 import { useEffect, useState } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine";
 
 const useSwitchStyles = makeStyles({
     switch: {
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx
index 7892255a2f5..be36427af3f 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx
@@ -3,7 +3,7 @@ import { makeStyles, Slider, tokens } from "@fluentui/react-components";
 import { NumberInput } from "./input";
 import type { ChangeEvent, FunctionComponent } from "react";
 import { useEffect, useState, useRef } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine";
 
 const useSyncedSliderStyles = makeStyles({
     syncedSlider: {
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/textarea.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/textarea.tsx
index 67800e64b1b..cf5b708a81f 100644
--- a/packages/dev/sharedUiComponents/src/fluent/primitives/textarea.tsx
+++ b/packages/dev/sharedUiComponents/src/fluent/primitives/textarea.tsx
@@ -1,7 +1,7 @@
 import type { TextareaProps as FluentTextareaProps } from "@fluentui/react-components";
 import { Textarea as FluentTextarea, makeStyles } from "@fluentui/react-components";
 import type { FunctionComponent, KeyboardEvent, ChangeEvent } from "react";
-import type { BaseComponentProps } from "../hoc/propertyLine";
+import type { BaseComponentProps } from "../hoc/propertyLines/propertyLine";
 
 const useInputStyles = makeStyles({
     textarea: {},
diff --git a/packages/dev/sharedUiComponents/src/lines/booleanLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/booleanLineComponent.tsx
index f424e9904dd..636e87ae409 100644
--- a/packages/dev/sharedUiComponents/src/lines/booleanLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/booleanLineComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
-import { ReadonlyBooleanLine } from "shared-ui-components/fluent/hoc/readonlyBooleanLine";
+import { BooleanBadgePropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/booleanBadgePropertyLine";
 import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 
 export interface IBooleanLineComponentProps {
@@ -16,7 +16,7 @@ export class BooleanLineComponent extends React.Component<IBooleanLineComponentP
         super(props);
     }
     renderFluent() {
-        return <ReadonlyBooleanLine label={this.props.label} value={this.props.value} />;
+        return <BooleanBadgePropertyLine label={this.props.label} value={this.props.value} />;
     }
 
     renderOriginal() {
diff --git a/packages/dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx
index 8dd04e7259c..43331fe7af4 100644
--- a/packages/dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx
@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { conflictingValuesPlaceholder } from "./targetsProxy";
 import copyIcon from "../imgs/copy.svg";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
-import { SwitchPropertyLine } from "../fluent/hoc/switchPropertyLine";
+import { SwitchPropertyLine } from "../fluent/hoc/propertyLines/switchPropertyLine";
 import { Checkbox } from "../fluent/primitives/checkbox";
 
 export interface ICheckBoxLineComponentProps {
diff --git a/packages/dev/sharedUiComponents/src/lines/colorLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/colorLineComponent.tsx
index bbe76014caf..13640f452a4 100644
--- a/packages/dev/sharedUiComponents/src/lines/colorLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/colorLineComponent.tsx
@@ -10,8 +10,8 @@ import { ColorPickerLine } from "./colorPickerComponent";
 import type { LockObject } from "../tabs/propertyGrids/lockObject";
 import { conflictingValuesPlaceholder } from "./targetsProxy";
 import copyIcon from "../imgs/copy.svg";
-import { Color3PropertyLine, Color4PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
-import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
+import { Color3PropertyLine, Color4PropertyLine } from "../fluent/hoc/propertyLines/colorPropertyLine";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 
 const EmptyColor = new Color4(0, 0, 0, 0);
 
diff --git a/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
index cedcd0a930f..0512ba1bcb5 100644
--- a/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
@@ -1,17 +1,12 @@
 import { useContext } from "react";
-import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
-import { DraggableLine } from "shared-ui-components/fluent/primitives/draggable";
-
-export type DraggableLineProps = {
-    format: string;
-    data: string;
-    tooltip: string;
-};
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
+import { DraggableLine } from "../fluent/primitives/draggable";
+import type { DraggableLineProps } from "../fluent/primitives/draggable";
 
 export const DraggableLineComponent: React.FunctionComponent<DraggableLineProps> = (props) => {
     const useFluent = useContext(ToolContext);
     if (useFluent) {
-        // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the Block_Foo lives
+        // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the Block_Foo lives where the Block name is
         return <DraggableLine {...props} label={props.data.replace("Block", "")} />;
     }
     return (
diff --git a/packages/dev/sharedUiComponents/src/lines/floatLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/floatLineComponent.tsx
index 5acee7c1931..0a40f1970ca 100644
--- a/packages/dev/sharedUiComponents/src/lines/floatLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/floatLineComponent.tsx
@@ -8,7 +8,7 @@ import { conflictingValuesPlaceholder } from "./targetsProxy";
 import { InputArrowsComponent } from "./inputArrowsComponent";
 import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyCommandToClipboard";
 import copyIcon from "../imgs/copy.svg";
-import { NumberInputPropertyLine } from "../fluent/hoc/inputPropertyLine";
+import { NumberInputPropertyLine } from "../fluent/hoc/propertyLines/inputPropertyLine";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 import { SpinButtonPropertyLine } from "shared-ui-components/fluent/primitives/spinButton";
 
diff --git a/packages/dev/sharedUiComponents/src/lines/optionsLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/optionsLineComponent.tsx
index 45dcc3fe42c..6aa98c3d7ed 100644
--- a/packages/dev/sharedUiComponents/src/lines/optionsLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/optionsLineComponent.tsx
@@ -4,7 +4,7 @@ import type { PropertyChangedEvent } from "../propertyChangedEvent";
 import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyCommandToClipboard";
 import type { IInspectableOptions } from "core/Misc/iInspectable";
 import copyIcon from "../imgs/copy.svg";
-import { PropertyLine } from "../fluent/hoc/propertyLine";
+import { PropertyLine } from "../fluent/hoc/propertyLines/propertyLine";
 import { Dropdown } from "../fluent/primitives/dropdown";
 import type { AcceptedDropdownValue } from "../fluent/primitives/dropdown";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
diff --git a/packages/dev/sharedUiComponents/src/lines/sliderLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/sliderLineComponent.tsx
index e264adad3d2..2e50cbc48e6 100644
--- a/packages/dev/sharedUiComponents/src/lines/sliderLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/sliderLineComponent.tsx
@@ -7,7 +7,7 @@ import { FloatLineComponent } from "./floatLineComponent";
 import type { LockObject } from "../tabs/propertyGrids/lockObject";
 import copyIcon from "../imgs/copy.svg";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
-import { SyncedSliderLine } from "../fluent/hoc/syncedSliderLine";
+import { SyncedSliderPropertyLine } from "../fluent/hoc/propertyLines/syncedSliderPropertyLine";
 
 interface ISliderLineComponentProps {
     label: string;
@@ -144,7 +144,7 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
 
     renderFluent() {
         return (
-            <SyncedSliderLine
+            <SyncedSliderPropertyLine
                 label={this.props.label}
                 value={this.state.value}
                 onChange={(val) => this.onChange(val)}
diff --git a/packages/dev/sharedUiComponents/src/lines/textInputLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/textInputLineComponent.tsx
index dd0cd737bd3..6957bd9661f 100644
--- a/packages/dev/sharedUiComponents/src/lines/textInputLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/textInputLineComponent.tsx
@@ -5,7 +5,7 @@ import type { PropertyChangedEvent } from "../propertyChangedEvent";
 import type { LockObject } from "../tabs/propertyGrids/lockObject";
 import { conflictingValuesPlaceholder } from "./targetsProxy";
 import { InputArrowsComponent } from "./inputArrowsComponent";
-import { PropertyLine } from "../fluent/hoc/propertyLine";
+import { PropertyLine } from "../fluent/hoc/propertyLines/propertyLine";
 import { Textarea } from "../fluent/primitives/textarea";
 import { TextInput, NumberInput } from "../fluent/primitives/input";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
diff --git a/packages/dev/sharedUiComponents/src/lines/textLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/textLineComponent.tsx
index a1418351d96..b52f13dff73 100644
--- a/packages/dev/sharedUiComponents/src/lines/textLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/textLineComponent.tsx
@@ -2,10 +2,10 @@ import * as React from "react";
 import copyIcon from "../imgs/copy.svg";
 import { copyCommandToClipboard } from "../copyCommandToClipboard";
 import { MergeClassNames } from "../styleHelper";
-import { TextPropertyLine } from "../fluent/hoc/textPropertyLine";
-import { LinkPropertyLine } from "../fluent/hoc/linkPropertyLine";
+import { TextPropertyLine } from "../fluent/hoc/propertyLines/textPropertyLine";
+import { LinkPropertyLine } from "../fluent/hoc/propertyLines/linkPropertyLine";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
-import { ReadonlyBooleanLine } from "../fluent/hoc/readonlyBooleanLine";
+import { BooleanBadgePropertyLine } from "../fluent/hoc/propertyLines/booleanBadgePropertyLine";
 
 interface ITextLineComponentProps {
     label?: string;
@@ -104,7 +104,7 @@ export class TextLineComponent extends React.Component<ITextLineComponentProps>
         if (isLink) {
             return <LinkPropertyLine {...sharedProps} value={this.props.url ? "doc" : this.props.value || "no name"} url={this.props.url} onLink={this.props.onLink} />;
         } else if (this.props.value === "Yes" || this.props.value === "No") {
-            return <ReadonlyBooleanLine label={this.props.label || ""} value={this.props.value === "Yes"} />;
+            return <BooleanBadgePropertyLine label={this.props.label || ""} value={this.props.value === "Yes"} />;
         } else {
             return <TextPropertyLine {...sharedProps} value={this.props.value || ""} />;
         }
diff --git a/packages/dev/sharedUiComponents/src/lines/vector3LineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/vector3LineComponent.tsx
index 57aef5606ca..c7618763a84 100644
--- a/packages/dev/sharedUiComponents/src/lines/vector3LineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/vector3LineComponent.tsx
@@ -10,7 +10,7 @@ import { SliderLineComponent } from "../lines/sliderLineComponent";
 import { Tools } from "core/Misc/tools";
 import type { LockObject } from "../tabs/propertyGrids/lockObject";
 import copyIcon from "../imgs/copy.svg";
-import { Vector3PropertyLine } from "../fluent/hoc/vectorPropertyLine";
+import { Vector3PropertyLine } from "../fluent/hoc/propertyLines/vectorPropertyLine";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 
 interface IVector3LineComponentProps {
diff --git a/packages/dev/sharedUiComponents/src/split/splitContainer.tsx b/packages/dev/sharedUiComponents/src/split/splitContainer.tsx
index c26c60a3a45..1a8d3d0f21a 100644
--- a/packages/dev/sharedUiComponents/src/split/splitContainer.tsx
+++ b/packages/dev/sharedUiComponents/src/split/splitContainer.tsx
@@ -1,7 +1,8 @@
 import type { PropsWithChildren } from "react";
-import { useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import * as styles from "./splitContainer.module.scss";
 import { ControlledSize, SplitDirection, SplitContext } from "./splitContext";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 
 /**
  * Split container properties
@@ -77,6 +78,7 @@ export const SplitContainer: React.FC<PropsWithChildren<ISplitContainerProps>> =
     const controllers: number[][] = [];
     const minSizes: number[] = [];
     const maxSizes: number[] = [];
+    const useFluent = useContext(ToolContext).useFluent;
 
     const buildGridDefinition = () => {
         if (!elementRef.current) {
@@ -319,6 +321,7 @@ export const SplitContainer: React.FC<PropsWithChildren<ISplitContainerProps>> =
             <div
                 id={props.id}
                 className={styles["split-container"] + " " + props.className}
+                style={useFluent ? { height: "100vh" } : undefined} // temporary until splitContainer is fluentized
                 ref={elementRef}
                 onPointerDown={(evt) => props.onPointerDown && props.onPointerDown(evt)}
                 onPointerMove={(evt) => props.onPointerMove && props.onPointerMove(evt)}

From 06b95309938c49d4e85aa6e0810779f1787f3cf1 Mon Sep 17 00:00:00 2001
From: Georgina <gehalper@microsoft.com>
Date: Fri, 11 Jul 2025 20:45:17 -0400
Subject: [PATCH 3/4] fix imports in iv2

---
 .../src/components/debug/debugPane.tsx        |  2 +-
 .../components/properties/boundProperty.tsx   |  2 +-
 .../properties/commonGeneralProperties.tsx    |  4 +--
 .../lights/areaLightSetupProperties.tsx       |  6 ++--
 .../directionalLightSetupProperties.tsx       |  6 ++--
 .../hemisphericLightSetupProperties.tsx       |  6 ++--
 .../lights/pointLightSetupProperties.tsx      |  6 ++--
 .../lights/shadowGeneratorSetupProperties.tsx |  2 +-
 .../lights/shadowsSetupProperties.tsx         |  4 +--
 .../lights/spotLightSetupProperties.tsx       | 12 +++----
 .../materialTransparencyProperties.tsx        |  2 +-
 .../mesh/meshAdvancedProperties.tsx           |  2 +-
 .../properties/mesh/meshGeneralProperties.tsx |  4 +--
 .../mesh/meshOutlineOverlayProperties.tsx     |  4 +--
 .../properties/nodeGeneralProperties.tsx      |  2 +-
 .../properties/physics/physicsProperties.tsx  |  6 ++--
 .../properties/skeleton/boneProperties.tsx    |  2 +-
 .../skeleton/skeletonProperties.tsx           |  8 ++---
 .../sprites/spriteAnimationProperties.tsx     |  4 +--
 .../sprites/spriteGeneralProperties.tsx       |  4 +--
 .../sprites/spriteOtherProperties.tsx         |  2 +-
 .../sprites/spriteTransformProperties.tsx     | 17 +++++++---
 .../properties/transformProperties.tsx        |  2 +-
 .../src/components/stats/countStats.tsx       |  2 +-
 .../src/components/stats/frameStepStats.tsx   |  2 +-
 .../src/components/stats/statsPane.tsx        |  2 +-
 .../src/components/stats/systemStats.tsx      | 34 +++++++++----------
 .../src/services/panes/settingsService.tsx    |  2 +-
 .../src/lines/draggableLineComponent.tsx      |  2 +-
 .../gradientNodePropertyComponent.tsx         |  2 +-
 .../checkBoxLineComponent.tsx                 |  2 +-
 31 files changed, 82 insertions(+), 75 deletions(-)

diff --git a/packages/dev/inspector-v2/src/components/debug/debugPane.tsx b/packages/dev/inspector-v2/src/components/debug/debugPane.tsx
index f4a01921ff9..ac3775ec43c 100644
--- a/packages/dev/inspector-v2/src/components/debug/debugPane.tsx
+++ b/packages/dev/inspector-v2/src/components/debug/debugPane.tsx
@@ -12,7 +12,7 @@ import { CreateGround } from "core/Meshes/Builders/groundBuilder";
 import { Tools } from "core/Misc/tools";
 import { UtilityLayerRenderer } from "core/Rendering/utilityLayerRenderer";
 import { GridMaterial } from "materials/grid/gridMaterial";
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 
 import { AccordionPane, AccordionPaneSection } from "../accordionPane";
 import { BoundProperty } from "../properties/boundProperty";
diff --git a/packages/dev/inspector-v2/src/components/properties/boundProperty.tsx b/packages/dev/inspector-v2/src/components/properties/boundProperty.tsx
index 9961eaaab33..3d20bea320f 100644
--- a/packages/dev/inspector-v2/src/components/properties/boundProperty.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/boundProperty.tsx
@@ -1,5 +1,5 @@
 import type { ComponentType } from "react";
-import type { BaseComponentProps } from "shared-ui-components/fluent/hoc/propertyLine";
+import type { BaseComponentProps } from "shared-ui-components/fluent/hoc/propertyLines/propertyLine";
 import { useProperty } from "../../hooks/compoundPropertyHooks";
 
 /**
diff --git a/packages/dev/inspector-v2/src/components/properties/commonGeneralProperties.tsx b/packages/dev/inspector-v2/src/components/properties/commonGeneralProperties.tsx
index b09e43447b7..7b635031427 100644
--- a/packages/dev/inspector-v2/src/components/properties/commonGeneralProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/commonGeneralProperties.tsx
@@ -2,8 +2,8 @@ import type { FunctionComponent } from "react";
 
 import { useMemo } from "react";
 
-import { TextInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { TextPropertyLine } from "shared-ui-components/fluent/hoc/textPropertyLine";
+import { TextInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 import { useProperty } from "../../hooks/compoundPropertyHooks";
 import { GetPropertyDescriptor, IsPropertyReadonly } from "../../instrumentation/propertyInstrumentation";
 
diff --git a/packages/dev/inspector-v2/src/components/properties/lights/areaLightSetupProperties.tsx b/packages/dev/inspector-v2/src/components/properties/lights/areaLightSetupProperties.tsx
index 5c370bf9c2c..f0a60af819a 100644
--- a/packages/dev/inspector-v2/src/components/properties/lights/areaLightSetupProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/lights/areaLightSetupProperties.tsx
@@ -1,9 +1,9 @@
 import type { RectAreaLight } from "core/index";
 import type { FunctionComponent } from "react";
 
-import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/colorPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 
 import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
 import { BoundProperty } from "../boundProperty";
diff --git a/packages/dev/inspector-v2/src/components/properties/lights/directionalLightSetupProperties.tsx b/packages/dev/inspector-v2/src/components/properties/lights/directionalLightSetupProperties.tsx
index 22074c6e17d..2aef04e4b4d 100644
--- a/packages/dev/inspector-v2/src/components/properties/lights/directionalLightSetupProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/lights/directionalLightSetupProperties.tsx
@@ -1,9 +1,9 @@
 import type { DirectionalLight } from "core/index";
 import type { FunctionComponent } from "react";
 
-import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/colorPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 
 import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
 import { BoundProperty } from "../boundProperty";
diff --git a/packages/dev/inspector-v2/src/components/properties/lights/hemisphericLightSetupProperties.tsx b/packages/dev/inspector-v2/src/components/properties/lights/hemisphericLightSetupProperties.tsx
index 2ab8e658d84..d11ba305e3f 100644
--- a/packages/dev/inspector-v2/src/components/properties/lights/hemisphericLightSetupProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/lights/hemisphericLightSetupProperties.tsx
@@ -1,9 +1,9 @@
 import type { HemisphericLight } from "core/index";
 import type { FunctionComponent } from "react";
 
-import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/colorPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 
 import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
 import { BoundProperty } from "../boundProperty";
diff --git a/packages/dev/inspector-v2/src/components/properties/lights/pointLightSetupProperties.tsx b/packages/dev/inspector-v2/src/components/properties/lights/pointLightSetupProperties.tsx
index 44b51802b61..0ba062eaca6 100644
--- a/packages/dev/inspector-v2/src/components/properties/lights/pointLightSetupProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/lights/pointLightSetupProperties.tsx
@@ -1,9 +1,9 @@
 import type { PointLight } from "core/index";
 import type { FunctionComponent } from "react";
 
-import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/colorPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 
 import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
 import { BoundProperty } from "../boundProperty";
diff --git a/packages/dev/inspector-v2/src/components/properties/lights/shadowGeneratorSetupProperties.tsx b/packages/dev/inspector-v2/src/components/properties/lights/shadowGeneratorSetupProperties.tsx
index a6a63a956a0..797bf0c2246 100644
--- a/packages/dev/inspector-v2/src/components/properties/lights/shadowGeneratorSetupProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/lights/shadowGeneratorSetupProperties.tsx
@@ -9,7 +9,7 @@ import { DirectionalLight } from "core/Lights/directionalLight";
 import { CascadedShadowGenerator } from "core/Lights/Shadows/cascadedShadowGenerator";
 import { ShadowGenerator } from "core/Lights/Shadows/shadowGenerator";
 import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
-import { NumberDropdownPropertyLine, StringDropdownPropertyLine } from "shared-ui-components/fluent/hoc/dropdownPropertyLine";
+import { NumberDropdownPropertyLine, StringDropdownPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/dropdownPropertyLine";
 import { useObservableState } from "../../../hooks/observableHooks";
 
 import "core/Lights/Shadows/shadowGeneratorSceneComponent";
diff --git a/packages/dev/inspector-v2/src/components/properties/lights/shadowsSetupProperties.tsx b/packages/dev/inspector-v2/src/components/properties/lights/shadowsSetupProperties.tsx
index 8156398bd61..2028504cea5 100644
--- a/packages/dev/inspector-v2/src/components/properties/lights/shadowsSetupProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/lights/shadowsSetupProperties.tsx
@@ -4,9 +4,9 @@ import type { FunctionComponent } from "react";
 
 import { Collapse } from "@fluentui/react-motion-components-preview";
 
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
 
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 import { useProperty } from "../../../hooks/compoundPropertyHooks";
 import { BoundProperty } from "../boundProperty";
 
diff --git a/packages/dev/inspector-v2/src/components/properties/lights/spotLightSetupProperties.tsx b/packages/dev/inspector-v2/src/components/properties/lights/spotLightSetupProperties.tsx
index f3f0351aa78..a565ca96097 100644
--- a/packages/dev/inspector-v2/src/components/properties/lights/spotLightSetupProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/lights/spotLightSetupProperties.tsx
@@ -2,10 +2,10 @@ import type { SpotLight } from "core/index";
 import type { FunctionComponent } from "react";
 
 import { Tools } from "core/Misc/tools";
-import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { SyncedSliderLine } from "shared-ui-components/fluent/hoc/syncedSliderLine";
-import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/colorPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { SyncedSliderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/syncedSliderPropertyLine";
+import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 
 import { useColor3Property, useProperty, useVector3Property } from "../../../hooks/compoundPropertyHooks";
 
@@ -24,8 +24,8 @@ export const SpotLightSetupProperties: FunctionComponent<{ context: SpotLight }>
             <Color3PropertyLine label="Specular" value={groundColor} onChange={(val) => (spotLight.specular = val)} />
             <Vector3PropertyLine label="Direction" value={direction} onChange={(val) => (spotLight.direction = val)} />
             <Vector3PropertyLine label="Position" value={position} onChange={(val) => (spotLight.position = val)} />
-            <SyncedSliderLine label="Angle" value={Tools.ToDegrees(angle)} min={0} max={90} step={0.1} onChange={(value) => (spotLight.angle = Tools.ToRadians(value))} />
-            <SyncedSliderLine
+            <SyncedSliderPropertyLine label="Angle" value={Tools.ToDegrees(angle)} min={0} max={90} step={0.1} onChange={(value) => (spotLight.angle = Tools.ToRadians(value))} />
+            <SyncedSliderPropertyLine
                 label="Inner Angle"
                 value={Tools.ToDegrees(innerAngle)}
                 min={0}
diff --git a/packages/dev/inspector-v2/src/components/properties/materials/materialTransparencyProperties.tsx b/packages/dev/inspector-v2/src/components/properties/materials/materialTransparencyProperties.tsx
index a158f12a4ab..2dfa8f1f294 100644
--- a/packages/dev/inspector-v2/src/components/properties/materials/materialTransparencyProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/materials/materialTransparencyProperties.tsx
@@ -5,7 +5,7 @@ import type { FunctionComponent } from "react";
 
 import { BoundProperty } from "../boundProperty";
 import type { DropdownOption } from "shared-ui-components/fluent/primitives/dropdown";
-import { NullableNumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/dropdownPropertyLine";
+import { NullableNumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/dropdownPropertyLine";
 
 const TransparencyModeOptions: DropdownOption[] = [
     { label: "Opaque", value: PBRMaterial.PBRMATERIAL_OPAQUE },
diff --git a/packages/dev/inspector-v2/src/components/properties/mesh/meshAdvancedProperties.tsx b/packages/dev/inspector-v2/src/components/properties/mesh/meshAdvancedProperties.tsx
index d89cd01c7ed..ee3c8a95aad 100644
--- a/packages/dev/inspector-v2/src/components/properties/mesh/meshAdvancedProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/mesh/meshAdvancedProperties.tsx
@@ -2,7 +2,7 @@ import type { AbstractMesh } from "core/index";
 
 import type { FunctionComponent } from "react";
 
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 
 import { BoundProperty } from "../boundProperty";
 
diff --git a/packages/dev/inspector-v2/src/components/properties/mesh/meshGeneralProperties.tsx b/packages/dev/inspector-v2/src/components/properties/mesh/meshGeneralProperties.tsx
index a83eaf35c6b..117664385bd 100644
--- a/packages/dev/inspector-v2/src/components/properties/mesh/meshGeneralProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/mesh/meshGeneralProperties.tsx
@@ -4,8 +4,8 @@ import type { FunctionComponent } from "react";
 
 import type { ISelectionService } from "../../../services/selectionService";
 
-import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/linkPropertyLine";
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/linkPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 
 import { useObservableState } from "../../../hooks/observableHooks";
 
diff --git a/packages/dev/inspector-v2/src/components/properties/mesh/meshOutlineOverlayProperties.tsx b/packages/dev/inspector-v2/src/components/properties/mesh/meshOutlineOverlayProperties.tsx
index 1511da9fd3c..2feae9b8a69 100644
--- a/packages/dev/inspector-v2/src/components/properties/mesh/meshOutlineOverlayProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/mesh/meshOutlineOverlayProperties.tsx
@@ -4,8 +4,8 @@ import type { FunctionComponent } from "react";
 
 import { Collapse } from "@fluentui/react-motion-components-preview";
 
-import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/colorPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 import { useColor3Property, useProperty } from "../../../hooks/compoundPropertyHooks";
 import { BoundProperty } from "../boundProperty";
 
diff --git a/packages/dev/inspector-v2/src/components/properties/nodeGeneralProperties.tsx b/packages/dev/inspector-v2/src/components/properties/nodeGeneralProperties.tsx
index 8bf245ffd3a..c43461faa41 100644
--- a/packages/dev/inspector-v2/src/components/properties/nodeGeneralProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/nodeGeneralProperties.tsx
@@ -2,7 +2,7 @@ import type { Node } from "core/index";
 
 import type { FunctionComponent } from "react";
 
-import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/linkPropertyLine";
+import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/linkPropertyLine";
 import { useProperty } from "../../hooks/compoundPropertyHooks";
 
 export const NodeGeneralProperties: FunctionComponent<{ node: Node; setSelectedEntity: (entity: unknown) => void }> = (props) => {
diff --git a/packages/dev/inspector-v2/src/components/properties/physics/physicsProperties.tsx b/packages/dev/inspector-v2/src/components/properties/physics/physicsProperties.tsx
index 3a228fddf37..07e53f90535 100644
--- a/packages/dev/inspector-v2/src/components/properties/physics/physicsProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/physics/physicsProperties.tsx
@@ -7,9 +7,9 @@ import { useCallback } from "react";
 
 import { Vector3 } from "core/Maths/math.vector";
 import { PhysicsMotionType, PhysicsPrestepType } from "core/Physics/v2/IPhysicsEnginePlugin";
-import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/dropdownPropertyLine";
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/dropdownPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 import { useVector3Property } from "../../../hooks/compoundPropertyHooks";
 import { useInterceptObservable } from "../../../hooks/instrumentationHooks";
 import { useObservableState } from "../../../hooks/observableHooks";
diff --git a/packages/dev/inspector-v2/src/components/properties/skeleton/boneProperties.tsx b/packages/dev/inspector-v2/src/components/properties/skeleton/boneProperties.tsx
index 31ff021356a..a1428f20561 100644
--- a/packages/dev/inspector-v2/src/components/properties/skeleton/boneProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/skeleton/boneProperties.tsx
@@ -2,7 +2,7 @@ import type { Bone } from "core/index";
 
 import type { FunctionComponent } from "react";
 
-import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/linkPropertyLine";
+import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/linkPropertyLine";
 
 export const BoneGeneralProperties: FunctionComponent<{ bone: Bone; setSelectedEntity: (entity: unknown) => void }> = (props) => {
     const { bone, setSelectedEntity } = props;
diff --git a/packages/dev/inspector-v2/src/components/properties/skeleton/skeletonProperties.tsx b/packages/dev/inspector-v2/src/components/properties/skeleton/skeletonProperties.tsx
index c682e4be7e5..ea019f2e81a 100644
--- a/packages/dev/inspector-v2/src/components/properties/skeleton/skeletonProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/skeleton/skeletonProperties.tsx
@@ -9,10 +9,10 @@ import { useReducer, useState } from "react";
 
 import { SkeletonViewer } from "core/Debug/skeletonViewer";
 import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
-import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/dropdownPropertyLine";
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
-import { TextPropertyLine } from "shared-ui-components/fluent/hoc/textPropertyLine";
+import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/dropdownPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
+import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 import { BoundProperty } from "../boundProperty";
 
 export const SkeletonGeneralProperties: FunctionComponent<{ skeleton: Skeleton }> = (props) => {
diff --git a/packages/dev/inspector-v2/src/components/properties/sprites/spriteAnimationProperties.tsx b/packages/dev/inspector-v2/src/components/properties/sprites/spriteAnimationProperties.tsx
index e0772240f65..68c36ac157a 100644
--- a/packages/dev/inspector-v2/src/components/properties/sprites/spriteAnimationProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/sprites/spriteAnimationProperties.tsx
@@ -2,8 +2,8 @@ import type { FunctionComponent } from "react";
 
 import type { Sprite } from "core/index";
 
-import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 import { BoundProperty } from "../boundProperty";
 
 export const SpriteAnimationProperties: FunctionComponent<{ sprite: Sprite }> = (props) => {
diff --git a/packages/dev/inspector-v2/src/components/properties/sprites/spriteGeneralProperties.tsx b/packages/dev/inspector-v2/src/components/properties/sprites/spriteGeneralProperties.tsx
index 794ead37a2b..d5088e9e977 100644
--- a/packages/dev/inspector-v2/src/components/properties/sprites/spriteGeneralProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/sprites/spriteGeneralProperties.tsx
@@ -2,8 +2,8 @@ import type { Sprite } from "core/index";
 
 import type { FunctionComponent } from "react";
 
-import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/linkPropertyLine";
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { LinkPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/linkPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 import { BoundProperty } from "../boundProperty";
 
 export const SpriteGeneralProperties: FunctionComponent<{ sprite: Sprite; setSelectedEntity: (entity: unknown) => void }> = (props) => {
diff --git a/packages/dev/inspector-v2/src/components/properties/sprites/spriteOtherProperties.tsx b/packages/dev/inspector-v2/src/components/properties/sprites/spriteOtherProperties.tsx
index 31c99c78c24..42b575fbec7 100644
--- a/packages/dev/inspector-v2/src/components/properties/sprites/spriteOtherProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/sprites/spriteOtherProperties.tsx
@@ -2,7 +2,7 @@ import type { Sprite } from "core/index";
 
 import type { FunctionComponent } from "react";
 
-import { Color4PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
+import { Color4PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/colorPropertyLine";
 import { useColor4Property } from "../../../hooks/compoundPropertyHooks";
 
 export const SpriteOtherProperties: FunctionComponent<{ sprite: Sprite }> = (props) => {
diff --git a/packages/dev/inspector-v2/src/components/properties/sprites/spriteTransformProperties.tsx b/packages/dev/inspector-v2/src/components/properties/sprites/spriteTransformProperties.tsx
index 503960708cb..acafef57a41 100644
--- a/packages/dev/inspector-v2/src/components/properties/sprites/spriteTransformProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/sprites/spriteTransformProperties.tsx
@@ -3,8 +3,8 @@ import type { FunctionComponent } from "react";
 import type { Sprite } from "core/index";
 import type { ISettingsContext } from "../../../services/settingsContext";
 
-import { SyncedSliderLine } from "shared-ui-components/fluent/hoc/syncedSliderLine";
-import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { SyncedSliderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/syncedSliderPropertyLine";
+import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 import { useVector3Property } from "../../../hooks/compoundPropertyHooks";
 import { useObservableState } from "../../../hooks/observableHooks";
 import { BoundProperty } from "../boundProperty";
@@ -23,7 +23,7 @@ export const SpriteTransformProperties: FunctionComponent<{ sprite: Sprite; sett
         <>
             <Vector3PropertyLine key="PositionTransform" label="Position" value={position} onChange={(val) => (sprite.position = val)} />
             <BoundProperty
-                component={SyncedSliderLine}
+                component={SyncedSliderPropertyLine}
                 key="Angle2"
                 label="Angle"
                 description="Rotation angle of the sprite"
@@ -35,9 +35,16 @@ export const SpriteTransformProperties: FunctionComponent<{ sprite: Sprite; sett
                 convertTo={(angle) => angle * angleMultiplier}
                 convertFrom={(angle) => angle / angleMultiplier}
             />
-            <BoundProperty component={SyncedSliderLine} key="Width" label="Width" description="Width of the sprite (in world space units)" target={sprite} propertyKey="width" />
             <BoundProperty
-                component={SyncedSliderLine}
+                component={SyncedSliderPropertyLine}
+                key="Width"
+                label="Width"
+                description="Width of the sprite (in world space units)"
+                target={sprite}
+                propertyKey="width"
+            />
+            <BoundProperty
+                component={SyncedSliderPropertyLine}
                 key={"Height"}
                 label="Height"
                 description="Height of the sprite (in world space units)"
diff --git a/packages/dev/inspector-v2/src/components/properties/transformProperties.tsx b/packages/dev/inspector-v2/src/components/properties/transformProperties.tsx
index 1a49f747ce6..785cd048495 100644
--- a/packages/dev/inspector-v2/src/components/properties/transformProperties.tsx
+++ b/packages/dev/inspector-v2/src/components/properties/transformProperties.tsx
@@ -3,7 +3,7 @@ import type { FunctionComponent } from "react";
 import type { Nullable, Quaternion, Vector3 } from "core/index";
 import type { ISettingsContext } from "../../services/settingsContext";
 
-import { QuaternionPropertyLine, RotationVectorPropertyLine, Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { QuaternionPropertyLine, RotationVectorPropertyLine, Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 import { useQuaternionProperty, useVector3Property } from "../../hooks/compoundPropertyHooks";
 import { useObservableState } from "../../hooks/observableHooks";
 
diff --git a/packages/dev/inspector-v2/src/components/stats/countStats.tsx b/packages/dev/inspector-v2/src/components/stats/countStats.tsx
index 9fc91811052..70aff43296a 100644
--- a/packages/dev/inspector-v2/src/components/stats/countStats.tsx
+++ b/packages/dev/inspector-v2/src/components/stats/countStats.tsx
@@ -2,7 +2,7 @@ import type { FunctionComponent } from "react";
 
 import type { Scene } from "core/index";
 
-import { TextPropertyLine } from "shared-ui-components/fluent/hoc/textPropertyLine";
+import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 import { useObservableState } from "../../hooks/observableHooks";
 import { usePollingObservable } from "../../hooks/pollingHooks";
 
diff --git a/packages/dev/inspector-v2/src/components/stats/frameStepStats.tsx b/packages/dev/inspector-v2/src/components/stats/frameStepStats.tsx
index e859a6c85d1..fda1fb26394 100644
--- a/packages/dev/inspector-v2/src/components/stats/frameStepStats.tsx
+++ b/packages/dev/inspector-v2/src/components/stats/frameStepStats.tsx
@@ -7,7 +7,7 @@ import { useEffect, useRef } from "react";
 import { EngineInstrumentation } from "core/Instrumentation/engineInstrumentation";
 import { SceneInstrumentation } from "core/Instrumentation/sceneInstrumentation";
 
-import { TextPropertyLine } from "shared-ui-components/fluent/hoc/textPropertyLine";
+import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 import { useObservableState } from "../../hooks/observableHooks";
 import { usePollingObservable } from "../../hooks/pollingHooks";
 
diff --git a/packages/dev/inspector-v2/src/components/stats/statsPane.tsx b/packages/dev/inspector-v2/src/components/stats/statsPane.tsx
index 391f42dcdea..17ea8e07543 100644
--- a/packages/dev/inspector-v2/src/components/stats/statsPane.tsx
+++ b/packages/dev/inspector-v2/src/components/stats/statsPane.tsx
@@ -1,7 +1,7 @@
 import type { Scene } from "core/index";
 
 import { AbstractEngine } from "core/Engines/abstractEngine";
-import { TextPropertyLine } from "shared-ui-components/fluent/hoc/textPropertyLine";
+import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 import { useObservableState } from "../../hooks/observableHooks";
 import { AccordionPane } from "../accordionPane";
 import { Pane } from "../pane";
diff --git a/packages/dev/inspector-v2/src/components/stats/systemStats.tsx b/packages/dev/inspector-v2/src/components/stats/systemStats.tsx
index 359cefc4a9a..294ec6a0fb3 100644
--- a/packages/dev/inspector-v2/src/components/stats/systemStats.tsx
+++ b/packages/dev/inspector-v2/src/components/stats/systemStats.tsx
@@ -2,8 +2,8 @@ import type { Scene } from "core/index";
 
 import type { FunctionComponent } from "react";
 
-import { ReadonlyBooleanLine } from "shared-ui-components/fluent/hoc/readonlyBooleanLine";
-import { TextPropertyLine } from "shared-ui-components/fluent/hoc/textPropertyLine";
+import { BooleanBadgePropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/booleanBadgePropertyLine";
+import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 import { useObservableState } from "../../hooks/observableHooks";
 
 export const SystemStats: FunctionComponent<{ context: Scene }> = ({ context: scene }) => {
@@ -17,21 +17,21 @@ export const SystemStats: FunctionComponent<{ context: Scene }> = ({ context: sc
             <TextPropertyLine key="Resolution" label="Resolution" value={resolution} />
             <TextPropertyLine key="HardwareScalingLevel" label="Hardware Scaling Level" value={hardwareScalingLevel.toString()} />
             <TextPropertyLine key="Engine" label="Engine" value={engine.description} />
-            <ReadonlyBooleanLine key="StdDerivatives" label="StdDerivatives" value={caps.standardDerivatives} />
-            <ReadonlyBooleanLine key="CompressedTextures" label="Compressed Textures" value={caps.s3tc !== undefined} />
-            <ReadonlyBooleanLine key="HardwareInstances" label="Hardware Instances" value={caps.instancedArrays} />
-            <ReadonlyBooleanLine key="TextureFloat" label="Texture Float" value={caps.textureFloat} />
-            <ReadonlyBooleanLine key="TextureHalfFloat" label="Texture Half Float" value={caps.textureHalfFloat} />
-            <ReadonlyBooleanLine key="RenderToTextureFloat" label="Render to Texture Float" value={caps.textureFloatRender} />
-            <ReadonlyBooleanLine key="RenderToTextureHalfFloat" label="Render to Texture Half Float" value={caps.textureHalfFloatRender} />
-            <ReadonlyBooleanLine key="32bitsIndices" label="32bits Indices" value={caps.uintIndices} />
-            <ReadonlyBooleanLine key="FragmentDepth" label="Fragment Depth" value={caps.fragmentDepthSupported} />
-            <ReadonlyBooleanLine key="HighPrecisionShaders" label="High Precision Shaders" value={caps.highPrecisionShaderSupported} />
-            <ReadonlyBooleanLine key="DrawBuffers" label="Draw Buffers" value={caps.drawBuffersExtension} />
-            <ReadonlyBooleanLine key="VertexArrayObject" label="Vertex Array Object" value={caps.vertexArrayObject} />
-            <ReadonlyBooleanLine key="TimerQuery" label="Timer Query" value={caps.timerQuery !== undefined} />
-            <ReadonlyBooleanLine key="Stencil" label="Stencil" value={engine.isStencilEnable} />
-            <ReadonlyBooleanLine key="ParallelShaderCompilation" label="Parallel Shader Compilation" value={caps.parallelShaderCompile != null} />
+            <BooleanBadgePropertyLine key="StdDerivatives" label="StdDerivatives" value={caps.standardDerivatives} />
+            <BooleanBadgePropertyLine key="CompressedTextures" label="Compressed Textures" value={caps.s3tc !== undefined} />
+            <BooleanBadgePropertyLine key="HardwareInstances" label="Hardware Instances" value={caps.instancedArrays} />
+            <BooleanBadgePropertyLine key="TextureFloat" label="Texture Float" value={caps.textureFloat} />
+            <BooleanBadgePropertyLine key="TextureHalfFloat" label="Texture Half Float" value={caps.textureHalfFloat} />
+            <BooleanBadgePropertyLine key="RenderToTextureFloat" label="Render to Texture Float" value={caps.textureFloatRender} />
+            <BooleanBadgePropertyLine key="RenderToTextureHalfFloat" label="Render to Texture Half Float" value={caps.textureHalfFloatRender} />
+            <BooleanBadgePropertyLine key="32bitsIndices" label="32bits Indices" value={caps.uintIndices} />
+            <BooleanBadgePropertyLine key="FragmentDepth" label="Fragment Depth" value={caps.fragmentDepthSupported} />
+            <BooleanBadgePropertyLine key="HighPrecisionShaders" label="High Precision Shaders" value={caps.highPrecisionShaderSupported} />
+            <BooleanBadgePropertyLine key="DrawBuffers" label="Draw Buffers" value={caps.drawBuffersExtension} />
+            <BooleanBadgePropertyLine key="VertexArrayObject" label="Vertex Array Object" value={caps.vertexArrayObject} />
+            <BooleanBadgePropertyLine key="TimerQuery" label="Timer Query" value={caps.timerQuery !== undefined} />
+            <BooleanBadgePropertyLine key="Stencil" label="Stencil" value={engine.isStencilEnable} />
+            <BooleanBadgePropertyLine key="ParallelShaderCompilation" label="Parallel Shader Compilation" value={caps.parallelShaderCompile != null} />
             <TextPropertyLine key="MaxTexturesUnits" label="Max Textures Units" value={caps.maxTexturesImageUnits.toLocaleString()} />
             <TextPropertyLine key="MaxTexturesSize" label="Max Textures Size" value={caps.maxTextureSize.toLocaleString()} />
             <TextPropertyLine key="MaxAnisotropy" label="Max Anisotropy" value={caps.maxAnisotropy.toLocaleString()} />
diff --git a/packages/dev/inspector-v2/src/services/panes/settingsService.tsx b/packages/dev/inspector-v2/src/services/panes/settingsService.tsx
index 7bad1e32762..7b8a9b51624 100644
--- a/packages/dev/inspector-v2/src/services/panes/settingsService.tsx
+++ b/packages/dev/inspector-v2/src/services/panes/settingsService.tsx
@@ -9,7 +9,7 @@ import { SettingsRegular } from "@fluentui/react-icons";
 
 import { DataStorage } from "core/Misc/dataStorage";
 import { Observable } from "core/Misc/observable";
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 import { AccordionPane, AccordionPaneSection } from "../../components/accordionPane";
 import { useObservableCollection, useObservableState, useOrderedObservableCollection } from "../../hooks/observableHooks";
 import { ObservableCollection } from "../../misc/observableCollection";
diff --git a/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
index 0512ba1bcb5..c01985bb974 100644
--- a/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
@@ -3,7 +3,7 @@ import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 import { DraggableLine } from "../fluent/primitives/draggable";
 import type { DraggableLineProps } from "../fluent/primitives/draggable";
 
-export const DraggableLineComponent: React.FunctionComponent<DraggableLineProps> = (props) => {
+export const DraggableLineComponent: React.FunctionComponent<Omit<DraggableLineProps, "label">> = (props) => {
     const useFluent = useContext(ToolContext);
     if (useFluent) {
         // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the Block_Foo lives where the Block name is
diff --git a/packages/tools/nodeEditor/src/graphSystem/properties/gradientNodePropertyComponent.tsx b/packages/tools/nodeEditor/src/graphSystem/properties/gradientNodePropertyComponent.tsx
index 56813e4fbf7..d3ec312ec30 100644
--- a/packages/tools/nodeEditor/src/graphSystem/properties/gradientNodePropertyComponent.tsx
+++ b/packages/tools/nodeEditor/src/graphSystem/properties/gradientNodePropertyComponent.tsx
@@ -16,7 +16,7 @@ import { OptionsLine } from "shared-ui-components/lines/optionsLineComponent";
 import { ColorStepGradientComponent } from "shared-ui-components/fluent/primitives/gradient";
 import { PropertyTabComponentBase } from "shared-ui-components/components/propertyTabComponentBase";
 import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
-import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/dropdownPropertyLine";
+import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/dropdownPropertyLine";
 import { AccordionSection } from "shared-ui-components/fluent/primitives/accordion";
 
 const TypeOptions = [
diff --git a/packages/tools/nodeEditor/src/sharedComponents/checkBoxLineComponent.tsx b/packages/tools/nodeEditor/src/sharedComponents/checkBoxLineComponent.tsx
index 0cf1e9fd67b..a7642aa7f15 100644
--- a/packages/tools/nodeEditor/src/sharedComponents/checkBoxLineComponent.tsx
+++ b/packages/tools/nodeEditor/src/sharedComponents/checkBoxLineComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Observable } from "core/Misc/observable";
 import type { PropertyChangedEvent } from "shared-ui-components/propertyChangedEvent";
-import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 
 export interface ICheckBoxLineComponentProps {

From d4eccdc67fc452872f9a5d5f890bb3b116fb92d9 Mon Sep 17 00:00:00 2001
From: Georgina <gehalper@microsoft.com>
Date: Mon, 14 Jul 2025 14:36:23 -0400
Subject: [PATCH 4/4] build error

---
 .../dev/sharedUiComponents/src/components/Button.tsx   |  2 +-
 .../src/components/TextInputWithSubmit.tsx             | 10 +++++-----
 .../src/lines/draggableLineComponent.tsx               |  3 ++-
 .../src/lines/draggableLineWithButtonComponent.tsx     |  4 ++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/dev/sharedUiComponents/src/components/Button.tsx b/packages/dev/sharedUiComponents/src/components/Button.tsx
index ebeab2182f0..8c0330cebf8 100644
--- a/packages/dev/sharedUiComponents/src/components/Button.tsx
+++ b/packages/dev/sharedUiComponents/src/components/Button.tsx
@@ -13,7 +13,7 @@ export type ButtonComponentProps = {
     backgroundColor?: string;
 };
 
-export const Button: React.FC<PropsWithChildren<ButtonComponentProps>> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {
+export const ButtonComponent: React.FC<PropsWithChildren<ButtonComponentProps>> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {
     return (
         <button
             className={ClassNames(
diff --git a/packages/dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx b/packages/dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx
index 43543c21086..06ef5e5ea06 100644
--- a/packages/dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx
+++ b/packages/dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Button } from "./Button";
+import { ButtonComponent } from "./Button";
 import { Icon } from "./Icon";
 import * as style from "./TextInputWithSubmit.module.scss";
 
@@ -46,12 +46,12 @@ export const TextInputWithSubmit = (props: ITextInputProps) => {
             {props.label && <label>{props.label}</label>}
             <input className={style.input} type="text" placeholder={props.placeholder} value={value} onChange={onChange} />
             <div>
-                <Button color="light" size="smaller" backgroundColor="inherit" onClick={onClickSubmit} disabled={!valid}>
+                <ButtonComponent color="light" size="smaller" backgroundColor="inherit" onClick={onClickSubmit} disabled={!valid}>
                     <Icon icon={submitIcon} color="dark"></Icon>
-                </Button>
-                <Button color="light" size="smaller" backgroundColor="inherit" onClick={onClickCancel}>
+                </ButtonComponent>
+                <ButtonComponent color="light" size="smaller" backgroundColor="inherit" onClick={onClickCancel}>
                     <Icon icon={cancelIcon} color="dark"></Icon>
-                </Button>
+                </ButtonComponent>
             </div>
         </div>
     );
diff --git a/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
index c01985bb974..5e795fc1e52 100644
--- a/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx
@@ -3,7 +3,8 @@ import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 import { DraggableLine } from "../fluent/primitives/draggable";
 import type { DraggableLineProps } from "../fluent/primitives/draggable";
 
-export const DraggableLineComponent: React.FunctionComponent<Omit<DraggableLineProps, "label">> = (props) => {
+type DraggableLineComponentProps = Omit<DraggableLineProps, "label">;
+export const DraggableLineComponent: React.FunctionComponent<DraggableLineComponentProps> = (props) => {
     const useFluent = useContext(ToolContext);
     if (useFluent) {
         // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the Block_Foo lives where the Block name is
diff --git a/packages/dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx b/packages/dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx
index d96e0ef795f..1a33e14a25e 100644
--- a/packages/dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/draggableLineWithButtonComponent.tsx
@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 import { DraggableLine } from "../fluent/primitives/draggable";
 
-export type DraggableLineProps = {
+export type DraggableLineWithButtonProps = {
     format: string;
     data: string;
     tooltip: string;
@@ -12,7 +12,7 @@ export type DraggableLineProps = {
     lenSuffixToRemove?: number;
 };
 
-export const DraggableLineWithButtonComponent: React.FunctionComponent<DraggableLineProps> = (props) => {
+export const DraggableLineWithButtonComponent: React.FunctionComponent<DraggableLineWithButtonProps> = (props) => {
     const useFluent = useContext(ToolContext);
     if (useFluent) {
         // When updating the callsites to use fluent directly this label will be clearer since the string replace occurs where the data string lives