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

package/out/ui/packages/listItem/components/ListItem.styles.d.ts

@@ -1,6 +1,10 @@
+import { ListItemTone } from "./listItemInk";
 declare const useListItemStyles: (props: {
     selected?: boolean;
     disabled?: boolean;
     dense?: boolean;
+    wrap?: boolean;
+    tone?: ListItemTone;
+    divider?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useListItemStyles;

package/out/ui/packages/listItem/components/ListItem.styles.luau

@@ -3,6 +3,10 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local listItemInk = TS.import(script, script.Parent, "listItemInk").listItemInk
+local _listItemLayout = TS.import(script, script.Parent, "listItemLayout")
+local listItemLabelLayout = _listItemLayout.listItemLabelLayout
+local listItemSecondaryLayout = _listItemLayout.listItemSecondaryLayout
 local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 	local selected = _param.selected
 	if selected == nil then
@@ -16,8 +20,29 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 	if dense == nil then
 		dense = false
 	end
+	local wrap = _param.wrap
+	if wrap == nil then
+		wrap = false
+	end
+	local tone = _param.tone
+	local divider = _param.divider
+	if divider == nil then
+		divider = false
+	end
 	local pad = theme.padding.calc(if dense == true then 0.5 else 1)
-	return createStyles({
+	local primaryLayout = listItemLabelLayout(wrap)
+	local secondaryLayout = listItemSecondaryLayout()
+	local ink = listItemInk(tone, disabled)
+	local primaryColor = if ink == "error" then theme.palette.status.error.main elseif ink == "disabled" then theme.palette.text.disabled else theme.palette.text.primary
+	local textBox = function(label)
+		return {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(label.widthScale, 0, 0, 0),
+			TextWrapped = label.wrapped,
+			TextTruncate = if label.truncate then Enum.TextTruncate.AtEnd else Enum.TextTruncate.None,
+		}
+	end
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -31,7 +56,7 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 		},
 		padding = {
 			PaddingTop = UDim.new(0, pad),
-			PaddingBottom = UDim.new(0, pad),
+			PaddingBottom = UDim.new(0, if divider then 0 else pad),
 			PaddingLeft = UDim.new(0, pad),
 			PaddingRight = UDim.new(0, pad),
 		},
@@ -39,35 +64,49 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
-		primary = {
-			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body,
-			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		secondary = {
-			LayoutOrder = 2,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		divider = {
-			LayoutOrder = 3,
-			Size = UDim2.new(1, 0, 0, 1),
-			BackgroundColor3 = theme.palette.divider,
-			BorderSizePixel = 0,
-		},
-	})
+	}
+	local _left = "primary"
+	local _object_1 = {
+		LayoutOrder = 1,
+	}
+	for _k, _v in textBox(primaryLayout) do
+		_object_1[_k] = _v
+	end
+	_object_1.BackgroundTransparency = 1
+	_object_1.BorderSizePixel = 0
+	_object_1.Font = theme.typography.fontFamilies.default
+	_object_1.TextSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body
+	_object_1.TextColor3 = primaryColor
+	_object_1.TextXAlignment = Enum.TextXAlignment.Left
+	_object[_left] = _object_1
+	local _left_1 = "secondary"
+	local _object_2 = {
+		LayoutOrder = 2,
+	}
+	for _k, _v in textBox(secondaryLayout) do
+		_object_2[_k] = _v
+	end
+	_object_2.BackgroundTransparency = 1
+	_object_2.BorderSizePixel = 0
+	_object_2.Font = theme.typography.fontFamilies.default
+	_object_2.TextSize = theme.typography.fontSizes.caption
+	_object_2.TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.secondary
+	_object_2.TextXAlignment = Enum.TextXAlignment.Left
+	_object[_left_1] = _object_2
+	_object.divider = {
+		LayoutOrder = 3,
+		Size = UDim2.new(1, 0, 0, pad),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_object.line = {
+		AnchorPoint = Vector2.new(0, 1),
+		Position = UDim2.fromScale(0, 1),
+		Size = UDim2.new(1, 0, 0, 1),
+		BackgroundColor3 = theme.palette.divider,
+		BorderSizePixel = 0,
+	}
+	return createStyles(_object)
 end)
 local default = useListItemStyles
 return {

package/out/ui/packages/listItem/components/listItemInk.d.ts

@@ -0,0 +1,3 @@
+export type ListItemTone = "danger";
+/** Primary label color. Disabled wins over a danger tone. */
+export declare function listItemInk(tone?: ListItemTone, disabled?: boolean): "primary" | "disabled" | "error";

package/out/ui/packages/listItem/components/listItemInk.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+--* Primary label color. Disabled wins over a danger tone. 
+local function listItemInk(tone, disabled)
+	if disabled == true then
+		return "disabled"
+	end
+	if tone == "danger" then
+		return "error"
+	end
+	return "primary"
+end
+return {
+	listItemInk = listItemInk,
+}

package/out/ui/packages/listItem/components/listItemLayout.d.ts

@@ -0,0 +1,22 @@
+export type ListItemFill = "clear" | "hover" | "pressed" | "selected";
+export declare function listItemFill(input: {
+    disabled: boolean;
+    selected: boolean;
+    hover: boolean;
+    down: boolean;
+}): ListItemFill;
+export interface ListItemLabelLayout {
+    widthScale: number;
+    wrapped: boolean;
+    truncate: boolean;
+}
+/** Primary fills the row. It stays one line unless wrap is set. */
+export declare function listItemLabelLayout(wrap?: boolean): ListItemLabelLayout;
+/** Secondary wraps inside the same row. */
+export declare function listItemSecondaryLayout(): ListItemLabelLayout;
+/** Pixels the title column yields when a leading avatar or icon is present. */
+export declare function listItemCopyInset(leading?: boolean): 0 | 40;
+/** Pixels reserved for a control on the far side of the row. */
+export declare function listItemTrailInset(trailing?: boolean): 0 | 48;
+/** Title column inset, including the gaps beside any side slots. */
+export declare function listItemRowInset(leading?: boolean, trailing?: boolean): number;

package/out/ui/packages/listItem/components/listItemLayout.luau

@@ -0,0 +1,68 @@
+-- Compiled with roblox-ts v3.0.0
+local function listItemFill(input)
+	if input.disabled then
+		return "clear"
+	end
+	if input.down then
+		return "pressed"
+	end
+	if input.hover then
+		return "hover"
+	end
+	if input.selected then
+		return "selected"
+	end
+	return "clear"
+end
+--* Primary fills the row. It stays one line unless wrap is set. 
+local function listItemLabelLayout(wrap)
+	if wrap == true then
+		return {
+			widthScale = 1,
+			wrapped = true,
+			truncate = false,
+		}
+	end
+	return {
+		widthScale = 1,
+		wrapped = false,
+		truncate = true,
+	}
+end
+--* Secondary wraps inside the same row. 
+local function listItemSecondaryLayout()
+	return {
+		widthScale = 1,
+		wrapped = true,
+		truncate = false,
+	}
+end
+--* Pixels the title column yields when a leading avatar or icon is present. 
+local function listItemCopyInset(leading)
+	return if leading == true then 40 else 0
+end
+--* Pixels reserved for a control on the far side of the row. 
+local function listItemTrailInset(trailing)
+	return if trailing == true then 48 else 0
+end
+--* Title column inset, including the gaps beside any side slots. 
+local function listItemRowInset(leading, trailing)
+	local lead = listItemCopyInset(leading)
+	local trail = listItemTrailInset(trailing)
+	local gaps = 0
+	if lead > 0 then
+		gaps += 8
+	end
+	if trail > 0 then
+		gaps += 8
+	end
+	return lead + trail + gaps
+end
+return {
+	listItemFill = listItemFill,
+	listItemLabelLayout = listItemLabelLayout,
+	listItemSecondaryLayout = listItemSecondaryLayout,
+	listItemCopyInset = listItemCopyInset,
+	listItemTrailInset = listItemTrailInset,
+	listItemRowInset = listItemRowInset,
+}

package/out/ui/packages/markdown/components/Markdown.d.ts

@@ -1,6 +1,8 @@
 import { CustomizedProps } from "../../../../theme/index";
+import { MarkdownLinkPayload } from "../parseMarkdown";
 export interface MarkdownProps {
     value?: string;
+    onLink?: (payload: MarkdownLinkPayload) => void;
 }
 declare function Markdown(props: CustomizedProps<Frame, MarkdownProps>): JSX.Element;
 export default Markdown;

package/out/ui/packages/markdown/components/Markdown.luau

@@ -1,11 +1,16 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local CodeEditor = TS.import(script, script.Parent.Parent.Parent, "codeEditor").CodeEditor
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local Link = TS.import(script, script.Parent.Parent.Parent, "link").Link
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local _parseMarkdown = TS.import(script, script.Parent.Parent, "parseMarkdown")
+local inlinePieces = _parseMarkdown.inlinePieces
 local inlinesToRichText = _parseMarkdown.inlinesToRichText
+local markdownLinkPayload = _parseMarkdown.markdownLinkPayload
 local parseMarkdown = _parseMarkdown.parseMarkdown
 local useMarkdownStyles = TS.import(script, script.Parent, "Markdown.styles").default
 local function headingVariant(level)
@@ -26,25 +31,28 @@ local function headingVariant(level)
 	end
 	return "h6"
 end
-local function textSizeFor(variant)
+local function textSizeFor(sizes, variant)
 	if variant == "h1" then
-		return 28
+		return sizes.h1
 	end
 	if variant == "h2" then
-		return 22
+		return sizes.h2
 	end
 	if variant == "h3" then
-		return 18
+		return sizes.h3
 	end
 	if variant == "h4" then
-		return 16
+		return sizes.h4
 	end
-	if variant == "h5" or variant == "h6" then
-		return 14
+	if variant == "h5" then
+		return sizes.h5
 	end
-	return 14
+	if variant == "h6" then
+		return sizes.h6
+	end
+	return sizes.body
 end
-local function richLabel(key, styles, inlines, variant, order)
+local function richLabel(key, styles, inlines, variant, order, size, sizes)
 	local text = inlinesToRichText(inlines)
 	local _attributes = {
 		key = key,
@@ -52,13 +60,104 @@ local function richLabel(key, styles, inlines, variant, order)
 	for _k, _v in styles.text do
 		_attributes[_k] = _v
 	end
+	for _k, _v in (if size ~= nil then {
+		Size = size,
+	} else {}) do
+		_attributes[_k] = _v
+	end
 	_attributes.LayoutOrder = order
 	_attributes.Text = text
-	_attributes.TextSize = textSizeFor(variant)
+	_attributes.TextSize = textSizeFor(sizes or {}, variant)
 	_attributes.Font = if variant ~= nil and variant ~= "body" then Enum.Font.SourceSansBold else Enum.Font.SourceSans
 	return React.createElement("textlabel", _attributes)
 end
-local function renderBlock(block, index, styles)
+local function inlineHasLink(inlines)
+	for _, part in inlines do
+		if markdownLinkPayload(part) ~= nil then
+			return true
+		end
+	end
+	return false
+end
+local function inlineFlow(key, styles, inlines, variant, order, onLink, sizes, flow)
+	if flow == nil then
+		flow = styles.flow
+	end
+	if not inlineHasLink(inlines) then
+		local span = if flow ~= styles.flow then flow.Size else nil
+		return richLabel(key, styles, inlines, variant, order, span, sizes)
+	end
+	local pieces = inlinePieces(inlines)
+	local textSize = textSizeFor(sizes or {}, variant)
+	local font = if variant ~= nil and variant ~= "body" then Enum.Font.SourceSansBold else Enum.Font.SourceSans
+	local _attributes = {
+		key = key,
+	}
+	for _k, _v in flow do
+		_attributes[_k] = _v
+	end
+	_attributes.LayoutOrder = order
+	local _attributes_1 = table.clone(styles.flowLayout)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#pieces)
+	local _callback = function(piece, index)
+		if piece.kind == "break" then
+			return React.createElement("frame", {
+				key = `br-{index}`,
+				LayoutOrder = index,
+				Size = UDim2.new(1, 0, 0, 0),
+				BackgroundTransparency = 1,
+				BorderSizePixel = 0,
+			})
+		end
+		if piece.kind == "link" then
+			local payload = markdownLinkPayload({
+				kind = "link",
+				text = piece.text,
+				href = piece.href,
+			})
+			if payload == nil then
+				return nil
+			end
+			return React.createElement(Link, {
+				key = `ln-{index}`,
+				text = payload.text,
+				color = "primary",
+				sx = {
+					TextSize = textSize,
+					Font = font,
+					LayoutOrder = index,
+				},
+				onActivated = function()
+					local _result = onLink
+					if _result ~= nil then
+						_result = _result(payload)
+					end
+					return _result
+				end,
+			})
+		end
+		local _attributes_2 = {
+			key = `wd-{index}`,
+		}
+		for _k, _v in styles.word do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.LayoutOrder = index
+		_attributes_2.Text = piece.text
+		_attributes_2.TextSize = textSize
+		_attributes_2.Font = font
+		return React.createElement("textlabel", _attributes_2)
+	end
+	for _k, _v in pieces do
+		_newValue[_k] = _callback(_v, _k - 1, pieces)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local function renderBlock(block, index, styles, sizes, onLink)
 	if block.kind == "heading" then
 		local _attributes = {
 			key = `h-{index}`,
@@ -67,7 +166,7 @@ local function renderBlock(block, index, styles)
 			_attributes[_k] = _v
 		end
 		_attributes.LayoutOrder = index
-		return React.createElement("frame", _attributes, richLabel("Text", styles, block.inlines, headingVariant(block.level)))
+		return React.createElement("frame", _attributes, inlineFlow("Text", styles, block.inlines, headingVariant(block.level), nil, onLink, sizes))
 	end
 	if block.kind == "paragraph" then
 		local _attributes = {
@@ -77,30 +176,19 @@ local function renderBlock(block, index, styles)
 			_attributes[_k] = _v
 		end
 		_attributes.LayoutOrder = index
-		return React.createElement("frame", _attributes, richLabel("Text", styles, block.inlines, "body"))
+		return React.createElement("frame", _attributes, inlineFlow("Text", styles, block.inlines, "body", nil, onLink, sizes))
 	end
 	if block.kind == "code" then
-		local _attributes = {
+		return React.createElement(CodeEditor, {
 			key = `c-{index}`,
-		}
-		for _k, _v in styles.code do
-			_attributes[_k] = _v
-		end
-		_attributes.LayoutOrder = index
-		local _exp = React.createElement("uicorner", {
-			CornerRadius = UDim.new(0, 4),
+			value = block.text,
+			language = block.language,
+			readOnly = true,
+			className = {
+				LayoutOrder = index,
+				Size = (styles.block).Size,
+			},
 		})
-		local _attributes_1 = table.clone(styles.codePad)
-		setmetatable(_attributes_1, nil)
-		local _exp_1 = React.createElement("uipadding", _attributes_1)
-		local _attributes_2 = {
-			key = "Code",
-		}
-		for _k, _v in styles.codeText do
-			_attributes_2[_k] = _v
-		end
-		_attributes_2.Text = block.text
-		return React.createElement("frame", _attributes, _exp, _exp_1, React.createElement("textlabel", _attributes_2))
 	end
 	if block.kind == "hr" then
 		return React.createElement(Divider, {
@@ -109,6 +197,7 @@ local function renderBlock(block, index, styles)
 			padding = 0,
 			className = {
 				LayoutOrder = index,
+				Size = (styles.block).Size,
 			},
 		})
 	end
@@ -120,19 +209,122 @@ local function renderBlock(block, index, styles)
 			_attributes[_k] = _v
 		end
 		_attributes.LayoutOrder = index
-		local _exp = React.createElement("uicorner", {
-			CornerRadius = UDim.new(0, 4),
-		})
+		local _attributes_1 = table.clone(styles.quoteCorner)
+		setmetatable(_attributes_1, nil)
+		local _exp = React.createElement("uicorner", _attributes_1)
+		local _attributes_2 = table.clone(styles.quoteBarPad)
+		setmetatable(_attributes_2, nil)
+		local _exp_1 = React.createElement("uipadding", _attributes_2)
+		local _attributes_3 = {
+			key = "Face",
+		}
+		for _k, _v in styles.quoteFace do
+			_attributes_3[_k] = _v
+		end
+		local _attributes_4 = table.clone(styles.quoteFaceCorner)
+		setmetatable(_attributes_4, nil)
+		local _exp_2 = React.createElement("uicorner", _attributes_4)
+		local _attributes_5 = table.clone(styles.quotePad)
+		setmetatable(_attributes_5, nil)
+		local _exp_3 = React.createElement("uipadding", _attributes_5)
+		local _attributes_6 = table.clone(styles.quoteStack)
+		setmetatable(_attributes_6, nil)
+		local _exp_4 = React.createElement("uilistlayout", _attributes_6)
+		local _exp_5 = block.paragraphs
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#_exp_5)
+		local _callback = function(inlines, para)
+			return inlineFlow(`p-{para}`, styles, inlines, "body", para, onLink, sizes, styles.quoteFlow)
+		end
+		for _k, _v in _exp_5 do
+			_newValue[_k] = _callback(_v, _k - 1, _exp_5)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		return React.createElement("frame", _attributes, _exp, _exp_1, React.createElement("frame", _attributes_3, _exp_2, _exp_3, _exp_4, _newValue))
+	end
+	if block.kind == "table" then
+		local alignOf = function(align)
+			if align == "center" then
+				return Enum.TextXAlignment.Center
+			end
+			if align == "right" then
+				return Enum.TextXAlignment.Right
+			end
+			return Enum.TextXAlignment.Left
+		end
+		local _array = { block.header }
+		local _length = #_array
+		local _array_1 = block.rows
+		table.move(_array_1, 1, #_array_1, _length + 1, _array)
+		local lines = _array
+		local _attributes = {
+			key = `t-{index}`,
+		}
+		for _k, _v in styles.tableScroll do
+			_attributes[_k] = _v
+		end
+		_attributes.LayoutOrder = index
 		local _attributes_1 = {
-			key = "Bar",
+			key = "Grid",
 		}
-		for _k, _v in styles.quoteBar do
+		for _k, _v in styles.tableGrid do
 			_attributes_1[_k] = _v
 		end
-		local _exp_1 = React.createElement("frame", _attributes_1)
-		local _attributes_2 = table.clone(styles.quotePad)
-		setmetatable(_attributes_2, nil)
-		return React.createElement("frame", _attributes, _exp, _exp_1, React.createElement("uipadding", _attributes_2), richLabel("Text", styles, block.inlines, "body"))
+		local _exp = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		})
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#lines)
+		local _callback = function(row, rowIndex)
+			local _attributes_2 = {
+				key = `tr-{rowIndex}`,
+			}
+			for _k, _v in styles.tableRow do
+				_attributes_2[_k] = _v
+			end
+			for _k, _v in (if rowIndex == 0 then styles.tableHead else {}) do
+				_attributes_2[_k] = _v
+			end
+			_attributes_2.LayoutOrder = rowIndex
+			local _attributes_3 = table.clone(styles.tableStroke)
+			setmetatable(_attributes_3, nil)
+			local _exp_1 = React.createElement("uistroke", _attributes_3)
+			local _exp_2 = React.createElement("uilistlayout", {
+				FillDirection = Enum.FillDirection.Horizontal,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+			})
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue_1 = table.create(#row)
+			local _callback_1 = function(cell, col)
+				local _attributes_4 = {
+					key = `td-{col}`,
+				}
+				for _k, _v in styles.tableCell do
+					_attributes_4[_k] = _v
+				end
+				for _k, _v in (if rowIndex == 0 then styles.tableHeadText else {}) do
+					_attributes_4[_k] = _v
+				end
+				_attributes_4.LayoutOrder = col
+				_attributes_4.Text = inlinesToRichText(cell)
+				_attributes_4.TextXAlignment = alignOf(block.align[col + 1] or "left")
+				local _attributes_5 = table.clone(styles.tableCellPad)
+				setmetatable(_attributes_5, nil)
+				return React.createElement("textlabel", _attributes_4, React.createElement("uipadding", _attributes_5))
+			end
+			for _k, _v in row do
+				_newValue_1[_k] = _callback_1(_v, _k - 1, row)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			return React.createElement("frame", _attributes_2, _exp_1, _exp_2, _newValue_1)
+		end
+		for _k, _v in lines do
+			_newValue[_k] = _callback(_v, _k - 1, lines)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _newValue))
 	end
 	if block.kind == "list" then
 		local _attributes = {
@@ -167,7 +359,7 @@ local function renderBlock(block, index, styles)
 				_attributes_1[_k] = _v
 			end
 			_attributes_1.LayoutOrder = itemIndex
-			return React.createElement("frame", _attributes_1, richLabel("Text", styles, labeled, "body"))
+			return React.createElement("frame", _attributes_1, inlineFlow("Text", styles, labeled, "body", nil, onLink, sizes))
 		end
 		for _k, _v in _exp_1 do
 			_newValue[_k] = _callback(_v, _k - 1, _exp_1)
@@ -183,11 +375,14 @@ local function Markdown(props)
 	if value == nil then
 		value = ""
 	end
+	local onLink = _binding.onLink
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useMarkdownStyles()
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local blocks = parseMarkdown(value)
 	local _attributes = {
 		tag = "frame",
@@ -201,19 +396,22 @@ local function Markdown(props)
 	_attributes.base = styles.root
 	_attributes.className = className
 	_attributes.sx = sx
-	local _attributes_1 = table.clone(styles.layout)
+	local _attributes_1 = table.clone(styles.inset)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _exp = React.createElement("uipadding", _attributes_1)
+	local _attributes_2 = table.clone(styles.layout)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#blocks)
 	local _callback = function(block, index)
-		return renderBlock(block, index, styles)
+		return renderBlock(block, index, styles, theme.typography.fontSizes, onLink)
 	end
 	for _k, _v in blocks do
 		_newValue[_k] = _callback(_v, _k - 1, blocks)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, _newValue)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _newValue)
 end
 local default = Markdown
 return {