@rbxts/react-clean-ui 1.1.0 → 1.2.2

package/out/Components/Decorator/Corners.d.ts

@@ -2,6 +2,7 @@ import React from "@rbxts/react";
 import { CssSize } from "../../Interfaces/";
 interface CornerProps {
     radius?: CssSize;
+    name?: string;
 }
 export declare function Corners(props: CornerProps): React.JSX.Element | undefined;
 export {};

package/out/Components/Decorator/Corners.luau

@@ -10,9 +10,14 @@ local function Corners(props)
 	if radius.Scale == 0 and radius.Offset == 0 then
 		return nil
 	end
-	return React.createElement("uicorner", {
-		CornerRadius = radius,
-	})
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Corners"
+	end
+	_attributes.key = _condition
+	_attributes.CornerRadius = radius
+	return React.createElement("uicorner", _attributes)
 end
 return {
 	Corners = Corners,

package/out/Components/Decorator/Padding.d.ts

@@ -1,3 +1,5 @@
 import React from "@rbxts/react";
 import { PaddingProps } from "../../Interfaces/";
-export declare function Padding(props: PaddingProps): React.JSX.Element;
+export declare function Padding(props: PaddingProps & {
+    name?: string;
+}): React.JSX.Element;

package/out/Components/Decorator/Padding.luau

@@ -6,12 +6,17 @@ local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").
 local function Padding(props)
 	local theme = React.useContext(CleanThemeContext)
 	local padding = SpacingHelper:GetResolvedPadding(theme, props)
-	return React.createElement("uipadding", {
-		PaddingTop = UDim.new(0, padding.top),
-		PaddingBottom = UDim.new(0, padding.bottom),
-		PaddingLeft = UDim.new(0, padding.left),
-		PaddingRight = UDim.new(0, padding.right),
-	})
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Padding"
+	end
+	_attributes.key = _condition
+	_attributes.PaddingTop = UDim.new(0, padding.top)
+	_attributes.PaddingBottom = UDim.new(0, padding.bottom)
+	_attributes.PaddingLeft = UDim.new(0, padding.left)
+	_attributes.PaddingRight = UDim.new(0, padding.right)
+	return React.createElement("uipadding", _attributes)
 end
 return {
 	Padding = Padding,

package/out/Components/Input/Button.d.ts

@@ -12,6 +12,7 @@ export interface ButtonProps extends SpacedElementProps, ShadowElementProps, ZIn
     disabled?: boolean;
     LayoutOrder?: number;
     styleOverride?: ButtonStyleOverride;
+    name?: string;
 }
 export interface ButtonTextProps extends ScalableElementProps, IntentElementProps {
     children?: string;

package/out/Components/Input/Button.luau

@@ -20,6 +20,7 @@ local GroupContext = _.GroupContext
 local function ButtonText(props)
 	local theme = React.useContext(CleanThemeContext)
 	local _attributes = {
+		name = "ButtonText",
 		text = props.text,
 	}
 	local _exp = props.scale
@@ -52,12 +53,16 @@ local function ButtonText(props)
 end
 local function ButtonIcon(props)
 	local theme = React.useContext(CleanThemeContext)
-	local _attributes = {
-		scale = props.scale,
-		icon = props.icon,
-		spinning = props.spinning,
-		speed = props.speed,
-	}
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "ButtonIcon"
+	end
+	_attributes.name = _condition
+	_attributes.scale = props.scale
+	_attributes.icon = props.icon
+	_attributes.spinning = props.spinning
+	_attributes.speed = props.speed
 	local _exp = props.intent
 	local _exp_1 = if props.disabled then "disabled" else "default"
 	local _exp_2 = theme.components.button.intents
@@ -87,10 +92,14 @@ local Button = React.forwardRef(function(props, ref)
 	end
 	local intentColors = ColorHelper:getIntentColors(theme, _exp, state, _exp_1, _result)
 	local backgroundImage = CssHelper:resolveBackgroundImage(intentColors.backgroundImage)
-	local _attributes = {
-		ref = ref,
-		Active = not props.disabled,
-	}
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Button"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Active = not props.disabled
 	local _object = {}
 	local _spread = props.Event
 	if _spread then
@@ -144,28 +153,28 @@ local Button = React.forwardRef(function(props, ref)
 				_result_2 = _result_2.X
 			end
 		end
-		local _condition = _result_2
-		if _condition == nil then
-			_condition = 0
+		local _condition_1 = _result_2
+		if _condition_1 == nil then
+			_condition_1 = 0
 		end
-		_result_1 = _condition
+		_result_1 = _condition_1
 	else
 		_result_1 = 0
 	end
 	_attributes.Size = UDim2.fromOffset(_result_1, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
-	local _condition = props.BackgroundTransparency
-	if _condition == nil then
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
 		local _result_2 = props.styleOverride
 		if _result_2 ~= nil then
 			_result_2 = _result_2.backgroundTransparency
 		end
-		_condition = _result_2
-		if _condition == nil then
-			_condition = theme.components.button.backgroundTransparency
+		_condition_1 = _result_2
+		if _condition_1 == nil then
+			_condition_1 = theme.components.button.backgroundTransparency
 		end
 	end
-	_attributes.BackgroundTransparency = _condition
+	_attributes.BackgroundTransparency = _condition_1
 	_attributes.BackgroundColor3 = intentColors.backgroundColor
 	_attributes.AutoButtonColor = false
 	_attributes.LayoutOrder = props.LayoutOrder
@@ -182,22 +191,24 @@ local Button = React.forwardRef(function(props, ref)
 	if _result_2 ~= nil then
 		_result_2 = _result_2.cornerRadius
 	end
-	local _condition_1 = _result_2
-	if _condition_1 == nil then
-		_condition_1 = theme.components.button.cornerRadius
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = theme.components.button.cornerRadius
 	end
-	_attributes_1.radius = _condition_1
+	_attributes_1.radius = _condition_2
 	local _exp_2 = React.createElement(Corners, _attributes_1)
-	local _attributes_2 = {}
+	local _attributes_2 = {
+		key = "Stroke",
+	}
 	local _result_3 = props.styleOverride
 	if _result_3 ~= nil then
 		_result_3 = _result_3.borderThickness
 	end
-	local _condition_2 = _result_3
-	if _condition_2 == nil then
-		_condition_2 = theme.components.button.borderThickness
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = theme.components.button.borderThickness
 	end
-	_attributes_2.Thickness = _condition_2
+	_attributes_2.Thickness = _condition_3
 	_attributes_2.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 	_attributes_2.Color = intentColors.borderColor
 	local _exp_3 = React.createElement("uistroke", _attributes_2)
@@ -207,11 +218,11 @@ local Button = React.forwardRef(function(props, ref)
 	if _result_4 ~= nil then
 		_result_4 = _result_4.boxShadow
 	end
-	local _condition_3 = _result_4
-	if _condition_3 == nil then
-		_condition_3 = theme.components.button.boxShadow
+	local _condition_4 = _result_4
+	if _condition_4 == nil then
+		_condition_4 = theme.components.button.boxShadow
 	end
-	_attributes_3.value = _condition_3
+	_attributes_3.value = _condition_4
 	local _exp_4 = React.createElement(BoxShadow, _attributes_3)
 	local _attributes_4 = table.clone(props)
 	setmetatable(_attributes_4, nil)

package/out/Components/Input/Checkbox.d.ts

@@ -7,6 +7,7 @@ interface CheckboxProps extends IntentElementProps, PaddingProps, BackgroundElem
     'icon-unchecked'?: IconName;
     'intent-checked'?: Intent;
     'intent-unchecked'?: Intent;
+    name?: string;
 }
 export declare function Checkbox(props: CheckboxProps): React.JSX.Element;
 export {};

package/out/Components/Input/Checkbox.luau

@@ -46,20 +46,24 @@ local function Checkbox(props)
 		end
 	end, { checked })
 	local backgroundImage = CssHelper:resolveBackgroundImage(theme.components.checkbox.backgroundImage)
-	local _attributes = {
-		Size = UDim2.fromOffset(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-		Event = {
-			Activated = function()
-				setChecked(not checked)
-			end,
-		},
-	}
-	local _condition_1 = props.BackgroundTransparency
+	local _attributes = {}
+	local _condition_1 = props.name
 	if _condition_1 == nil then
-		_condition_1 = theme.components.button.backgroundTransparency
+		_condition_1 = "Checkbox"
 	end
-	_attributes.BackgroundTransparency = _condition_1
+	_attributes.key = _condition_1
+	_attributes.Size = UDim2.fromOffset(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.Event = {
+		Activated = function()
+			setChecked(not checked)
+		end,
+	}
+	local _condition_2 = props.BackgroundTransparency
+	if _condition_2 == nil then
+		_condition_2 = theme.components.button.backgroundTransparency
+	end
+	_attributes.BackgroundTransparency = _condition_2
 	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).backgroundColor
 	_attributes.AutoButtonColor = false
 	_attributes.Image = backgroundImage.Image
@@ -73,18 +77,20 @@ local function Checkbox(props)
 		radius = theme.components.checkbox.cornerRadius,
 	})
 	local _attributes_1 = {
+		key = "Stroke",
 		Thickness = theme.components.checkbox.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 	}
-	local _condition_2 = theme.components.checkbox.borderTransparency
-	if _condition_2 == nil then
-		_condition_2 = 0
+	local _condition_3 = theme.components.checkbox.borderTransparency
+	if _condition_3 == nil then
+		_condition_3 = 0
 	end
-	_attributes_1.Transparency = _condition_2
+	_attributes_1.Transparency = _condition_3
 	_attributes_1.Color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).borderColor
 	return React.createElement("imagebutton", _attributes, _exp, React.createElement("uistroke", _attributes_1), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.checkbox.spacing, theme.components.checkbox.padding),
 	}), React.createElement(Icon, {
+		name = "CheckboxIcon",
 		scale = props.scale,
 		icon = if checked then props["icon-checked"] or "check" else props["icon-unchecked"],
 		color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).textColor,

package/out/Components/Input/HoverButton.d.ts

@@ -11,6 +11,7 @@ interface HoverButtonProps {
     focus?: ImageButtonProps;
     isSelected?: boolean;
     children?: React.ReactNode;
+    name?: string;
 }
 export declare function HoverButton(propSet: HoverButtonProps): React.JSX.Element;
 export {};

package/out/Components/Input/HoverButton.luau

@@ -22,46 +22,50 @@ local function HoverButton(propSet)
 		_stateEvents = _stateEvents.Event
 	end
 	local stateEvents = _stateEvents
-	local _attributes = {
-		Active = props.Active,
-		AnchorPoint = props.AnchorPoint,
-		Archivable = props.Archivable,
-		AutoButtonColor = props.AutoButtonColor,
-		AutomaticSize = props.AutomaticSize,
-		BackgroundColor3 = props.BackgroundColor3,
-		BackgroundTransparency = props.BackgroundTransparency,
-		BorderColor3 = props.BorderColor3,
-		BorderMode = props.BorderMode,
-		BorderSizePixel = props.BorderSizePixel,
-		ClipsDescendants = props.ClipsDescendants,
-		LayoutOrder = props.LayoutOrder,
-		NextSelectionDown = props.NextSelectionDown,
-		NextSelectionLeft = props.NextSelectionLeft,
-		NextSelectionRight = props.NextSelectionRight,
-		NextSelectionUp = props.NextSelectionUp,
-		Position = props.Position,
-		Rotation = props.Rotation,
-		Selectable = props.Selectable,
-		SelectionBehaviorDown = props.SelectionBehaviorDown,
-		SelectionBehaviorLeft = props.SelectionBehaviorLeft,
-		SelectionBehaviorRight = props.SelectionBehaviorRight,
-		SelectionBehaviorUp = props.SelectionBehaviorUp,
-		SelectionGroup = props.SelectionGroup,
-		Size = props.Size,
-		SizeConstraint = props.SizeConstraint,
-		Visible = props.Visible,
-		ZIndex = props.ZIndex,
-		Image = props.Image,
-		ImageColor3 = props.ImageColor3,
-		ImageRectOffset = props.ImageRectOffset,
-		ImageRectSize = props.ImageRectSize,
-		ImageTransparency = props.ImageTransparency,
-		ResampleMode = props.ResampleMode,
-		ScaleType = props.ScaleType,
-		SliceCenter = props.SliceCenter,
-		SliceScale = props.SliceScale,
-		TileSize = props.TileSize,
-	}
+	local _attributes = {}
+	local _condition = propSet.name
+	if _condition == nil then
+		_condition = "HoverButton"
+	end
+	_attributes.key = _condition
+	_attributes.Active = props.Active
+	_attributes.AnchorPoint = props.AnchorPoint
+	_attributes.Archivable = props.Archivable
+	_attributes.AutoButtonColor = props.AutoButtonColor
+	_attributes.AutomaticSize = props.AutomaticSize
+	_attributes.BackgroundColor3 = props.BackgroundColor3
+	_attributes.BackgroundTransparency = props.BackgroundTransparency
+	_attributes.BorderColor3 = props.BorderColor3
+	_attributes.BorderMode = props.BorderMode
+	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.ClipsDescendants = props.ClipsDescendants
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.NextSelectionDown = props.NextSelectionDown
+	_attributes.NextSelectionLeft = props.NextSelectionLeft
+	_attributes.NextSelectionRight = props.NextSelectionRight
+	_attributes.NextSelectionUp = props.NextSelectionUp
+	_attributes.Position = props.Position
+	_attributes.Rotation = props.Rotation
+	_attributes.Selectable = props.Selectable
+	_attributes.SelectionBehaviorDown = props.SelectionBehaviorDown
+	_attributes.SelectionBehaviorLeft = props.SelectionBehaviorLeft
+	_attributes.SelectionBehaviorRight = props.SelectionBehaviorRight
+	_attributes.SelectionBehaviorUp = props.SelectionBehaviorUp
+	_attributes.SelectionGroup = props.SelectionGroup
+	_attributes.Size = props.Size
+	_attributes.SizeConstraint = props.SizeConstraint
+	_attributes.Visible = props.Visible
+	_attributes.ZIndex = props.ZIndex
+	_attributes.Image = props.Image
+	_attributes.ImageColor3 = props.ImageColor3
+	_attributes.ImageRectOffset = props.ImageRectOffset
+	_attributes.ImageRectSize = props.ImageRectSize
+	_attributes.ImageTransparency = props.ImageTransparency
+	_attributes.ResampleMode = props.ResampleMode
+	_attributes.ScaleType = props.ScaleType
+	_attributes.SliceCenter = props.SliceCenter
+	_attributes.SliceScale = props.SliceScale
+	_attributes.TileSize = props.TileSize
 	local _object_1 = {}
 	if defaultEvents then
 		for _k, _v in defaultEvents do

package/out/Components/Input/Increment.d.ts

@@ -7,5 +7,6 @@ export interface IncrementProps extends ScalableElementProps, SpacedElementProps
     min?: number;
     max?: number;
     controlled?: boolean;
+    name?: string;
 }
 export declare const Increment: React.ForwardRefExoticComponent<Omit<IncrementProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Input/Increment.luau

@@ -34,9 +34,13 @@ local Increment = React.forwardRef(function(props, ref)
 			_result(nextValue)
 		end
 	end
-	local _attributes = {
-		ref = ref,
-	}
+	local _attributes = {}
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Increment"
+	end
+	_attributes.name = _condition_1
+	_attributes.ref = ref
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
@@ -47,6 +51,7 @@ local Increment = React.forwardRef(function(props, ref)
 		valign = "Center",
 		spacing = props.spacing,
 	}, React.createElement(Button, {
+		name = "DecrementButton",
 		icon = "minus",
 		intent = props.intent,
 		scale = props.scale,
@@ -67,6 +72,7 @@ local Increment = React.forwardRef(function(props, ref)
 		HorizontalFlex = "Fill",
 		LayoutOrder = 1,
 	}, React.createElement(Input, {
+		name = "IncrementInput",
 		Size = UDim2.fromScale(0, 0),
 		scale = props.scale,
 		spacing = props.spacing,
@@ -84,6 +90,7 @@ local Increment = React.forwardRef(function(props, ref)
 			applyValue(parsed)
 		end,
 	})), React.createElement(Button, {
+		name = "IncrementButton",
 		icon = "plus",
 		intent = props.intent,
 		scale = props.scale,

package/out/Components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from "@rbxts/react";
-import { ScalableElementProps, SpacedElementProps } from "../../Interfaces";
+import { IconName, ScalableElementProps, SpacedElementProps } from "../../Interfaces";
 export interface InputProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<TextBox> {
     value: string;
     placeholder?: string;
@@ -9,5 +9,7 @@ export interface InputProps extends ScalableElementProps, SpacedElementProps, Re
     onChange?: (value: string) => void;
     Event?: React.InstanceEvent<TextBox>;
     controlled?: boolean;
+    icon?: IconName;
+    name?: string;
 }
 export declare function Input(props: InputProps): React.JSX.Element;

package/out/Components/Input/Input.luau

@@ -11,7 +11,11 @@ local TypographyHelper = _Helpers.TypographyHelper
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local Corners = _Decorator.Corners
 local Padding = _Decorator.Padding
-local FieldsetContext = TS.import(script, script.Parent.Parent, "Layout").FieldsetContext
+local _Layout = TS.import(script, script.Parent.Parent, "Layout")
+local FieldsetContext = _Layout.FieldsetContext
+local FlexItem = _Layout.FlexItem
+local HStack = _Layout.HStack
+local Icon = TS.import(script, script.Parent.Parent, "Surface").Icon
 local _Input_validation = TS.import(script, script.Parent, "Input.validation")
 local resolveClampedText = _Input_validation.resolveClampedText
 local resolveValidatedText = _Input_validation.resolveValidatedText
@@ -45,7 +49,29 @@ local function Input(props)
 			return connection:Disconnect()
 		end
 	end, { labelActivated, ref })
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Input"
+	end
+	_attributes.key = _condition
+	_attributes.Size = props.Size or UDim2.fromScale(1, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.BackgroundTransparency = 1
+	_attributes.AnchorPoint = props.AnchorPoint
+	_attributes.Position = props.Position
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.Visible = props.Visible
+	_attributes.ZIndex = props.ZIndex
+	_attributes.Image = backgroundImage.Image
+	_attributes.ImageColor3 = backgroundImage.ImageColor3
+	_attributes.ImageTransparency = backgroundImage.ImageTransparency
+	_attributes.ScaleType = backgroundImage.ScaleType
+	_attributes.SliceCenter = backgroundImage.SliceCenter
+	_attributes.SliceScale = backgroundImage.SliceScale
+	_attributes.TileSize = backgroundImage.TileSize
 	local _exp = React.createElement("uistroke", {
+		key = "Stroke",
 		Thickness = theme.components.input.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.input.borderColor,
@@ -53,10 +79,16 @@ local function Input(props)
 	local _exp_1 = React.createElement(Corners, {
 		radius = theme.components.input.cornerRadius,
 	})
-	local _attributes = table.clone(props)
-	setmetatable(_attributes, nil)
-	local _exp_2 = React.createElement(Padding, _attributes)
-	local _attributes_1 = {
+	local _attributes_1 = table.clone(props)
+	setmetatable(_attributes_1, nil)
+	local _exp_2 = React.createElement(Padding, _attributes_1)
+	local _exp_3 = props.icon ~= nil and (React.createElement(Icon, {
+		name = "InputIcon",
+		icon = props.icon,
+		color = theme.components.input.iconColor,
+	}))
+	local _attributes_2 = {
+		key = "TextBox",
 		ref = ref,
 		Size = UDim2.fromScale(1, 0),
 		BackgroundTransparency = 1,
@@ -65,52 +97,52 @@ local function Input(props)
 		FontFace = Font.fromName(typography.font.Name, typography.weight or Enum.FontWeight.Regular),
 		FontSize = typography.size,
 	}
-	local _condition = props.PlaceholderText
-	if _condition == nil then
-		_condition = props.placeholder
-	end
-	_attributes_1.PlaceholderText = _condition
-	_attributes_1.PlaceholderColor3 = props.PlaceholderColor3 or placeholderTypography.color
-	_attributes_1.TextScaled = props.TextScaled
-	_attributes_1.LineHeight = typography.lineHeight
-	_attributes_1.Text = if props.controlled then props.value else value
-	_attributes_1.TextColor3 = props.TextColor3 or typography.color or theme.colors.intents.primary.default.textColor
-	local _condition_1 = props.TextTransparency
+	local _condition_1 = props.PlaceholderText
 	if _condition_1 == nil then
-		_condition_1 = typography.transparency
+		_condition_1 = props.placeholder
 	end
-	_attributes_1.TextTransparency = _condition_1
-	_attributes_1.Active = props.Active
-	_attributes_1.Archivable = props.Archivable
-	_attributes_1.BorderColor3 = props.BorderColor3
-	_attributes_1.BorderMode = props.BorderMode
-	_attributes_1.BorderSizePixel = props.BorderSizePixel
-	_attributes_1.ClipsDescendants = props.ClipsDescendants
-	_attributes_1.Rotation = props.Rotation
-	_attributes_1.Selectable = props.Selectable
-	_attributes_1.SelectionImageObject = props.SelectionImageObject
-	_attributes_1.SizeConstraint = props.SizeConstraint
-	_attributes_1.Tag = props.Tag
-	_attributes_1.AutoLocalize = props.AutoLocalize
-	_attributes_1.RootLocalizationTable = props.RootLocalizationTable
-	_attributes_1.NextSelectionDown = props.NextSelectionDown
-	_attributes_1.NextSelectionLeft = props.NextSelectionLeft
-	_attributes_1.NextSelectionRight = props.NextSelectionRight
-	_attributes_1.NextSelectionUp = props.NextSelectionUp
-	_attributes_1.SelectionGroup = props.SelectionGroup
-	_attributes_1.SelectionOrder = props.SelectionOrder
-	local _condition_2 = props.ClearTextOnFocus
+	_attributes_2.PlaceholderText = _condition_1
+	_attributes_2.PlaceholderColor3 = props.PlaceholderColor3 or placeholderTypography.color
+	_attributes_2.TextScaled = props.TextScaled
+	_attributes_2.LineHeight = typography.lineHeight
+	_attributes_2.Text = if props.controlled then props.value else value
+	_attributes_2.TextColor3 = props.TextColor3 or typography.color or theme.colors.intents.primary.default.textColor
+	local _condition_2 = props.TextTransparency
 	if _condition_2 == nil then
-		_condition_2 = false
+		_condition_2 = typography.transparency
 	end
-	_attributes_1.ClearTextOnFocus = _condition_2
-	_attributes_1.CursorPosition = props.CursorPosition
-	_attributes_1.MultiLine = props.MultiLine
-	_attributes_1.SelectionStart = props.SelectionStart
-	_attributes_1.ShowNativeInput = props.ShowNativeInput
-	_attributes_1.TextEditable = props.TextEditable
-	_attributes_1.TextTruncate = props.TextTruncate
-	_attributes_1.RichText = props.RichText
+	_attributes_2.TextTransparency = _condition_2
+	_attributes_2.Active = props.Active
+	_attributes_2.Archivable = props.Archivable
+	_attributes_2.BorderColor3 = props.BorderColor3
+	_attributes_2.BorderMode = props.BorderMode
+	_attributes_2.BorderSizePixel = props.BorderSizePixel
+	_attributes_2.ClipsDescendants = props.ClipsDescendants
+	_attributes_2.Rotation = props.Rotation
+	_attributes_2.Selectable = props.Selectable
+	_attributes_2.SelectionImageObject = props.SelectionImageObject
+	_attributes_2.SizeConstraint = props.SizeConstraint
+	_attributes_2.Tag = props.Tag
+	_attributes_2.AutoLocalize = props.AutoLocalize
+	_attributes_2.RootLocalizationTable = props.RootLocalizationTable
+	_attributes_2.NextSelectionDown = props.NextSelectionDown
+	_attributes_2.NextSelectionLeft = props.NextSelectionLeft
+	_attributes_2.NextSelectionRight = props.NextSelectionRight
+	_attributes_2.NextSelectionUp = props.NextSelectionUp
+	_attributes_2.SelectionGroup = props.SelectionGroup
+	_attributes_2.SelectionOrder = props.SelectionOrder
+	local _condition_3 = props.ClearTextOnFocus
+	if _condition_3 == nil then
+		_condition_3 = false
+	end
+	_attributes_2.ClearTextOnFocus = _condition_3
+	_attributes_2.CursorPosition = props.CursorPosition
+	_attributes_2.MultiLine = props.MultiLine
+	_attributes_2.SelectionStart = props.SelectionStart
+	_attributes_2.ShowNativeInput = props.ShowNativeInput
+	_attributes_2.TextEditable = props.TextEditable
+	_attributes_2.TextTruncate = props.TextTruncate
+	_attributes_2.RichText = props.RichText
 	local _object = {}
 	local _spread = props.Event
 	if _spread then
@@ -137,7 +169,7 @@ local function Input(props)
 			end
 		end
 	end
-	_attributes_1.Event = _object
+	_attributes_2.Event = _object
 	local _object_1 = {}
 	local _spread_1 = props.Change
 	if _spread_1 then
@@ -165,24 +197,11 @@ local function Input(props)
 			end
 		end
 	end
-	_attributes_1.Change = _object_1
-	return React.createElement("imagelabel", {
-		Size = props.Size or UDim2.fromScale(1, 0),
-		AutomaticSize = Enum.AutomaticSize.Y,
-		BackgroundTransparency = 1,
-		AnchorPoint = props.AnchorPoint,
-		Position = props.Position,
-		LayoutOrder = props.LayoutOrder,
-		Visible = props.Visible,
-		ZIndex = props.ZIndex,
-		Image = backgroundImage.Image,
-		ImageColor3 = backgroundImage.ImageColor3,
-		ImageTransparency = backgroundImage.ImageTransparency,
-		ScaleType = backgroundImage.ScaleType,
-		SliceCenter = backgroundImage.SliceCenter,
-		SliceScale = backgroundImage.SliceScale,
-		TileSize = backgroundImage.TileSize,
-	}, _exp, _exp_1, _exp_2, React.createElement("textbox", _attributes_1))
+	_attributes_2.Change = _object_1
+	return React.createElement("imagelabel", _attributes, _exp, _exp_1, _exp_2, React.createElement(HStack, {
+		valign = "Center",
+		Wraps = false,
+	}, _exp_3, React.createElement(FlexItem, nil, React.createElement("textbox", _attributes_2))))
 end
 return {
 	Input = Input,