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

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

@@ -1,72 +1,37 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-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 useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
 local function Divider(props)
 	local _binding = props
-	local text = _binding.text
-	local orientation = _binding.orientation
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local _binding_1 = useDividerStyles(props)
 	local root = _binding_1.root
-	local shell = _binding_1.shell
-	local line = _binding_1.line
-	local caption = _binding_1.caption
-	local captionPad = _binding_1.captionPad
-	local label = dividerLabel(text)
-	if label ~= nil and orientation ~= Orientations.Vertical then
-		local _attributes = {
-			tag = "frame",
-		}
-		local _condition = id
-		if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-			_condition = "Divider"
-		end
-		_attributes.key = _condition
-		_attributes.hostRef = ref
-		_attributes.base = shell
-		_attributes.className = className
-		_attributes.sx = sx
-		local _attributes_1 = {
-			key = "Line",
-		}
-		for _k, _v in line do
-			_attributes_1[_k] = _v
-		end
-		local _exp = React.createElement("frame", _attributes_1)
-		local _attributes_2 = {
-			key = "Label",
-		}
-		for _k, _v in caption do
-			_attributes_2[_k] = _v
-		end
-		_attributes_2.Text = label
-		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)))
-	end
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Divider"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	local _object = table.clone(root)
-	setmetatable(_object, nil)
-	_object.BorderSizePixel = 0
-	_attributes.base = _object
-	_attributes.className = className
-	_attributes.sx = sx
-	return React.createElement(SxHost, _attributes)
+	_attributes.ref = ref
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
+	_attributes.BorderSizePixel = 0
+	if className ~= 0 and className == className and className ~= "" and className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx ~= 0 and sx == sx and sx ~= "" and sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	return React.createElement("frame", _attributes)
 end
 local default = Divider
 return {

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

@@ -32,38 +32,6 @@ local useDividerStyles = componentStyles("Divider", function(theme, props)
 		anchorPoint = Vector2.new(0, 0)
 	end
 	return createStyles({
-		shell = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			ClipsDescendants = true,
-		},
-		line = {
-			Size = UDim2.new(1, 0, 0, weight),
-			Position = UDim2.new(0, 0, 0.5, 0),
-			AnchorPoint = Vector2.new(0, 0.5),
-			BackgroundColor3 = color,
-			BackgroundTransparency = transparency,
-			BorderSizePixel = 0,
-		},
-		caption = {
-			AutomaticSize = Enum.AutomaticSize.X,
-			Size = UDim2.new(0, 0, 1, 0),
-			AnchorPoint = Vector2.new(0.5, 0.5),
-			Position = UDim2.new(0.5, 0, 0.5, 0),
-			BackgroundColor3 = theme.palette.surface.canvas,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextTruncate = Enum.TextTruncate.AtEnd,
-			TextXAlignment = Enum.TextXAlignment.Center,
-			ZIndex = 2,
-		},
-		captionPad = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1)),
-		},
 		root = {
 			Position = position or UDim2.new(0, 0, 0, 0),
 			Size = UDim2.new(if orientation == Orientations.Horizontal then 1 else 0, if orientation == Orientations.Horizontal then -padding * 2 else weight, if orientation == Orientations.Vertical then 1 else 0, if orientation == Orientations.Vertical then -padding * 2 else weight),

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

@@ -1,13 +1,11 @@
 import React from "@rbxts/react";
-import { CustomizedProps } from "../../../../theme/index";
 import { DrawerEdge } from "./drawerPlacement";
 export interface DrawerProps {
     host?: Instance;
     open: boolean;
     edge?: DrawerEdge;
-    width?: number;
     onClose: () => void;
     children?: React.ReactNode;
 }
-declare function Drawer(props: CustomizedProps<Frame, DrawerProps>): JSX.Element;
+declare function Drawer(props: DrawerProps): JSX.Element | undefined;
 export default Drawer;

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

@@ -4,13 +4,9 @@ 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 UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local Portal = TS.import(script, script.Parent.Parent.Parent, "popup").Portal
 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 useDrawerStyles = TS.import(script, script.Parent, "Drawer.styles").default
 local function Drawer(props)
@@ -21,25 +17,11 @@ local function Drawer(props)
 	if edge == nil then
 		edge = "left"
 	end
-	local width = _binding.width
 	local onClose = _binding.onClose
 	local children = _binding.children
-	local className = _binding.className
-	local sx = _binding.sx
-	local id = _binding.id
-	local ref = _binding.ref
-	local styles = useDrawerStyles({
-		width = width,
-	})
+	local styles = useDrawerStyles()
 	local close = useRef(onClose)
-	local anchor = useRef()
-	local layer, setLayer = useState(function()
-		return portalTarget(host)
-	end)
 	close.current = onClose
-	useEffect(function()
-		setLayer(portalTarget(host or anchor.current))
-	end, { host, open })
 	useEffect(function()
 		if not open then
 			return nil
@@ -52,58 +34,42 @@ local function Drawer(props)
 		return function()
 			return connection:Disconnect()
 		end
-	end, { open, layer })
-	local placement = drawerAnchor(edge)
-	local panelStyle = styles.panel
-	local _exp = React.createElement("frame", {
-		key = "DrawerAnchor",
-		ref = anchor,
-		Size = UDim2.fromOffset(0, 0),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-	})
-	local _condition = open and layer ~= nil
-	if _condition then
-		local _attributes = {
-			key = "Drawer",
-		}
-		for _k, _v in styles.root do
-			_attributes[_k] = _v
-		end
-		local _attributes_1 = {
-			key = "Backdrop",
-		}
-		for _k, _v in styles.backdrop do
-			_attributes_1[_k] = _v
-		end
-		_attributes_1.Event = {
-			Activated = function()
-				return close.current()
-			end,
-		}
-		local _exp_1 = React.createElement("textbutton", _attributes_1)
-		local _attributes_2 = {
-			tag = "frame",
-		}
-		local _condition_1 = id
-		if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
-			_condition_1 = "Panel"
-		end
-		_attributes_2.key = _condition_1
-		_attributes_2.hostRef = ref
-		_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.ZIndex = panelStyle.ZIndex
-		local _attributes_3 = table.clone(styles.padding)
-		setmetatable(_attributes_3, nil)
-		_condition = (React.createElement(Portal, {
-			host = layer,
-		}, React.createElement("frame", _attributes, _exp_1, React.createElement(SxHost, _attributes_2, React.createElement("uipadding", _attributes_3), children))))
+	end, { open })
+	if not open then
+		return nil
+	end
+	local anchor = drawerAnchor(edge)
+	local _attributes = {
+		key = "Drawer",
+	}
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	local _attributes_1 = {
+		key = "Backdrop",
+	}
+	for _k, _v in styles.backdrop do
+		_attributes_1[_k] = _v
+	end
+	_attributes_1.Event = {
+		Activated = function()
+			return close.current()
+		end,
+	}
+	local _exp = React.createElement("textbutton", _attributes_1)
+	local _attributes_2 = {
+		key = "Panel",
+	}
+	for _k, _v in styles.panel do
+		_attributes_2[_k] = _v
 	end
