@rbxts/uiblox 0.2.0-alpha.6 → 0.2.0-alpha.7

package/out/ui/packages/backdrop/components/Backdrop.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface BackdropProps {
+    open?: boolean;
+    invisible?: boolean;
+    onClick?: () => void;
+    children?: React.ReactNode;
+}
+declare function Backdrop(props: CustomizedProps<TextButton, BackdropProps>): JSX.Element | undefined;
+export default Backdrop;

package/out/ui/packages/backdrop/components/Backdrop.luau

@@ -0,0 +1,58 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useBackdropStyles = TS.import(script, script.Parent, "Backdrop.styles").default
+local function Backdrop(props)
+	local _binding = props
+	local open = _binding.open
+	if open == nil then
+		open = true
+	end
+	local invisible = _binding.invisible
+	local onClick = _binding.onClick
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useBackdropStyles({
+		invisible = invisible,
+	})
+	if open ~= true then
+		return nil
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Backdrop"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	_attributes.Event = {
+		Activated = function()
+			local _result = onClick
+			if _result ~= nil then
+				_result = _result()
+			end
+			return _result
+		end,
+	}
+	return React.createElement("textbutton", _attributes, children)
+end
+local default = Backdrop
+return {
+	default = default,
+}

package/out/ui/packages/backdrop/components/Backdrop.styles.d.ts

@@ -0,0 +1,4 @@
+declare const useBackdropStyles: (props: {
+    invisible?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useBackdropStyles;

package/out/ui/packages/backdrop/components/Backdrop.styles.luau

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useBackdropStyles = componentStyles("Backdrop", function(theme, _param)
+	local invisible = _param.invisible
+	return createStyles({
+		root = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.palette.backdrop,
+			BackgroundTransparency = if invisible == true then 1 else 0.45,
+			BorderSizePixel = 0,
+			Text = "",
+			AutoButtonColor = false,
+			Selectable = false,
+			ZIndex = 30000,
+		},
+	})
+end)
+local default = useBackdropStyles
+return {
+	default = default,
+}

package/out/ui/packages/backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Backdrop } from "./components/Backdrop";
+export { BackdropProps } from "./components/Backdrop";

package/out/ui/packages/backdrop/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Backdrop = TS.import(script, script, "components", "Backdrop").default
+return exports

package/out/ui/packages/badge/components/Badge.styles.luau

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local useBadgeStyles = componentStyles("Badge", function(theme)
+	local diameter = theme.spacing.calc(2) + theme.padding.calc(1)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -14,13 +15,15 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 		badge = {
 			AnchorPoint = Vector2.new(0.5, 0.5),
 			Position = UDim2.fromScale(1, 0),
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromOffset(theme.padding.calc(2), theme.padding.calc(2)),
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.fromOffset(diameter, diameter),
 			BackgroundColor3 = theme.palette.status.error.main,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.caption,
 			TextColor3 = theme.palette.text.inverse,
+			TextXAlignment = Enum.TextXAlignment.Center,
+			TextYAlignment = Enum.TextYAlignment.Center,
 			ZIndex = 2,
 		},
 		padding = {
@@ -28,7 +31,7 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 			PaddingRight = UDim.new(0, theme.padding.calc(0.5)),
 		},
 		corner = {
-			CornerRadius = UDim.new(1, 0),
+			CornerRadius = UDim.new(0.5, 0),
 		},
 	})
 end)

package/out/ui/packages/chip/components/Chip.d.ts

@@ -1,8 +1,9 @@
-import { CustomizedProps } from "../../../../theme/index";
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
 export interface ChipProps {
     label: string;
     selected?: boolean;
     disabled?: boolean;
+    size?: ControlSize;
     onActivated?: () => void;
     onDelete?: () => void;
 }

package/out/ui/packages/chip/components/Chip.luau

@@ -8,6 +8,7 @@ local function Chip(props)
 	local label = _binding.label
 	local selected = _binding.selected
 	local disabled = _binding.disabled
+	local size = _binding.size
 	local onActivated = _binding.onActivated
 	local onDelete = _binding.onDelete
 	local className = _binding.className
@@ -19,6 +20,7 @@ local function Chip(props)
 		selected = selected,
 		disabled = disabled,
 		deletable = deletable,
+		size = size,
 	})
 	local _attributes = {}
 	local _condition = id

package/out/ui/packages/chip/components/Chip.styles.d.ts

