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

package/out/ui/packages/chip/components/Chip.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 controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local useChipStyles = componentStyles("Chip", function(theme, _param)
 	local selected = _param.selected
@@ -12,32 +13,76 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 	if disabled == nil then
 		disabled = false
 	end
+	local deletable = _param.deletable
+	if deletable == nil then
+		deletable = false
+	end
+	local size = _param.size
+	local variant = _param.variant
+	if variant == nil then
+		variant = "filled"
+	end
+	local color = _param.color
+	if color == nil then
+		color = "default"
+	end
+	local metrics = controlMetrics(theme.density, size)
+	local padY = if size == "small" then 0.25 elseif size == "large" then 0.75 else 0.5
+	local padX = if size == "small" then 1 elseif size == "large" then 2 else 1.5
+	local deletePx = metrics.icon
+	local primary = color == "primary"
+	local ink = if disabled then theme.palette.text.disabled elseif primary then if variant == "outlined" then theme.palette.primary.main else theme.palette.primary.on else theme.palette.text.primary
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
-			BackgroundColor3 = if selected then theme.palette.action.selected else theme.palette.surface.input,
+			BackgroundColor3 = if primary and variant ~= "outlined" then theme.palette.primary.main elseif selected then theme.palette.action.selected else theme.palette.surface.input,
+			BackgroundTransparency = if variant == "outlined" and selected ~= true then 1 else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Active = not disabled,
 			Selectable = not disabled,
-			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
+			TextColor3 = ink,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = metrics.font,
 		},
 		padding = {
-			PaddingTop = UDim.new(0, theme.padding.calc(0.5)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(0.5)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingTop = UDim.new(0, theme.padding.calc(padY)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(padY)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(padX)),
+			PaddingRight = UDim.new(0, theme.padding.calc(if deletable then 0.5 else padX)),
 		},
 		corner = {
 			CornerRadius = UDim.new(theme.shape.pillScale, 0),
 		},
 		stroke = {
-			Color = theme.palette.border,
+			Color = if primary then theme.palette.primary.main else theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-			Transparency = if selected then 1 else 0,
+			Transparency = if variant == "outlined" then (if disabled then 0.5 else 0) elseif primary or selected then 1 else 0,
+		},
+		row = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
+		},
+		label = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = ink,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = metrics.font,
+			LayoutOrder = 1,
+		},
+		delete = {
+			Size = UDim2.fromOffset(deletePx, deletePx),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			ImageColor3 = if disabled then theme.palette.text.disabled elseif primary and variant ~= "outlined" then theme.palette.primary.on else theme.palette.text.secondary,
+			LayoutOrder = 2,
 		},
 	})
 end)

package/out/ui/packages/circularProgress/components/CircularProgress.luau

@@ -6,10 +6,12 @@ local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
 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 _motion = TS.import(script, script.Parent.Parent.Parent, "motion")
 local arcKeys = _motion.arcKeys
 local loopProperty = _motion.loopProperty
 local progressSpin = _motion.progressSpin
+local spinArcKeys = _motion.spinArcKeys
 local function CircularProgress(props)
 	local _binding = props
 	local value = _binding.value
@@ -38,7 +40,17 @@ local function CircularProgress(props)
 	local shown = if indeterminate then (if motion == "spin" then nil else 0.25) else value
 	local _result
 	if shown == nil then
-		_result = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.35, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(0.65, 1), NumberSequenceKeypoint.new(1, 1) })
+		local _exp = spinArcKeys()
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#_exp)
+		local _callback = function(key)
+			return NumberSequenceKeypoint.new(key.time, key.transparency)
+		end
+		for _k, _v in _exp do
+			_newValue[_k] = _callback(_v, _k - 1, _exp)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result = NumberSequence.new(_newValue)
 	else
 		local _exp = arcKeys(shown)
 		-- ▼ ReadonlyArray.map ▼
