local I=script.Parent.Parent.Parent.Parent.Parent local p=require(I.LuauPolyfill)local l=p.Object local t={Color3.new(.078,.09,.102);Color3.new(.667,.722,.761);Color3.new(.902,.925,.941);Color3.new(1,.678,.122);Color3.new(.957,.365,.133);Color3.new(.878,.141,.369)}local o=Color3.new(1,0,1)local b=UDim2.new(0,6,0,6)local q=UDim2.new(0,4,0,4)return function(I,p)local Y=I.Component:extend("\066\111\120")function Y.render(p)local Y,S,X,W,v,w=p.props.children,p.props.name,p.props.color,p.props.layout,p.props.automaticSize,p.props.usePadding local P if W=="\114\111\119"then P=Enum.FillDirection.Horizontal else P=Enum.FillDirection.Vertical end local A,N=nil,nil if v then A=Enum.AutomaticSize.XY else N=b end local r={}if w then local p=I.createElement("\085\073\080\097\100\100\105\110\103",{PaddingBottom=UDim.new(q.Y.Scale,q.Y.Offset);PaddingLeft=UDim.new(q.X.Scale,q.X.Offset),PaddingRight=UDim.new(q.X.Scale,q.X.Offset),PaddingTop=UDim.new(q.Y.Scale,q.Y.Offset)})r.padding=p local l=I.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{Padding=UDim.new(0,0);FillDirection=P,VerticalAlignment=0,HorizontalAlignment=0})r.listLayout=l end local x local c=(X or 0)+1 if c>0 then x=t[c]else x=o end return I.createElement("\070\114\097\109\101",{Name=S or"\066\111\120",AutomaticSize=A,BackgroundColor3=x,BorderSizePixel=0,Size=N},l.assign({},Y,r))end return Y end
local rootWorkspace = script.Parent.Parent.Parent.Parent.Parent

local LuauPolyfill = require(rootWorkspace.LuauPolyfill)
local Object = LuauPolyfill.Object

local COLORS = {
	Color3.new(0.078, 0.09, 0.102),
	Color3.new(0.667, 0.722, 0.761),
	Color3.new(0.902, 0.925, 0.941),
	Color3.new(1, 0.678, 0.122),
	Color3.new(0.957, 0.365, 0.133),
	Color3.new(0.878, 0.141, 0.369),
}

local INVALID_COLOR = Color3.new(1, 0, 1)

local BASE_SIZE = UDim2.new(0, 6, 0, 6)
local BASE_PADDING = UDim2.new(0, 4, 0, 4)

return function(Roact, ReactRoblox)
	local Box = Roact.Component:extend("Box")

	function Box:render()
		local children, name, color, layout, automaticSize, usePadding =
			self.props.children,
			self.props.name,
			self.props.color,
			self.props.layout,
			self.props.automaticSize,
			self.props.usePadding

		local fillDirection
		if layout == "row" then
			fillDirection = Enum.FillDirection.Horizontal
		else
			fillDirection = Enum.FillDirection.Vertical
		end

		local frameAutomaticSize, size = nil, nil
		if automaticSize then
			frameAutomaticSize = Enum.AutomaticSize.XY
		else
			size = BASE_SIZE
		end

		local siblings = {}

		if usePadding then
			local padding = Roact.createElement("UIPadding", {
				PaddingBottom = UDim.new(BASE_PADDING.Y.Scale, BASE_PADDING.Y.Offset),
				PaddingLeft = UDim.new(BASE_PADDING.X.Scale, BASE_PADDING.X.Offset),
				PaddingRight = UDim.new(BASE_PADDING.X.Scale, BASE_PADDING.X.Offset),
				PaddingTop = UDim.new(BASE_PADDING.Y.Scale, BASE_PADDING.Y.Offset),
			})
			siblings.padding = padding

			local listLayout = Roact.createElement("UIListLayout", {
				Padding = UDim.new(0, 0),
				FillDirection = fillDirection,
				VerticalAlignment = 0,
				HorizontalAlignment = 0,
			})
			siblings.listLayout = listLayout
		end

		local backgroundColor
		local colorIndex = (color or 0) + 1
		if colorIndex > 0 then
			backgroundColor = COLORS[colorIndex]
		else
			backgroundColor = INVALID_COLOR
		end

		return Roact.createElement("Frame", {
			Name = name or "Box",
			AutomaticSize = frameAutomaticSize,
			BackgroundColor3 = backgroundColor,
			BorderSizePixel = 0,
			Size = size,
		}, Object.assign({}, children, siblings))
	end

	return Box
end
