@rbxts/uiblox 0.2.0-alpha.24 → 0.2.0-alpha.25

package/out/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { breakpointName, orientationName, resolveResponsive } from "./breakpoints";
 export { BreakpointName, OrientationName, Responsive } from "./breakpoints";
 export { useBreakpoints } from "./useBreakpoints";
+export { clearViewportObservers, observeViewport } from "./viewportObserver";
 export { useReducedMotion } from "./useReducedMotion";

package/out/hooks/init.luau

@@ -6,5 +6,8 @@ exports.breakpointName = _breakpoints.breakpointName
 exports.orientationName = _breakpoints.orientationName
 exports.resolveResponsive = _breakpoints.resolveResponsive
 exports.useBreakpoints = TS.import(script, script, "useBreakpoints").useBreakpoints
+local _viewportObserver = TS.import(script, script, "viewportObserver")
+exports.clearViewportObservers = _viewportObserver.clearViewportObservers
+exports.observeViewport = _viewportObserver.observeViewport
 exports.useReducedMotion = TS.import(script, script, "useReducedMotion").useReducedMotion
 return exports

package/out/hooks/useBreakpoints.luau

@@ -6,6 +6,7 @@ local useState = _react.useState
 local _breakpoints = TS.import(script, script.Parent, "breakpoints")
 local breakpointName = _breakpoints.breakpointName
 local orientationName = _breakpoints.orientationName
+local observeViewport = TS.import(script, script.Parent, "viewportObserver").observeViewport
 local function useBreakpoints(host)
 	local size, setSize = useState({
 		width = 0,
@@ -15,17 +16,7 @@ local function useBreakpoints(host)
 		if host == nil then
 			return nil
 		end
-		local read = function()
-			return setSize({
-				width = host.AbsoluteSize.X,
-				height = host.AbsoluteSize.Y,
-			})
-		end
-		read()
-		local connection = host:GetPropertyChangedSignal("AbsoluteSize"):Connect(read)
-		return function()
-			return connection:Disconnect()
-		end
+		return observeViewport(host, setSize)
 	end, { host })
 	return {
 		width = size.width,

package/out/hooks/viewportObserver.d.ts

@@ -0,0 +1,10 @@
+type Size = {
+    width: number;
+    height: number;
+};
+type Listener = (size: Size) => void;
+/** One AbsoluteSize connection per host; shared by all subscribers. */
+export declare function observeViewport(host: GuiObject, listener: Listener): () => void;
+/** Test helper — drop all host observers. */
+export declare function clearViewportObservers(): void;
+export {};

package/out/hooks/viewportObserver.luau

@@ -0,0 +1,75 @@
+-- Compiled with roblox-ts v3.0.0
+local hosts = {}
+--* One AbsoluteSize connection per host; shared by all subscribers. 
+local function observeViewport(host, listener)
+	local _host = host
+	local entry = hosts[_host]
+	if entry == nil then
+		entry = {
+			listeners = {},
+			size = {
+				width = host.AbsoluteSize.X,
+				height = host.AbsoluteSize.Y,
+			},
+		}
+		local _host_1 = host
+		local _entry = entry
+		hosts[_host_1] = _entry
+		local read = function()
+			local _host_2 = host
+			local current = hosts[_host_2]
+			if current == nil then
+				return nil
+			end
+			current.size = {
+				width = host.AbsoluteSize.X,
+				height = host.AbsoluteSize.Y,
+			}
+			for _, cb in current.listeners do
+				cb(current.size)
+			end
+		end
+		read()
+		entry.connection = host:GetPropertyChangedSignal("AbsoluteSize"):Connect(read)
+	end
+	local _listeners = entry.listeners
+	local _listener = listener
+	table.insert(_listeners, _listener)
+	listener(entry.size)
+	return function()
+		local _host_1 = host
+		local current = hosts[_host_1]
+		if current == nil then
+			return nil
+		end
+		local _listeners_1 = current.listeners
+		local _listener_1 = listener
+		local index = (table.find(_listeners_1, _listener_1) or 0) - 1
+		if index >= 0 then
+			table.remove(current.listeners, index + 1)
+		end
+		if #current.listeners == 0 then
+			local _result = current.connection
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+			local _host_2 = host
+			hosts[_host_2] = nil
+		end
+	end
+end
+--* Test helper — drop all host observers. 
+local function clearViewportObservers()
+	for _, entry in hosts do
+		local _result = entry.connection
+		if _result ~= nil then
+			_result:Disconnect()
+		end
+		table.clear(entry.listeners)
+	end
+	table.clear(hosts)
+end
+return {
+	observeViewport = observeViewport,
+	clearViewportObservers = clearViewportObservers,
+}

package/out/theme/interfaces/theme/Theme.d.ts

@@ -21,6 +21,21 @@ interface Theme {
             styleOverrides?: {
                 [slot: string]: object;
             };
+            variants?: {
+                [prop: string]: {
+                    [value: string]: {
+                        [slot: string]: object;
+                    };
+                };
+            };
+            compoundVariants?: Array<{
+                when: {
+                    [prop: string]: unknown;
+                };
+                styles: {
+                    [slot: string]: object;
+                };
+            }>;
         };
     };
 }

package/out/theme/styles/utilities/componentStyles.luau

@@ -4,6 +4,7 @@ local _componentTheme = TS.import(script, script.Parent, "componentTheme")
 local propsWithDefaults = _componentTheme.propsWithDefaults
 local slotsWithOverrides = _componentTheme.slotsWithOverrides
 local makeStyles = TS.import(script, script.Parent, "makeStyles").default