-	return React.createElement(React.Fragment, nil, _exp, _condition)
+	_attributes_2.AnchorPoint = Vector2.new(anchor, 0)
+	_attributes_2.Position = UDim2.fromScale(anchor, 0)
+	local _attributes_3 = table.clone(styles.padding)
+	setmetatable(_attributes_3, nil)
+	return React.createElement(Portal, {
+		host = host,
+	}, React.createElement("frame", _attributes, _exp, React.createElement("frame", _attributes_2, React.createElement("uipadding", _attributes_3), children)))
 end
 local default = Drawer
 return {

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

@@ -1,4 +1,2 @@
-declare const useDrawerStyles: (props: {
-    width?: number;
-}) => import("../../../../theme/index").ClassNameMap<string>;
+declare const useDrawerStyles: () => import("../../../../theme/index").ClassNameMap<string>;
 export default useDrawerStyles;

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

@@ -3,8 +3,7 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useDrawerStyles = componentStyles("Drawer", function(theme, _param)
-	local width = _param.width
+local useDrawerStyles = componentStyles("Drawer", function(theme)
 	return createStyles({
 		root = {
 			Size = UDim2.fromScale(1, 1),
@@ -22,7 +21,7 @@ local useDrawerStyles = componentStyles("Drawer", function(theme, _param)
 			ZIndex = 30000,
 		},
 		panel = {
-			Size = UDim2.new(0, if width ~= nil and width > 0 then width else theme.spacing.calc(20), 1, 0),
+			Size = UDim2.new(0, theme.spacing.calc(20), 1, 0),
 			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 			ZIndex = 30001,

package/out/ui/packages/fab/components/Fab.d.ts

@@ -1,12 +1,9 @@
 import { CustomizedProps } from "../../../../theme/index";
 import { Icons } from "../../../enums/index";
 import { FabSize } from "./fabSize";
-import { FabColor } from "./Fab.styles";
 export interface FabProps {
     icon: Icons;
-    label?: string;
     size?: FabSize;
-    color?: FabColor;
     disabled?: boolean;
     loading?: boolean;
     reducedMotion?: boolean;

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

@@ -7,24 +7,16 @@ local useState = _react.useState
 local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "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
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
-local _fabSize = TS.import(script, script.Parent, "fabSize")
-local fabExtended = _fabSize.fabExtended
-local fabIconPixels = _fabSize.fabIconPixels
+local fabIconPixels = TS.import(script, script.Parent, "fabSize").fabIconPixels
 local useFabStyles = TS.import(script, script.Parent, "Fab.styles").default
 local function Fab(props)
 	local _binding = props
 	local icon = _binding.icon
-	local label = _binding.label
 	local size = _binding.size
 	if size == nil then
 		size = "medium"
 	end
-	local color = _binding.color
-	if color == nil then
-		color = "primary"
-	end
 	local disabled = _binding.disabled
 	local loading = _binding.loading
 	if loading == nil then
@@ -37,12 +29,9 @@ local function Fab(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local active = canActivate(disabled, loading)
-	local extended = fabExtended(label)
 	local styles = useFabStyles({
 		size = size,
-		color = color,
 		disabled = not active,
-		extended = extended,
 	})
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
@@ -56,52 +45,26 @@ local function Fab(props)
 		setHovering(false)
 		setFocused(false)
 	end, { active })
-	local _result
-	if loading then
-		_result = (React.createElement(CircularProgress, {
-			size = iconPx,
-			thickness = 2,
-			color = theme.palette.primary.on,
-			reducedMotion = reducedMotion,
-			className = if extended then {
-				LayoutOrder = 1,
-			} else {
-				AnchorPoint = Vector2.new(0.5, 0.5),
-				Position = UDim2.fromScale(0.5, 0.5),
-			},
-		}))
-	else
-		local _attributes = {
-			key = "Icon",
-		}
-		for _k, _v in styles.icon do
-			_attributes[_k] = _v
-		end
-		_attributes.Size = UDim2.fromOffset(iconPx, iconPx)
-		_attributes.AnchorPoint = if extended then Vector2.new(0, 0) else Vector2.new(0.5, 0.5)
-		_attributes.Position = if extended then UDim2.fromScale(0, 0) else UDim2.fromScale(0.5, 0.5)
-		_attributes.Image = tostring(icon)
-		_result = (React.createElement("imagelabel", _attributes))
-	end
-	local iconEl = _result
-	local _attributes = {
-		tag = "textbutton",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Fab"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-		loading = loading,
-		hover = hovering,
-		focused = focused,
-	}
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	_attributes.Active = active
 	_attributes.Selectable = active
 	_attributes.BackgroundTransparency = if not active then 0.5 elseif hovering or focused then 0.15 else 0
@@ -132,37 +95,32 @@ local function Fab(props)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uicorner", _attributes_1)
 	local _exp_1 = React.createElement(Shadow)
-	local _result_1
-	if extended then
+	local _result
+	if loading then
+		_result = (React.createElement(CircularProgress, {
+			size = iconPx,
+			thickness = 2,
+			color = theme.palette.primary.on,
+			reducedMotion = reducedMotion,
+			className = {
+				AnchorPoint = Vector2.new(0.5, 0.5),
+				Position = UDim2.fromScale(0.5, 0.5),
+			},
+		}))
+	else
 		local _attributes_2 = {
-			key = "Content",
+			key = "Icon",
 		}
-		for _k, _v in styles.content do
+		for _k, _v in styles.icon do
 			_attributes_2[_k] = _v
 		end
-		local _attributes_3 = table.clone(styles.padding)
-		setmetatable(_attributes_3, nil)
-		local _exp_2 = React.createElement("uipadding", _attributes_3)
-		local _attributes_4 = table.clone(styles.row)
-		setmetatable(_attributes_4, nil)
-		local _exp_3 = React.createElement("uilistlayout", _attributes_4)
-		local _exp_4 = iconEl
-		local _condition_1 = not loading
-		if _condition_1 then
-			local _attributes_5 = {
-				key = "Label",
-			}
-			for _k, _v in styles.label do
-				_attributes_5[_k] = _v
-			end
-			_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))
-	else
-		_result_1 = iconEl
+		_attributes_2.Size = UDim2.fromOffset(iconPx, iconPx)
+		_attributes_2.AnchorPoint = Vector2.new(0.5, 0.5)
+		_attributes_2.Position = UDim2.fromScale(0.5, 0.5)
+		_attributes_2.Image = tostring(icon)
+		_result = (React.createElement("imagelabel", _attributes_2))
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result_1)
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, _result)
 end
 local default = Fab
 return {

package/out/ui/packages/fab/components/Fab.styles.d.ts

@@ -1,10 +1,7 @@
 import { FabSize } from "./fabSize";
-export type FabColor = "primary" | "accent";
 export interface FabStyleProps {
     size?: FabSize;
-    color?: FabColor;
     disabled?: boolean;
-    extended?: boolean;
 }
 declare const useFabStyles: (props: FabStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useFabStyles;

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

@@ -9,19 +9,12 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 	if size == nil then
 		size = "medium"
 	end
-	local color = _param.color
-	if color == nil then
-		color = "primary"
-	end
 	local disabled = _param.disabled
-	local extended = _param.extended
 	local diameter = fabPixels(size)
-	local tone = if color == "accent" then theme.palette.accent else theme.palette.primary
 	return createStyles({
 		root = {
-			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,
+			Size = UDim2.fromOffset(diameter, diameter),
+			BackgroundColor3 = theme.palette.primary.main,
 			BackgroundTransparency = if disabled then 0.5 else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
@@ -31,42 +24,13 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 		corner = {
 			CornerRadius = UDim.new(1, 0),
 		},
-		content = {
-			Size = UDim2.new(0, 0, 0, diameter),
-			AutomaticSize = Enum.AutomaticSize.X,
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-		},
-		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-			PaddingRight = UDim.new(0, theme.padding.calc(2.5)),
-		},
-		row = {
-			FillDirection = Enum.FillDirection.Horizontal,
-			VerticalAlignment = Enum.VerticalAlignment.Center,
-			HorizontalAlignment = Enum.HorizontalAlignment.Center,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, theme.padding.calc(1)),
-		},
 		icon = {
 			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ScaleType = Enum.ScaleType.Fit,
-			ImageColor3 = tone.on,
+			ImageColor3 = theme.palette.primary.on,
 			ImageTransparency = if disabled then 0.5 else 0,
-			LayoutOrder = 1,
-		},
-		label = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = tone.on,
-			TextTransparency = if disabled then 0.5 else 0,
-			LayoutOrder = 2,
 		},
 	})
 end)

package/out/ui/packages/fab/components/fabSize.d.ts

@@ -1,4 +1,3 @@
 export type FabSize = "small" | "medium" | "large";
 export declare function fabPixels(size?: FabSize): 40 | 64 | 56;
 export declare function fabIconPixels(size?: FabSize): 18 | 24 | 28;
-export declare function fabExtended(label?: string): boolean;

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

@@ -23,11 +23,7 @@ local function fabIconPixels(size)
 	end
 	return 24
 end
-local function fabExtended(label)
-	return label ~= nil and label ~= ""
-end
 return {
 	fabPixels = fabPixels,
 	fabIconPixels = fabIconPixels,
-	fabExtended = fabExtended,
 }

package/out/ui/packages/fab/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Fab } from "./components/Fab";
 export { FabProps } from "./components/Fab";
-export { FabSize, fabPixels, fabIconPixels, fabExtended } from "./components/fabSize";
+export { FabSize, fabPixels, fabIconPixels } from "./components/fabSize";

package/out/ui/packages/fab/init.luau

@@ -5,5 +5,4 @@ exports.Fab = TS.import(script, script, "components", "Fab").default
 local _fabSize = TS.import(script, script, "components", "fabSize")
 exports.fabPixels = _fabSize.fabPixels
 exports.fabIconPixels = _fabSize.fabIconPixels
-exports.fabExtended = _fabSize.fabExtended
 return exports

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

@@ -3,7 +3,6 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
-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
 local Select = TS.import(script, script.Parent.Parent.Parent, "select").Select
@@ -74,21 +73,26 @@ local function FontEditor(props)
 	local custom, setCustom = useState(value.Family)
 	local weights = enumOptions(Enum.FontWeight:GetEnumItems())
 	local stylesList = enumOptions(Enum.FontStyle:GetEnumItems())
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "FontEditor"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-	}
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -211,7 +215,7 @@ local function FontEditor(props)
 	local _exp_7 = React.createElement("uicorner", _attributes_10)
 	local _attributes_11 = table.clone(styles.stroke)
 	setmetatable(_attributes_11, nil)
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_5, React.createElement("textlabel", _attributes_8, _exp_6, _exp_7, React.createElement("uistroke", _attributes_11)))
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _exp_5, React.createElement("textlabel", _attributes_8, _exp_6, _exp_7, React.createElement("uistroke", _attributes_11)))
 end
 local default = FontEditor
 return {