@rbxts/react-clean-ui 1.0.14 → 1.0.36

package/out/Components/Layout/Tabs.luau

@@ -1,9 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local Component = _react.Component
-local ReactComponent = _react.ReactComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local HStack = TS.import(script, script.Parent, "HStack").HStack
 local VStack = TS.import(script, script.Parent, "VStack").VStack
 local Text = TS.import(script, script.Parent.Parent, "Typography").Text
@@ -20,11 +17,10 @@ local TypographyHelper = _Helpers.TypographyHelper
 local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
 local HoverButton = _HoverButton.HoverButton
 local HoverButtonContext = _HoverButton.HoverButtonContext
-local TabsContext = React.createContext(nil)
-local function Tab(props)
+local function Tab(_props)
 	return nil
 end
-local function TabTitle(props)
+local function TabTitle(_props)
 	return nil
 end
 local function TabContent(props)
@@ -60,32 +56,12 @@ local function TabButtonContent(props)
 		typography = TypographyHelper:getTypography(theme, nil, intent.typography),
 	}))
 end
-local Tabs
-do
-	local super = Component
-	Tabs = setmetatable({}, {
-		__tostring = function()
-			return "Tabs"
-		end,
-		__index = super,
-	})
-	Tabs.__index = Tabs
-	function Tabs.new(...)
-		local self = setmetatable({}, Tabs)
-		return self:constructor(...) or self
-	end
-	function Tabs:constructor(...)
-		super.constructor(self, ...)
-		self.state = {
-			selected = 0,
-		}
-	end
-	function Tabs:render()
-		local context = {
-			selected = self.state.selected,
-		}
+local Tabs = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local selected, setSelected = React.useState(0)
+	local tabs = React.useMemo(function()
 		local tabs = {}
-		React.Children.forEach(self.props.children, function(child)
+		React.Children.forEach(props.children, function(child)
 			if not React.isValidElement(child) or child.type ~= Tab then
 				return nil
 			end
@@ -110,80 +86,85 @@ do
 				table.insert(tabs, _arg0)
 			end
 		end)
-		local selectedTab = tabs[self.state.selected + 1]
-		local _exp = React.createElement(Corners, {
-			radius = self.context.components.tabs.list.cornerRadius,
-		})
-		local _exp_1 = React.createElement(Padding, {
-			resolvedPadding = SpacingHelper:GetResolvedPadding(self.context, {}, self.context.components.tabs.list.spacing),
-		})
-		-- ▼ ReadonlyArray.map ▼
-		local _newValue = table.create(#tabs)
-		local _callback = function(tab, index)
-			return React.createElement(HoverButton, {
-				isSelected = self.state.selected == index,
-				default = {
-					Size = UDim2.fromScale(0, 0),
-					AutomaticSize = Enum.AutomaticSize.XY,
-					ImageTransparency = 1,
-					BackgroundColor3 = ColorHelper:getIntentColors(self.context, "primary", "default", self.context.components.tabs.button.intents).backgroundColor,
-					BackgroundTransparency = ColorHelper:getIntentColors(self.context, "primary", "default", self.context.components.tabs.button.intents).backgroundTransparency,
-					BorderSizePixel = 0,
-					AutoButtonColor = false,
-					Event = {
-						Activated = function()
-							self:setState({
-								selected = index,
-							})
-						end,
-					},
-				},
-				hover = {
-					BackgroundColor3 = ColorHelper:getIntentColors(self.context, "primary", "hover", self.context.components.tabs.button.intents).backgroundColor,
-					BackgroundTransparency = ColorHelper:getIntentColors(self.context, "primary", "hover", self.context.components.tabs.button.intents).backgroundTransparency,
-				},
-				focus = {
-					BackgroundColor3 = ColorHelper:getIntentColors(self.context, "primary", "focus", self.context.components.tabs.button.intents).backgroundColor,
-					BackgroundTransparency = ColorHelper:getIntentColors(self.context, "primary", "focus", self.context.components.tabs.button.intents).backgroundTransparency,
-				},
-			}, React.createElement(TabButtonContent, {
-				text = tab.title.text,
-			}))
-		end
-		for _k, _v in tabs do
-			_newValue[_k] = _callback(_v, _k - 1, tabs)
+		return tabs
+	end, { props.children })
+	local tabCount = #tabs
+	React.useEffect(function()
+		if selected >= tabCount then
+			setSelected(math.max(0, tabCount - 1))
 		end
-		-- ▲ ReadonlyArray.map ▲
-		local _exp_2 = React.createElement(Container, {
-			BackgroundColor3 = self.context.components.tabs.list.backgroundColor,
-			width = "100%",
-			BackgroundTransparency = 0,
-		}, _exp, _exp_1, React.createElement(HStack, nil, _newValue))
-		local _exp_3 = React.createElement("uistroke", {
-			Thickness = self.context.components.tabs.borderThickness,
-			BorderStrokePosition = Enum.BorderStrokePosition.Inner,
-			Color = self.context.components.tabs.borderColor,
-		})
-		local _exp_4 = React.createElement(Padding, {
-			resolvedPadding = SpacingHelper:GetResolvedPadding(self.context, {}, self.context.components.tabs.spacing),
-		})
-		local _exp_5 = React.createElement(Corners, {
-			radius = self.context.components.tabs.list.cornerRadius,
-		})
-		local _result = selectedTab
-		if _result ~= nil then
-			_result = _result.content
-		end
-		return React.createElement(TabsContext.Provider, {
-			value = context,
-		}, React.createElement(VStack, nil, _exp_2, React.createElement(Container, nil, _exp_3, _exp_4, _exp_5, _result)))
+	end, { selected, tabCount })
+	local selectedTab = tabs[selected + 1]
+	local buttonDefault = ColorHelper:getIntentColors(theme, "primary", "default", theme.components.tabs.button.intents)
+	local buttonHover = ColorHelper:getIntentColors(theme, "primary", "hover", theme.components.tabs.button.intents)
+	local buttonFocus = ColorHelper:getIntentColors(theme, "primary", "focus", theme.components.tabs.button.intents)
+	local _exp = React.createElement(Corners, {
+		radius = theme.components.tabs.list.cornerRadius,
+	})
+	local _exp_1 = React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing),
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#tabs)
+	local _callback = function(tab, index)
+		return React.createElement(HoverButton, {
+			isSelected = selected == index,
+			default = {
+				Size = UDim2.fromScale(0, 0),
+				AutomaticSize = Enum.AutomaticSize.XY,
+				ImageTransparency = 1,
+				BackgroundColor3 = buttonDefault.backgroundColor,
+				BackgroundTransparency = buttonDefault.backgroundTransparency,
+				BorderSizePixel = 0,
+				AutoButtonColor = false,
+				Event = {
+					Activated = function()
+						setSelected(index)
+					end,
+				},
+			},
+			hover = {
+				BackgroundColor3 = buttonHover.backgroundColor,
+				BackgroundTransparency = buttonHover.backgroundTransparency,
+			},
+			focus = {
+				BackgroundColor3 = buttonFocus.backgroundColor,
+				BackgroundTransparency = buttonFocus.backgroundTransparency,
+			},
+		}, React.createElement(TabButtonContent, {
+			text = tab.title.text,
+		}))
 	end
-	Tabs.Tab = Tab
-	Tabs.Title = TabTitle
-	Tabs.Content = TabContent
-	Tabs.contextType = CleanThemeContext
-	Tabs = ReactComponent(Tabs) or Tabs
-end
+	for _k, _v in tabs do
+		_newValue[_k] = _callback(_v, _k - 1, tabs)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_2 = React.createElement(Container, {
+		ref = ref,
+		BackgroundColor3 = theme.components.tabs.list.backgroundColor,
+		width = "100%",
+		BackgroundTransparency = 0,
+	}, _exp, _exp_1, React.createElement(HStack, nil, _newValue))
+	local _exp_3 = React.createElement("uistroke", {
+		Thickness = theme.components.tabs.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = theme.components.tabs.borderColor,
+	})
+	local _exp_4 = React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing),
+	})
+	local _exp_5 = React.createElement(Corners, {
+		radius = theme.components.tabs.list.cornerRadius,
+	})
+	local _result = selectedTab
+	if _result ~= nil then
+		_result = _result.content
+	end
+	return React.createElement(VStack, nil, _exp_2, React.createElement(Container, nil, _exp_3, _exp_4, _exp_5, _result))
+end)
+Tabs.Title = TabTitle
+Tabs.Tab = Tab
+Tabs.Content = TabContent
 return {
 	Tabs = Tabs,
 }