@@ -1,6 +1,8 @@
+import { ControlSize } from "../../../../theme/index";
 declare const useChipStyles: (props: {
     selected?: boolean;
     disabled?: boolean;
     deletable?: boolean;
+    size?: ControlSize;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useChipStyles;

package/out/ui/packages/chip/components/Chip.styles.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local useChipStyles = componentStyles("Chip", function(theme, _param)
 	local selected = _param.selected
@@ -16,6 +17,11 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 	if deletable == nil then
 		deletable = false
 	end
+	local size = _param.size
+	local metrics = controlMetrics(theme.density, size)
+	local padY = if size == "small" then 0.25 elseif size == "large" then 0.75 else 0.5
+	local padX = if size == "small" then 1 elseif size == "large" then 2 else 1.5
+	local deletePx = metrics.icon
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -27,13 +33,13 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			Selectable = not disabled,
 			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = metrics.font,
 		},
 		padding = {
-			PaddingTop = UDim.new(0, theme.padding.calc(0.5)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(0.5)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(if deletable then 0.5 else 1.5)),
+			PaddingTop = UDim.new(0, theme.padding.calc(padY)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(padY)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(padX)),
+			PaddingRight = UDim.new(0, theme.padding.calc(if deletable then 0.5 else padX)),
 		},
 		corner = {
 			CornerRadius = UDim.new(theme.shape.pillScale, 0),
@@ -56,11 +62,11 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			BorderSizePixel = 0,
 			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = metrics.font,
 			LayoutOrder = 1,
 		},
 		delete = {
-			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+			Size = UDim2.fromOffset(deletePx, deletePx),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,

package/out/ui/packages/dialog/components/Dialog.d.ts

@@ -2,7 +2,7 @@ import React from "@rbxts/react";
 export interface DialogProps {
     host?: Instance;
     open: boolean;
-    title: string;
+    title?: string;
     onClose: () => void;
     children?: React.ReactNode;
     actions?: React.ReactNode;

package/out/ui/packages/dialog/components/Dialog.luau

@@ -12,6 +12,8 @@ local function Dialog(props)
 	local children = _binding.children
 	local actions = _binding.actions
 	local styles = useDialogStyles()
+	local hasTitle = title ~= nil and title ~= ""
+	local hasActions = actions ~= nil
 	local _attributes = {
 		key = "Column",
 	}
@@ -21,34 +23,41 @@ local function Dialog(props)
 	local _attributes_1 = table.clone(styles.columnList)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
-	local _attributes_2 = {
-		key = "Title",
-	}
-	for _k, _v in styles.title do
-		_attributes_2[_k] = _v
+	local _condition = hasTitle
+	if _condition then
+		local _attributes_2 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = title
+		_condition = React.createElement("textlabel", _attributes_2)
 	end
-	_attributes_2.Text = title
-	local _exp_1 = React.createElement("textlabel", _attributes_2)
-	local _attributes_3 = {
+	local _attributes_2 = {
 		key = "Body",
 	}
 	for _k, _v in styles.body do
-		_attributes_3[_k] = _v
+		_attributes_2[_k] = _v
 	end
-	local _exp_2 = React.createElement("frame", _attributes_3, children)
-	local _attributes_4 = {
-		key = "Actions",
-	}
-	for _k, _v in styles.actions do
-		_attributes_4[_k] = _v
+	local _exp_1 = React.createElement("frame", _attributes_2, children)
+	local _condition_1 = hasActions
+	if _condition_1 then
+		local _attributes_3 = {
+			key = "Actions",
+		}
+		for _k, _v in styles.actions do
+			_attributes_3[_k] = _v
+		end
+		local _attributes_4 = table.clone(styles.actionList)
+		setmetatable(_attributes_4, nil)
+		_condition_1 = (React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), actions))
 	end
-	local _attributes_5 = table.clone(styles.actionList)
-	setmetatable(_attributes_5, nil)
 	return React.createElement(Modal, {
 		host = host,
 		open = open,
 		onClose = onClose,
-	}, React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, React.createElement("frame", _attributes_4, React.createElement("uilistlayout", _attributes_5), actions)))
+	}, React.createElement("frame", _attributes, _exp, _condition, _exp_1, _condition_1))
 end
 local default = Dialog
 return {

package/out/ui/packages/index.d.ts

@@ -32,6 +32,7 @@ export * from "./cframeEditor/index";
 export * from "./enumPicker/index";
 export * from "./popup/index";
 export * from "./modal/index";
+export * from "./backdrop/index";
 export * from "./dialog/index";
 export * from "./paper/index";
 export * from "./card/index";

package/out/ui/packages/init.luau

@@ -103,6 +103,9 @@ end
 for _k, _v in TS.import(script, script, "modal") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "backdrop") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "dialog") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/layout/components/Container.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+import { ContainerMaxWidth } from "./containerWidth";