+local applyVariants = TS.import(script, script.Parent, "variants").applyVariants
 local componentStyles = function(name, factory)
 	return makeStyles((function(theme, props)
 		local _spec = theme.components
@@ -17,12 +18,53 @@ local componentStyles = function(name, factory)
 		end
 		local merged = propsWithDefaults(_result, props)
 		local paint = factory
-		local _exp = paint(theme, merged)
+		local slots = paint(theme, merged)
 		local _result_1 = spec
 		if _result_1 ~= nil then
-			_result_1 = _result_1.styleOverrides
+			_result_1 = _result_1.variants
 		end
-		return slotsWithOverrides(_exp, _result_1)
+		local _condition = _result_1 ~= nil
+		if not _condition then
+			local _result_2 = spec
+			if _result_2 ~= nil then
+				_result_2 = _result_2.compoundVariants
+				if _result_2 ~= nil then
+					_result_2 = #_result_2
+				end
+			end
+			local _condition_1 = _result_2
+			if _condition_1 == nil then
+				_condition_1 = 0
+			end
+			_condition = _condition_1 > 0
+		end
+		if _condition then
+			local _exp = slots
+			local _exp_1 = merged
+			local _result_2 = spec
+			if _result_2 ~= nil then
+				_result_2 = _result_2.variants
+			end
+			local _condition_1 = _result_2
+			if _condition_1 == nil then
+				_condition_1 = {}
+			end
+			local _result_3 = spec
+			if _result_3 ~= nil then
+				_result_3 = _result_3.compoundVariants
+			end
+			local _condition_2 = _result_3
+			if _condition_2 == nil then
+				_condition_2 = {}
+			end
+			slots = applyVariants(_exp, _exp_1, _condition_1, _condition_2)
+		end
+		local _exp = slots
+		local _result_2 = spec
+		if _result_2 ~= nil then
+			_result_2 = _result_2.styleOverrides
+		end
+		return slotsWithOverrides(_exp, _result_2)
 	end))
 end
 local default = componentStyles

package/out/theme/styles/utilities/componentTheme.d.ts

