@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.38

package/out/ui/packages/divider/components/Divider.luau

@@ -1,9 +1,17 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local dividerLabel = TS.import(script, script.Parent, "dividerLabel").dividerLabel
+local _dividerLabel = TS.import(script, script.Parent, "dividerLabel")
+local dividerFit = _dividerLabel.dividerFit
+local dividerLabel = _dividerLabel.dividerLabel
 local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
 local function Divider(props)
 	local _binding = props
@@ -19,17 +27,52 @@ local function Divider(props)
 	local line = _binding_1.line
 	local caption = _binding_1.caption
 	local captionPad = _binding_1.captionPad
+	local _binding_2 = useTheme()
+	local theme = _binding_2.theme
 	local label = dividerLabel(text)
-	if label ~= nil and orientation ~= Orientations.Vertical then
+	local labeled = label ~= nil and orientation ~= Orientations.Vertical
+	local shellRef = useRef()
+	local box, setBox = useState(0)
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = 12
+	end
+	local textSize = _condition
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local measured = if labeled then TextService:GetTextSize(label, textSize, font, Vector2.new(10000, 100)).X else 0
+	local room = math.max(0, box - theme.padding.calc(2) * 2)
+	local fit = if labeled then dividerFit(measured + theme.padding.calc(1) * 2, room) else 0
+	useEffect(function()
+		local rbx = shellRef.current
+		if not rbx then
+			return nil
+		end
+		local update = function()
+			return setBox(rbx.AbsoluteSize.X)
+		end
+		update()
+		local connection = rbx:GetPropertyChangedSignal("AbsoluteSize"):Connect(update)
+		return function()
+			return connection:Disconnect()
+		end
+	end)
+	if labeled then
 		local _attributes = {
 			tag = "frame",
 		}
-		local _condition = id
-		if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-			_condition = "Divider"
+		local _condition_1 = id
+		if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+			_condition_1 = "Divider"
+		end
+		_attributes.key = _condition_1
+		_attributes.hostRef = function(instance)
+			shellRef.current = instance
+			if type(ref) == "function" then
+				ref(instance)
+			elseif ref ~= nil then
+				ref.current = instance
+			end
 		end
-		_attributes.key = _condition
-		_attributes.hostRef = ref
 		_attributes.base = shell
 		_attributes.className = className
 		_attributes.sx = sx
@@ -47,18 +90,22 @@ local function Divider(props)
 			_attributes_2[_k] = _v
 		end
 		_attributes_2.Text = label
+		_attributes_2.Size = if fit > 0 then UDim2.new(0, fit, 1, 0) else UDim2.new(0, 0, 1, 0)
+		_attributes_2.AutomaticSize = if fit > 0 then Enum.AutomaticSize.None else Enum.AutomaticSize.X
 		local _attributes_3 = table.clone(captionPad)
 		setmetatable(_attributes_3, nil)
-		return React.createElement(SxHost, _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3)))
+		return React.createElement(SxHost, _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3), if room > 0 then React.createElement("uisizeconstraint", {
+			MaxSize = Vector2.new(room, math.huge),
+		}) else nil))
 	end
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Divider"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "Divider"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = ref
 	local _object = table.clone(root)
 	setmetatable(_object, nil)

package/out/ui/packages/divider/components/Divider.styles.luau

@@ -57,6 +57,7 @@ local useDividerStyles = componentStyles("Divider", function(theme, props)
 			TextSize = theme.typography.fontSizes.caption,
 			TextColor3 = theme.palette.text.secondary,
 			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextWrapped = false,
 			TextXAlignment = Enum.TextXAlignment.Center,
 			ZIndex = 2,
 		},

package/out/ui/packages/divider/components/dividerLabel.d.ts

@@ -1 +1,3 @@
 export declare function dividerLabel(text?: string): string | undefined;
+/** A caption wider than the row caps. A short caption stays on the line. */
+export declare function dividerFit(textWidth: number, box: number): number;

package/out/ui/packages/divider/components/dividerLabel.luau

@@ -5,6 +5,17 @@ local function dividerLabel(text)
 	end
 	return text
 end
