local p=require(script.Parent.Parent.Parent.DevPackages.React)local b=require(script.Parent.Parent.Parent.DevPackages.ReactRoblox)local V=require(script.Parent.Parent.Parent.DevPackages.Aether)local i=require(script.Parent.Parent.Parent.DevPackages.AetherReact)local X=require(script.Parent.Chrome)local g=p.createElement local function J()local p=i.useFloating({placement="\098\111\116\116\111\109";middleware={V.offset(5);V.flip()};whileElementsMounted=V.autoUpdate})return g(X,{title="\070\108\105\112",description="\067\104\097\110\103\101\115 \116\104\101 \112\108\097\099\101\109\101\110\116 \111\102 \116\104\101 \101\108\101\109\101\110\116 \116\111 \107\101\101\112 \105\116 \105\110 \118\105\101\119";goal="\083\099\114\111\108\108 \116\104\101 \099\111\110\116\097\105\110\101\114"},{ScrollContent=g("\083\099\114\111\108\108\105\110\103\070\114\097\109\101",{Size=UDim2.fromScale(1,1);CanvasSize=UDim2.fromOffset(0,812);CanvasPosition=Vector2.new(0,203.0),ScrollBarImageColor3=Color3.new(0,0,0),BackgroundTransparency=1;BorderSizePixel=0},{Reference=g("\084\101\120\116\076\097\098\101\108",{AnchorPoint=Vector2.new(.5,.5),Position=UDim2.fromScale(.5,.5),Size=UDim2.fromOffset(96,96);Text="\082\101\102\101\114\101\110\099\101",TextSize=16;TextColor3=Color3.new(),FontFace=Font.fromEnum(Enum.Font.GothamBold);BackgroundColor3=Color3.fromHex("\035\054\098\055\050\056\048"),BorderSizePixel=0,ref=p.refs.setReference});Target=g("\084\101\120\116\076\097\098\101\108",{Position=UDim2.fromOffset(p.x,p.y),AutomaticSize=Enum.AutomaticSize.XY;Text="\080\111\112\111\118\101\114",TextSize=16,TextColor3=Color3.fromHex("\035\102\102\102\102\102\102");FontFace=Font.fromEnum(Enum.Font.GothamBold);BackgroundColor3=Color3.fromHex("\035\101\099\052\056\057\057");BorderSizePixel=0,ref=p.refs.setTarget},{UIPadding=g("\085\073\080\097\100\100\105\110\103",{PaddingLeft=UDim.new(0,4);PaddingRight=UDim.new(0,4);PaddingTop=UDim.new(0,4);PaddingBottom=UDim.new(0,4)})})})})end return{react=p,reactRoblox=b;story=function()return g(J)end}
local React = require(script.Parent.Parent.Parent.DevPackages.React)
local ReactRoblox = require(script.Parent.Parent.Parent.DevPackages.ReactRoblox)
local Aether = require(script.Parent.Parent.Parent.DevPackages.Aether)
local AetherReact = require(script.Parent.Parent.Parent.DevPackages.AetherReact)

local Chrome = require(script.Parent.Chrome)

local e = React.createElement

local function Demo()
	local floating = AetherReact.useFloating({
		placement = "bottom",
		middleware = {
			Aether.offset(5),
			Aether.flip(),
		},
		whileElementsMounted = Aether.autoUpdate,
	})

	return e(Chrome, {
		title = "Flip",
		description = "Changes the placement of the element to keep it in view",
		goal = "Scroll the container",
	}, {
		ScrollContent = e("ScrollingFrame", {
			Size = UDim2.fromScale(1, 1),
			CanvasSize = UDim2.fromOffset(0, 812),
			CanvasPosition = Vector2.new(0, 812 / 4),
			ScrollBarImageColor3 = Color3.new(0, 0, 0),
			BackgroundTransparency = 1,
			BorderSizePixel = 0,
		}, {
			Reference = e("TextLabel", {
				AnchorPoint = Vector2.new(0.5, 0.5),
				Position = UDim2.fromScale(0.5, 0.5),
				Size = UDim2.fromOffset(96, 96),
				Text = "Reference",
				TextSize = 16,
				TextColor3 = Color3.new(),
				FontFace = Font.fromEnum(Enum.Font.GothamBold),
				BackgroundColor3 = Color3.fromHex("#6b7280"),
				BorderSizePixel = 0,
				ref = floating.refs.setReference,
			}),

			Target = e("TextLabel", {
				Position = UDim2.fromOffset(floating.x, floating.y),
				AutomaticSize = Enum.AutomaticSize.XY,
				Text = "Popover",
				TextSize = 16,
				TextColor3 = Color3.fromHex("#ffffff"),
				FontFace = Font.fromEnum(Enum.Font.GothamBold),
				BackgroundColor3 = Color3.fromHex("#ec4899"),
				BorderSizePixel = 0,
				ref = floating.refs.setTarget,
			}, {
				UIPadding = e("UIPadding", {
					PaddingLeft = UDim.new(0, 4),
					PaddingRight = UDim.new(0, 4),
					PaddingTop = UDim.new(0, 4),
					PaddingBottom = UDim.new(0, 4),
				}),
			}),
		}),
	})
end

return {
	react = React,
	reactRoblox = ReactRoblox,
	story = function()
		return e(Demo)
	end,
}