+export interface ContainerProps {
+    maxWidth?: ContainerMaxWidth;
+    disableGutters?: boolean;
+    children?: React.ReactNode;
+}
+declare function Container(props: CustomizedProps<Frame, ContainerProps>): JSX.Element;
+export default Container;

package/out/ui/packages/layout/components/Container.luau

@@ -0,0 +1,54 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useContainerStyles = TS.import(script, script.Parent, "Container.styles").default
+local function Container(props)
+	local _binding = props
+	local maxWidth = _binding.maxWidth
+	local disableGutters = _binding.disableGutters
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useContainerStyles({
+		maxWidth = maxWidth,
+		disableGutters = disableGutters,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Container"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = {
+		key = "Inner",
+	}
+	for _k, _v in styles.inner do
+		_attributes_1[_k] = _v
+	end
+	local _attributes_2 = table.clone(styles.constraint)
+	setmetatable(_attributes_2, nil)
+	local _exp = React.createElement("uisizeconstraint", _attributes_2)
+	local _attributes_3 = table.clone(styles.gutter)
+	setmetatable(_attributes_3, nil)
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, React.createElement("uipadding", _attributes_3), children))
+end
+local default = Container
+return {
+	default = default,
+}

package/out/ui/packages/layout/components/Container.styles.d.ts