+--* A caption wider than the row caps. A short caption stays on the line. 
+local function dividerFit(textWidth, box)
+	if box <= 0 then
+		return 0
+	end
+	if textWidth <= box then
+		return 0
+	end
+	return box
+end
 return {
 	dividerLabel = dividerLabel,
+	dividerFit = dividerFit,
 }

package/out/ui/packages/drawer/components/Drawer.d.ts

@@ -6,6 +6,8 @@ export interface DrawerProps {
     open: boolean;
     edge?: DrawerEdge;
     width?: number;
+    height?: number;
+    title?: string;
     onClose: () => void;
     children?: React.ReactNode;
 }

package/out/ui/packages/drawer/components/Drawer.luau

@@ -6,12 +6,13 @@ local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
 local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local isDismissInput = TS.import(script, script.Parent.Parent.Parent, "modal", "components", "dismissInput").isDismissInput
 local _popup = TS.import(script, script.Parent.Parent.Parent, "popup")
 local Portal = _popup.Portal
 local portalTarget = _popup.portalTarget
-local drawerAnchor = TS.import(script, script.Parent, "drawerPlacement").drawerAnchor
+local drawerFit = TS.import(script, script.Parent, "drawerPlacement").drawerFit
 local useDrawerStyles = TS.import(script, script.Parent, "Drawer.styles").default
 local function Drawer(props)
 	local _binding = props
@@ -22,6 +23,8 @@ local function Drawer(props)
 		edge = "left"
 	end
 	local width = _binding.width
+	local height = _binding.height
+	local title = _binding.title
 	local onClose = _binding.onClose
 	local children = _binding.children
 	local className = _binding.className
@@ -31,6 +34,8 @@ local function Drawer(props)
 	local styles = useDrawerStyles({
 		width = width,
 	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local close = useRef(onClose)
 	local anchor = useRef()
 	local layer, setLayer = useState(function()
@@ -53,7 +58,23 @@ local function Drawer(props)
 			return connection:Disconnect()
 		end
 	end, { open, layer })
-	local placement = drawerAnchor(edge)
+	local _result
+	if edge == "bottom" then
+		local _condition = height
+		if _condition == nil then
+			_condition = theme.spacing.calc(20)
+		end
+		_result = _condition
+	else
+		local _condition = width
+		if _condition == nil then
+			_condition = theme.spacing.calc(20)
+		end
+		_result = _condition
+	end
+	local span = _result
+	local room = if layer ~= nil then (if edge == "bottom" then layer.AbsoluteSize.Y else layer.AbsoluteSize.X) else 0
+	local box = drawerFit(edge, span, room)
 	local panelStyle = styles.panel
 	local _exp = React.createElement("frame", {
 		key = "DrawerAnchor",
@@ -94,14 +115,37 @@ local function Drawer(props)
 		_attributes_2.base = panelStyle
 		_attributes_2.className = className
 		_attributes_2.sx = sx
-		_attributes_2.AnchorPoint = Vector2.new(placement, 0)
-		_attributes_2.Position = UDim2.fromScale(placement, 0)
+		_attributes_2.AnchorPoint = Vector2.new(box.anchorX, box.anchorY)
+		_attributes_2.Position = UDim2.fromScale(box.posX, box.posY)
+		_attributes_2.Size = UDim2.new(box.sizeX, box.sizeXO, box.sizeY, box.sizeYO)
 		_attributes_2.ZIndex = panelStyle.ZIndex
-		local _attributes_3 = table.clone(styles.padding)
-		setmetatable(_attributes_3, nil)
+		local _exp_2 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		})
+		local _result_1
+		if title ~= nil and #title > 0 then
+			local _attributes_3 = {
+				key = "Title",
+			}
+			for _k, _v in styles.title do
+				_attributes_3[_k] = _v
+			end
+			_attributes_3.Text = title
+			_result_1 = (React.createElement("textlabel", _attributes_3))
+		else
+			_result_1 = nil
+		end
 		_condition = (React.createElement(Portal, {
 			host = layer,
-		}, React.createElement("frame", _attributes, _exp_1, React.createElement(SxHost, _attributes_2, React.createElement("uipadding", _attributes_3), children))))
+		}, React.createElement("frame", _attributes, _exp_1, React.createElement(SxHost, _attributes_2, React.createElement("frame", {
+			key = "Pad",
+			Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4)),
+			Position = UDim2.new(0, theme.padding.calc(2), 0, theme.padding.calc(2)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, _exp_2, _result_1, children)))))
 	end
 	return React.createElement(React.Fragment, nil, _exp, _condition)
 end