@@ -66,32 +78,31 @@ local function CircularProgress(props)
 		end
 		gradient.Rotation = -90
 	end, { motion })
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "CircularProgress"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	_attributes.Size = UDim2.new(0, size, 0, size)
-	_attributes.BackgroundTransparency = 1
-	_attributes.BorderSizePixel = 0
-	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
-	return React.createElement("frame", _attributes, React.createElement("uicorner", {
+	_attributes.hostRef = ref
+	_attributes.base = {
+		Size = UDim2.new(0, size, 0, size),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
+	return React.createElement(SxHost, _attributes, React.createElement("uicorner", {
 		CornerRadius = UDim.new(1, 0),
 	}), React.createElement("uistroke", {
 		Color = tint,
 		Thickness = thickness,
-		Transparency = if disabled then 0.75 else 0.7,
+		Transparency = if disabled then 0.85 else 0.82,
 	}), React.createElement("uistroke", {
 		Color = tint,
 		Thickness = thickness,

package/out/ui/packages/colorPicker/components/ColorPicker.luau

@@ -7,6 +7,7 @@ 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 canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
@@ -348,7 +349,7 @@ local function ColorPanel(props)
 			_newValue[_k] = _callback(_v, _k - 1, recents)
 		end
 		-- ▲ ReadonlyArray.map ▲
-		_condition = (React.createElement("frame", _attributes_20, _exp_14, _newValue))
+		_condition = (React.createElement("frame", _attributes_20, _exp_14, React.createElement(React.Fragment, nil, _newValue)))
 	end
 	return React.createElement("frame", _attributes, _exp, _exp_4, _exp_9, _exp_12, _exp_13, _condition)
 end
@@ -391,26 +392,21 @@ local function ColorPicker(props)
 			return connection:Disconnect()
 		end
 	end, { shown, value })
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "ColorPicker"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.field 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.field
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _attributes_1 = table.clone(styles.rowLayout)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -488,15 +484,15 @@ local function ColorPicker(props)
 		local _attributes_7 = table.clone(styles.corner)
 		setmetatable(_attributes_7, nil)
 		local _exp_4 = React.createElement("uicorner", _attributes_7)
-		local _attributes_8 = table.clone(styles.swatchStroke)
+		local _attributes_8 = table.clone(styles.shellStroke)
 		setmetatable(_attributes_8, nil)
 		local _exp_5 = React.createElement("uistroke", _attributes_8)
 		local _attributes_9 = table.clone(styles.shellPad)
 		setmetatable(_attributes_9, nil)
 		_condition_1 = (React.createElement(Popup, {
 			anchor = anchor,
-			preferredWidth = theme.spacing.calc(18),
-			preferredHeight = theme.spacing.calc(20),
+			preferredWidth = theme.spacing.calc(20),
+			preferredHeight = theme.spacing.calc(22),
 			onDismiss = close,
 		}, React.createElement("frame", _attributes_6, _exp_4, _exp_5, React.createElement("uipadding", _attributes_9), React.createElement(ColorPanel, {
 			value = value,
@@ -504,7 +500,7 @@ local function ColorPicker(props)
 			onChange = onChange,
 		}))))
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_2, _exp_3, _condition_1)
+	return React.createElement(SxHost, _attributes, _exp, _exp_2, _exp_3, _condition_1)
 end
 local default = ColorPicker
 return {

package/out/ui/packages/colorPicker/components/ColorPicker.styles.luau

@@ -15,22 +15,22 @@ local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, theme.padding.calc(0.75)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		row = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
 		rowLayout = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		swatch = {
-			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+			Size = UDim2.fromOffset(theme.spacing.calc(3), theme.spacing.calc(3)),
 			BorderSizePixel = 0,
 		},
 		swatchStroke = {
@@ -41,11 +41,11 @@ local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
 			CornerRadius = UDim.new(0, theme.padding.calc(0.5)),
 		},
 		hex = {
-			Size = UDim2.new(1, -theme.spacing.calc(3), 1, 0),
+			Size = UDim2.new(1, -theme.spacing.calc(4), 1, 0),
 			BackgroundTransparency = 1,
 		},
 		plane = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(8)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(10)),
 			BorderSizePixel = 0,
 			Active = true,
 		},
@@ -55,7 +55,7 @@ local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
 			BorderSizePixel = 0,
 		},
 		cursor = {
-			Size = UDim2.fromOffset(theme.spacing.calc(1), theme.spacing.calc(1)),
+			Size = UDim2.fromOffset(theme.spacing.calc(1.25), theme.spacing.calc(1.25)),
 			AnchorPoint = Vector2.new(0.5, 0.5),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
@@ -65,45 +65,55 @@ local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
 			Thickness = 2,
 		},
 		hue = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.5)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.75)),
 			BorderSizePixel = 0,
 			Active = true,
 		},
 		hueKnob = {
-			Size = UDim2.fromOffset(theme.padding.calc(1), theme.spacing.calc(1.5)),
+			Size = UDim2.fromOffset(theme.padding.calc(1.25), theme.spacing.calc(1.75)),
 			AnchorPoint = Vector2.new(0.5, 0.5),
 			BackgroundColor3 = theme.palette.text.primary,
 			BorderSizePixel = 0,
 		},
