@rbxts/uiblox 0.1.11 → 0.1.13

package/README.md

@@ -103,7 +103,7 @@ class AppLayout extends Component {
 	render() {
 		return (
 			<ThemeProvider theme={DarkTheme}>
-				<frame Size={new UDim2(1, 0, 1, 0)} BackgroundTransparency={1}>
+				<frame key={"AppLayout"} Size={new UDim2(1, 0, 1, 0)} BackgroundTransparency={1}>
 					<MyComponent />
 				</frame>
 			</ThemeProvider>
@@ -124,8 +124,7 @@ then you can omit props without a type warning (i.e. `makeStyles(theme => {})`
 instead of `makeStyles<MyComponentProps>((theme, props) => {})`).
 
 ```javascript
-import Roact from "@rbxts/roact";
-import { useState, markPureComponent } from "@rbxts/roact-hooked";
+import React, { useState } from "@rbxts/react";
 import useMyComponentStyles from "./MyComponent.styles";
 import { Button } from "@rbxts/uiblox";
 
@@ -141,7 +140,7 @@ function MyComponent(props: MyComponentProps) {
   const { root, button } = useMyComponentStyles(props);
 
   return (
-    <frame {...root}>
+    <frame key="MyComponent" {...root}>
       <Button
         variant="outlined"
         text={title}

package/out/theme/components/ThemeProducer.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
+local createProducer = TS.import(script, TS.getModule(script, "@rbxts", "reflex").src).createProducer
+local themeProducer = createProducer(DefaultTheme, {
+	setTheme = function(_state, theme)
+		return theme
+	end,
+})
+return {
+	themeProducer = themeProducer,
+}

package/out/theme/components/ThemeProvider.luau

@@ -1,21 +1,22 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
-local StoreProvider = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src).StoreProvider
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local themeStore = TS.import(script, script.Parent, "ThemeStore").themeStore
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local StrictMode = _react.StrictMode
 local ThemeWrapper = TS.import(script, script.Parent, "ThemeWrapper").default
+local ReflexProvider = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).ReflexProvider
+local themeProducer = TS.import(script, script.Parent, "ThemeProducer").themeProducer
 local function ThemeProvider(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding.children
-	return Roact.jsx(StoreProvider, {
-		store = themeStore,
-	}, Roact.jsx(ThemeWrapper, {
+	return React.createElement(StrictMode, nil, React.createElement(ReflexProvider, {
+		producer = themeProducer,
+	}, React.createElement(ThemeWrapper, {
 		theme = theme,
-	}, children))
+	}, children)))
 end
-local default = markPureComponent(ThemeProvider)
+local default = ThemeProvider
 return {
 	default = default,
 }

package/out/theme/components/ThemeWrapper.luau

@@ -1,37 +1,32 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useEffect = _roact_hooked.useEffect
-local useRef = _roact_hooked.useRef
-local _roact_rodux_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src)
-local useDispatch = _roact_rodux_hooked.useDispatch
-local useSelector = _roact_rodux_hooked.useSelector
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local selectTheme = TS.import(script, script.Parent, "ThemeStore").selectTheme
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
+local useProducer = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).useProducer
+local themeProducer = TS.import(script, script.Parent, "ThemeProducer").themeProducer
 local function ThemeWrapper(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding.children
-	local dispatch = useDispatch()
+	local _binding_1 = useProducer()
+	local setTheme = _binding_1.setTheme
 	local ref = useRef()
-	local currentTheme = useSelector(selectTheme)
-	-- When theme changes
+	-- When theme prop changes
 	useEffect(function()
-		dispatch({
-			type = "set",
-			newTheme = theme or DefaultTheme,
-		})
+		setTheme(theme or DefaultTheme)
 	end, { theme })
-	return Roact.jsx("frame", {
+	return React.createElement("frame", {
+		key = `ThemeWrapper-{themeProducer:getState().type}`,
 		BackgroundTransparency = 1,
 		Size = UDim2.new(1, 0, 1, 0),
 		ZIndex = 500000,
-		Ref = ref,
-	}, currentTheme and children)
+		ref = ref,
+	}, children)
 end
-local default = markPureComponent(ThemeWrapper)
+local default = ThemeWrapper
 return {
 	default = default,
 }

package/out/theme/components/init.luau

@@ -5,6 +5,4 @@ exports.ThemeProvider = TS.import(script, script, "ThemeProvider").default
 for _k, _v in TS.import(script, script, "ThemeProvider") or {} do
 	exports[_k] = _v
 end
-exports.themeReducer = TS.import(script, script, "ThemeStore").themeReducer
-exports.themeStore = TS.import(script, script, "ThemeStore").themeStore
 return exports

package/out/theme/init.luau

@@ -2,7 +2,6 @@
 local TS = _G[script]
 local exports = {}
 exports.ThemeProvider = TS.import(script, script, "components").ThemeProvider
-exports.themeStore = TS.import(script, script, "components").themeStore
 for _k, _v in TS.import(script, script, "components") or {} do
 	exports[_k] = _v
 end

package/out/theme/styles/utilities/makeStyles.luau

@@ -1,11 +1,11 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local DefaultTheme = TS.import(script, script.Parent.Parent.Parent, "themes").default
-local themeStore = TS.import(script, script.Parent.Parent.Parent, "components", "ThemeStore").themeStore
+local themeProducer = TS.import(script, script.Parent.Parent.Parent, "components", "ThemeProducer").themeProducer
 local makeStyles = function(f)
 	return function(props)
 		local _exitType, _returns = TS.try(function()
-			local theme = themeStore:getState().theme
+			local theme = themeProducer:getState()
 			local _fn = f
 			local _exp = theme or DefaultTheme
 			local _condition = props

package/out/ui/packages/button/components/Button.luau

@@ -1,9 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useState = _roact_hooked.useState
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
 local function Button(props)
 	local _binding = props
@@ -47,8 +46,12 @@ local function Button(props)
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
 	local hovering, setHovering = useState(false)
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Button",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	for _k, _v in font do
 		_attributes[_k] = _v
 	end
@@ -134,17 +137,17 @@ local function Button(props)
 	if _condition then
 		local _attributes_1 = table.clone(stroke)
 		setmetatable(_attributes_1, nil)
-		_condition = Roact.jsx("uistroke", _attributes_1)
+		_condition = React.createElement("uistroke", _attributes_1)
 	end
 	local _condition_1 = rounded
 	if _condition_1 then
 		local _attributes_1 = table.clone(corner)
 		setmetatable(_attributes_1, nil)
-		_condition_1 = Roact.jsx("uicorner", _attributes_1)
+		_condition_1 = React.createElement("uicorner", _attributes_1)
 	end
-	return Roact.jsx("textbutton", _attributes, _condition, _condition_1, children)
+	return React.createElement("textbutton", _attributes, _condition, _condition_1, children)
 end
-local default = markPureComponent(Button)
+local default = Button
 return {
 	default = default,
 }

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

@@ -1,21 +1,25 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
 local function Divider(props)
 	local _binding = props
 	local className = _binding.className
 	local _binding_1 = useDividerStyles(props)
 	local root = _binding_1.root
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Divider",
+	}
+	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
-	return Roact.jsx("frame", _attributes)
+	return React.createElement("frame", _attributes)
 end
 local default = Divider
 return {

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

@@ -1,7 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
 local function Icon(props)
 	local _binding = props
@@ -10,8 +9,12 @@ local function Icon(props)
 	local className = _binding.className
 	local _binding_1 = useIconStyles(props)
 	local container = _binding_1.container
-	local _attributes = table.clone(container)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Icon",
+	}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
@@ -19,9 +22,9 @@ local function Icon(props)
 	end
 	_attributes.Image = tostring(icon)
 	_attributes.ImageColor3 = tint or container.ImageColor3
-	return Roact.jsx("imagelabel", _attributes)
+	return React.createElement("imagelabel", _attributes)
 end
-local default = markPureComponent(Icon)
+local default = Icon
 return {
 	default = default,
 }

package/out/ui/packages/iconButton/components/IconButton.luau

@@ -1,9 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useState = _roact_hooked.useState
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local useIconButtonStyles = TS.import(script, script.Parent, "IconButton.styles").default
 local function IconButton(props)
 	local _binding = props
@@ -15,8 +14,12 @@ local function IconButton(props)
 	local _binding_1 = useIconButtonStyles(props)
 	local container = _binding_1.container
 	local hovering, setHovering = useState(false)
-	local _attributes = table.clone(container)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "IconButton",
+	}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
@@ -38,9 +41,9 @@ local function IconButton(props)
 			setHovering(false)
 		end,
 	}
-	return Roact.jsx("imagebutton", _attributes)
+	return React.createElement("imagebutton", _attributes)
 end
-local default = markPureComponent(IconButton)
+local default = IconButton
 return {
 	default = default,
 }

package/out/ui/packages/input/components/Input.luau

@@ -1,9 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local useState = _roact_hooked.useState
-local markPureComponent = _roact_hooked.markPureComponent
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local classNames = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").classNames
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
@@ -50,17 +49,29 @@ local function Input(props)
 		_condition = ""
 	end
 	local input, setInput = useState(_condition)
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Input",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(margin)
-	setmetatable(_attributes_1, nil)
-	local _attributes_2 = table.clone(font)
-	setmetatable(_attributes_2, nil)
+	local _attributes_1 = {
+		key = "Margin",
+	}
+	for _k, _v in margin do
+		_attributes_1[_k] = _v
+	end
+	local _attributes_2 = {
+		key = "Field",
+	}
+	for _k, _v in font do
+		_attributes_2[_k] = _v
+	end
 	for _k, _v in box do
 		_attributes_2[_k] = _v
 	end
@@ -94,16 +105,16 @@ local function Input(props)
 	if _condition_1 then
 		local _attributes_3 = table.clone(stroke)
 		setmetatable(_attributes_3, nil)
-		_condition_1 = Roact.jsx("uistroke", _attributes_3)
+		_condition_1 = React.createElement("uistroke", _attributes_3)
 	end
 	local _condition_2 = rounded
 	if _condition_2 then
 		local _attributes_3 = table.clone(corner)
 		setmetatable(_attributes_3, nil)
-		_condition_2 = Roact.jsx("uicorner", _attributes_3)
+		_condition_2 = React.createElement("uicorner", _attributes_3)
 	end
-	local _exp = Roact.jsx("textbox", _attributes_2, _condition_1, _condition_2)
-	local _exp_1 = Roact.jsx(Divider, {
+	local _exp = React.createElement("textbox", _attributes_2, _condition_1, _condition_2)
+	local _exp_1 = React.createElement(Divider, {
 		padding = 0,
 		orientation = Orientations.Horizontal,
 		className = classNames({
@@ -113,8 +124,12 @@ local function Input(props)
 	})
 	local _condition_3 = helperText ~= nil
 	if _condition_3 then
-		local _attributes_3 = table.clone(font)
-		setmetatable(_attributes_3, nil)
+		local _attributes_3 = {
+			key = "HelperText",
+		}
+		for _k, _v in font do
+			_attributes_3[_k] = _v
+		end
 		for _k, _v in helper do
 			_attributes_3[_k] = _v
 		end
@@ -124,11 +139,11 @@ local function Input(props)
 			_attributes_3[_k] = _v
 		end
 		_attributes_3.Text = helperText
-		_condition_3 = (Roact.jsx("textlabel", _attributes_3))
+		_condition_3 = (React.createElement("textlabel", _attributes_3))
 	end
-	return Roact.jsx("frame", _attributes, Roact.jsx("frame", _attributes_1, _exp, _exp_1, _condition_3))
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, _condition_3))
 end
-local default = markPureComponent(Input)
+local default = Input
 return {
 	default = default,
 }

package/out/ui/packages/progressBar/components/ProgressBar.luau

@@ -1,7 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useProgressBarStyles = TS.import(script, script.Parent, "ProgressBar.styles").default
 local function ProgressBar(_param)
 	local progress = _param.progress
@@ -13,34 +12,54 @@ local function ProgressBar(_param)
 	local inner = _binding.inner
 	local fill = _binding.fill
 	local corner = _binding.corner
-	local _attributes = table.clone(container)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "ProgressBar",
+	}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(outer)
-	setmetatable(_attributes_1, nil)
-	local _attributes_2 = table.clone(corner)
-	setmetatable(_attributes_2, nil)
-	local _exp = Roact.jsx("uicorner", _attributes_2)
+	local _attributes_1 = {
+		key = "Bar",
+	}
+	for _k, _v in outer do
+		_attributes_1[_k] = _v
+	end
+	local _attributes_2 = {
+		key = "Corner",
+	}
+	for _k, _v in corner do
+		_attributes_2[_k] = _v
+	end
+	local _exp = React.createElement("uicorner", _attributes_2)
 	local _attributes_3 = table.clone(stroke)
 	setmetatable(_attributes_3, nil)
-	local _exp_1 = Roact.jsx("uistroke", _attributes_3)
+	local _exp_1 = React.createElement("uistroke", _attributes_3)
 	local _attributes_4 = table.clone(inner)
 	setmetatable(_attributes_4, nil)
-	local _attributes_5 = table.clone(corner)
-	setmetatable(_attributes_5, nil)
-	local _exp_2 = Roact.jsx("uicorner", _attributes_5)
+	local _attributes_5 = {
+		key = "Corner",
+	}
+	for _k, _v in corner do
+		_attributes_5[_k] = _v
+	end
+	local _exp_2 = React.createElement("uicorner", _attributes_5)
 	local _attributes_6 = table.clone(fill)
 	setmetatable(_attributes_6, nil)
 	_attributes_6.Size = UDim2.new(progress / 100, 0, 1, 0)
-	local _attributes_7 = table.clone(corner)
-	setmetatable(_attributes_7, nil)
-	return Roact.jsx("frame", _attributes, Roact.jsx("frame", _attributes_1, _exp, _exp_1, Roact.jsx("frame", _attributes_4, _exp_2, Roact.jsx("frame", _attributes_6, Roact.jsx("uicorner", _attributes_7)))))
+	local _attributes_7 = {
+		key = "Corner",
+	}
+	for _k, _v in corner do
+		_attributes_7[_k] = _v
+	end
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, React.createElement("frame", _attributes_4, _exp_2, React.createElement("frame", _attributes_6, React.createElement("uicorner", _attributes_7)))))
 end
-local default = markPureComponent(ProgressBar)
+local default = ProgressBar
 return {
 	default = default,
 }

package/out/ui/packages/shadow/components/Shadow.luau

@@ -1,10 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useEffect = _roact_hooked.useEffect
-local useState = _roact_hooked.useState
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useState = _react.useState
 local useShadowStyles = TS.import(script, script.Parent, "Shadow.styles").default
 local function Shadow()
 	local _binding = useShadowStyles()
@@ -42,8 +41,12 @@ local function Shadow()
 		setZIndex(_condition_1 - 1)
 		parent.ClipsDescendants = false
 	end, { parent })
-	local _attributes = table.clone(container)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Shadow",
+	}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
 	_attributes.ZIndex = zIndex
 	_attributes.Event = {
 		AncestryChanged = function(rbx, parent)
@@ -52,11 +55,12 @@ local function Shadow()
 			end
 		end,
 	}
-	return Roact.jsx("frame", _attributes, cornerRadius ~= nil and Roact.jsx("uicorner", {
+	return React.createElement("frame", _attributes, cornerRadius ~= nil and React.createElement("uicorner", {
+		key = "Corner",
 		CornerRadius = cornerRadius,
 	}))
 end
-local default = markPureComponent(Shadow)
+local default = Shadow
 return {
 	default = default,
 }

package/out/ui/packages/sidebar/components/Sidebar.luau

@@ -1,6 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useSidebarStyles = TS.import(script, script.Parent, "Sidebar.styles").default
 local function Sidebar(props)
 	local _binding = props
@@ -9,16 +9,24 @@ local function Sidebar(props)
 	local _binding_1 = useSidebarStyles(props)
 	local root = _binding_1.root
 	local container = _binding_1.container
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Sidebar",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(container)
-	setmetatable(_attributes_1, nil)
-	return Roact.jsx("frame", _attributes, Roact.jsx("frame", _attributes_1, children))
+	local _attributes_1 = {
+		key = "Container",
+	}
+	for _k, _v in container do
+		_attributes_1[_k] = _v
+	end
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, children))
 end
 local default = Sidebar
 return {

package/out/ui/packages/toast/components/Toast.luau

@@ -1,11 +1,10 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local BoatTween = TS.import(script, TS.getModule(script, "@rbxts", "boat-tween").src).BoatTween
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useEffect = _roact_hooked.useEffect
-local useRef = _roact_hooked.useRef
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local DefaultTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").DefaultTheme
 local Directions = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Directions
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
@@ -27,7 +26,7 @@ local function Toast(props)
 	local inActivePosition = _binding_1.inActivePosition
 	local frameRef = useRef()
 	local tween = function(direction)
-		local frame = frameRef:getValue()
+		local frame = frameRef.current
 		if not frame then
 			return nil
 		end
@@ -55,21 +54,31 @@ local function Toast(props)
 		end
 	end, {})
 	local _attributes = {
-		Ref = frameRef,
+		key = "Toast",
+		ref = frameRef,
 	}
 	for _k, _v in container do
 		_attributes[_k] = _v
 	end
-	local _exp = Roact.jsx("uicorner", {
+	local _exp = React.createElement("uicorner", {
+		key = "Corner",
 		CornerRadius = UDim.new(0, DefaultTheme.shape.borderRadius),
 	})
-	local _exp_1 = Roact.jsx(Shadow)
-	local _attributes_1 = table.clone(label)
-	setmetatable(_attributes_1, nil)
+	local _exp_1 = React.createElement(Shadow)
+	local _attributes_1 = {
+		key = "Label",
+	}
+	for _k, _v in label do
+		_attributes_1[_k] = _v
+	end
 	_attributes_1.Text = text
-	local _exp_2 = Roact.jsx("textlabel", _attributes_1)
-	local _attributes_2 = table.clone(close)
-	setmetatable(_attributes_2, nil)
+	local _exp_2 = React.createElement("textlabel", _attributes_1)
+	local _attributes_2 = {
+		key = "Close",
+	}
+	for _k, _v in close do
+		_attributes_2[_k] = _v
+	end
 	_attributes_2.Event = {
 		MouseButton1Click = function()
 			tween(Directions.Out)
@@ -78,9 +87,9 @@ local function Toast(props)
 			end
 		end,
 	}
-	return Roact.jsx("frame", _attributes, _exp, _exp_1, _exp_2, Roact.jsx("imagebutton", _attributes_2))
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, React.createElement("imagebutton", _attributes_2))
 end
-local default = markPureComponent(Toast)
+local default = Toast
 return {
 	default = default,
 }