package/out/ui/packages/drawer/components/Drawer.styles.luau

@@ -5,6 +5,7 @@ local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local useDrawerStyles = componentStyles("Drawer", function(theme, _param)
 	local width = _param.width
+	local heading = theme.typography.variants.h6
 	return createStyles({
 		root = {
 			Size = UDim2.fromScale(1, 1),
@@ -27,11 +28,18 @@ local useDrawerStyles = componentStyles("Drawer", function(theme, _param)
 			BorderSizePixel = 0,
 			ZIndex = 30001,
 		},
-		padding = {
-			PaddingTop = UDim.new(0, theme.padding.calc(2)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(2)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		title = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextWrapped = true,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
+			TextColor3 = theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			ZIndex = 30002,
 		},
 	})
 end)

package/out/ui/packages/drawer/components/drawerPlacement.d.ts

@@ -1,2 +1,16 @@
-export type DrawerEdge = "left" | "right";
+export type DrawerEdge = "left" | "right" | "bottom";
 export declare function drawerAnchor(edge: DrawerEdge): 1 | 0;
+export interface DrawerBox {
+    anchorX: number;
+    anchorY: number;
+    posX: number;
+    posY: number;
+    sizeX: number;
+    sizeXO: number;
+    sizeY: number;
+    sizeYO: number;
+}
+/** Side drawers keep a column. A bottom sheet spans the width and sits on the lower edge. */
+export declare function drawerBox(edge: DrawerEdge, span: number): DrawerBox;
+/** Keep the panel on its edge and leave the scrim visible. */
+export declare function drawerFit(edge: DrawerEdge, span: number, limit: number): DrawerBox;

package/out/ui/packages/drawer/components/drawerPlacement.luau

@@ -2,6 +2,52 @@
 local function drawerAnchor(edge)
 	return if edge == "left" then 0 else 1
 end
+--* Side drawers keep a column. A bottom sheet spans the width and sits on the lower edge. 
+local function drawerBox(edge, span)
+	local size = if span > 0 then span else 160
+	if edge == "bottom" then
+		return {
+			anchorX = 0,
+			anchorY = 1,
+			posX = 0,
+			posY = 1,
+			sizeX = 1,
+			sizeXO = 0,
+			sizeY = 0,
+			sizeYO = size,
+		}
+	end
+	local side = drawerAnchor(edge)
+	return {
+		anchorX = side,
+		anchorY = 0,
+		posX = side,
+		posY = 0,
+		sizeX = 0,
+		sizeXO = size,
+		sizeY = 1,
+		sizeYO = 0,
+	}
+end
+--* Keep the panel on its edge and leave the scrim visible. 
+local function drawerFit(edge, span, limit)
+	local box = drawerBox(edge, span)
+	local room = if limit > 0 then limit else 0
+	if edge == "bottom" then
+		local size = if room > 0 and box.sizeYO > room then room else box.sizeYO
+		local _object = table.clone(box)
+		setmetatable(_object, nil)
+		_object.sizeYO = size
+		return _object
+	end
+	local size = if room > 0 and box.sizeXO > room then room else box.sizeXO
+	local _object = table.clone(box)
+	setmetatable(_object, nil)
+	_object.sizeXO = size
+	return _object
+end
 return {
 	drawerAnchor = drawerAnchor,
+	drawerBox = drawerBox,
+	drawerFit = drawerFit,
 }

package/out/ui/packages/editorFace.d.ts

@@ -0,0 +1,22 @@
+import { ControlSize, Theme } from "../../theme/index";
+export declare function editorPad(theme: Theme): number;
+/** Same height as the Input these rows host, so the label and the field share one center. */
+export declare function editorRowHeight(theme: Theme, size?: ControlSize): number;
+export declare function editorText(theme: Theme): {
+    Font: Required<Enum.Font> | undefined;
+    TextSize: number | undefined;
+    TextTruncate: Enum.TextTruncate.AtEnd;
+    TextXAlignment: Enum.TextXAlignment.Left;
+    TextYAlignment: Enum.TextYAlignment.Center;
+};
+export declare function useEditorHover(disabled?: boolean): {
+    active: boolean;
+    face: {
+        BackgroundColor3: Color3;
+        BackgroundTransparency: number;
+    };
+    event: {
+        MouseEnter: () => void;
+        MouseLeave: () => void;
+    };
+};

package/out/ui/packages/editorFace.luau

@@ -0,0 +1,49 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local useState = TS.import(script, TS.getModule(script, "@rbxts", "react")).useState
+local _theme = TS.import(script, script.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
+local function editorPad(theme)
+	return theme.padding.calc(1)
+end
+--* Same height as the Input these rows host, so the label and the field share one center. 
+local function editorRowHeight(theme, size)
+	return controlMetrics(theme.density, size).height
+end
+local function editorText(theme)
+	return {
+		Font = theme.typography.fontFamilies.default,
+		TextSize = theme.typography.fontSizes.caption,
+		TextTruncate = Enum.TextTruncate.AtEnd,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextYAlignment = Enum.TextYAlignment.Center,
+	}
+end
+local function useEditorHover(disabled)
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local hovering, setHovering = useState(false)
+	local active = hovering and disabled ~= true
+	return {
+		active = active,
+		face = {
+			BackgroundColor3 = theme.palette.action.hover,
+			BackgroundTransparency = if active then 0 else 1,
+		},
+		event = {
+			MouseEnter = function()
+				return setHovering(true)
+			end,
+			MouseLeave = function()
+				return setHovering(false)
+			end,
+		},
+	}
+end
+return {
+	editorPad = editorPad,
+	editorRowHeight = editorRowHeight,
+	editorText = editorText,
+	useEditorHover = useEditorHover,
+}

package/out/ui/packages/fab/components/Fab.luau

@@ -4,7 +4,10 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlFade = _theme.controlFade
+local focusRing = _theme.focusRing
+local useTheme = _theme.useTheme
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
@@ -46,6 +49,7 @@ local function Fab(props)
 	})
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
+	local tone = if color == "accent" then theme.palette.accent else theme.palette.primary
 	local hovering, setHovering = useState(false)
 	local focused, setFocused = useState(false)
 	local iconPx = fabIconPixels(size)
@@ -104,7 +108,8 @@ local function Fab(props)
 	}
 	_attributes.Active = active
 	_attributes.Selectable = active