package/out/Components/Layout/VStack.d.ts

@@ -1,11 +1,14 @@
-import React from "@rbxts/react";
+import React, { Binding } from "@rbxts/react";
 import { SpacedElementProps } from "../../Interfaces";
 interface VStackProps extends SpacedElementProps {
+    valign?: Enum.VerticalAlignment | "Center" | "Top" | "Bottom" | React.Binding<Enum.VerticalAlignment> | undefined;
     children?: React.ReactNode;
     HorizontalFlex?: Enum.UIFlexAlignment;
     VerticalFlex?: Enum.UIFlexAlignment;
+    VerticalAlignment?: Enum.VerticalAlignment;
     Event?: React.InstanceEvent<UIListLayout>;
     Change?: React.InstanceChangeEvent<UIListLayout>;
+    Padding?: UDim | Binding<UDim>;
 }
 export declare function VStack(props: VStackProps): React.JSX.Element;
 export {};

package/out/Components/Layout/VStack.luau

@@ -5,12 +5,12 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function VStack(props)
 	local theme = React.useContext(CleanThemeContext)
-	local padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing))
 	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Vertical,
 		HorizontalFlex = props.HorizontalFlex or Enum.UIFlexAlignment.Fill,
 		VerticalFlex = props.VerticalFlex,
