@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.38

package/out/ui/packages/input/components/Input.luau

@@ -5,9 +5,11 @@ local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
+local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local cx = _theme.cx
 local useTheme = _theme.useTheme
+local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion", "play").playProperty
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local spinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").spinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
@@ -15,6 +17,7 @@ local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divide
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
+local clampText = TS.import(script, script.Parent, "clampText").clampText
 local syncInputDraft = TS.import(script, script.Parent, "inputDraft").syncInputDraft
 local function adornmentAlign()
 	return React.createElement("uilistlayout", {
@@ -54,6 +57,11 @@ local function Input(props)
 		rounded = true
 	end
 	local size = _binding.size
+	local multiline = _binding.multiline
+	if multiline == nil then
+		multiline = false
+	end
+	local maxLength = _binding.maxLength
 	local reducedMotion = _binding.reducedMotion
 	local startAdornment = _binding.startAdornment
 	local endAdornment = _binding.endAdornment
@@ -67,6 +75,8 @@ local function Input(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local focusedRef = useRef(false)
+	local strokeRef = useRef()
+	local motion = useReducedMotion(reducedMotion)
 	local entered = useRef(false)
 	local _condition = text
 	if _condition == nil then
@@ -74,6 +84,7 @@ local function Input(props)
 	end
 	local draft, setDraft = useState(_condition)
 	local focused, setFocused = useState(false)
+	local contentHeight, setContentHeight = useState(0)
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local active = canActivate(disabled, loading)
@@ -82,6 +93,7 @@ local function Input(props)
 	local _object = table.clone(props)
 	setmetatable(_object, nil)
 	_object.focused = focused
+	_object.contentHeight = contentHeight
 	local _binding_2 = useInputStyles(_object)
 	local root = _binding_2.root
 	local font = _binding_2.font
@@ -95,14 +107,28 @@ local function Input(props)
 	local errorColorText = _binding_2.errorColorText
 	local divider = _binding_2.divider
 	local corner = _binding_2.corner
-	local stroke = _binding_2.stroke
 	useEffect(function()
 		setDraft(function(current)
-			return syncInputDraft(focusedRef.current, text, current)
+			return clampText(syncInputDraft(focusedRef.current, text, current), maxLength)
 		end)
-	end, { text })
+	end, { text, maxLength })
 	local showStroke = variant == "outlined" or variant == "filled"
 	local showCorner = rounded
+	local ink = if hasError then theme.palette.status.error.main elseif focused then theme.palette.focus else theme.palette.border
+	local weight = if focused then 2 else 1
+	useEffect(function()
+		if not showStroke then
+			return nil
+		end
+		local line = strokeRef.current
+		if not line then
+			return nil
+		end
+		return playProperty(line, {
+			Color = ink,
+			Thickness = weight,
+		}, theme.motion.fast, motion)
+	end, { showStroke, ink, weight, motion, theme })
 	local _attributes = {
 		tag = "frame",
 	}
@@ -132,27 +158,26 @@ local function Input(props)
 	for _k, _v in shell do
 		_attributes_2[_k] = _v
 	end
-	local _condition_2 = showStroke
+	local _exp = showStroke and React.createElement("uistroke", {
+		ref = strokeRef,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		Transparency = 0,
+	})
+	local _condition_2 = showCorner
 	if _condition_2 then
-		local _attributes_3 = table.clone(stroke)
-		setmetatable(_attributes_3, nil)
-		_condition_2 = React.createElement("uistroke", _attributes_3)
-	end
-	local _condition_3 = showCorner
-	if _condition_3 then
 		local _attributes_3 = table.clone(corner)
 		setmetatable(_attributes_3, nil)
-		_condition_3 = React.createElement("uicorner", _attributes_3)
+		_condition_2 = React.createElement("uicorner", _attributes_3)
 	end
-	local _condition_4 = startAdornment ~= nil
-	if _condition_4 then
+	local _condition_3 = startAdornment ~= nil
+	if _condition_3 then
 		local _attributes_3 = {
 			key = "Start",
 		}
 		for _k, _v in startSlot do
 			_attributes_3[_k] = _v
 		end
-		_condition_4 = (React.createElement("frame", _attributes_3, adornmentAlign(), startAdornment))
+		_condition_3 = (React.createElement("frame", _attributes_3, adornmentAlign(), startAdornment))
 	end
 	local _attributes_3 = {
 		key = "Field",
@@ -167,6 +192,7 @@ local function Input(props)
 	_attributes_3.TextEditable = editable
 	_attributes_3.Text = draft
 	_attributes_3.PlaceholderText = placeholder
+	_attributes_3.MultiLine = multiline
 	for _k, _v in cx(hasError and errorColorText) do
 		_attributes_3[_k] = _v
 	end
@@ -175,9 +201,19 @@ local function Input(props)
 			if not editable then
 				return nil
 			end
-			setDraft(rbx.Text)
+			local capped = clampText(rbx.Text, maxLength)
+			if rbx.Text ~= capped then
+				rbx.Text = capped
+				return nil
+			end
+			setDraft(capped)
 			if focusedRef.current and onInput then
-				onInput(rbx.Text)
+				onInput(capped)
+			end
+		end,
+		TextBounds = function(rbx)
+			if multiline then
+				setContentHeight(rbx.TextBounds.Y)
 			end
 		end,
 	}
@@ -194,67 +230,68 @@ local function Input(props)
 			end
 		end,
 		ReturnPressedFromOnScreenKeyboard = function(rbx)
-			if not editable or entered.current or not onEnterPressed then
+			if not editable or multiline or entered.current or not onEnterPressed then
 				return nil
 			end
 			entered.current = true
-			onEnterPressed(rbx.Text)
+			onEnterPressed(clampText(rbx.Text, maxLength))
 		end,
 		FocusLost = function(rbx, enterPressed)
 			focusedRef.current = false
 			setFocused(false)
-			local committed = rbx.Text
+			local committed = clampText(rbx.Text, maxLength)
 			if editable and onTextChanged then
 				onTextChanged(committed)
 			end
-			if editable and enterPressed and not entered.current and onEnterPressed then
+			if editable and not multiline and enterPressed and not entered.current and onEnterPressed then
 				onEnterPressed(committed)
 			end
 			entered.current = false
 			if onBlur then
 				onBlur()
 			end
-			local _condition_5 = text
-			if _condition_5 == nil then
-				_condition_5 = ""
+			local _condition_4 = text
+			if _condition_4 == nil then
+				_condition_4 = ""
 			end
-			setDraft(_condition_5)
+			setDraft(clampText(_condition_4, maxLength))
 		end,
 	}
-	local _exp = React.createElement("textbox", _attributes_3)
-	local _condition_5 = loading
-	if _condition_5 then
+	local _exp_1 = React.createElement("textbox", _attributes_3)
+	local _condition_4 = loading
+	if _condition_4 then
 		local _attributes_4 = {
 			key = "End",
 		}
 		for _k, _v in endSlot do
 			_attributes_4[_k] = _v
 		end
-		_condition_5 = (React.createElement("frame", _attributes_4, adornmentAlign(), React.createElement(CircularProgress, {
+		_condition_4 = (React.createElement("frame", _attributes_4, adornmentAlign(), React.createElement(CircularProgress, {
 			size = spinnerPixels(size),
 			thickness = 2,
 			color = theme.palette.text.secondary,
 			reducedMotion = reducedMotion,
 		})))
 	end
-	local _condition_6 = endSlotContent ~= nil
-	if _condition_6 then
+	local _condition_5 = endSlotContent ~= nil
+	if _condition_5 then
 		local _attributes_4 = {
 			key = "End",
 		}
 		for _k, _v in endSlot do
 			_attributes_4[_k] = _v
 		end
-		_condition_6 = (React.createElement("frame", _attributes_4, adornmentAlign(), endSlotContent))
+		_condition_5 = (React.createElement("frame", _attributes_4, adornmentAlign(), endSlotContent))
 	end
-	local _exp_1 = React.createElement("frame", _attributes_2, _condition_2, _condition_3, _condition_4, _exp, _condition_5, _condition_6)
-	local _exp_2 = variant == "standard" and (React.createElement(Divider, {
+	local _exp_2 = React.createElement("frame", _attributes_2, _exp, _condition_2, _condition_3, _exp_1, _condition_4, _condition_5)
+	local _exp_3 = variant == "standard" and (React.createElement(Divider, {
 		padding = 0,
+		weight = if focused then 2 else nil,
 		orientation = Orientations.Horizontal,
 		className = cx(divider, hasError and errorColorFrame),
 	}))
-	local _condition_7 = helperText ~= nil
-	if _condition_7 then
+	local _condition_6 = helperText ~= nil
+	if _condition_6 then
 		local _attributes_4 = {
 			key = "HelperText",
 		}
@@ -268,9 +305,9 @@ local function Input(props)
 			_attributes_4[_k] = _v
 		end
 		_attributes_4.Text = helperText
-		_condition_7 = (React.createElement("textlabel", _attributes_4))
+		_condition_6 = (React.createElement("textlabel", _attributes_4))
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp_1, _exp_2, _condition_7))
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp_2, _exp_3, _condition_6))
 end
 local default = Input
 return {

package/out/ui/packages/input/components/Input.styles.d.ts

@@ -1,5 +1,6 @@
 import { InputProps } from "./Input";
 declare const useInputStyles: (props: InputProps & {
     focused?: boolean;
+    contentHeight?: number;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useInputStyles;

package/out/ui/packages/input/components/Input.styles.luau

@@ -4,12 +4,11 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local focusRing = _theme.focusRing
+local fieldChrome = TS.import(script, script.Parent, "fieldChrome").fieldChrome
 local inputInsets = TS.import(script, script.Parent, "inputInsets").inputInsets
+local multilineHeight = TS.import(script, script.Parent, "multilineHeight").multilineHeight
 local useInputStyles = componentStyles("Input", function(theme, _param)
-	local color = _param.color
-	if color == nil then
-		color = "primary"
-	end
 	local margin = _param.margin
 	if margin == nil then
 		margin = "none"
@@ -42,15 +41,31 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 		hasError = false
 	end
 	local size = _param.size
+	local multiline = _param.multiline
+	if multiline == nil then
+		multiline = false
+	end
+	local minRows = _param.minRows
+	if minRows == nil then
+		minRows = 2
+	end
+	local maxRows = _param.maxRows
+	if maxRows == nil then
+		maxRows = 5
+	end
+	local contentHeight = _param.contentHeight
+	if contentHeight == nil then
+		contentHeight = 0
+	end
 	local metrics = controlMetrics(theme.density, size)
+	local chrome = fieldChrome(metrics.height, theme.padding.calc(1))
 	local hasStart = startAdornment ~= nil
 	local hasEnd = endAdornment ~= nil or loading
 	local icon = metrics.icon
-	local gap = theme.padding.calc(1)
+	local gap = chrome.padX
 	local insets = inputInsets(hasStart, hasEnd, icon, gap)
-	local fieldHeight = metrics.height + (if variant == "standard" then 0 else theme.padding.calc(1))
-	local accent = if color == "primary" then theme.palette.primary.main else theme.palette.text.primary
-	local focusAccent = if hasError then theme.palette.status.error.main else theme.palette.focus
+	local verticalPad = chrome.padX
+	local fieldHeight = if multiline then multilineHeight(contentHeight, metrics.font, minRows, maxRows, verticalPad) else chrome.height
 	local makeRootStyles = function()
 		local defaultStyles = {}
 		defaultStyles.BackgroundTransparency = 1
@@ -96,9 +111,15 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 		defaultStyles.Position = UDim2.new(0, insets.left, 0, 0)
 		defaultStyles.Size = UDim2.new(1, -(insets.left + insets.right), 1, 0)
 		defaultStyles.TextXAlignment = Enum.TextXAlignment.Left
-		defaultStyles.TextTruncate = Enum.TextTruncate.AtEnd
+		defaultStyles.TextYAlignment = if multiline then Enum.TextYAlignment.Top else Enum.TextYAlignment.Center
+		defaultStyles.TextWrapped = multiline
+		defaultStyles.TextTruncate = if multiline then Enum.TextTruncate.None else Enum.TextTruncate.AtEnd
 		defaultStyles.ClearTextOnFocus = clearsTextOnFocus
 		defaultStyles.ZIndex = 12000
+		if multiline then
+			defaultStyles.Position = UDim2.new(0, insets.left, 0, verticalPad)
+			defaultStyles.Size = UDim2.new(1, -(insets.left + insets.right), 1, -verticalPad * 2)
+		end
 		return defaultStyles
 	end
 	local makeMarginStyles = function()
@@ -132,7 +153,7 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 			ZIndex = 13000,
 		}
 	end
-	return createStyles({
+	local _object = {
 		root = makeRootStyles(),
 		font = {
 			TextSize = metrics.font,
@@ -162,19 +183,25 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 		},
 		divider = {
 			Position = UDim2.new(0, 0, 0, fieldHeight),
-			BackgroundColor3 = accent,
+			BackgroundColor3 = if focused then theme.palette.focus else theme.palette.border,
 			ZIndex = 11000,
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
-		stroke = {
-			Color = if hasError then theme.palette.status.error.main elseif focused then focusAccent else accent,
-			Transparency = if focused or hasError then 0 else 0.45,
-			Thickness = if focused then 1.5 else 1,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
-	})
+	}
+	local _left = "stroke"
+	local _object_1 = {
+		Color = if hasError then theme.palette.status.error.main elseif focused then theme.palette.focus else theme.palette.border,
+		Transparency = 0,
+		Thickness = 1,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
+	for _k, _v in (if focused then focusRing(if hasError then theme.palette.status.error.main else theme.palette.focus) else {}) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	return createStyles(_object)
 end)
 local default = useInputStyles
 return {

package/out/ui/packages/input/components/clampText.d.ts

@@ -0,0 +1,2 @@
+/** Keep a field within max characters. A missing or negative max leaves the text alone. */
+export declare function clampText(text: string, max?: number): string;

package/out/ui/packages/input/components/clampText.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+--* Keep a field within max characters. A missing or negative max leaves the text alone. 
+local function clampText(text, max)
+	if max == nil or max < 0 then
+		return text
+	end
+	if #text <= max then
+		return text
+	end
+	local _text = text
+	local _max = max
+	return string.sub(_text, 1, _max)
+end
+return {
+	clampText = clampText,
+}

package/out/ui/packages/input/components/fieldChrome.d.ts

@@ -0,0 +1,5 @@
+/** Shared single-line field size. Height is the control metric. Inset is one padding step. */
+export declare function fieldChrome(controlHeight: number, padUnit: number): {
+    height: number;
+    padX: number;
+};

package/out/ui/packages/input/components/fieldChrome.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* Shared single-line field size. Height is the control metric. Inset is one padding step. 
+local function fieldChrome(controlHeight, padUnit)
+	return {
+		height = controlHeight,
+		padX = padUnit,
+	}
+end
+return {
+	fieldChrome = fieldChrome,
+}

package/out/ui/packages/input/components/multilineHeight.d.ts

@@ -0,0 +1 @@
+export declare function multilineHeight(measured: number, lineHeight: number, minRows: number, maxRows: number, padding: number): number;

package/out/ui/packages/input/components/multilineHeight.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+local function multilineHeight(measured, lineHeight, minRows, maxRows, padding)
+	local minimumRows = math.max(1, math.floor(minRows))
+	local maximumRows = math.max(minimumRows, math.floor(maxRows))
+	local minimum = minimumRows * lineHeight + padding * 2
+	local maximum = maximumRows * lineHeight + padding * 2
+	return math.clamp(measured + padding * 2, minimum, maximum)
+end
+return {
+	multilineHeight = multilineHeight,
+}

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

@@ -1,8 +1,71 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local boxPadSides = TS.import(script, script.Parent, "boxPad").boxPadSides
 local useBoxStyles = TS.import(script, script.Parent, "Box.styles").default
+local _Pad = TS.import(script, script.Parent, "Pad")
+local automaticAxes = _Pad.automaticAxes
+local Pad = _Pad.Pad
+local padActive = _Pad.padActive
+local styleAutomaticSize = _Pad.styleAutomaticSize
+local withoutPad = _Pad.withoutPad
+local function padPixels(themePad, padding, resolved)
+	local sides = boxPadSides(padding)
+	if sides.top + sides.right + sides.bottom + sides.left > 0 then
+		return {
+			left = themePad(sides.left),
+			right = themePad(sides.right),
+			top = themePad(sides.top),
+			bottom = themePad(sides.bottom),
+		}
+	end
+	local _object = {}
+	local _left = "left"
+	local _result = resolved
+	if _result ~= nil then
+		_result = _result.PaddingLeft.Offset
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = 0
+	end
+	_object[_left] = _condition
+	local _left_1 = "right"
+	local _result_1 = resolved
+	if _result_1 ~= nil then
+		_result_1 = _result_1.PaddingRight.Offset
+	end
+	local _condition_1 = _result_1
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	_object[_left_1] = _condition_1
+	local _left_2 = "top"
+	local _result_2 = resolved
+	if _result_2 ~= nil then
+		_result_2 = _result_2.PaddingTop.Offset
+	end
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	_object[_left_2] = _condition_2
+	local _left_3 = "bottom"
+	local _result_3 = resolved
+	if _result_3 ~= nil then
+		_result_3 = _result_3.PaddingBottom.Offset
+	end
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	_object[_left_3] = _condition_3
+	return _object
+end
 local function Box(props)
 	local _binding = props
 	local padding = _binding.padding
@@ -12,27 +75,43 @@ local function Box(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local styles = useBoxStyles({
-		padding = padding,
 		bgcolor = bgcolor,
 	})
+	local resolved = resolveSx(theme, sx).padding
+	local edges = padPixels(function(step)
+		return theme.spacing.calc(step)
+	end, padding, resolved)
+	local inset = padActive(edges.left, edges.right, edges.top, edges.bottom)
+	local _result = sx
+	if _result ~= nil then
+		_result = _result.AutomaticSize
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = styleAutomaticSize(styles.root)
+	end
+	local auto = automaticAxes(_condition)
 	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Box"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "Box"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = ref
 	_attributes.base = styles.root
 	_attributes.className = className
-	_attributes.sx = sx
-	local _condition_1 = padding ~= nil
-	if _condition_1 then
-		local _attributes_1 = table.clone(styles.padding)
-		setmetatable(_attributes_1, nil)
-		_condition_1 = React.createElement("uipadding", _attributes_1)
-	end
-	return React.createElement(SxHost, _attributes, _condition_1, children)
+	_attributes.sx = if inset then withoutPad(sx) else sx
+	return React.createElement(SxHost, _attributes, if inset then (React.createElement(Pad, {
+		left = edges.left,
+		right = edges.right,
+		top = edges.top,
+		bottom = edges.bottom,
+		autoX = auto.x,
+		autoY = auto.y,
+	}, children)) else children)
 end
 local default = Box
 return {

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

@@ -1,7 +1,5 @@
-import { BoxPad } from "./boxPad";
 export type BoxBg = "transparent" | "paper" | "elevated" | "input";
 declare const useBoxStyles: (props: {
-    padding?: BoxPad;
     bgcolor?: BoxBg;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useBoxStyles;

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

@@ -3,14 +3,11 @@ 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 boxPadSides = TS.import(script, script.Parent, "boxPad").boxPadSides
 local useBoxStyles = componentStyles("Box", function(theme, _param)
-	local padding = _param.padding
 	local bgcolor = _param.bgcolor
 	if bgcolor == nil then
 		bgcolor = "transparent"
 	end
-	local sides = boxPadSides(padding)
 	local fill = if bgcolor == "paper" then theme.palette.surface.paper elseif bgcolor == "elevated" then theme.palette.surface.elevated elseif bgcolor == "input" then theme.palette.surface.input else theme.palette.surface.paper
 	return createStyles({
 		root = {
@@ -20,12 +17,6 @@ local useBoxStyles = componentStyles("Box", function(theme, _param)
 			BackgroundTransparency = if bgcolor == "transparent" then 1 else 0,
 			BorderSizePixel = 0,
 		},
-		padding = {
-			PaddingTop = UDim.new(0, theme.spacing.calc(sides.top)),
-			PaddingRight = UDim.new(0, theme.spacing.calc(sides.right)),
-			PaddingBottom = UDim.new(0, theme.spacing.calc(sides.bottom)),
-			PaddingLeft = UDim.new(0, theme.spacing.calc(sides.left)),
-		},
 	})
 end)
 local default = useBoxStyles