-	_attributes.BackgroundTransparency = if not active then 0.5 elseif hovering or focused then 0.15 else 0
+	_attributes.BackgroundColor3 = if active and hovering then tone.hover else tone.main
+	_attributes.BackgroundTransparency = if disabled == true then controlFade else 0
 	_attributes.Event = {
 		Activated = function()
 			if active and onClick then
@@ -131,8 +136,16 @@ local function Fab(props)
 	local _attributes_1 = table.clone(styles.corner)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uicorner", _attributes_1)
-	local _exp_1 = React.createElement(Shadow)
 	local _result_1
+	if focused and active then
+		local _attributes_2 = table.clone(focusRing(theme.palette.focus))
+		setmetatable(_attributes_2, nil)
+		_result_1 = React.createElement("uistroke", _attributes_2)
+	else
+		_result_1 = nil
+	end
+	local _exp_1 = React.createElement(Shadow)
+	local _result_2
 	if extended then
 		local _attributes_2 = {
 			key = "Content",
@@ -158,11 +171,11 @@ local function Fab(props)
 			_attributes_5.Text = label
 			_condition_1 = React.createElement("textlabel", _attributes_5)
 		end
-		_result_1 = (React.createElement("frame", _attributes_2, _exp_2, _exp_3, _exp_4, _condition_1))
+		_result_2 = (React.createElement("frame", _attributes_2, _exp_2, _exp_3, _exp_4, _condition_1))
 	else
-		_result_1 = iconEl
+		_result_2 = iconEl
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result_1)
+	return React.createElement(SxHost, _attributes, _exp, _result_1, _exp_1, _result_2)
 end
 local default = Fab
 return {

package/out/ui/packages/fab/components/Fab.styles.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlFade = _theme.controlFade
 local createStyles = _theme.createStyles
 local fabPixels = TS.import(script, script.Parent, "fabSize").fabPixels
 local useFabStyles = componentStyles("Fab", function(theme, _param)
@@ -22,7 +23,7 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 			Size = if extended == true then UDim2.new(0, 0, 0, diameter) else UDim2.fromOffset(diameter, diameter),
 			AutomaticSize = if extended == true then Enum.AutomaticSize.X else Enum.AutomaticSize.None,
 			BackgroundColor3 = tone.main,
-			BackgroundTransparency = if disabled then 0.5 else 0,
+			BackgroundTransparency = if disabled then controlFade else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Text = "",
@@ -54,7 +55,7 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 			BorderSizePixel = 0,
 			ScaleType = Enum.ScaleType.Fit,
 			ImageColor3 = tone.on,
-			ImageTransparency = if disabled then 0.5 else 0,
+			ImageTransparency = 0,
 			LayoutOrder = 1,
 		},
 		label = {
@@ -65,7 +66,7 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = tone.on,
-			TextTransparency = if disabled then 0.5 else 0,
+			TextTransparency = 0,
 			LayoutOrder = 2,
 		},
 	})