+		sequenceBar = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
+			BorderSizePixel = 0,
+			Active = true,
+		},
+		stop = {
+			Size = UDim2.fromOffset(theme.spacing.calc(1.5), theme.spacing.calc(1.5)),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BorderSizePixel = 0,
+		},
 		channel = {
-			Size = UDim2.new(1 / 3, -theme.padding.calc(1), 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1 / 3, -theme.padding.calc(0.5), 0, theme.spacing.calc(3)),
 			BackgroundTransparency = 1,
 		},
 		label = {
-			Size = UDim2.new(0, theme.spacing.calc(1), 1, 0),
+			Size = UDim2.new(0, theme.spacing.calc(1.5), 1, 0),
 			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,
 		},
 		channelField = {
-			Size = UDim2.new(1, -theme.spacing.calc(1), 1, 0),
+			Size = UDim2.new(1, -theme.spacing.calc(1.5), 1, 0),
 			BackgroundTransparency = 1,
 		},
 		field = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
 		swatchButton = {
-			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+			Size = UDim2.fromOffset(theme.spacing.calc(3), theme.spacing.calc(3)),
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Text = "",
 		},
 		value = {
-			Size = UDim2.new(1, -theme.spacing.calc(3), 1, 0),
+			Size = UDim2.new(1, -theme.spacing.calc(4), 1, 0),
 			BackgroundTransparency = 1,
 		},
 		shell = {
@@ -117,23 +127,27 @@ local useColorPickerStyles = componentStyles("ColorPicker", function(theme)
 			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
 			PaddingRight = UDim.new(0, theme.padding.calc(1)),
 		},
+		shellStroke = {
+			Color = theme.palette.divider,
+			Thickness = 1,
+		},
 		recent = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.5)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
 			BackgroundTransparency = 1,
 		},
 		recentChip = {
-			Size = UDim2.fromOffset(theme.spacing.calc(1.5), theme.spacing.calc(1.5)),
+			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Text = "",
 		},
 		link = {
-			Size = UDim2.new(0, 0, 0, theme.spacing.calc(1.5)),
+			Size = UDim2.new(0, 0, 0, theme.spacing.calc(2)),
 			AutomaticSize = Enum.AutomaticSize.X,
 			BackgroundTransparency = 1,
 			AutoButtonColor = false,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
+			TextSize = theme.typography.fontSizes.button,
 			TextColor3 = theme.palette.text.secondary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},

package/out/ui/packages/colorPicker/components/ColorSequenceEditor.luau

@@ -4,6 +4,7 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useRef = _react.useRef
 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 ColorPicker = TS.import(script, script.Parent, "ColorPicker").default
 local useColorPickerStyles = TS.import(script, script.Parent, "ColorPicker.styles").default
@@ -43,26 +44,21 @@ local function ColorSequenceEditor(props)
 		end
 		return math.clamp((position.X - rbx.AbsolutePosition.X) / width, 0, 1)
 	end
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "ColorSequenceEditor"
 	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,
