@rbxts/uiblox 0.2.0-alpha.3 → 0.2.0-alpha.31

package/out/ui/packages/gradientEditor/components/GradientEditor.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local _colorPicker = TS.import(script, script.Parent.Parent.Parent, "colorPicker")
 local ColorSequenceEditor = _colorPicker.ColorSequenceEditor
 local NumberSequenceEditor = _colorPicker.NumberSequenceEditor
@@ -21,33 +22,28 @@ local function GradientEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useGradientEditorStyles()
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "GradientEditor"
 	end
 	_attributes.key = _condition
-	_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.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
 	local _attributes_2 = {
 		key = "Color",
 	}
-	for _k, _v in styles.row do
+	for _k, _v in styles.block do
 		_attributes_2[_k] = _v
 	end
 	_attributes_2.LayoutOrder = 1
@@ -57,6 +53,7 @@ local function GradientEditor(props)
 	local _attributes_4 = table.clone(styles.label)
 	setmetatable(_attributes_4, nil)
 	_attributes_4.Text = "Color"
+	_attributes_4.LayoutOrder = 1
 	local _exp_2 = React.createElement("frame", _attributes_2, _exp_1, React.createElement("textlabel", _attributes_4), React.createElement(ColorSequenceEditor, {
 		value = value.color,
 		disabled = disabled,
@@ -70,7 +67,7 @@ local function GradientEditor(props)
 	local _attributes_5 = {
 		key = "Transparency",
 	}
-	for _k, _v in styles.row do
+	for _k, _v in styles.block do
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.LayoutOrder = 2
@@ -80,6 +77,7 @@ local function GradientEditor(props)
 	local _attributes_7 = table.clone(styles.label)
 	setmetatable(_attributes_7, nil)
 	_attributes_7.Text = "Transparency"
+	_attributes_7.LayoutOrder = 1
 	local _exp_4 = React.createElement("frame", _attributes_5, _exp_3, React.createElement("textlabel", _attributes_7), React.createElement(NumberSequenceEditor, {
 		value = value.transparency,
 		disabled = disabled,
@@ -91,40 +89,56 @@ local function GradientEditor(props)
 		end,
 	}))
 	local _attributes_8 = {
-		key = "Rotation",
+		key = "Metrics",
 	}
-	for _k, _v in styles.row do
+	for _k, _v in styles.metrics do
 		_attributes_8[_k] = _v
 	end
 	_attributes_8.LayoutOrder = 3
-	local _attributes_9 = table.clone(styles.column)
+	local _attributes_9 = table.clone(styles.metricsRow)
 	setmetatable(_attributes_9, nil)
 	local _exp_5 = React.createElement("uilistlayout", _attributes_9)
-	local _attributes_10 = table.clone(styles.label)
-	setmetatable(_attributes_10, nil)
-	_attributes_10.Text = "Rotation"
-	local _exp_6 = React.createElement("frame", _attributes_8, _exp_5, React.createElement("textlabel", _attributes_10), React.createElement(NumberInput, {
+	local _attributes_10 = {
+		key = "Rotation",
+	}
+	for _k, _v in styles.metric do
+		_attributes_10[_k] = _v
+	end
+	_attributes_10.LayoutOrder = 1
+	local _attributes_11 = table.clone(styles.metricInner)
+	setmetatable(_attributes_11, nil)
+	local _exp_6 = React.createElement("uilistlayout", _attributes_11)
+	local _attributes_12 = table.clone(styles.metricLabel)
+	setmetatable(_attributes_12, nil)
+	_attributes_12.Text = "Rotation"
+	_attributes_12.LayoutOrder = 1
+	local _exp_7 = React.createElement("textlabel", _attributes_12)
+	local _attributes_13 = table.clone(styles.metricField)
+	setmetatable(_attributes_13, nil)
+	_attributes_13.LayoutOrder = 2
+	local _exp_8 = React.createElement("frame", _attributes_10, _exp_6, _exp_7, React.createElement("frame", _attributes_13, React.createElement(NumberInput, {
 		value = value.rotation,
 		disabled = disabled,
 		width = UDim.new(1, 0),
 		onChange = function(rotation)
 			return onChange(patchGradientRotation(value, rotation))
 		end,
-	}))
-	local _attributes_11 = {
+	})))
+	local _attributes_14 = {
 		key = "Offset",
 	}
-	for _k, _v in styles.row do
-		_attributes_11[_k] = _v
+	for _k, _v in styles.metric do
+		_attributes_14[_k] = _v
 	end
-	_attributes_11.LayoutOrder = 4
-	local _attributes_12 = table.clone(styles.column)
-	setmetatable(_attributes_12, nil)
-	local _exp_7 = React.createElement("uilistlayout", _attributes_12)
-	local _attributes_13 = table.clone(styles.label)
-	setmetatable(_attributes_13, nil)
-	_attributes_13.Text = "Offset"
-	local _exp_8 = React.createElement("frame", _attributes_11, _exp_7, React.createElement("textlabel", _attributes_13), React.createElement(VectorEditor, {
+	_attributes_14.LayoutOrder = 2
+	local _attributes_15 = table.clone(styles.column)
+	setmetatable(_attributes_15, nil)
+	local _exp_9 = React.createElement("uilistlayout", _attributes_15)
+	local _attributes_16 = table.clone(styles.metricLabel)
+	setmetatable(_attributes_16, nil)
+	_attributes_16.Text = "Offset"
+	_attributes_16.LayoutOrder = 1
+	local _exp_10 = React.createElement("frame", _attributes_8, _exp_5, _exp_8, React.createElement("frame", _attributes_14, _exp_9, React.createElement("textlabel", _attributes_16), React.createElement(VectorEditor, {
 		value = value.offset,
 		disabled = disabled,
 		onChange = function(offset)
@@ -133,15 +147,15 @@ local function GradientEditor(props)
 			_object.offset = offset
 			return onChange(_object)
 		end,
-	}))
-	local _attributes_14 = {
+	})))
+	local _attributes_17 = {
 		key = "Enabled",
 	}
-	for _k, _v in styles.row do
-		_attributes_14[_k] = _v
+	for _k, _v in styles.block do
+		_attributes_17[_k] = _v
 	end
-	_attributes_14.LayoutOrder = 5
-	return React.createElement("frame", _attributes, _exp, _exp_2, _exp_4, _exp_6, _exp_8, React.createElement("frame", _attributes_14, React.createElement(Switch, {
+	_attributes_17.LayoutOrder = 4
+	return React.createElement(SxHost, _attributes, _exp, _exp_2, _exp_4, _exp_10, React.createElement("frame", _attributes_17, React.createElement(Switch, {
 		value = value.enabled,
 		disabled = disabled,
 		label = "Enabled",

package/out/ui/packages/gradientEditor/components/GradientEditor.styles.luau

@@ -13,22 +13,55 @@ local useGradientEditorStyles = componentStyles("GradientEditor", function(theme
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
-		row = {
+		block = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
 		label = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.5)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
 			BackgroundTransparency = 1,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
+			TextSize = theme.typography.fontSizes.button,
 			TextColor3 = theme.palette.text.secondary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
+		metrics = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+		},
+		metricsRow = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			VerticalAlignment = Enum.VerticalAlignment.Top,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		metric = {
+			Size = UDim2.new(0.5, -theme.padding.calc(0.5), 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+		},
+		metricInner = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		metricLabel = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.button,
+			TextColor3 = theme.palette.text.secondary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		metricField = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
+			BackgroundTransparency = 1,
+		},
 	})
 end)
 local default = useGradientEditorStyles

package/out/ui/packages/host/components/SxHost.d.ts

@@ -0,0 +1,18 @@
+import React from "@rbxts/react";
+import { StyleState } from "../../../../theme/styles/utilities/resolveStyle";
+import { SxInput } from "../../../../theme/styles/utilities/resolveSx";
+export interface SxHostProps {
+    tag?: string;
+    base?: object;
+    className?: object;
+    sx?: SxInput | object;
+    state?: StyleState;
+    hostRef?: React.Ref<any>;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+}
+declare function SxHost(props: SxHostProps): React.ReactElement<{
+    ref: (instance: GuiObject) => void;
+    children: React.Element<any, string | React.JSXElementConstructor<any>>[];
+}, string | React.JSXElementConstructor<any>>;
+export default SxHost;

package/out/ui/packages/host/components/SxHost.luau

@@ -0,0 +1,210 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+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 observeViewport = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks", "viewportObserver").observeViewport
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _hostRules = TS.import(script, script.Parent.Parent, "hostRules")
+local elementProps = _hostRules.elementProps
+local elementType = _hostRules.elementType
+local hostKind = _hostRules.hostKind
+local hostRest = _hostRules.hostRest
+local layoutGapPatch = _hostRules.layoutGapPatch
+local sxUsesBreakpoints = _hostRules.sxUsesBreakpoints
+local paintHostStyle = TS.import(script, script.Parent.Parent, "hostPaint").paintHostStyle
+local function setRef(hostRef, instance)
+	if hostRef == nil then
+		return nil
+	end
+	local _hostRef = hostRef
+	if type(_hostRef) == "function" then
+		hostRef(instance)
+		return nil
+	end
+	hostRef.current = instance
+end
+local function SxHost(props)
+	local _condition = props.tag
+	if _condition == nil then
+		_condition = "frame"
+	end
+	local tag = _condition
+	local sx = props.sx
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local bound = useRef()
+	local width, setWidth = useState(nil)
+	local hover, setHover = useState(false)
+	local pressed, setPressed = useState(false)
+	local focused, setFocused = useState(false)
+	useEffect(function()
+		local host = bound.current
+		if host == nil or not sxUsesBreakpoints(sx) then
+			return nil
+		end
+		return observeViewport(host, function(size)
+			setWidth(function(prev)
+				return if prev == size.width then prev else size.width
+			end)
+		end)
+	end, { sx })
+	local passed = props.state
+	local _result = passed
+	if _result ~= nil then
+		_result = _result.disabled
+	end
+	local locked = _result == true
+	local _exp = props.base
+	local _exp_1 = props.className
+	local _object = {
+		hover = hover,
+		pressed = pressed,
+		focused = focused,
+	}
+	if passed then
+		for _k, _v in passed do
+			_object[_k] = _v
+		end
+	end
+	local paint = paintHostStyle(theme, _exp, _exp_1, sx, width, _object)
+	local rest = hostRest(props)
+	local caller = rest.Event
+	local pressable = tag == "textbutton" or tag == "imagebutton"
+	local _object_1 = {}
+	if caller then
+		for _k, _v in caller do
+			_object_1[_k] = _v
+		end
+	end
+	_object_1.MouseEnter = function(...)
+		local args = { ... }
+		if not locked then
+			setHover(true)
+		end
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.MouseEnter
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	_object_1.MouseLeave = function(...)
+		local args = { ... }
+		setHover(false)
+		setPressed(false)
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.MouseLeave
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	_object_1.SelectionGained = function(...)
+		local args = { ... }
+		if not locked then
+			setFocused(true)
+		end
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.SelectionGained
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	_object_1.SelectionLost = function(...)
+		local args = { ... }
+		setFocused(false)
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.SelectionLost
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	rest.Event = _object_1
+	-- GuiButton-only; Frames reject MouseButton1* and crash Select/Menu hosts.
+	if pressable then
+		local events = rest.Event
+		events.MouseButton1Down = function(...)
+			local args = { ... }
+			if not locked then
+				setPressed(true)
+			end
+			local _result_1 = caller
+			if _result_1 ~= nil then
+				_result_1 = _result_1.MouseButton1Down
+				if _result_1 ~= nil then
+					_result_1(unpack(args))
+				end
+			end
+		end
+		events.MouseButton1Up = function(...)
+			local args = { ... }
+			setPressed(false)
+			local _result_1 = caller
+			if _result_1 ~= nil then
+				_result_1 = _result_1.MouseButton1Up
+				if _result_1 ~= nil then
+					_result_1(unpack(args))
+				end
+			end
+		end
+	end
+	local nodes = React.Children.toArray(props.children)
+	local painted = {}
+	local hasPad = false
+	local hasCorner = false
+	local hasGradient = false
+	for _, node in nodes do
+		if not React.isValidElement(node) then
+			continue
+		end
+		local kind = hostKind(elementType(node))
+		if kind == "uipadding" then
+			hasPad = true
+		end
+		if kind == "uicorner" then
+			hasCorner = true
+		end
+		if kind == "uigradient" then
+			hasGradient = true
+		end
+		local patch = if kind ~= nil then layoutGapPatch(kind, elementProps(node), paint.gap) else nil
+		local _arg0 = if patch ~= nil then React.cloneElement(node, patch) else node
+		table.insert(painted, _arg0)
+	end
+	if not hasPad and paint.padding ~= nil then
+		local _arg0 = React.createElement("uipadding", paint.padding)
+		table.insert(painted, _arg0)
+	end
+	if not hasCorner and paint.corner ~= nil then
+		local _arg0 = React.createElement("uicorner", paint.corner)
+		table.insert(painted, _arg0)
+	end
+	if not hasGradient and paint.gradient ~= nil then
+		local _arg0 = React.createElement("uigradient", paint.gradient)
+		table.insert(painted, _arg0)
+	end
+	local _object_2 = table.clone(paint.props)
+	setmetatable(_object_2, nil)
+	for _k, _v in rest do
+		_object_2[_k] = _v
+	end
+	_object_2.ref = function(instance)
+		bound.current = instance
+		setRef(props.hostRef, instance)
+	end
+	_object_2.children = painted
+	return React.createElement(tag, _object_2)
+end
+local default = SxHost
+return {
+	default = default,
+}

package/out/ui/packages/host/hostPaint.d.ts

@@ -0,0 +1,12 @@
+import { resolveSx, ResolvedSx, SxInput } from "../../../theme/styles/utilities/resolveSx";
+import { StyleState } from "../../../theme/styles/utilities/resolveStyle";
+export interface HostPaint {
+    props: {
+        [key: string]: unknown;
+    };
+    padding?: ResolvedSx["padding"];
+    corner?: ResolvedSx["corner"];
+    gradient?: ResolvedSx["gradient"];
+    gap?: number;
+}
+export declare function paintHostStyle(theme: Parameters<typeof resolveSx>[0], base: object | undefined, className: object | undefined, sx: SxInput | undefined, width: number | undefined, state: StyleState | undefined): HostPaint;

package/out/ui/packages/host/hostPaint.luau

@@ -0,0 +1,34 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local resolveSx = TS.import(script, script.Parent.Parent.Parent.Parent, "theme", "styles", "utilities", "resolveSx").resolveSx
+local resolveStyle = TS.import(script, script.Parent.Parent.Parent.Parent, "theme", "styles", "utilities", "resolveStyle").resolveStyle
+local function paintHostStyle(theme, base, className, sx, width, state)
+	local resolved = resolveSx(theme, sx, width)
+	local _object = {}
+	local _spread = (base or {})
+	if _spread then
+		for _k, _v in _spread do
+			_object[_k] = _v
+		end
+	end
+	local _spread_1 = (className or {})
+	if _spread_1 then
+		for _k, _v in _spread_1 do
+			_object[_k] = _v
+		end
+	end
+	for _k, _v in resolved.root do
+		_object[_k] = _v
+	end
+	local merged = _object
+	return {
+		props = resolveStyle(merged, state or {}),
+		padding = resolved.padding,
+		corner = resolved.corner,
+		gradient = resolved.gradient,
+		gap = resolved.gap,
+	}
+end
+return {
+	paintHostStyle = paintHostStyle,
+}

package/out/ui/packages/host/hostRules.d.ts

@@ -0,0 +1,15 @@
+export declare function sxUsesBreakpoints(sx: object | undefined): boolean;
+export declare function elementProps(element: unknown): {
+    [key: string]: unknown;
+};
+export declare function elementType(element: unknown): unknown;
+export declare function hostKind(typeName: unknown): string | undefined;
+/** Explicit layout padding wins. Otherwise sx `gap` fills the empty field. */
+export declare function layoutGapPatch(kind: string, props: {
+    [key: string]: unknown;
+}, gap: number | undefined): {
+    [key: string]: unknown;
+} | undefined;
+export declare function hostRest(props: object): {
+    [key: string]: unknown;
+};

package/out/ui/packages/host/hostRules.luau

@@ -0,0 +1,92 @@
+-- Compiled with roblox-ts v3.0.0
+local SKIP = {
+	tag = true,
+	base = true,
+	className = true,
+	sx = true,
+	state = true,
+	hostRef = true,
+	children = true,
+}
+local function sxUsesBreakpoints(sx)
+	if sx == nil then
+		return false
+	end
+	for _, value in pairs(sx) do
+		if typeof(value) ~= "table" then
+			continue
+		end
+		local record = value
+		if record.phone ~= nil or record.tablet ~= nil or record.desktop ~= nil then
+			return true
+		end
+	end
+	return false
+end
+local function elementProps(element)
+	local _element = element
+	if typeof(_element) ~= "table" then
+		return {}
+	end
+	local props = element.props
+	if typeof(props) ~= "table" then
+		return {}
+	end
+	return props
+end
+local function elementType(element)
+	local _element = element
+	if typeof(_element) ~= "table" then
+		return nil
+	end
+	return element.type
+end
+local function hostKind(typeName)
+	local _typeName = typeName
+	if not (type(_typeName) == "string") then
+		return nil
+	end
+	return string.lower(typeName)
+end
+--* Explicit layout padding wins. Otherwise sx `gap` fills the empty field. 
+local function layoutGapPatch(kind, props, gap)
+	if gap == nil then
+		return nil
+	end
+	if kind == "uilistlayout" then
+		if props.Padding ~= nil then
+			return nil
+		end
+		return {
+			Padding = UDim.new(0, gap),
+		}
+	end
+	if kind == "uigridlayout" then
+		if props.CellPadding ~= nil then
+			return nil
+		end
+		return {
+			CellPadding = UDim2.new(0, gap, 0, gap),
+		}
+	end
+	return nil
+end
+local function hostRest(props)
+	local rest = {}
+	for key, value in pairs(props) do
+		local name = key
+		if SKIP[name] == true then
+			continue
+		end
+		rest[name] = value
+	end
+	return rest
+end
+return {
+	sxUsesBreakpoints = sxUsesBreakpoints,
+	elementProps = elementProps,
+	elementType = elementType,
+	hostKind = hostKind,
+	layoutGapPatch = layoutGapPatch,
+	hostRest = hostRest,
+}

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

@@ -0,0 +1,3 @@
+export { default as SxHost, SxHostProps } from "./components/SxHost";
+export { paintHostStyle } from "./hostPaint";
+export { elementProps, elementType, hostKind, hostRest, layoutGapPatch, sxUsesBreakpoints } from "./hostRules";

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

@@ -0,0 +1,13 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.SxHost = TS.import(script, script, "components", "SxHost").default
+exports.paintHostStyle = TS.import(script, script, "hostPaint").paintHostStyle
+local _hostRules = TS.import(script, script, "hostRules")
+exports.elementProps = _hostRules.elementProps
+exports.elementType = _hostRules.elementType
+exports.hostKind = _hostRules.hostKind
+exports.hostRest = _hostRules.hostRest
+exports.layoutGapPatch = _hostRules.layoutGapPatch
+exports.sxUsesBreakpoints = _hostRules.sxUsesBreakpoints
+return exports

package/out/ui/packages/icon/components/Icon.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
 local function Icon(props)
 	local _binding = props
@@ -12,29 +13,21 @@ local function Icon(props)
 	local ref = _binding.ref
 	local _binding_1 = useIconStyles(props)
 	local container = _binding_1.container
-	local _attributes = {}
+	local _attributes = {
+		tag = "imagelabel",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Icon"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in container 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.hostRef = ref
+	_attributes.base = container
+	_attributes.className = className
+	_attributes.sx = sx
 	_attributes.Image = tostring(icon)
 	_attributes.ImageColor3 = tint or container.ImageColor3
-	return React.createElement("imagelabel", _attributes)
+	return React.createElement(SxHost, _attributes)
 end
 local default = Icon
 return {