package/out/ui/packages/fontEditor/components/FontEditor.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
@@ -34,8 +35,10 @@ local function builtInFamilies()
 	end
 	local fonts = {}
 	for _, item in Enum.Font:GetEnumItems() do
-		local _arg0 = Font.fromEnum(item)
-		table.insert(fonts, _arg0)
+		if item ~= Enum.Font.Unknown then
+			local _arg0 = Font.fromEnum(item)
+			table.insert(fonts, _arg0)
+		end
 	end
 	cachedFamilies = enumFamilies(fonts)
 	return cachedFamilies
@@ -50,6 +53,7 @@ local function FontEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useFontEditorStyles()
+	local hover = useEditorHover(disabled)
 	local active = canActivate(disabled)
 	local families = builtInFamilies()
 	-- ▼ ReadonlyArray.find ▼
@@ -83,12 +87,18 @@ local function FontEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)

package/out/ui/packages/fontEditor/components/FontEditor.styles.luau

@@ -3,8 +3,12 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorRowHeight = _editorFace.editorRowHeight
+local editorText = _editorFace.editorText
 local useFontEditorStyles = componentStyles("FontEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,42 +17,47 @@ local useFontEditorStyles = componentStyles("FontEditor", function(theme)
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		row = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
 		pair = {
-			Size = UDim2.new(0.5, -theme.padding.calc(0.5), 0, theme.spacing.calc(2)),
+			Size = UDim2.new(0.5, -theme.padding.calc(0.5), 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
 		fill = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-		},
-		preview = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
-			BackgroundColor3 = theme.palette.surface.input,
-			BorderSizePixel = 0,
-			Text = "The quick brown fox",
-			TextColor3 = theme.palette.text.primary,
-			TextSize = theme.typography.fontSizes.body,
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextTruncate = Enum.TextTruncate.AtEnd,
-		},
-		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.default),
-			PaddingRight = UDim.new(0, theme.padding.default),
-		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
-		stroke = {
-			Color = theme.palette.border,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+			Size = UDim2.new(1, 0, 0, editorRowHeight(theme)),
 		},
-	})
+	}
+	local _left = "preview"
+	local _object_1 = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
+		BackgroundColor3 = theme.palette.surface.input,
+		BorderSizePixel = 0,
+		Text = "The quick brown fox",
+		TextColor3 = theme.palette.text.primary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.padding = {
+		PaddingLeft = UDim.new(0, editorPad(theme)),
+		PaddingRight = UDim.new(0, editorPad(theme)),
+	}
+	_object.corner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	_object.stroke = {
+		Color = theme.palette.border,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
+	return createStyles(_object)
 end)
 local default = useFontEditorStyles
 return {