+	}
 	_attributes.Selectable = false
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
@@ -70,7 +66,7 @@ local function ColorSequenceEditor(props)
 	local _attributes_2 = {
 		key = "Bar",
 	}
-	for _k, _v in styles.hue do
+	for _k, _v in styles.sequenceBar do
 		_attributes_2[_k] = _v
 	end
 	_attributes_2.LayoutOrder = 1
@@ -124,24 +120,27 @@ local function ColorSequenceEditor(props)
 	local _attributes_3 = table.clone(styles.corner)
 	setmetatable(_attributes_3, nil)
 	local _exp_1 = React.createElement("uicorner", _attributes_3)
-	local _exp_2 = React.createElement("uigradient", {
+	local _attributes_4 = table.clone(styles.swatchStroke)
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("uistroke", _attributes_4)
+	local _exp_3 = React.createElement("uigradient", {
 		Color = value,
 	})
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#stops)
 	local _callback = function(stop, stopIndex)
-		local _attributes_4 = {
+		local _attributes_5 = {
 			key = `Stop-{stopIndex}`,
 		}
-		for _k, _v in styles.hueKnob do
-			_attributes_4[_k] = _v
+		for _k, _v in styles.stop do
+			_attributes_5[_k] = _v
 		end
-		_attributes_4.BackgroundColor3 = stop.color
-		_attributes_4.Position = UDim2.fromScale(stop.t, 0.5)
-		_attributes_4.ZIndex = if stopIndex == index then 2 else 1
-		local _attributes_5 = table.clone(styles.corner)
-		setmetatable(_attributes_5, nil)
-		return React.createElement("frame", _attributes_4, React.createElement("uicorner", _attributes_5), React.createElement("uistroke", {
+		_attributes_5.BackgroundColor3 = stop.color
+		_attributes_5.Position = UDim2.fromScale(stop.t, 0.5)
+		_attributes_5.ZIndex = if stopIndex == index then 2 else 1
+		return React.createElement("frame", _attributes_5, React.createElement("uicorner", {
+			CornerRadius = UDim.new(0, 2),
+		}), React.createElement("uistroke", {
 			Thickness = if stopIndex == index then 2 else 1,
 			Color = Color3.new(1, 1, 1),
 		}))
@@ -150,8 +149,8 @@ local function ColorSequenceEditor(props)
 		_newValue[_k] = _callback(_v, _k - 1, stops)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	local _exp_3 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _newValue)
-	local _exp_4 = React.createElement(ColorPicker, {
+	local _exp_4 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _exp_3, React.createElement(React.Fragment, nil, _newValue))
+	local _exp_5 = React.createElement(ColorPicker, {
 		key = "StopColor",
 		value = current.color,
 		disabled = disabled,
@@ -163,15 +162,15 @@ local function ColorSequenceEditor(props)
 	})
 	local _condition_1 = #stops > 2 and index > 0 and index < #stops - 1
 	if _condition_1 then
-		local _attributes_4 = {
+		local _attributes_5 = {
 			key = "Remove",
 		}
 		for _k, _v in styles.link do
-			_attributes_4[_k] = _v
+			_attributes_5[_k] = _v
 		end
-		_attributes_4.Text = "Remove stop"
-		_attributes_4.LayoutOrder = 3
-		_attributes_4.Event = {
+		_attributes_5.Text = "Remove stop"
+		_attributes_5.LayoutOrder = 3
+		_attributes_5.Event = {
 			Activated = function()
 				if not active then
 					return nil
@@ -180,9 +179,9 @@ local function ColorSequenceEditor(props)
 				setSelected(math.max(0, index - 1))
 			end,
 		}
-		_condition_1 = (React.createElement("textbutton", _attributes_4))
+		_condition_1 = (React.createElement("textbutton", _attributes_5))
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_3, _exp_4, _condition_1)
+	return React.createElement(SxHost, _attributes, _exp, _exp_4, _exp_5, _condition_1)
 end
 local default = ColorSequenceEditor
 return {