local N=Roact.PureComponent:extend(script.Name)function N.init(N)N.Maid=Maid.new()local j,C,f=(N.props.InitialColor or Color3.fromHSV(0,.5,1)):ToHSV()N.HSV,N._SetHSV=Roact.createBinding({H=j,S=C;V=f})end function N.didUpdate(j,N)if N.InitialColor~=j.props.InitialColor then local N,C,f=(j.props.InitialColor or Color3.fromHSV(0,.5,1)):ToHSV()j._SetHSV({H=N;S=C;V=f})end end function N.SetHSV(j,N)j._SetHSV(N)if j.props.SetPreviewColor then fastSpawn(function()j.props.SetPreviewColor(Color3.fromHSV(N.H,N.S,N.V))end)end end function N.Finish(N)if N.props.SetPreviewColor then fastSpawn(function()N.props.SetPreviewColor(nil)end)end if N.props.OnConfirm then local j=N.HSV:getValue()local C=Color3.fromHSV(j.H,j.S,j.V)fastSpawn(function()N.props.OnConfirm(C)end)end end function N.Cancel(N)if N.props.SetPreviewColor then fastSpawn(function()N.props.SetPreviewColor(nil)end)end if N.props.OnCancel then fastSpawn(function()N.props.OnCancel()end)end end function N.render(j)return new("\083\099\114\101\101\110\071\117\105",{DisplayOrder=1},{Dialog=new("\070\114\097\109\101",{Active=true;Draggable=true;ZIndex=0;AnchorPoint=Vector2.new(1,.5),Position=j.DefaultPosition or UDim2.new(1,-110,.5,0),BackgroundTransparency=1;Size=UDim2.fromOffset(240,0),[Roact.Change.Position]=function(j)N.DefaultPosition=j.Position end},{Layout=new("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Vertical;SortOrder=Enum.SortOrder.LayoutOrder;[Roact.Change.AbsoluteContentSize]=function(N)N.Parent.Size=UDim2.fromOffset(240,N.AbsoluteContentSize.Y)end});Picker=new("\070\114\097\109\101",{BackgroundTransparency=1;BorderSizePixel=0,Size=UDim2.new(1,0,0,0);LayoutOrder=0},{Layout=new("\085\073\076\105\115\116\076\097\121\111\117\116",{Padding=UDim.new(0,10);FillDirection=Enum.FillDirection.Horizontal;SortOrder=Enum.SortOrder.LayoutOrder,[Roact.Change.AbsoluteContentSize]=function(N)N.Parent.Size=UDim2.new(1,0,0,N.AbsoluteContentSize.Y)end});Color=new("\070\114\097\109\101",{BorderSizePixel=0;Size=UDim2.new(.25,0,1,0);BackgroundColor3=j.HSV:map(function(N)return Color3.fromHSV(N.H,N.S,N.V)end)},{Corners=new("\085\073\067\111\114\110\101\114",{CornerRadius=UDim.new(0,4)});AspectRatio=new("\085\073\065\115\112\101\099\116\082\097\116\105\111\067\111\110\115\116\114\097\105\110\116",{AspectRatio=1})});Sliders=new("\070\114\097\109\101",{Position=UDim2.new(.25,5,0,0);Size=UDim2.new(.75,0,0,0);BackgroundTransparency=1},{Layout=new("\085\073\076\105\115\116\076\097\121\111\117\116",{Padding=UDim.new(0,10);FillDirection=Enum.FillDirection.Vertical,HorizontalAlignment=Enum.HorizontalAlignment.Left,VerticalAlignment=Enum.VerticalAlignment.Top;SortOrder=Enum.SortOrder.LayoutOrder,[Roact.Change.AbsoluteContentSize]=function(N)N.Parent.Size=UDim2.new(.75,0,0,N.AbsoluteContentSize.Y)end});HueSlider=new(Slider,{Size=UDim2.new(1,0,0,10),BackgroundColor3=Color3.fromRGB(255,255,255);LayoutOrder=0;Value=j.HSV:map(function(N)return N.H end),OnValueChanged=function(N)local C=j.HSV:getValue()j:SetHSV({H=N,S=C.S;V=C.V})end},{Gradient=new("\085\073\071\114\097\100\105\101\110\116",{Color=j.HSV:map(function(N)return ColorSequence.new({ColorSequenceKeypoint.new(.0,Color3.fromHSV(.0,N.S,N.V)),ColorSequenceKeypoint.new(.16666666666667,Color3.fromHSV(.16666666666667,N.S,N.V)),ColorSequenceKeypoint.new(.33333333333333,Color3.fromHSV(.33333333333333,N.S,N.V)),ColorSequenceKeypoint.new(.5,Color3.fromHSV(.5,N.S,N.V)),ColorSequenceKeypoint.new(.66666666666667,Color3.fromHSV(.66666666666667,N.S,N.V)),ColorSequenceKeypoint.new(.83333333333333,Color3.fromHSV(.83333333333333,N.S,N.V));ColorSequenceKeypoint.new(1.0,Color3.fromHSV(1.0,N.S,N.V))})end)})});SaturationSlider=new(Slider,{Size=UDim2.new(1,0,0,10);BackgroundColor3=Color3.fromRGB(255,255,255);LayoutOrder=1;Value=j.HSV:map(function(N)return N.S end),OnValueChanged=function(N)local C=j.HSV:getValue()j:SetHSV({H=C.H;S=N,V=C.V})end},{Gradient=new("\085\073\071\114\097\100\105\101\110\116",{Color=j.HSV:map(function(N)return ColorSequence.new(Color3.fromHSV(N.H,0,N.V),Color3.fromHSV(N.H,1,N.V))end)})}),BrightnessSlider=new(Slider,{Size=UDim2.new(1,0,0,10),BackgroundColor3=Color3.fromRGB(255,255,255);LayoutOrder=2,Value=j.HSV:map(function(N)return N.V end),OnValueChanged=function(N)local C=j.HSV:getValue()j:SetHSV({H=C.H;S=C.S;V=N})end},{Gradient=new("\085\073\071\114\097\100\105\101\110\116",{Color=j.HSV:map(function(N)return ColorSequence.new(Color3.fromHSV(N.H,N.S,0),Color3.fromHSV(N.H,N.S,1))end)})})})}),Bottom=new("\070\114\097\109\101",{BackgroundTransparency=1,BorderSizePixel=0,Size=UDim2.new(1,0,0,34),LayoutOrder=1},{HSVLabel=new("\084\101\120\116\076\097\098\101\108",{BackgroundTransparency=1,Position=UDim2.new(0,0,0,7);Font=Enum.Font.GothamBlack,Text="\072\083\086\058 ",TextSize=11;TextColor3=Color3.fromRGB(255,255,255),TextStrokeTransparency=.95,[Roact.Change.TextBounds]=function(N)N.Size=UDim2.fromOffset(N.TextBounds.X,N.TextBounds.Y)end},{HSVInput=new("\084\101\120\116\066\111\120",{BackgroundTransparency=1,Position=UDim2.new(1,0,0,0),ClearTextOnFocus=false,Font=Enum.Font.Gotham,Text=j.HSV:map(function(N)local j=tostring(math.floor(N.H*360)).."\194\176"local C=tostring(math.floor(N.S*100)).."\037"local f=tostring(math.floor(N.V*100)).."\037"return j..("\044 "..(C..("\044 "..f)))end),TextSize=11;TextColor3=Color3.fromRGB(255,255,255);TextStrokeTransparency=.95,TextXAlignment=Enum.TextXAlignment.Left,[Roact.Change.TextBounds]=function(N)N.Size=UDim2.fromOffset(N.TextBounds.X,N.TextBounds.Y)end;[Roact.Event.FocusLost]=function(N)local C,f,o=N.Text:match("\040\091\048-\057\093\043\041\091\094\048-\057\093\043\040\091\048-\057\093\043\041\091\094\048-\057\093\043\040\091\048-\057\093\043\041")if C and(f and o)then j:SetHSV({H=math.clamp(tonumber(C)/360,0,1);S=math.clamp(tonumber(f)/100,0,1),V=math.clamp(tonumber(o)/100,0,1)})end end})}),RGBLabel=new("\084\101\120\116\076\097\098\101\108",{BackgroundTransparency=1;Position=UDim2.new(0,0,0,22),Font=Enum.Font.GothamBlack,Text="\082\071\066\058 ";TextSize=11,TextColor3=Color3.fromRGB(255,255,255);TextStrokeTransparency=.95;[Roact.Change.TextBounds]=function(N)N.Size=UDim2.fromOffset(N.TextBounds.X,N.TextBounds.Y)end},{RGBInput=new("\084\101\120\116\066\111\120",{BackgroundTransparency=1;Position=UDim2.new(1,0,0,0);ClearTextOnFocus=false,Font=Enum.Font.Gotham,Text=j.HSV:map(function(N)local j=Color3.fromHSV(N.H,N.S,N.V)local C=tostring(math.round(j.R*255))local f=tostring(math.round(j.G*255))local o=tostring(math.round(j.B*255))return C..("\044 "..(f..("\044 "..o)))end),TextSize=11,TextColor3=Color3.fromRGB(255,255,255);TextStrokeTransparency=.95,TextXAlignment=Enum.TextXAlignment.Left,[Roact.Change.TextBounds]=function(N)N.Size=UDim2.fromOffset(N.TextBounds.X,N.TextBounds.Y)end,[Roact.Event.FocusLost]=function(N)local C,f,o=N.Text:match("\040\091\048-\057\093\043\041\091\094\048-\057\093\043\040\091\048-\057\093\043\041\091\094\048-\057\093\043\040\091\048-\057\093\043\041")if C and(f and o)then local N=Color3.fromRGB(math.clamp(tonumber(C),0,255),math.clamp(tonumber(f),0,255),math.clamp(tonumber(o),0,255))local l,b,A=N:ToHSV()j:SetHSV({H=l;S=b;V=A})end end})});ConfirmButton=new("\073\109\097\103\101\066\117\116\116\111\110",{BackgroundTransparency=1,Size=UDim2.new(0,23,0,23);Position=UDim2.new(1,0,1,0),AnchorPoint=Vector2.new(1,1),Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\050\049\051\050\055\050\057\057\051\053",ScaleType=Enum.ScaleType.Slice;SliceCenter=Rect.new(8,8,34,34),SliceScale=.5;[Roact.Event.Activated]=function(N)j:Finish()end},{Label=new("\084\101\120\116\076\097\098\101\108",{BackgroundTransparency=1;Size=UDim2.new(1,0,1,0);Text="\226\156\148",Font=Enum.Font.GothamSemibold,TextSize=12,TextColor3=Color3.fromRGB(0,0,0)})}),CancelButton=new("\073\109\097\103\101\066\117\116\116\111\110",{BackgroundTransparency=1,Size=UDim2.new(0,25,0,23),Position=UDim2.new(1,-30,1,0);AnchorPoint=Vector2.new(1,1),Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\050\050\049\056\051\052\048\057\051\056",ScaleType=Enum.ScaleType.Slice;SliceCenter=Rect.new(8,8,34,34),SliceScale=.5;[Roact.Event.Activated]=function(N)j:Cancel()end},{Label=new("\084\101\120\116\076\097\098\101\108",{BackgroundTransparency=1,Size=UDim2.new(1,0,1,0),Text="\067\097\110\099\101\108";Font=Enum.Font.GothamSemibold;TextColor3=Color3.fromRGB(255,255,255);TextSize=12,TextStrokeTransparency=.95,[Roact.Change.TextBounds]=function(N)N.Parent.Size=UDim2.new(0,N.TextBounds.X+10,0,23)end})})})})})end return N

local ColorPicker = Roact.PureComponent:extend(script.Name)

function ColorPicker:init()
    self.Maid = Maid.new()
    local InitialHue,
          InitialSaturation,
          InitialBrightness = (self.props.InitialColor or Color3.fromHSV(0, 0.5, 1)):ToHSV()
    self.HSV, self._SetHSV = Roact.createBinding({
        H = InitialHue;
        S = InitialSaturation;
        V = InitialBrightness;
    })
end

function ColorPicker:didUpdate(previousProps)
    if previousProps.InitialColor ~= self.props.InitialColor then
        local InitialHue,
            InitialSaturation,
            InitialBrightness = (self.props.InitialColor or Color3.fromHSV(0, 0.5, 1)):ToHSV()
        self._SetHSV({
            H = InitialHue;
            S = InitialSaturation;
            V = InitialBrightness;
        })
    end
end

function ColorPicker:SetHSV(HSV)
    self._SetHSV(HSV)
    if self.props.SetPreviewColor then
        fastSpawn(function ()
            self.props.SetPreviewColor(Color3.fromHSV(HSV.H, HSV.S, HSV.V))
        end)
    end
end

function ColorPicker:Finish()
    if self.props.SetPreviewColor then
        fastSpawn(function ()
            self.props.SetPreviewColor(nil)
        end)
    end
    if self.props.OnConfirm then
        local HSV = self.HSV:getValue()
        local Color = Color3.fromHSV(HSV.H, HSV.S, HSV.V)
        fastSpawn(function ()
            self.props.OnConfirm(Color)
        end)
    end
end

function ColorPicker:Cancel()
    if self.props.SetPreviewColor then
        fastSpawn(function ()
            self.props.SetPreviewColor(nil)
        end)
    end
    if self.props.OnCancel then
        fastSpawn(function ()
            self.props.OnCancel()
        end)
    end
end

function ColorPicker:render()
    return new('ScreenGui', {
        DisplayOrder = 1;
    }, {
        Dialog = new('Frame', {
            Active = true;
            Draggable = true;
            ZIndex = 0;
            AnchorPoint = Vector2.new(1, 0.5);
            Position = self.DefaultPosition or UDim2.new(1, -110, 0.5, 0);
            BackgroundTransparency = 1;
            Size = UDim2.fromOffset(240, 0);
            [Roact.Change.Position] = function (rbx)
                ColorPicker.DefaultPosition = rbx.Position
            end;
        }, {
            Layout = new('UIListLayout', {
                FillDirection = Enum.FillDirection.Vertical;
                SortOrder = Enum.SortOrder.LayoutOrder;
                [Roact.Change.AbsoluteContentSize] = function (rbx)
                    rbx.Parent.Size = UDim2.fromOffset(240, rbx.AbsoluteContentSize.Y)
                end;
            });
            Picker = new('Frame', {
                BackgroundTransparency = 1;
                BorderSizePixel = 0;
                Size = UDim2.new(1, 0, 0, 0);
                LayoutOrder = 0;
            }, {
                Layout = new('UIListLayout', {
                    Padding = UDim.new(0, 10);
                    FillDirection = Enum.FillDirection.Horizontal;
                    SortOrder = Enum.SortOrder.LayoutOrder;
                    [Roact.Change.AbsoluteContentSize] = function (rbx)
                        rbx.Parent.Size = UDim2.new(1, 0, 0, rbx.AbsoluteContentSize.Y)
                    end;
                });
                Color = new('Frame', {
                    BorderSizePixel = 0;
                    Size = UDim2.new(0.25, 0, 1, 0);
                    BackgroundColor3 = self.HSV:map(function (HSV)
                        return Color3.fromHSV(HSV.H, HSV.S, HSV.V)
                    end);
                }, {
                    Corners = new('UICorner', {
                        CornerRadius = UDim.new(0, 4);
                    });
                    AspectRatio = new('UIAspectRatioConstraint', {
                        AspectRatio = 1;
                    });
                });
                Sliders = new('Frame', {
                    Position = UDim2.new(0.25, 5, 0, 0);
                    Size = UDim2.new(0.75, 0, 0, 0);
                    BackgroundTransparency = 1;
                }, {
                    Layout = new('UIListLayout', {
                        Padding = UDim.new(0, 10);
                        FillDirection = Enum.FillDirection.Vertical;
                        HorizontalAlignment = Enum.HorizontalAlignment.Left;
                        VerticalAlignment = Enum.VerticalAlignment.Top;
                        SortOrder = Enum.SortOrder.LayoutOrder;
                        [Roact.Change.AbsoluteContentSize] = function (rbx)
                            rbx.Parent.Size = UDim2.new(0.75, 0, 0, rbx.AbsoluteContentSize.Y)
                        end;
                    });
                    HueSlider = new(Slider, {
                        Size = UDim2.new(1, 0, 0, 10);
                        BackgroundColor3 = Color3.fromRGB(255, 255, 255);
                        LayoutOrder = 0;
                        Value = self.HSV:map(function (HSV)
                            return HSV.H
                        end);
                        OnValueChanged = function (Value)
                            local HSV = self.HSV:getValue()
                            self:SetHSV({
                                H = Value;
                                S = HSV.S;
                                V = HSV.V;
                            })
                        end;
                    }, {
                        Gradient = new('UIGradient', {
                            Color = self.HSV:map(function (HSV)
                                return ColorSequence.new({
                                    ColorSequenceKeypoint.new(0/6, Color3.fromHSV(0/6, HSV.S, HSV.V));
                                    ColorSequenceKeypoint.new(1/6, Color3.fromHSV(1/6, HSV.S, HSV.V));
                                    ColorSequenceKeypoint.new(2/6, Color3.fromHSV(2/6, HSV.S, HSV.V));
                                    ColorSequenceKeypoint.new(3/6, Color3.fromHSV(3/6, HSV.S, HSV.V));
                                    ColorSequenceKeypoint.new(4/6, Color3.fromHSV(4/6, HSV.S, HSV.V));
                                    ColorSequenceKeypoint.new(5/6, Color3.fromHSV(5/6, HSV.S, HSV.V));
                                    ColorSequenceKeypoint.new(6/6, Color3.fromHSV(6/6, HSV.S, HSV.V));
                                })
                            end);
                        });
                    });
                    SaturationSlider = new(Slider, {
                        Size = UDim2.new(1, 0, 0, 10);
                        BackgroundColor3 = Color3.fromRGB(255, 255, 255);
                        LayoutOrder = 1;
                        Value = self.HSV:map(function (HSV)
                            return HSV.S
                        end);
                        OnValueChanged = function (Value)
                            local HSV = self.HSV:getValue()
                            self:SetHSV({
                                H = HSV.H;
                                S = Value;
                                V = HSV.V;
                            })
                        end;
                    }, {
                        Gradient = new('UIGradient', {
                            Color = self.HSV:map(function (HSV)
                                return ColorSequence.new(
                                    Color3.fromHSV(HSV.H, 0, HSV.V),
                                    Color3.fromHSV(HSV.H, 1, HSV.V)
                                )
                            end);
                        });
                    });
                    BrightnessSlider = new(Slider, {
                        Size = UDim2.new(1, 0, 0, 10);
                        BackgroundColor3 = Color3.fromRGB(255, 255, 255);
                        LayoutOrder = 2;
                        Value = self.HSV:map(function (HSV)
                            return HSV.V
                        end);
                        OnValueChanged = function (Value)
                            local HSV = self.HSV:getValue()
                            self:SetHSV({
                                H = HSV.H;
                                S = HSV.S;
                                V = Value;
                            })
                        end;
                    }, {
                        Gradient = new('UIGradient', {
                            Color = self.HSV:map(function (HSV)
                                return ColorSequence.new(
                                    Color3.fromHSV(HSV.H, HSV.S, 0),
                                    Color3.fromHSV(HSV.H, HSV.S, 1)
                                )
                            end);
                        });
                    });
                });
            });
            Bottom = new('Frame', {
                BackgroundTransparency = 1;
                BorderSizePixel = 0;
                Size = UDim2.new(1, 0, 0, 34);
                LayoutOrder = 1;
            }, {
                HSVLabel = new('TextLabel', {
                    BackgroundTransparency = 1;
                    Position = UDim2.new(0, 0, 0, 7);
                    Font = Enum.Font.GothamBlack;
                    Text = 'HSV: ';
                    TextSize = 11;
                    TextColor3 = Color3.fromRGB(255, 255, 255);
                    TextStrokeTransparency = 0.95;
                    [Roact.Change.TextBounds] = function (rbx)
                        rbx.Size = UDim2.fromOffset(rbx.TextBounds.X, rbx.TextBounds.Y)
                    end;
                }, {
                    HSVInput = new('TextBox', {
                        BackgroundTransparency = 1;
                        Position = UDim2.new(1, 0, 0, 0);
                        ClearTextOnFocus = false;
                        Font = Enum.Font.Gotham;
                        Text = self.HSV:map(function (HSV)
                            local Hue = tostring(math.floor(HSV.H * 360)) .. '°'
                            local Saturation = tostring(math.floor(HSV.S * 100)) .. '%'
                            local Brightness = tostring(math.floor(HSV.V * 100)) .. '%'
                            return Hue .. ', ' .. Saturation .. ', ' .. Brightness
                        end);
                        TextSize = 11;
                        TextColor3 = Color3.fromRGB(255, 255, 255);
                        TextStrokeTransparency = 0.95;
                        TextXAlignment = Enum.TextXAlignment.Left;
                        [Roact.Change.TextBounds] = function (rbx)
                            rbx.Size = UDim2.fromOffset(rbx.TextBounds.X, rbx.TextBounds.Y)
                        end;
                        [Roact.Event.FocusLost] = function (rbx)
                            local HueInput, SaturationInput, BrightnessInput = rbx.Text:match('([0-9]+)[^0-9]+([0-9]+)[^0-9]+([0-9]+)')
                            if HueInput and SaturationInput and BrightnessInput then
                                self:SetHSV({
                                    H = math.clamp(tonumber(HueInput) / 360, 0, 1);
                                    S = math.clamp(tonumber(SaturationInput) / 100, 0, 1);
                                    V = math.clamp(tonumber(BrightnessInput) / 100, 0, 1);
                                })
                            end
                        end;
                    });
                });
                RGBLabel = new('TextLabel', {
                    BackgroundTransparency = 1;
                    Position = UDim2.new(0, 0, 0, 7 + 11 + 4);
                    Font = Enum.Font.GothamBlack;
                    Text = 'RGB: ';
                    TextSize = 11;
                    TextColor3 = Color3.fromRGB(255, 255, 255);
                    TextStrokeTransparency = 0.95;
                    [Roact.Change.TextBounds] = function (rbx)
                        rbx.Size = UDim2.fromOffset(rbx.TextBounds.X, rbx.TextBounds.Y)
                    end;
                }, {
                    RGBInput = new('TextBox', {
                        BackgroundTransparency = 1;
                        Position = UDim2.new(1, 0, 0, 0);
                        ClearTextOnFocus = false;
                        Font = Enum.Font.Gotham;
                        Text = self.HSV:map(function (HSV)
                            local Color = Color3.fromHSV(HSV.H, HSV.S, HSV.V)
                            local R = tostring(math.round(Color.R * 255))
                            local G = tostring(math.round(Color.G * 255))
                            local B = tostring(math.round(Color.B * 255))
                            return R .. ', ' .. G .. ', ' .. B
                        end);
                        TextSize = 11;
                        TextColor3 = Color3.fromRGB(255, 255, 255);
                        TextStrokeTransparency = 0.95;
                        TextXAlignment = Enum.TextXAlignment.Left;
                        [Roact.Change.TextBounds] = function (rbx)
                            rbx.Size = UDim2.fromOffset(rbx.TextBounds.X, rbx.TextBounds.Y)
                        end;
                        [Roact.Event.FocusLost] = function (rbx)
                            local RInput, GInput, BInput = rbx.Text:match('([0-9]+)[^0-9]+([0-9]+)[^0-9]+([0-9]+)')
                            if RInput and GInput and BInput then
                                local Color = Color3.fromRGB(
                                    math.clamp(tonumber(RInput), 0, 255),
                                    math.clamp(tonumber(GInput), 0, 255),
                                    math.clamp(tonumber(BInput), 0, 255)
                                )
                                local H, S, V = Color:ToHSV()
                                self:SetHSV({
                                    H = H;
                                    S = S;
                                    V = V;
                                })
                            end
                        end;
                    });
                });

                ConfirmButton = new('ImageButton', {
                    BackgroundTransparency = 1;
                    Size = UDim2.new(0, 23, 0, 23);
                    Position = UDim2.new(1, 0, 1, 0);
                    AnchorPoint = Vector2.new(1, 1);
                    Image = 'rbxassetid://2132729935';
                    ScaleType = Enum.ScaleType.Slice;
                    SliceCenter = Rect.new(8, 8, 34, 34);
                    SliceScale = 0.5;
                    [Roact.Event.Activated] = function (rbx)
                        self:Finish()
                    end;
                }, {
                    Label = new('TextLabel', {
                        BackgroundTransparency = 1;
                        Size = UDim2.new(1, 0, 1, 0);
                        Text = '✔';
                        Font = Enum.Font.GothamSemibold;
                        TextSize = 12;
                        TextColor3 = Color3.fromRGB(0, 0, 0);
                    });
                });
                CancelButton = new('ImageButton', {
                    BackgroundTransparency = 1;
                    Size = UDim2.new(0, 25, 0, 23);
                    Position = UDim2.new(1, -30, 1, 0);
                    AnchorPoint = Vector2.new(1, 1);
                    Image = 'rbxassetid://2218340938';
                    ScaleType = Enum.ScaleType.Slice;
                    SliceCenter = Rect.new(8, 8, 34, 34);
                    SliceScale = 0.5;
                    [Roact.Event.Activated] = function (rbx)
                        self:Cancel()
                    end;
                }, {
                    Label = new('TextLabel', {
                        BackgroundTransparency = 1;
                        Size = UDim2.new(1, 0, 1, 0);
                        Text = 'Cancel';
                        Font = Enum.Font.GothamSemibold;
                        TextColor3 = Color3.fromRGB(255, 255, 255);
                        TextSize = 12;
                        TextStrokeTransparency = 0.95;
                        [Roact.Change.TextBounds] = function (rbx)
                            rbx.Parent.Size = UDim2.new(0, rbx.TextBounds.X + 10, 0, 23);
                        end;
                    });
                });
            });
        })
    })
end

return ColorPicker