-		Padding = padding,
+		VerticalAlignment = props.VerticalAlignment or props.valign,
+		Padding = props.Padding or UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing)),
 		SortOrder = Enum.SortOrder.LayoutOrder,
 		Change = props.Change,
 		Event = props.Event,

package/out/Components/Layout/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Column';
+export * from './Accordion';
 export * from './Container';
 export * from './Draggable';
 export * from './Droppable';

package/out/Components/Layout/init.luau

@@ -4,6 +4,9 @@ local exports = {}
 for _k, _v in TS.import(script, script, "Column") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Accordion") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Container") or {} do
 	exports[_k] = _v
 end

package/out/Components/Navigation/Menu.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from "@rbxts/react";
+import React from "@rbxts/react";
 import { ButtonProps } from "../Input";
 interface MenuItemProps extends ButtonProps {
     title: string;
@@ -8,12 +8,8 @@ interface MenuProps {
     title: string;
     collapsed?: boolean;
 }
-interface MenuState {
-    collapsed: boolean;
-}
-export declare class Menu extends Component<MenuProps, MenuState> {
-    static Item: typeof MenuItem;
-    state: MenuState;
-    render(): React.ReactNode;
-}
-export {};
+type MenuComponent = React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<Frame>> & {
+    Item: typeof MenuItem;
+};
+declare const Menu: MenuComponent;
+export { Menu };

package/out/Components/Navigation/Menu.luau

@@ -1,9 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local Component = _react.Component
-local ReactComponent = _react.ReactComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Button = TS.import(script, script.Parent.Parent, "Input").Button
 local _Layout = TS.import(script, script.Parent.Parent, "Layout")
 local Container = _Layout.Container
@@ -23,68 +20,44 @@ local function MenuItem(props)
 		group = true,
 	})
 end