@@ -5,6 +5,21 @@ export interface ComponentSpec {
     styleOverrides?: {
         [slot: string]: object;
     };
+    variants?: {
+        [prop: string]: {
+            [value: string]: {
+                [slot: string]: object;
+            };
+        };
+    };
+    compoundVariants?: Array<{
+        when: {
+            [prop: string]: unknown;
+        };
+        styles: {
+            [slot: string]: object;
+        };
+    }>;
 }
 export declare function propsWithDefaults(defaults: {
     [key: string]: unknown;

package/out/theme/styles/utilities/index.d.ts

@@ -4,4 +4,6 @@ export { default as classNames, cx } from "./classNames";
 export { applyVariants, CompoundVariant } from "./variants";
 export { default as componentStyles } from "./componentStyles";
 export { resolveResponsive, Responsive } from "../../../hooks/breakpoints";
+export { clearStyleCaches, createStyleCache, styleDepsKey } from "./styleCache";
+export { resolveSx, resolvePaletteToken, PaletteToken, ResolvedSx, SxColor, SxInput } from "./resolveSx";
 export { interactionStyle, InteractionSlots, InteractionState, resolveStyle, StyleSelectorKey, StyleState, StyleWithSelectors, } from "./resolveStyle";

package/out/theme/styles/utilities/init.luau

@@ -9,6 +9,13 @@ exports.cx = _classNames.cx
 exports.applyVariants = TS.import(script, script, "variants").applyVariants
 exports.componentStyles = TS.import(script, script, "componentStyles").default
 exports.resolveResponsive = TS.import(script, script.Parent.Parent.Parent, "hooks", "breakpoints").resolveResponsive
+local _styleCache = TS.import(script, script, "styleCache")
+exports.clearStyleCaches = _styleCache.clearStyleCaches
+exports.createStyleCache = _styleCache.createStyleCache
+exports.styleDepsKey = _styleCache.styleDepsKey
+local _resolveSx = TS.import(script, script, "resolveSx")
+exports.resolveSx = _resolveSx.resolveSx
+exports.resolvePaletteToken = _resolveSx.resolvePaletteToken
 local _resolveStyle = TS.import(script, script, "resolveStyle")
 exports.interactionStyle = _resolveStyle.interactionStyle
 exports.resolveStyle = _resolveStyle.resolveStyle

package/out/theme/styles/utilities/resolveStyle.d.ts

@@ -1,23 +1,31 @@
-export type StyleSelectorKey = "_hover" | "_pressed" | "_focus" | "_disabled" | "_selected" | "_checked" | "_first" | "_last";
+export type StyleSelectorKey = "_hover" | "_pressed" | "_focus" | "_focusVisible" | "_disabled" | "_selected" | "_checked" | "_loading" | "_first" | "_last" | "_odd" | "_even";
 export interface StyleState {
     hover?: boolean;
     pressed?: boolean;
     focused?: boolean;
+    focusVisible?: boolean;
     disabled?: boolean;
     selected?: boolean;
     checked?: boolean;
+    loading?: boolean;
     first?: boolean;
     last?: boolean;
+    odd?: boolean;
+    even?: boolean;
 }
 export type StyleWithSelectors<T extends object = object> = T & {
     _hover?: Partial<T>;
     _pressed?: Partial<T>;
     _focus?: Partial<T>;
+    _focusVisible?: Partial<T>;
     _disabled?: Partial<T>;
     _selected?: Partial<T>;
     _checked?: Partial<T>;
+    _loading?: Partial<T>;
     _first?: Partial<T>;
     _last?: Partial<T>;
+    _odd?: Partial<T>;
+    _even?: Partial<T>;
 };
 export interface InteractionSlots<T extends object = object> {
     hover?: T;
@@ -26,7 +34,7 @@ export interface InteractionSlots<T extends object = object> {
     disabled?: T;
 }
 export type InteractionState = Pick<StyleState, "hover" | "pressed" | "focused" | "disabled">;
-/** Peels `_hover` / `_pressed` / `_focus` / … and merges active ones onto the Instance props. */
+/** Peels selector keys and merges active ones onto the Instance props. */
 export declare function resolveStyle<T extends object>(style: StyleWithSelectors<T>, state?: StyleState): T;
 /** Prefer `resolveStyle` with `_hover` keys. Kept for existing call sites. */
 export declare function interactionStyle<T extends object>(base: T, slots: InteractionSlots<T>, state: InteractionState): T;

package/out/theme/styles/utilities/resolveStyle.luau

@@ -1,17 +1,21 @@
 -- Compiled with roblox-ts v3.0.0
---* Order matters: later keys win. Structural first, then interaction; `_disabled` last. 
-local SELECTORS = { { "_first", "first" }, { "_last", "last" }, { "_selected", "selected" }, { "_checked", "checked" }, { "_hover", "hover" }, { "_pressed", "pressed" }, { "_focus", "focused" }, { "_disabled", "disabled" } }
+--* Order matters: later keys win. Structural → selection → interaction; `_disabled` last. 
+local SELECTORS = { { "_first", "first" }, { "_last", "last" }, { "_odd", "odd" }, { "_even", "even" }, { "_selected", "selected" }, { "_checked", "checked" }, { "_loading", "loading" }, { "_hover", "hover" }, { "_pressed", "pressed" }, { "_focus", "focused" }, { "_focusVisible", "focusVisible" }, { "_disabled", "disabled" } }
 local SELECTOR_FLAGS = {
 	_hover = true,
 	_pressed = true,
 	_focus = true,
+	_focusVisible = true,
 	_selected = true,
 	_checked = true,
+	_loading = true,
 	_first = true,
 	_last = true,
+	_odd = true,
+	_even = true,
 	_disabled = true,
 }
---* Peels `_hover` / `_pressed` / `_focus` / … and merges active ones onto the Instance props. 
+--* Peels selector keys and merges active ones onto the Instance props. 
 local function resolveStyle(style, state)
 	if state == nil then
 		state = {}

package/out/theme/styles/utilities/resolveSx.d.ts

@@ -0,0 +1,110 @@
+/** Dot-path into `theme.palette` (typed for common roles). */
+export type PaletteToken = "surface.canvas" | "surface.paper" | "surface.elevated" | "surface.overlay" | "surface.input" | "primary.main" | "primary.on" | "primary.hover" | "primary.pressed" | "accent.main" | "accent.on" | "accent.hover" | "accent.pressed" | "text.primary" | "text.secondary" | "text.disabled" | "text.inverse" | "text.link" | "border" | "divider" | "focus" | "action.hover" | "action.pressed" | "action.selected" | "action.disabled" | "status.success.main" | "status.success.on" | "status.success.surface" | "status.success.border" | "status.warning.main" | "status.warning.on" | "status.warning.surface" | "status.warning.border" | "status.error.main" | "status.error.on" | "status.error.surface" | "status.error.border" | "status.info.main" | "status.info.on" | "status.info.surface" | "status.info.border" | "backdrop" | "shadow";
+export declare function resolvePaletteToken(palette: object, token: PaletteToken | Color3): Color3;
+/** Matches `hooks/breakpoints` thresholds. Kept local so Node style checks need no path aliases. */
+type Responsive<T> = T | {
+    phone?: T;
+    tablet?: T;
+    desktop?: T;
+};
+type PadInput = number | {
+    x?: number;
+    y?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+interface SxTheme {
+    spacing: {
+        calc: (multiple: number) => number;
+    };
+    palette: object;
+    typography: {
+        fontFamilies: {
+            [family: string]: Enum.Font;
+        };
+        variants: {
+            [name: string]: {
+                size: number;
+                family: string;
+            };
+        };
+    };
+}
+export type SxColor = PaletteToken | Color3;
+/** CSS-like shorthands + pass-through Instance props. No CSS string parser. */
+export type SxInput = {
+    width?: Responsive<number | UDim | UDim2>;
+    height?: Responsive<number | UDim | UDim2>;
+    w?: Responsive<number | UDim | UDim2>;
+    h?: Responsive<number | UDim | UDim2>;
+    size?: Responsive<UDim2 | {
+        width?: number | UDim;
+        height?: number | UDim;
+    }>;
+    x?: Responsive<number | UDim>;
+    y?: Responsive<number | UDim>;
+    position?: Responsive<UDim2>;
+    pos?: Responsive<UDim2>;
+    anchor?: Responsive<Vector2 | number | [number, number]>;
+    p?: Responsive<number>;
+    px?: Responsive<number>;
+    py?: Responsive<number>;
+    pt?: Responsive<number>;
+    pr?: Responsive<number>;
+    pb?: Responsive<number>;
+    pl?: Responsive<number>;
+    padding?: Responsive<PadInput>;
+    gap?: Responsive<number>;
+    bgcolor?: Responsive<SxColor>;
+    bg?: Responsive<SxColor>;
+    backgroundColor?: Responsive<SxColor>;
+    color?: Responsive<SxColor>;
+    borderColor?: Responsive<SxColor>;
+    opacity?: Responsive<number>;
+    transparency?: Responsive<number>;
+    border?: Responsive<number>;
+    borderWidth?: Responsive<number>;
+    radius?: Responsive<number>;
+    typography?: Responsive<string>;
+    fontSize?: Responsive<number>;
+    font?: Responsive<Enum.Font | string>;
+    visible?: Responsive<boolean>;
+    zIndex?: Responsive<number>;
+    z?: Responsive<number>;
+    _hover?: SxInput;
+    _pressed?: SxInput;
+    _focus?: SxInput;
+    _focusVisible?: SxInput;
+    _disabled?: SxInput;
+    _selected?: SxInput;
+    _checked?: SxInput;
+    _loading?: SxInput;
+    _first?: SxInput;
+    _last?: SxInput;
+    _odd?: SxInput;
+    _even?: SxInput;
+    [key: string]: unknown;
+};
+export interface ResolvedSx {
+    root: {
+        [key: string]: unknown;
+    };
+    padding?: {
+        PaddingTop: UDim;
+        PaddingRight: UDim;
+        PaddingBottom: UDim;
+        PaddingLeft: UDim;
+    };
+    corner?: {
+        CornerRadius: UDim;
+    };
+    gap?: number;
+}
+/**
+ * Maps sx shorthands / tokens → Instance props (+ UIPadding / UICorner / gap helpers).
+ * Pass-through keys (BackgroundColor3, _hover, …) stay on `root` for `resolveStyle`.
+ */
+export declare function resolveSx(theme: SxTheme, sx?: SxInput, width?: number): ResolvedSx;
+export {};

package/out/theme/styles/utilities/resolveSx.luau

@@ -0,0 +1,479 @@
+-- Compiled with roblox-ts v3.0.0
+--* Dot-path into `theme.palette` (typed for common roles). 
+local function resolvePaletteToken(palette, token)
+	local _token = token
+	if not (type(_token) == "string") then
+		return token
+	end
+	local parts = string.split(token, ".")
+	local cursor = palette
+	for _, part in parts do
+		local _condition = cursor == nil
+		if not _condition then
+			local _cursor = cursor
+			_condition = typeof(_cursor) ~= "table"
+		end
+		if _condition then
+			return Color3.new(0, 0, 0)
+		end
+		cursor = cursor[part]
+	end
+	local _cursor = cursor
+	if typeof(_cursor) == "Color3" then
+		return cursor
+	end
+	return Color3.new(0, 0, 0)
+end
+--* Matches `hooks/breakpoints` thresholds. Kept local so Node style checks need no path aliases. 
+local function resolveResponsive(value, width)
+	local _condition = value == nil
+	if not _condition then
+		local _value = value
+		_condition = typeof(_value) ~= "table"
+	end
+	if _condition then
+		return value
+	end
+	local record = value
+	local size = if width == width and width < math.huge and width > 0 then width else 0
+	local name = if size < 600 then "phone" elseif size < 960 then "tablet" else "desktop"
+	if name == "desktop" then
+		local _condition_1 = record.desktop
+		if _condition_1 == nil then
+			_condition_1 = record.tablet
+			if _condition_1 == nil then
+				_condition_1 = record.phone
+			end
+		end
+		return _condition_1
+	end
+	if name == "tablet" then
+		local _condition_1 = record.tablet
+		if _condition_1 == nil then
+			_condition_1 = record.phone
+		end
+		return _condition_1
+	end
+	return record.phone
+end
+local SELECTORS = {
+	_hover = true,
+	_pressed = true,
+	_focus = true,
+	_focusVisible = true,
+	_disabled = true,
+	_selected = true,
+	_checked = true,
+	_loading = true,
+	_first = true,
+	_last = true,
+	_odd = true,
+	_even = true,
+}
+local SHORTHAND = {
+	width = true,
+	height = true,
+	w = true,
+	h = true,
+	size = true,
+	x = true,
+	y = true,
+	position = true,
+	pos = true,
+	anchor = true,
+	p = true,
+	px = true,
+	py = true,
+	pt = true,
+	pr = true,
+	pb = true,
+	pl = true,
+	padding = true,
+	gap = true,
+	bgcolor = true,
+	bg = true,
+	backgroundColor = true,
+	color = true,
+	borderColor = true,
+	opacity = true,
+	transparency = true,
+	border = true,
+	borderWidth = true,
+	radius = true,
+	typography = true,
+	fontSize = true,
+	font = true,
+	visible = true,
+	zIndex = true,
+	z = true,
+}
+--* CSS-like shorthands + pass-through Instance props. No CSS string parser. 
+local function pick(value, width)
+	if value == nil then
+		return nil
+	end
+	if width ~= nil then
+		return resolveResponsive(value, width)
+	end
+	local _value = value
+	if typeof(_value) ~= "table" then
+		return value
+	end
+	local record = value
+	if record.phone ~= nil or record.tablet ~= nil or record.desktop ~= nil then
+		local _condition = record.desktop
+		if _condition == nil then
+			_condition = record.tablet
+			if _condition == nil then
+				_condition = record.phone
+			end
+		end
+		return _condition
+	end
+	return value
+end
+local function asUDim(value)
+	local _value = value
+	return if type(_value) == "number" then UDim.new(0, value) else value
+end
+local function sizeAxis(value, axis)
+	if value == nil then
+		return nil
+	end
+	local _value = value
+	if type(_value) == "number" then
+		return UDim.new(0, value)
+	end
+	local _value_1 = value
+	if typeof(_value_1) == "UDim" then
+		return value
+	end
+	return if axis == "X" then value.X else value.Y
+end
+local function padSides(padding)
+	if padding == nil then
+		return {
+			top = 0,
+			right = 0,
+			bottom = 0,
+			left = 0,
+		}
+	end
+	local _padding = padding
+	if type(_padding) == "number" then
+		return {
+			top = padding,
+			right = padding,
+			bottom = padding,
+			left = padding,
+		}
+	end
+	local _condition = padding.x
+	if _condition == nil then
+		_condition = 0
+	end
+	local x = _condition
+	local _condition_1 = padding.y
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local y = _condition_1
+	local _object = {}
+	local _left = "top"
+	local _condition_2 = padding.top
+	if _condition_2 == nil then
+		_condition_2 = y
+	end
+	_object[_left] = _condition_2
+	local _left_1 = "right"
+	local _condition_3 = padding.right
+	if _condition_3 == nil then
+		_condition_3 = x
+	end
+	_object[_left_1] = _condition_3
+	local _left_2 = "bottom"
+	local _condition_4 = padding.bottom
+	if _condition_4 == nil then
+		_condition_4 = y
+	end
+	_object[_left_2] = _condition_4
+	local _left_3 = "left"
+	local _condition_5 = padding.left
+	if _condition_5 == nil then
+		_condition_5 = x
+	end
+	_object[_left_3] = _condition_5
+	return _object
+end
+local function colorOf(theme, value)
+	if value == nil then
+		return nil
+	end
+	return resolvePaletteToken(theme.palette, value)
+end
+--[[
+	*
+	 * Maps sx shorthands / tokens → Instance props (+ UIPadding / UICorner / gap helpers).
+	 * Pass-through keys (BackgroundColor3, _hover, …) stay on `root` for `resolveStyle`.
+	 
+]]
+local function resolveSx(theme, sx, width)
+	if sx == nil then
+		return {
+			root = {},
+		}
+	end
+	local root = {}
+	local pad
+	local radius
+	local gap
+	local _condition = sx.width
+	if _condition == nil then
+		_condition = sx.w
+	end
+	local widthVal = pick(_condition, width)
+	local _condition_1 = sx.height
+	if _condition_1 == nil then
+		_condition_1 = sx.h
+	end
+	local heightVal = pick(_condition_1, width)
+	local sizeVal = pick(sx.size, width)
+	local sizeX = sizeAxis(widthVal, "X")
+	local sizeY = sizeAxis(heightVal, "Y")
+	if sizeVal ~= nil then
+		if typeof(sizeVal) == "UDim2" then
+			sizeX = sizeX or sizeVal.X
+			sizeY = sizeY or sizeVal.Y
+		else
+			local record = sizeVal
+			sizeX = sizeX or sizeAxis(record.width, "X")
+			sizeY = sizeY or sizeAxis(record.height, "Y")
+		end
+	end
+	if sizeX ~= nil or sizeY ~= nil then
+		local _result = sizeX
+		if _result ~= nil then
+			_result = _result.Scale
+		end
+		local _condition_2 = _result
+		if _condition_2 == nil then
+			_condition_2 = 0
+		end
+		local _result_1 = sizeX
+		if _result_1 ~= nil then
+			_result_1 = _result_1.Offset
+		end
+		local _condition_3 = _result_1
+		if _condition_3 == nil then
+			_condition_3 = 0
+		end
+		local _result_2 = sizeY
+		if _result_2 ~= nil then
+			_result_2 = _result_2.Scale
+		end
+		local _condition_4 = _result_2
+		if _condition_4 == nil then
+			_condition_4 = 0
+		end
+		local _result_3 = sizeY
+		if _result_3 ~= nil then
+			_result_3 = _result_3.Offset
+		end
+		local _condition_5 = _result_3
+		if _condition_5 == nil then
+			_condition_5 = 0
+		end
+		root.Size = UDim2.new(_condition_2, _condition_3, _condition_4, _condition_5)
+	end
+	local position = pick(sx.position or sx.pos, width)
+	local x = pick(sx.x, width)
+	local y = pick(sx.y, width)
+	if position ~= nil then
+		root.Position = position
+	elseif x ~= nil or y ~= nil then
+		local xU = if x ~= nil then asUDim(x) else UDim.new(0, 0)
+		local yU = if y ~= nil then asUDim(y) else UDim.new(0, 0)
+		root.Position = UDim2.new(xU.Scale, xU.Offset, yU.Scale, yU.Offset)
+	end
+	local anchor = pick(sx.anchor, width)
+	if anchor ~= nil then
+		if type(anchor) == "number" then
+			root.AnchorPoint = Vector2.new(anchor, anchor)
+		elseif typeof(anchor) == "Vector2" then
+			root.AnchorPoint = anchor
+		else
+			local pair = anchor
+			root.AnchorPoint = Vector2.new(pair[1], pair[2])
+		end
+	end
+	local padding = pick(sx.padding, width)
+	if padding ~= nil then
+		pad = padSides(padding)
+	end
+	local p = pick(sx.p, width)
+	local px = pick(sx.px, width)
+	local py = pick(sx.py, width)
+	local pt = pick(sx.pt, width)
+	local pr = pick(sx.pr, width)
+	local pb = pick(sx.pb, width)
+	local pl = pick(sx.pl, width)
+	if p ~= nil or px ~= nil or py ~= nil or pt ~= nil or pr ~= nil or pb ~= nil or pl ~= nil then
+		local base = pad or {
+			top = 0,
+			right = 0,
+			bottom = 0,
+			left = 0,
+		}
+		local _condition_2 = p
+		if _condition_2 == nil then
+			_condition_2 = 0
+		end
+		local uniform = _condition_2
+		local _object = {}
+		local _left = "top"
+		local _condition_3 = pt
+		if _condition_3 == nil then
+			_condition_3 = py
+			if _condition_3 == nil then
+				_condition_3 = (if p ~= nil then uniform else base.top)
+			end
+		end
+		_object[_left] = _condition_3
+		local _left_1 = "right"
+		local _condition_4 = pr
+		if _condition_4 == nil then
+			_condition_4 = px
+			if _condition_4 == nil then
+				_condition_4 = (if p ~= nil then uniform else base.right)
+			end
+		end
+		_object[_left_1] = _condition_4
+		local _left_2 = "bottom"
+		local _condition_5 = pb
+		if _condition_5 == nil then
+			_condition_5 = py
+			if _condition_5 == nil then
+				_condition_5 = (if p ~= nil then uniform else base.bottom)
+			end
+		end
+		_object[_left_2] = _condition_5
+		local _left_3 = "left"
+		local _condition_6 = pl
+		if _condition_6 == nil then
+			_condition_6 = px
+			if _condition_6 == nil then
+				_condition_6 = (if p ~= nil then uniform else base.left)
+			end
+		end
+		_object[_left_3] = _condition_6
+		pad = _object
+	end
+	local gapVal = pick(sx.gap, width)
+	if gapVal ~= nil then
+		gap = theme.spacing.calc(gapVal)
+	end
+	local bg = pick(sx.bgcolor or sx.bg or sx.backgroundColor, width)
+	local bgColor = colorOf(theme, bg)
+	if bgColor ~= nil then
+		root.BackgroundColor3 = bgColor
+		if root.BackgroundTransparency == nil then
+			root.BackgroundTransparency = 0
+		end
+	end
+	local textColor = colorOf(theme, pick(sx.color, width))
+	if textColor ~= nil then
+		root.TextColor3 = textColor
+	end
+	local borderColor = colorOf(theme, pick(sx.borderColor, width))
+	if borderColor ~= nil then
+		root.BorderColor3 = borderColor
+	end
+	local opacity = pick(sx.opacity, width)
+	if opacity ~= nil then
+		root.BackgroundTransparency = 1 - opacity
+	end
+	local transparency = pick(sx.transparency, width)
+	if transparency ~= nil then
+		root.BackgroundTransparency = transparency
+	end
+	local _condition_2 = sx.border
+	if _condition_2 == nil then
+		_condition_2 = sx.borderWidth
+	end
+	local border = pick(_condition_2, width)
+	if border ~= nil then
+		root.BorderSizePixel = border
+	end
+	local radiusVal = pick(sx.radius, width)
+	if radiusVal ~= nil then
+		radius = radiusVal
+	end
+	local typography = pick(sx.typography, width)
+	if typography ~= nil then
+		local variant = theme.typography.variants[typography]
+		if variant ~= nil then
+			root.TextSize = variant.size
+			root.Font = theme.typography.fontFamilies[variant.family]
+		end
+	end
+	local fontSize = pick(sx.fontSize, width)
+	if fontSize ~= nil then
+		root.TextSize = fontSize
+	end
+	local font = pick(sx.font, width)
+	if font ~= nil then
+		if typeof(font) == "EnumItem" then
+			root.Font = font
+		else
+			root.Font = theme.typography.fontFamilies[font]
+		end
+	end
+	local visible = pick(sx.visible, width)
+	if visible ~= nil then
+		root.Visible = visible
+	end
+	local _condition_3 = sx.zIndex
+	if _condition_3 == nil then
+		_condition_3 = sx.z
+	end
+	local zIndex = pick(_condition_3, width)
+	if zIndex ~= nil then
+		root.ZIndex = zIndex
+	end
+	for key, raw in pairs(sx) do
+		local name = key
+		if SHORTHAND[name] == true then
+			continue
+		end
+		if SELECTORS[name] == true then
+			local nested = resolveSx(theme, raw, width)
+			root[name] = nested.root
+			continue
+		end
+		root[name] = pick(raw, width)
+	end
+	local resolved = {
+		root = root,
+	}
+	if pad ~= nil then
+		resolved.padding = {
+			PaddingTop = UDim.new(0, theme.spacing.calc(pad.top)),
+			PaddingRight = UDim.new(0, theme.spacing.calc(pad.right)),
+			PaddingBottom = UDim.new(0, theme.spacing.calc(pad.bottom)),
+			PaddingLeft = UDim.new(0, theme.spacing.calc(pad.left)),
+		}
+	end
+	if radius ~= nil then
+		resolved.corner = {
+			CornerRadius = UDim.new(0, radius),
+		}
+	end
+	if gap ~= nil then
+		resolved.gap = gap
+	end
+	return resolved
+end
+return {
+	resolvePaletteToken = resolvePaletteToken,
+	resolveSx = resolveSx,
+}

package/out/theme/styles/utilities/styleCache.d.ts

@@ -1,2 +1,4 @@
 export declare function styleDepsKey(props: object | undefined): string;
 export declare function createStyleCache<T extends defined>(): (theme: object, key: string, create: () => T) => T;
+/** Drop all makeStyles memo buckets (theme hot-reload / tests). */
+export declare function clearStyleCaches(): void;

package/out/theme/styles/utilities/styleCache.luau

@@ -9,6 +9,7 @@ local KEYED = {
 	CFrame = true,
 	BrickColor = true,
 }
+local caches = {}
 local function styleDepsKey(props)
 	if props == nil then
 		return ""
@@ -40,6 +41,7 @@ local function styleDepsKey(props)
 end
 local function createStyleCache()
 	local byTheme = {}
+	table.insert(caches, byTheme)
 	return function(theme, key, create)
 		local _theme = theme
 		local bucket = byTheme[_theme]
@@ -62,7 +64,14 @@ local function createStyleCache()
 		return value
 	end
 end
+--* Drop all makeStyles memo buckets (theme hot-reload / tests). 
+local function clearStyleCaches()
+	for _, cache in caches do
+		table.clear(cache)
+	end
+end
 return {
 	styleDepsKey = styleDepsKey,
 	createStyleCache = createStyleCache,
+	clearStyleCaches = clearStyleCaches,
 }

package/out/ui/packages/stateMatrix.luau

@@ -1976,217 +1976,245 @@ local function miscRows()
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("Container", "default", {
-		variant = "lg",
-	})
+	local _array_41 = pair("StyleSx", "default")
 	local _Length_40 = #_array_41
 	table.move(_array_41, 1, _Length_40, _length + 1, _array)
 	_length += _Length_40
-	local _array_42 = pair("Container", "sm", {
-		variant = "sm",
+	local _array_42 = pair("StyleSx", "hover", {
+		pointer = "hover",
 	})
 	local _Length_41 = #_array_42
 	table.move(_array_42, 1, _Length_41, _length + 1, _array)
 	_length += _Length_41
-	local _array_43 = pair("Container", "fluid", {
-		variant = "false",
+	local _array_43 = pair("StyleSx", "narrow", {
+		width = NARROW,
 	})
 	local _Length_42 = #_array_43
 	table.move(_array_43, 1, _Length_42, _length + 1, _array)
 	_length += _Length_42
-	local _array_44 = pair("Backdrop", "default")
+	local _array_44 = pair("StyleSx", "disabled", {
+		disabled = true,
+	})
 	local _Length_43 = #_array_44
 	table.move(_array_44, 1, _Length_43, _length + 1, _array)
 	_length += _Length_43
-	local _array_45 = pair("Backdrop", "invisible", {
-		variant = "invisible",
+	local _array_45 = pair("StyleSx", "loading", {
+		loading = true,
 	})
 	local _Length_44 = #_array_45
 	table.move(_array_45, 1, _Length_44, _length + 1, _array)
 	_length += _Length_44
-	local _array_46 = pair("Backdrop", "closed", {
-		open = false,
+	local _array_46 = pair("Container", "default", {
+		variant = "lg",
 	})
 	local _Length_45 = #_array_46
 	table.move(_array_46, 1, _Length_45, _length + 1, _array)
 	_length += _Length_45
-	local _array_47 = pair("Divider", "horizontal", {
-		variant = "horizontal",
+	local _array_47 = pair("Container", "sm", {
+		variant = "sm",
 	})
 	local _Length_46 = #_array_47
 	table.move(_array_47, 1, _Length_46, _length + 1, _array)
 	_length += _Length_46
-	local _array_48 = pair("Divider", "vertical", {
-		variant = "vertical",
+	local _array_48 = pair("Container", "fluid", {
+		variant = "false",
 	})
 	local _Length_47 = #_array_48
 	table.move(_array_48, 1, _Length_47, _length + 1, _array)
 	_length += _Length_47
-	local _array_49 = pair("Divider", "label", {
-		text = "Or",
-	})
+	local _array_49 = pair("Backdrop", "default")
 	local _Length_48 = #_array_49
 	table.move(_array_49, 1, _Length_48, _length + 1, _array)
 	_length += _Length_48
-	local _array_50 = pair("ImageList", "default")
+	local _array_50 = pair("Backdrop", "invisible", {
+		variant = "invisible",
+	})
 	local _Length_49 = #_array_50
 	table.move(_array_50, 1, _Length_49, _length + 1, _array)
 	_length += _Length_49
-	local _array_51 = pair("ImageList", "dense", {
-		size = "small",
+	local _array_51 = pair("Backdrop", "closed", {
+		open = false,
 	})
 	local _Length_50 = #_array_51
 	table.move(_array_51, 1, _Length_50, _length + 1, _array)
 	_length += _Length_50
-	local _array_52 = pair("ImageList", "wide", {
-		size = "large",
+	local _array_52 = pair("Divider", "horizontal", {
+		variant = "horizontal",
 	})
 	local _Length_51 = #_array_52
 	table.move(_array_52, 1, _Length_51, _length + 1, _array)
 	_length += _Length_51
-	local _array_53 = pair("ImageList", "titled", {
-		text = "Cove",
+	local _array_53 = pair("Divider", "vertical", {
+		variant = "vertical",
 	})
 	local _Length_52 = #_array_53
 	table.move(_array_53, 1, _Length_52, _length + 1, _array)
 	_length += _Length_52
-	local _array_54 = pair("ImageList", "untitled", {
-		text = "",
+	local _array_54 = pair("Divider", "label", {
+		text = "Or",
 	})
 	local _Length_53 = #_array_54
 	table.move(_array_54, 1, _Length_53, _length + 1, _array)
 	_length += _Length_53
-	local _array_55 = pair("SpeedDial", "closed", {
-		open = false,
-	})
+	local _array_55 = pair("ImageList", "default")
 	local _Length_54 = #_array_55
 	table.move(_array_55, 1, _Length_54, _length + 1, _array)
 	_length += _Length_54
-	local _array_56 = pair("SpeedDial", "open", {
-		open = true,
+	local _array_56 = pair("ImageList", "dense", {
+		size = "small",
 	})
 	local _Length_55 = #_array_56
 	table.move(_array_56, 1, _Length_55, _length + 1, _array)
 	_length += _Length_55
-	local _array_57 = pair("SpeedDial", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_57 = pair("ImageList", "wide", {
+		size = "large",
 	})
 	local _Length_56 = #_array_57
 	table.move(_array_57, 1, _Length_56, _length + 1, _array)
 	_length += _Length_56
-	local _array_58 = pair("SpeedDial", "down", {
-		open = true,
-		variant = "down",
+	local _array_58 = pair("ImageList", "titled", {
+		text = "Cove",
 	})
 	local _Length_57 = #_array_58
 	table.move(_array_58, 1, _Length_57, _length + 1, _array)
 	_length += _Length_57
-	local _array_59 = pair("FormLabel", "default", {
-		text = "Email",
+	local _array_59 = pair("ImageList", "untitled", {
+		text = "",
 	})
 	local _Length_58 = #_array_59
 	table.move(_array_59, 1, _Length_58, _length + 1, _array)
 	_length += _Length_58
-	local _array_60 = pair("FormLabel", "required", {
-		text = "Email",
-		value = true,
+	local _array_60 = pair("SpeedDial", "closed", {
+		open = false,
 	})
 	local _Length_59 = #_array_60
 	table.move(_array_60, 1, _Length_59, _length + 1, _array)
 	_length += _Length_59
-	local _array_61 = pair("FormLabel", "error", {
-		text = "Email",
-		hasError = true,
+	local _array_61 = pair("SpeedDial", "open", {
+		open = true,
 	})
 	local _Length_60 = #_array_61
 	table.move(_array_61, 1, _Length_60, _length + 1, _array)
 	_length += _Length_60
-	local _array_62 = pair("FormHelperText", "default", {
-		text = "We never share this",
+	local _array_62 = pair("SpeedDial", "disabled", {
+		open = false,
+		disabled = true,
 	})
 	local _Length_61 = #_array_62
 	table.move(_array_62, 1, _Length_61, _length + 1, _array)
 	_length += _Length_61
-	local _array_63 = pair("FormHelperText", "error", {
-		text = "Required",
-		hasError = true,
+	local _array_63 = pair("SpeedDial", "down", {
+		open = true,
+		variant = "down",
 	})
 	local _Length_62 = #_array_63
 	table.move(_array_63, 1, _Length_62, _length + 1, _array)
 	_length += _Length_62
-	local _array_64 = pair("Menu", "closed", {
-		open = false,
+	local _array_64 = pair("FormLabel", "default", {
+		text = "Email",
 	})
 	local _Length_63 = #_array_64
 	table.move(_array_64, 1, _Length_63, _length + 1, _array)
 	_length += _Length_63
-	local _array_65 = pair("Menu", "open", {
-		open = true,
+	local _array_65 = pair("FormLabel", "required", {
+		text = "Email",
+		value = true,
 	})
 	local _Length_64 = #_array_65
 	table.move(_array_65, 1, _Length_64, _length + 1, _array)
 	_length += _Length_64
-	local _array_66 = pair("Menu", "empty", {
-		open = true,
-		options = {},
+	local _array_66 = pair("FormLabel", "error", {
+		text = "Email",
+		hasError = true,
 	})
 	local _Length_65 = #_array_66
 	table.move(_array_66, 1, _Length_65, _length + 1, _array)
 	_length += _Length_65
-	local _array_67 = pair("Menu", "dense", {
-		open = true,
-		variant = "dense",
+	local _array_67 = pair("FormHelperText", "default", {
+		text = "We never share this",
 	})
 	local _Length_66 = #_array_67
 	table.move(_array_67, 1, _Length_66, _length + 1, _array)
 	_length += _Length_66
-	local _array_68 = pair("Menu", "selected", {
-		open = true,
-		selected = "a",
+	local _array_68 = pair("FormHelperText", "error", {
+		text = "Required",
+		hasError = true,
 	})
 	local _Length_67 = #_array_68
 	table.move(_array_68, 1, _Length_67, _length + 1, _array)
 	_length += _Length_67
-	local _array_69 = pair("Markdown", "default", {
-		text = "# Title\n\nHello **world**",
+	local _array_69 = pair("Menu", "closed", {
+		open = false,
 	})
 	local _Length_68 = #_array_69
 	table.move(_array_69, 1, _Length_68, _length + 1, _array)
 	_length += _Length_68
-	local _array_70 = pair("Markdown", "empty", {
-		text = "",
+	local _array_70 = pair("Menu", "open", {
+		open = true,
 	})
 	local _Length_69 = #_array_70
 	table.move(_array_70, 1, _Length_69, _length + 1, _array)
 	_length += _Length_69
-	local _array_71 = pair("MarkdownEditor", "split", {
-		text = "# Title",
-		variant = "split",
+	local _array_71 = pair("Menu", "empty", {
+		open = true,
+		options = {},
 	})
 	local _Length_70 = #_array_71
 	table.move(_array_71, 1, _Length_70, _length + 1, _array)
 	_length += _Length_70
-	local _array_72 = pair("MarkdownEditor", "edit", {
-		text = "# Title",
-		variant = "edit",
+	local _array_72 = pair("Menu", "dense", {
+		open = true,
+		variant = "dense",
 	})
 	local _Length_71 = #_array_72
 	table.move(_array_72, 1, _Length_71, _length + 1, _array)
 	_length += _Length_71
-	local _array_73 = pair("MarkdownEditor", "preview", {
-		text = "# Title",
-		variant = "preview",
+	local _array_73 = pair("Menu", "selected", {
+		open = true,
+		selected = "a",
 	})
 	local _Length_72 = #_array_73
 	table.move(_array_73, 1, _Length_72, _length + 1, _array)
 	_length += _Length_72
-	local _array_74 = pair("MarkdownEditor", "density-compact", {
+	local _array_74 = pair("Markdown", "default", {
+		text = "# Title\n\nHello **world**",
+	})
+	local _Length_73 = #_array_74
+	table.move(_array_74, 1, _Length_73, _length + 1, _array)
+	_length += _Length_73
+	local _array_75 = pair("Markdown", "empty", {
+		text = "",
+	})
+	local _Length_74 = #_array_75
+	table.move(_array_75, 1, _Length_74, _length + 1, _array)
+	_length += _Length_74
+	local _array_76 = pair("MarkdownEditor", "split", {
+		text = "# Title",
+		variant = "split",
+	})
+	local _Length_75 = #_array_76
+	table.move(_array_76, 1, _Length_75, _length + 1, _array)
+	_length += _Length_75
+	local _array_77 = pair("MarkdownEditor", "edit", {
+		text = "# Title",
+		variant = "edit",
+	})
+	local _Length_76 = #_array_77
+	table.move(_array_77, 1, _Length_76, _length + 1, _array)
+	_length += _Length_76
+	local _array_78 = pair("MarkdownEditor", "preview", {
+		text = "# Title",
+		variant = "preview",
+	})
+	local _Length_77 = #_array_78
+	table.move(_array_78, 1, _Length_77, _length + 1, _array)
+	_length += _Length_77
+	local _array_79 = pair("MarkdownEditor", "density-compact", {
 		text = "# Title",
 		density = "compact",
 		variant = "split",
 	})
-	table.move(_array_74, 1, #_array_74, _length + 1, _array)
+	table.move(_array_79, 1, #_array_79, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.24",
+	"version": "0.2.0-alpha.25",
 	"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/slider.check.mjs && node --experimental-strip-types scripts/input.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-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/imageList.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/flex-item.check.mjs && node --experimental-strip-types scripts/grid.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/markdown.check.mjs && node --experimental-strip-types scripts/switch.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",
+		"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/resolve-sx.check.mjs && node --experimental-strip-types scripts/style-system.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/slider.check.mjs && node --experimental-strip-types scripts/input.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/viewport-observer.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-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/imageList.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/flex-item.check.mjs && node --experimental-strip-types scripts/grid.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/markdown.check.mjs && node --experimental-strip-types scripts/switch.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": [