@@ -0,0 +1,6 @@
+import { ContainerMaxWidth } from "./containerWidth";
+declare const useContainerStyles: (props: {
+    maxWidth?: ContainerMaxWidth;
+    disableGutters?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useContainerStyles;

package/out/ui/packages/layout/components/Container.styles.luau

@@ -0,0 +1,41 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local containerMaxPx = TS.import(script, script.Parent, "containerWidth").containerMaxPx
+local useContainerStyles = componentStyles("Container", function(theme, _param)
+	local maxWidth = _param.maxWidth
+	local disableGutters = _param.disableGutters
+	local maxPx = containerMaxPx(maxWidth)
+	local gutter = theme.spacing.calc(2)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		inner = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			Position = UDim2.new(0.5, 0, 0, 0),
+			AnchorPoint = Vector2.new(0.5, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		constraint = {
+			MaxSize = if maxPx ~= nil then Vector2.new(maxPx, math.huge) else Vector2.new(math.huge, math.huge),
+		},
+		gutter = {
+			PaddingTop = UDim.new(0, 0),
+			PaddingBottom = UDim.new(0, 0),
+			PaddingLeft = UDim.new(0, if disableGutters == true then 0 else gutter),
+			PaddingRight = UDim.new(0, if disableGutters == true then 0 else gutter),
+		},
+	})
+end)
+local default = useContainerStyles
+return {
+	default = default,
+}

package/out/ui/packages/layout/components/Grid.d.ts

@@ -5,7 +5,7 @@ export interface GridProps {
     fillDirection?: Enum.FillDirection;
     fillDirectionMaxCells?: number;
     sortOrder?: Enum.SortOrder;
-    startCorner: Enum.StartCorner;
+    startCorner?: Enum.StartCorner;
     horizontalAlignment?: Enum.HorizontalAlignment;
     verticalAlignment?: Enum.VerticalAlignment;
 }

package/out/ui/packages/layout/components/containerWidth.d.ts

@@ -0,0 +1,2 @@
+export type ContainerMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
+export declare function containerMaxPx(maxWidth?: ContainerMaxWidth): number | undefined;

package/out/ui/packages/layout/components/containerWidth.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local WIDTHS = {
+	xs = 444,
+	sm = 600,
+	md = 900,
+	lg = 1200,
+	xl = 1536,
+}
+local function containerMaxPx(maxWidth)
+	if maxWidth == false then
+		return nil
+	end
+	return WIDTHS[maxWidth or "lg"]
+end
+return {
+	containerMaxPx = containerMaxPx,
+}

package/out/ui/packages/layout/index.d.ts

@@ -11,3 +11,6 @@ export { default as Box } from "./components/Box";
 export { BoxProps } from "./components/Box";
 export { BoxPad } from "./components/boxPad";
 export { BoxBg } from "./components/Box.styles";
+export { default as Container } from "./components/Container";
+export { ContainerProps } from "./components/Container";
+export { ContainerMaxWidth, containerMaxPx } from "./components/containerWidth";

package/out/ui/packages/layout/init.luau

@@ -11,4 +11,6 @@ for _k, _v in TS.import(script, script, "components", "List") or {} do
 end
 exports.Stack = TS.import(script, script, "components", "Stack").default
 exports.Box = TS.import(script, script, "components", "Box").default
+exports.Container = TS.import(script, script, "components", "Container").default
+exports.containerMaxPx = TS.import(script, script, "components", "containerWidth").containerMaxPx
 return exports

package/out/ui/packages/modal/components/Modal.d.ts

@@ -5,5 +5,5 @@ export interface ModalProps {
     onClose: () => void;
     children?: React.ReactNode;
 }
-declare function Modal(props: ModalProps): JSX.Element | undefined;
+declare function Modal(props: ModalProps): JSX.Element;
 export default Modal;

package/out/ui/packages/modal/components/Modal.luau

@@ -4,10 +4,13 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
+local useState = _react.useState
 local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
 local GuiService = _services.GuiService
 local UserInputService = _services.UserInputService
-local Portal = TS.import(script, script.Parent.Parent.Parent, "popup").Portal
+local _popup = TS.import(script, script.Parent.Parent.Parent, "popup")
+local Portal = _popup.Portal
+local portalTarget = _popup.portalTarget
 local isDismissInput = TS.import(script, script.Parent, "dismissInput").isDismissInput
 local _focusTrap = TS.import(script, script.Parent, "focusTrap")
 local isFocusable = _focusTrap.isFocusable
@@ -22,7 +25,14 @@ local function Modal(props)
 	local styles = useModalStyles()
 	local close = useRef(onClose)
 	local surface = useRef()
+	local anchor = useRef()
+	local layer, setLayer = useState(function()
+		return portalTarget(host)
+	end)
 	close.current = onClose
+	useEffect(function()
+		setLayer(portalTarget(host or anchor.current))
+	end, { host, open })
 	useEffect(function()
 		if not open then
 			return nil
@@ -53,43 +63,51 @@ local function Modal(props)
 				GuiService.SelectedObject = previous
 			end
 		end
-	end, { open })
-	if not open then
-		return nil
-	end
-	local _attributes = {
-		key = "Modal",
-	}
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	local _attributes_1 = {
-		key = "Backdrop",
-	}
-	for _k, _v in styles.backdrop do
-		_attributes_1[_k] = _v
-	end
-	_attributes_1.Event = {
-		Activated = function()
-			return close.current()
-		end,
-	}
-	local _exp = React.createElement("textbutton", _attributes_1)
-	local _attributes_2 = {
-		key = "Surface",
-		ref = surface,
-	}
-	for _k, _v in styles.surface do
-		_attributes_2[_k] = _v
+	end, { open, layer })
+	local _exp = React.createElement("frame", {
+		key = "ModalAnchor",
+		ref = anchor,
+		Size = UDim2.fromOffset(0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	})
+	local _condition = open and layer ~= nil
+	if _condition then
+		local _attributes = {
+			key = "Modal",
+		}
+		for _k, _v in styles.root do
+			_attributes[_k] = _v
+		end
+		local _attributes_1 = {
+			key = "Backdrop",
+		}
+		for _k, _v in styles.backdrop do
+			_attributes_1[_k] = _v
+		end
+		_attributes_1.Event = {
+			Activated = function()
+				return close.current()
+			end,
+		}
+		local _exp_1 = React.createElement("textbutton", _attributes_1)
+		local _attributes_2 = {
+			key = "Surface",
+			ref = surface,
+		}
+		for _k, _v in styles.surface do
+			_attributes_2[_k] = _v
+		end
+		local _attributes_3 = table.clone(styles.padding)
+		setmetatable(_attributes_3, nil)
+		local _exp_2 = React.createElement("uipadding", _attributes_3)
+		local _attributes_4 = table.clone(styles.corner)
+		setmetatable(_attributes_4, nil)
+		_condition = (React.createElement(Portal, {
+			host = layer,
+		}, React.createElement("frame", _attributes, _exp_1, React.createElement("frame", _attributes_2, _exp_2, React.createElement("uicorner", _attributes_4), children))))
 	end
-	local _attributes_3 = table.clone(styles.padding)
-	setmetatable(_attributes_3, nil)
-	local _exp_1 = React.createElement("uipadding", _attributes_3)
-	local _attributes_4 = table.clone(styles.corner)
-	setmetatable(_attributes_4, nil)
-	return React.createElement(Portal, {
-		host = host,
-	}, React.createElement("frame", _attributes, _exp, React.createElement("frame", _attributes_2, _exp_1, React.createElement("uicorner", _attributes_4), children)))
+	return React.createElement(React.Fragment, nil, _exp, _condition)
 end
 local default = Modal
 return {

package/out/ui/packages/popup/index.d.ts

@@ -2,3 +2,4 @@ export { default as Popup } from "./components/Popup";
 export { PopupProps } from "./components/Popup";
 export { default as Portal } from "./components/Portal";
 export { PortalProps } from "./components/Portal";
+export { portalTarget } from "./components/portalTarget";

package/out/ui/packages/popup/init.luau

@@ -3,4 +3,5 @@ local TS = _G[script]
 local exports = {}
 exports.Popup = TS.import(script, script, "components", "Popup").default
 exports.Portal = TS.import(script, script, "components", "Portal").default
+exports.portalTarget = TS.import(script, script, "components", "portalTarget").portalTarget
 return exports

package/out/ui/packages/stateMatrix.luau

@@ -915,123 +915,131 @@ local function compositeRows()
 	local _Length_19 = #_array_20
 	table.move(_array_20, 1, _Length_19, _length + 1, _array)
 	_length += _Length_19
-	local _array_21 = pair("Tabs", "disabled", {
+	local _array_21 = pair("Tabs", "vertical", {
 		value = "Continue",
 		options = { "Continue", "Docs", "Actions" },
-		disabled = true,
+		variant = "vertical",
 	})
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("Tabs", "hover", {
+	local _array_22 = pair("Tabs", "disabled", {
 		value = "Continue",
 		options = { "Continue", "Docs", "Actions" },
-		pointer = "hover",
+		disabled = true,
 	})
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Tabs", "long", {
-		value = LONG,
-		options = { LONG, "Docs", "Actions", "Source", "Settings" },
-		text = LONG,
-		width = NARROW,
+	local _array_23 = pair("Tabs", "hover", {
+		value = "Continue",
+		options = { "Continue", "Docs", "Actions" },
+		pointer = "hover",
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("SplitPane", "default", {
-		value = 160,
+	local _array_24 = pair("Tabs", "long", {
+		value = LONG,
+		options = { LONG, "Docs", "Actions", "Source", "Settings" },
+		text = LONG,
+		width = NARROW,
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("SplitPane", "disabled", {
+	local _array_25 = pair("SplitPane", "default", {
 		value = 160,
-		disabled = true,
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("SplitPane", "hover", {
+	local _array_26 = pair("SplitPane", "disabled", {
 		value = 160,
-		pointer = "hover",
+		disabled = true,
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("SplitPane", "drag", {
+	local _array_27 = pair("SplitPane", "hover", {
 		value = 160,
-		pointer = "press",
+		pointer = "hover",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("SplitPane", "long", {
-		value = 80,
-		text = LONG,
-		width = NARROW,
+	local _array_28 = pair("SplitPane", "drag", {
+		value = 160,
+		pointer = "press",
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("Tooltip", "hidden")
+	local _array_29 = pair("SplitPane", "long", {
+		value = 80,
+		text = LONG,
+		width = NARROW,
+	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Tooltip", "shown", {
-		pointer = "hover",
-	})
+	local _array_30 = pair("Tooltip", "hidden")
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Tooltip", "long", {
-		text = LONG,
-		width = NARROW,
+	local _array_31 = pair("Tooltip", "shown", {
 		pointer = "hover",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("TreeView", "default", {
-		selected = "Fixture/Styled",
+	local _array_32 = pair("Tooltip", "long", {
+		text = LONG,
+		width = NARROW,
+		pointer = "hover",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("TreeView", "hover", {
+	local _array_33 = pair("TreeView", "default", {
 		selected = "Fixture/Styled",
-		pointer = "hover",
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("TreeView", "filter", {
+	local _array_34 = pair("TreeView", "hover", {
 		selected = "Fixture/Styled",
-		filter = "sty",
+		pointer = "hover",
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("TreeView", "long", {
-		selected = `Fixture/{LONG}`,
-		text = LONG,
-		width = NARROW,
+	local _array_35 = pair("TreeView", "filter", {
+		selected = "Fixture/Styled",
+		filter = "sty",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("IconButton", "loading", {
-		loading = true,
+	local _array_36 = pair("TreeView", "long", {
+		selected = `Fixture/{LONG}`,
+		text = LONG,
+		width = NARROW,
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("IconButton", "loading-disabled", {
+	local _array_37 = pair("IconButton", "loading", {
+		loading = true,
+	})
+	local _Length_36 = #_array_37
+	table.move(_array_37, 1, _Length_36, _length + 1, _array)
+	_length += _Length_36
+	local _array_38 = pair("IconButton", "loading-disabled", {
 		loading = true,
 		disabled = true,
 	})
-	table.move(_array_37, 1, #_array_37, _length + 1, _array)
+	table.move(_array_38, 1, #_array_38, _length + 1, _array)
 	return _array
 end
 local function surfacesRows()
@@ -1232,34 +1240,46 @@ local function surfacesRows()
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Chip", "selected", {
-		value = true,
+	local _array_32 = pair("Chip", "size-small", {
+		size = "small",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("Chip", "disabled", {
-		disabled = true,
+	local _array_33 = pair("Chip", "size-large", {
+		size = "large",
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("Chip", "deletable", {
-		text = "Tag",
+	local _array_34 = pair("Chip", "selected", {
+		value = true,
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("Badge", "count", {
-		value = 3,
+	local _array_35 = pair("Chip", "disabled", {
+		disabled = true,
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("Badge", "max", {
+	local _array_36 = pair("Chip", "deletable", {
+		text = "Tag",
+	})
+	local _Length_35 = #_array_36
+	table.move(_array_36, 1, _Length_35, _length + 1, _array)
+	_length += _Length_35
+	local _array_37 = pair("Badge", "count", {
+		value = 3,
+	})
+	local _Length_36 = #_array_37
+	table.move(_array_37, 1, _Length_36, _length + 1, _array)
+	_length += _Length_36
+	local _array_38 = pair("Badge", "max", {
 		value = 100,
 	})
-	table.move(_array_36, 1, #_array_36, _length + 1, _array)
+	table.move(_array_38, 1, #_array_38, _length + 1, _array)
 	return _array
 end
 local function chromeRows()
@@ -1662,91 +1682,137 @@ local function miscRows()
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("ImageList", "default")
+	local _array_25 = pair("Container", "default", {
+		variant = "lg",
+	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("ImageList", "dense", {
-		size = "small",
+	local _array_26 = pair("Container", "sm", {
+		variant = "sm",
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("ImageList", "wide", {
-		size = "large",
+	local _array_27 = pair("Container", "fluid", {
+		variant = "false",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("SpeedDial", "closed", {
-		open = false,
-	})
+	local _array_28 = pair("Backdrop", "default")
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("SpeedDial", "open", {
-		open = true,
+	local _array_29 = pair("Backdrop", "invisible", {
+		variant = "invisible",
 	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("SpeedDial", "disabled", {
+	local _array_30 = pair("Backdrop", "closed", {
 		open = false,
-		disabled = true,
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("FormLabel", "default", {
-		text = "Email",
+	local _array_31 = pair("Divider", "horizontal", {
+		variant = "horizontal",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("FormLabel", "required", {
-		text = "Email",
-		value = true,
+	local _array_32 = pair("Divider", "vertical", {
+		variant = "vertical",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("FormLabel", "error", {
-		text = "Email",
-		hasError = true,
-	})
+	local _array_33 = pair("ImageList", "default")
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("FormHelperText", "default", {
-		text = "We never share this",
+	local _array_34 = pair("ImageList", "dense", {
+		size = "small",
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("FormHelperText", "error", {
-		text = "Required",
-		hasError = true,
+	local _array_35 = pair("ImageList", "wide", {
+		size = "large",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("Menu", "closed", {
+	local _array_36 = pair("SpeedDial", "closed", {
 		open = false,
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("Menu", "open", {
+	local _array_37 = pair("SpeedDial", "open", {
 		open = true,
 	})
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("Menu", "empty", {
+	local _array_38 = pair("SpeedDial", "disabled", {
+		open = false,
+		disabled = true,
+	})
+	local _Length_37 = #_array_38
+	table.move(_array_38, 1, _Length_37, _length + 1, _array)
+	_length += _Length_37
+	local _array_39 = pair("FormLabel", "default", {
+		text = "Email",
+	})
+	local _Length_38 = #_array_39
+	table.move(_array_39, 1, _Length_38, _length + 1, _array)
+	_length += _Length_38
+	local _array_40 = pair("FormLabel", "required", {
+		text = "Email",
+		value = true,
+	})
+	local _Length_39 = #_array_40
+	table.move(_array_40, 1, _Length_39, _length + 1, _array)
+	_length += _Length_39
+	local _array_41 = pair("FormLabel", "error", {
+		text = "Email",
+		hasError = true,
+	})
+	local _Length_40 = #_array_41
+	table.move(_array_41, 1, _Length_40, _length + 1, _array)
+	_length += _Length_40
+	local _array_42 = pair("FormHelperText", "default", {
+		text = "We never share this",
+	})
+	local _Length_41 = #_array_42
+	table.move(_array_42, 1, _Length_41, _length + 1, _array)
+	_length += _Length_41
+	local _array_43 = pair("FormHelperText", "error", {
+		text = "Required",
+		hasError = true,
+	})
+	local _Length_42 = #_array_43
+	table.move(_array_43, 1, _Length_42, _length + 1, _array)
+	_length += _Length_42
+	local _array_44 = pair("Menu", "closed", {
+		open = false,
+	})
+	local _Length_43 = #_array_44
+	table.move(_array_44, 1, _Length_43, _length + 1, _array)
+	_length += _Length_43
+	local _array_45 = pair("Menu", "open", {
+		open = true,
+	})
+	local _Length_44 = #_array_45
+	table.move(_array_45, 1, _Length_44, _length + 1, _array)
+	_length += _Length_44
+	local _array_46 = pair("Menu", "empty", {
 		open = true,
 		options = {},
 	})
-	table.move(_array_38, 1, #_array_38, _length + 1, _array)
+	table.move(_array_46, 1, #_array_46, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)

package/out/ui/packages/tabs/components/Tabs.d.ts

@@ -1,10 +1,12 @@
 import { CustomizedProps } from "../../../../theme/index";
 import { ChoiceOption } from "../../radioGroup/index";
+import { TabsOrientation } from "./tabsOrientation";
 export interface TabsProps<T> {
     value: T;
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    orientation?: TabsOrientation;
 }
 declare function Tabs<T>(props: CustomizedProps<ScrollingFrame, TabsProps<T>>): JSX.Element;
 export default Tabs;

package/out/ui/packages/tabs/components/Tabs.luau

@@ -4,6 +4,7 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local stepChoice = TS.import(script, script.Parent.Parent.Parent, "select", "components", "stepChoice").stepChoice
+local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
 local useTabsStyles = TS.import(script, script.Parent, "Tabs.styles").default
 local function Tabs(props)
 	local _binding = props
@@ -11,11 +12,15 @@ local function Tabs(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local orientation = _binding.orientation
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useTabsStyles()
+	local styles = useTabsStyles({
+		orientation = orientation,
+	})
+	local vertical = tabsIsVertical(orientation)
 	local choose = function(index)
 		local choice = options[index + 1]
 		if choice ~= nil and canActivate(disabled or choice.disabled) and choice.value ~= value then
@@ -36,9 +41,11 @@ local function Tabs(props)
 		end
 		-- ▲ ReadonlyArray.findIndex ▲
 		local index = _result
-		if input.KeyCode == Enum.KeyCode.Left then
+		local back = if vertical then Enum.KeyCode.Up else Enum.KeyCode.Left
+		local forward = if vertical then Enum.KeyCode.Down else Enum.KeyCode.Right
+		if input.KeyCode == back then
 			choose(stepChoice(options, index, -1))
-		elseif input.KeyCode == Enum.KeyCode.Right then
+		elseif input.KeyCode == forward then
 			choose(stepChoice(options, index, 1))
 		end
 	end

package/out/ui/packages/tabs/components/Tabs.styles.d.ts

@@ -1,2 +1,5 @@
-declare const useTabsStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+import { TabsOrientation } from "./tabsOrientation";
+declare const useTabsStyles: (props: {
+    orientation?: TabsOrientation;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useTabsStyles;

package/out/ui/packages/tabs/components/Tabs.styles.luau

@@ -3,32 +3,38 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
-local useTabsStyles = componentStyles("Tabs", function(theme)
+local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
+local useTabsStyles = componentStyles("Tabs", function(theme, _param)
+	local orientation = _param.orientation
+	local vertical = tabsIsVertical(orientation)
+	local bar = theme.padding.calc(0.5)
 	return createStyles({
 		root = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(4)),
+			Size = if vertical then UDim2.new(0, theme.spacing.calc(16), 1, 0) else UDim2.new(1, 0, 0, theme.spacing.calc(4)),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			CanvasSize = UDim2.fromScale(0, 0),
-			AutomaticCanvasSize = Enum.AutomaticSize.X,
-			ScrollingDirection = Enum.ScrollingDirection.X,
+			AutomaticCanvasSize = if vertical then Enum.AutomaticSize.Y else Enum.AutomaticSize.X,
+			ScrollingDirection = if vertical then Enum.ScrollingDirection.Y else Enum.ScrollingDirection.X,
 			HorizontalScrollBarInset = Enum.ScrollBarInset.Always,
+			VerticalScrollBarInset = Enum.ScrollBarInset.Always,
 			ScrollBarThickness = theme.padding.calc(0.5),
 			ScrollBarImageColor3 = theme.palette.text.secondary,
 		},
 		list = {
-			FillDirection = Enum.FillDirection.Horizontal,
+			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		tab = {
-			AutomaticSize = Enum.AutomaticSize.X,
-			Size = UDim2.fromScale(0, 1),
+			AutomaticSize = if vertical then Enum.AutomaticSize.Y else Enum.AutomaticSize.X,
+			Size = if vertical then UDim2.new(1, 0, 0, 0) else UDim2.fromScale(0, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			TextColor3 = theme.palette.text.secondary,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
+			TextXAlignment = if vertical then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
 		},
 		selected = {
 			TextColor3 = theme.palette.text.primary,
@@ -39,14 +45,22 @@ local useTabsStyles = componentStyles("Tabs", function(theme)
 		padding = {
 			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
 			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+			PaddingTop = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
+			PaddingBottom = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
 		},
-		indicator = {
-			Size = UDim2.new(1, theme.padding.calc(4), 0, theme.padding.calc(0.5)),
+		indicator = if vertical then ({
+			Size = UDim2.new(0, bar, 1, -theme.padding.calc(2)),
+			Position = UDim2.new(0, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0, 0.5),
+			BackgroundColor3 = theme.palette.primary.main,
+			BorderSizePixel = 0,
+		}) else ({
+			Size = UDim2.new(1, theme.padding.calc(4), 0, bar),
 			Position = UDim2.fromScale(0.5, 1),
 			AnchorPoint = Vector2.new(0.5, 1),
 			BackgroundColor3 = theme.palette.primary.main,
 			BorderSizePixel = 0,
-		},
+		}),
 	})
 end)
 local default = useTabsStyles

package/out/ui/packages/tabs/components/tabsOrientation.d.ts

@@ -0,0 +1,2 @@
+export type TabsOrientation = "horizontal" | "vertical";
+export declare function tabsIsVertical(orientation?: TabsOrientation): orientation is "vertical";

package/out/ui/packages/tabs/components/tabsOrientation.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function tabsIsVertical(orientation)
+	return orientation == "vertical"
+end
+return {
+	tabsIsVertical = tabsIsVertical,
+}

package/out/ui/packages/tabs/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Tabs } from "./components/Tabs";
 export { TabsProps } from "./components/Tabs";
+export { TabsOrientation, tabsIsVertical } from "./components/tabsOrientation";

package/out/ui/packages/tabs/init.luau

@@ -2,4 +2,5 @@
 local TS = _G[script]
 local exports = {}
 exports.Tabs = TS.import(script, script, "components", "Tabs").default
+exports.tabsIsVertical = TS.import(script, script, "components", "tabsOrientation").tabsIsVertical
 return exports

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

@@ -62,7 +62,7 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 			ZIndex = 50001,
 		},
 		close = {
-			Size = UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1)),
+			Size = UDim2.new(0, theme.options.constants.iconSizes.small, 0, theme.options.constants.iconSizes.small),
 			Position = UDim2.new(1, -theme.padding.calc(2), 0, theme.padding.calc(2)),
 			AnchorPoint = Vector2.new(1, 0),
 			ImageColor3 = toastColors.content,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.6",
+	"version": "0.2.0-alpha.7",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",
@@ -8,7 +8,7 @@
 		"build": "rbxtsc",
 		"watch": "rbxtsc -w",
 		"pack:check": "node scripts/pack-check.mjs",
-		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
+		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
 		"prepublishOnly": "pnpm build"
 	},
 	"keywords": [