-local Menu
-do
-	local super = Component
-	Menu = setmetatable({}, {
-		__tostring = function()
-			return "Menu"
-		end,
-		__index = super,
-	})
-	Menu.__index = Menu
-	function Menu.new(...)
-		local self = setmetatable({}, Menu)
-		return self:constructor(...) or self
-	end
-	function Menu:constructor(...)
-		super.constructor(self, ...)
-		local _object = {}
-		local _left = "collapsed"
-		local _condition = self.props.collapsed
-		if _condition == nil then
-			_condition = false
-		end
-		_object[_left] = _condition
-		self.state = _object
-	end
-	function Menu:render()
-		return React.createElement(NavigationContext.Provider, {
-			value = {
-				collapsed = self.state.collapsed,
-			},
-		}, React.createElement(Group, nil, React.createElement(VStack, {
-			spacing = "sm",
-		}, React.createElement(Container, {
-			group = true,
-		}, React.createElement(HStack, {
-			valign = "Center",
-		}, React.createElement(Button, {
-			icon = "bars",
-			Event = {
-				Activated = function()
-					self:setState(function(state)
-						return {
-							collapsed = not state.collapsed,
-						}
-					end)
-				end,
-			},
-		}), not self.state.collapsed and React.createElement(Text, {
-			text = self.props.title,
-			variant = "heading",
-		}))), React.createElement(FlexItem, {
-			mode = "Fill",
-		}, React.createElement(Scroller, {
-			height = "100%",
-		}, React.createElement(VStack, {
-			spacing = "sm",
-			HorizontalFlex = Enum.UIFlexAlignment.None,
-		}, self.props.children))))))
+local Menu = React.forwardRef(function(props, ref)
+	local _condition = props.collapsed
+	if _condition == nil then
+		_condition = false
 	end
-	Menu.Item = MenuItem
-	Menu = ReactComponent(Menu) or Menu
-end
+	local collapsed, setCollapsed = React.useState(_condition)
+	return React.createElement(NavigationContext.Provider, {
+		value = {
+			collapsed = collapsed,
+		},
+	}, React.createElement(Container, {
+		ref = ref,
+	}, React.createElement(Group, nil, React.createElement(VStack, {
+		spacing = "sm",
+	}, React.createElement(Container, {
+		group = true,
+	}, React.createElement(HStack, {
+		valign = "Center",
+	}, React.createElement(Button, {
+		icon = "bars",
+		Event = {
+			Activated = function()
+				setCollapsed(not collapsed)
+			end,
+		},
+	}), not collapsed and React.createElement(Text, {
+		text = props.title,
+		variant = "heading",
+	}))), React.createElement(FlexItem, {
+		mode = "Fill",
+	}, React.createElement(Scroller, {
+		height = "100%",
+	}, React.createElement(VStack, {
+		spacing = "sm",
+		HorizontalFlex = Enum.UIFlexAlignment.None,
+	}, props.children)))))))
+end)
+Menu.Item = MenuItem
 return {
 	MenuItem = MenuItem,
 	Menu = Menu,

package/out/Components/Surface/Box.d.ts

@@ -1,6 +1,6 @@
 import React from "@rbxts/react";
-import { BackgroundElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
-export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, React.InstanceProps<Frame> {
+import { BackgroundElementProps, PositionElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
+export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, PositionElementProps, React.InstanceProps<Frame> {
     'border-thickness'?: number;
     'border-color'?: Color3;
 }

package/out/Components/Surface/Card.d.ts

@@ -1,6 +1,5 @@
-import React, { Component } from "@rbxts/react";
+import React from "@rbxts/react";
 import { BoxProps } from "./Box";
-import { CleanThemeContext } from "../../Contexts";
 import { IntentElementProps } from "../../Interfaces";
 interface CardHeaderProps extends IntentElementProps {
     children?: React.ReactNode;
@@ -14,12 +13,10 @@ interface CardFooterProps extends BoxProps, IntentElementProps {
 export declare const CardFooter: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<Frame>>;
 interface CardProps extends BoxProps, IntentElementProps {
 }
-export declare class Card extends Component<CardProps> {
-    static Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<Frame>>;
-    static Footer: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<Frame>>;
-    static Body: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<Frame>>;
-    static contextType: React.Context<import("../..").CleanTheme>;
-    context: React.ContextType<typeof CleanThemeContext>;
-    render(): React.JSX.Element;
-}
-export {};
+type CardComponent = React.ForwardRefExoticComponent<CardProps & React.RefAttributes<Frame>> & {
+    Header: typeof CardHeader;
+    Footer: typeof CardFooter;
+    Body: typeof CardBody;
+};
+declare const Card: CardComponent;
+export { Card };

package/out/Components/Surface/Card.luau

@@ -1,9 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local Component = _react.Component
-local ReactComponent = _react.ReactComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Box = TS.import(script, script.Parent, "Box").Box
 local _Layout = TS.import(script, script.Parent.Parent, "Layout")
 local Container = _Layout.Container
@@ -12,6 +9,7 @@ local VStack = _Layout.VStack
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
 local CssHelper = _Helpers.CssHelper
+local SizeHelper = _Helpers.SizeHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
 local Padding = TS.import(script, script.Parent.Parent, "Decorator").Padding
@@ -28,8 +26,8 @@ local CardHeader = React.forwardRef(function(props, ref)
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
-	_attributes.Size = UDim2.fromScale(1, 0)
-	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.Size = UDim2.fromScale(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	_attributes.BackgroundTransparency = intent.backgroundTransparency
 	_attributes.BackgroundColor3 = intent.backgroundColor
 	_attributes.BorderSizePixel = 0
@@ -51,12 +49,12 @@ local CardBody = React.forwardRef(function(props, ref)
 	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, "md", theme.components.card.header.spacing))
 	local _attributes = {
 		ref = ref,
+		Size = SizeHelper:GetSize(props, UDim2.fromScale(0, 0)),
 	}
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
-	_attributes.Size = UDim2.fromScale(1, 0)
-	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	return React.createElement(FlexItem, nil, React.createElement(Container, _attributes, React.createElement(Padding, {
 		resolvedPadding = padding,
 	}), props.children))
@@ -73,8 +71,8 @@ local CardFooter = React.forwardRef(function(props, ref)
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
-	_attributes.Size = UDim2.fromScale(1, 0)
-	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.Size = UDim2.fromScale(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	_attributes.BackgroundTransparency = intent.backgroundTransparency
 	_attributes.BackgroundColor3 = intent.backgroundColor
 	_attributes.BorderSizePixel = 0
@@ -91,45 +89,39 @@ local CardFooter = React.forwardRef(function(props, ref)
 		BottomRightRadius = corners,
 	}), props.children)
 end)
-local Card
-do
-	local super = Component
-	Card = setmetatable({}, {
-		__tostring = function()
-			return "Card"
-		end,
-		__index = super,
-	})
-	Card.__index = Card
-	function Card.new(...)
-		local self = setmetatable({}, Card)
-		return self:constructor(...) or self
-	end
-	function Card:constructor(...)
-		super.constructor(self, ...)
-	end
-	function Card:render()
-		local contextValue = {
-			intent = self.props.intent,
+local Card = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local contextValue = React.useMemo(function()
+		return {
+			intent = props.intent,
 		}
-		local intent = ColorHelper:getIntentColors(self.context, self.props.intent or "primary", "default", self.context.components.card.header.intents)
-		local _attributes = table.clone(self.props)
-		setmetatable(_attributes, nil)
-		_attributes.ref = self.props.ref
-		_attributes.spacing = "None"
-		_attributes["border-color"] = intent.borderColor
-		return React.createElement(CardContext.Provider, {
-			value = contextValue,
-		}, React.createElement(Box, _attributes, React.createElement(VStack, {
-			spacing = "None",
-		}, self.props.children)))
-	end
-	Card.Header = CardHeader
-	Card.Footer = CardFooter
-	Card.Body = CardBody
-	Card.contextType = CleanThemeContext
-	Card = ReactComponent(Card) or Card
-end
+	end, { props.intent })
+	local intent = ColorHelper:getIntentColors(theme, props.intent or "primary", "default", theme.components.card.header.intents)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	_attributes.ref = ref
+	_attributes.center = nil
+	_attributes.spacing = "None"
+	_attributes["border-color"] = intent.borderColor
+	local cardBox = (React.createElement(Box, _attributes, React.createElement(VStack, {
+		spacing = "None",
+	}, props.children)))
+	local isCentered = props.center == true and props.Position == nil and props.AnchorPoint == nil
+	return React.createElement(CardContext.Provider, {
+		value = contextValue,
+	}, if isCentered then (React.createElement(Container, {
+		Size = UDim2.fromScale(1, 1),
+		ZIndex = props.ZIndex,
+		LayoutOrder = props.LayoutOrder,
+	}, React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+	}), cardBox)) else cardBox)
+end)
+Card.Header = CardHeader
+Card.Footer = CardFooter
+Card.Body = CardBody
 return {
 	CardHeader = CardHeader,
 	CardBody = CardBody,

package/out/Components/Surface/Icon.d.ts

@@ -1,6 +1,6 @@
 import React, { Binding } from "@rbxts/react";
 import { IconElementProps, ScalableElementProps } from "../../Interfaces/";
-export interface IconProps extends IconElementProps, ScalableElementProps {
+export interface IconProps extends IconElementProps, ScalableElementProps, React.InstanceProps<ImageLabel> {
     color?: Color3;
     Size?: UDim2;
     spinning?: boolean;

package/out/Components/Surface/Icon.luau

@@ -54,6 +54,7 @@ function Icon(props)
 	return React.createElement("imagelabel", {
 		Rotation = props.Rotation,
 		Size = props.Size or UDim2.fromOffset(size, size),
+		LayoutOrder = props.LayoutOrder,
 		Image = if iconId == nil then nil else `rbxassetid://{iconId}`,
 		BackgroundTransparency = 1,
 		ImageColor3 = props.color or theme.colors.intents.primary.default.textColor,

package/out/Components/Surface/index.d.ts

@@ -1,4 +1,3 @@
 export * from './Box';
 export * from './Card';
 export * from './Icon';
-export * from './Panel';

package/out/Components/Surface/init.luau

@@ -10,7 +10,4 @@ end
 for _k, _v in TS.import(script, script, "Icon") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "Panel") or {} do
-	exports[_k] = _v
-end
 return exports