@pyck/react 0.0.5 → 0.0.6

package/dist/components/pagination/index.js

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { c } from "react/compiler-runtime";
 import { createStyleContext } from "@pyck/styled-system/jsx";
 import { pagination } from "@pyck/styled-system/recipes";
 import { EllipsisIcon } from "lucide-react";
@@ -25,20 +26,41 @@ const Ellipsis = withContext(Pagination.Ellipsis, "ellipsis");
 const PrevTrigger = withContext(Pagination.PrevTrigger, "prevTrigger");
 const NextTrigger = withContext(Pagination.NextTrigger, "nextTrigger");
 const Items = (props) => {
+	const $ = c(11);
 	const { pages } = usePaginationContext();
-	const { render, ellipsis, ...rest } = props;
-	return <For each={pages}>
-      {(page, index) => {
-		if (page.type === "ellipsis") return <Ellipsis asChild key={index} index={index}>
-              {ellipsis || <IconButton as="span">
-                  <EllipsisIcon />
-                </IconButton>}
-            </Ellipsis>;
-		return <Item asChild key={index} type="page" value={page.value} {...rest}>
-            {render(page)}
-          </Item>;
-	}}
-    </For>;
+	let ellipsis;
+	let render;
+	let rest;
+	if ($[0] !== props) {
+		({render, ellipsis, ...rest} = props);
+		$[0] = props;
+		$[1] = ellipsis;
+		$[2] = render;
+		$[3] = rest;
+	} else {
+		ellipsis = $[1];
+		render = $[2];
+		rest = $[3];
+	}
+	let t0;
+	if ($[4] !== ellipsis || $[5] !== render || $[6] !== rest) {
+		t0 = (page, index) => {
+			if (page.type === "ellipsis") return <Ellipsis asChild={true} key={index} index={index}>{ellipsis || <IconButton as="span"><EllipsisIcon /></IconButton>}</Ellipsis>;
+			return <Item asChild={true} key={index} type="page" value={page.value} {...rest}>{render(page)}</Item>;
+		};
+		$[4] = ellipsis;
+		$[5] = render;
+		$[6] = rest;
+		$[7] = t0;
+	} else t0 = $[7];
+	let t1;
+	if ($[8] !== pages || $[9] !== t0) {
+		t1 = <For each={pages}>{t0}</For>;
+		$[8] = pages;
+		$[9] = t0;
+		$[10] = t1;
+	} else t1 = $[10];
+	return t1;
 };
 
 //#endregion

package/dist/components/progress/index.js

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { createStyleContext } from "@pyck/styled-system/jsx";
 import { progress } from "@pyck/styled-system/recipes";
@@ -33,14 +34,52 @@ const View = withContext(Progress$1.View, "view");
 //#endregion
 //#region src/components/progress/progress.closed.tsx
 const Progress = forwardRef(function Progress(props, ref) {
-	const { showValueText, valueText, label, ...rest } = props;
-	return <progress_exports.Root {...rest} ref={ref}>
-      {label && <progress_exports.Label>{label}</progress_exports.Label>}
-      <progress_exports.Track>
-        <progress_exports.Range />
-      </progress_exports.Track>
-      {showValueText && <progress_exports.ValueText>{valueText}</progress_exports.ValueText>}
-    </progress_exports.Root>;
+	const $ = c(16);
+	let label;
+	let rest;
+	let showValueText;
+	let valueText;
+	if ($[0] !== props) {
+		({showValueText, valueText, label, ...rest} = props);
+		$[0] = props;
+		$[1] = label;
+		$[2] = rest;
+		$[3] = showValueText;
+		$[4] = valueText;
+	} else {
+		label = $[1];
+		rest = $[2];
+		showValueText = $[3];
+		valueText = $[4];
+	}
+	let t0;
+	if ($[5] !== label) {
+		t0 = label && <progress_exports.Label>{label}</progress_exports.Label>;
+		$[5] = label;
+		$[6] = t0;
+	} else t0 = $[6];
+	let t1;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = <progress_exports.Track><progress_exports.Range /></progress_exports.Track>;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== showValueText || $[9] !== valueText) {
+		t2 = showValueText && <progress_exports.ValueText>{valueText}</progress_exports.ValueText>;
+		$[8] = showValueText;
+		$[9] = valueText;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== ref || $[12] !== rest || $[13] !== t0 || $[14] !== t2) {
+		t3 = <progress_exports.Root {...rest} ref={ref}>{t0}{t1}{t2}</progress_exports.Root>;
+		$[11] = ref;
+		$[12] = rest;
+		$[13] = t0;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 });
 
 //#endregion

package/dist/components/progress-circle/index.js

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { Stack, createStyleContext } from "@pyck/styled-system/jsx";
 import { progressCircle } from "@pyck/styled-system/recipes";
@@ -31,23 +32,71 @@ const View = withContext(Progress.View, "view");
 //#endregion
 //#region src/components/progress-circle/progress-circle.closed.tsx
 const ProgressCircle = forwardRef(function ProgressCircle(props, ref) {
-	const { showValueText, valueText, label, ...rest } = props;
-	return <progress_circle_exports.Root {...rest} ref={ref}>
-        <progress_circle_exports.Circle>
-          <progress_circle_exports.Track />
-          <progress_circle_exports.Range />
-        </progress_circle_exports.Circle>
-        <AbsoluteCenter>
-          <Stack gap="0" align="center">
-            <Show when={label}>
-              <progress_circle_exports.Label>{label}</progress_circle_exports.Label>
-            </Show>
-            <Show when={showValueText}>
-              <progress_circle_exports.ValueText>{valueText}</progress_circle_exports.ValueText>
-            </Show>
-          </Stack>
-        </AbsoluteCenter>
-      </progress_circle_exports.Root>;
+	const $ = c(23);
+	let label;
+	let rest;
+	let showValueText;
+	let valueText;
+	if ($[0] !== props) {
+		({showValueText, valueText, label, ...rest} = props);
+		$[0] = props;
+		$[1] = label;
+		$[2] = rest;
+		$[3] = showValueText;
+		$[4] = valueText;
+	} else {
+		label = $[1];
+		rest = $[2];
+		showValueText = $[3];
+		valueText = $[4];
+	}
+	let t0;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = <progress_circle_exports.Circle><progress_circle_exports.Track /><progress_circle_exports.Range /></progress_circle_exports.Circle>;
+		$[5] = t0;
+	} else t0 = $[5];
+	let t1;
+	if ($[6] !== label) {
+		t1 = <progress_circle_exports.Label>{label}</progress_circle_exports.Label>;
+		$[6] = label;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== label || $[9] !== t1) {
+		t2 = <Show when={label}>{t1}</Show>;
+		$[8] = label;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== valueText) {
+		t3 = <progress_circle_exports.ValueText>{valueText}</progress_circle_exports.ValueText>;
+		$[11] = valueText;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== showValueText || $[14] !== t3) {
+		t4 = <Show when={showValueText}>{t3}</Show>;
+		$[13] = showValueText;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== t2 || $[17] !== t4) {
+		t5 = <AbsoluteCenter><Stack gap="0" align="center">{t2}{t4}</Stack></AbsoluteCenter>;
+		$[16] = t2;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== ref || $[20] !== rest || $[21] !== t5) {
+		t6 = <progress_circle_exports.Root {...rest} ref={ref}>{t0}{t5}</progress_circle_exports.Root>;
+		$[19] = ref;
+		$[20] = rest;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
+	return t6;
 });
 
 //#endregion

package/dist/components/radio-group/index.js

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { createStyleContext } from "@pyck/styled-system/jsx";
 import { radioGroup } from "@pyck/styled-system/recipes";
@@ -29,12 +30,52 @@ const ItemHiddenInput = RadioGroup.ItemHiddenInput;
 //#endregion
 //#region src/components/radio-group/radio-group.closed.tsx
 const Radio = forwardRef(function Radio(props, ref) {
-	const { children, inputProps, rootRef, ...rest } = props;
-	return <radio_group_exports.Item ref={rootRef} {...rest}>
-      <radio_group_exports.ItemHiddenInput ref={ref} {...inputProps} />
-      <radio_group_exports.ItemControl />
-      {children && <radio_group_exports.ItemText>{children}</radio_group_exports.ItemText>}
-    </radio_group_exports.Item>;
+	const $ = c(16);
+	let children;
+	let inputProps;
+	let rest;
+	let rootRef;
+	if ($[0] !== props) {
+		({children, inputProps, rootRef, ...rest} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = inputProps;
+		$[3] = rest;
+		$[4] = rootRef;
+	} else {
+		children = $[1];
+		inputProps = $[2];
+		rest = $[3];
+		rootRef = $[4];
+	}
+	let t0;
+	if ($[5] !== inputProps || $[6] !== ref) {
+		t0 = <radio_group_exports.ItemHiddenInput ref={ref} {...inputProps} />;
+		$[5] = inputProps;
+		$[6] = ref;
+		$[7] = t0;
+	} else t0 = $[7];
+	let t1;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = <radio_group_exports.ItemControl />;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== children) {
+		t2 = children && <radio_group_exports.ItemText>{children}</radio_group_exports.ItemText>;
+		$[9] = children;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== rest || $[12] !== rootRef || $[13] !== t0 || $[14] !== t2) {
+		t3 = <radio_group_exports.Item ref={rootRef} {...rest}>{t0}{t1}{t2}</radio_group_exports.Item>;
+		$[11] = rest;
+		$[12] = rootRef;
+		$[13] = t0;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 });
 
 //#endregion

package/dist/components/scroll-area/index.js

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { createStyleContext } from "@pyck/styled-system/jsx";
 import { scrollArea } from "@pyck/styled-system/recipes";
@@ -24,17 +25,71 @@ const Viewport = withContext(ScrollArea$1.Viewport, "viewport");
 //#endregion
 //#region src/components/scroll-area/scroll-area.closed.tsx
 const ScrollArea = forwardRef(function ScrollArea(props, ref) {
-	const { children, scrollbars = "both", contentProps, ...rest } = props;
+	const $ = c(24);
+	let children;
+	let contentProps;
+	let rest;
+	let t0;
+	if ($[0] !== props) {
+		({children, scrollbars: t0, contentProps, ...rest} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = contentProps;
+		$[3] = rest;
+		$[4] = t0;
+	} else {
+		children = $[1];
+		contentProps = $[2];
+		rest = $[3];
+		t0 = $[4];
+	}
+	const scrollbars = t0 === void 0 ? "both" : t0;
 	const showVertical = scrollbars === "vertical" || scrollbars === "both";
 	const showHorizontal = scrollbars === "horizontal" || scrollbars === "both";
-	return <scroll_area_exports.Root {...rest}>
-        <scroll_area_exports.Viewport ref={ref}>
-          <scroll_area_exports.Content {...contentProps}>{children}</scroll_area_exports.Content>
-        </scroll_area_exports.Viewport>
-        {showVertical && <scroll_area_exports.Scrollbar orientation="vertical" />}
-        {showHorizontal && <scroll_area_exports.Scrollbar orientation="horizontal" />}
-        {showVertical && showHorizontal && <scroll_area_exports.Corner />}
-      </scroll_area_exports.Root>;
+	let t1;
+	if ($[5] !== children || $[6] !== contentProps) {
+		t1 = <scroll_area_exports.Content {...contentProps}>{children}</scroll_area_exports.Content>;
+		$[5] = children;
+		$[6] = contentProps;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== ref || $[9] !== t1) {
+		t2 = <scroll_area_exports.Viewport ref={ref}>{t1}</scroll_area_exports.Viewport>;
+		$[8] = ref;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== showVertical) {
+		t3 = showVertical && <scroll_area_exports.Scrollbar orientation="vertical" />;
+		$[11] = showVertical;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== showHorizontal) {
+		t4 = showHorizontal && <scroll_area_exports.Scrollbar orientation="horizontal" />;
+		$[13] = showHorizontal;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== showHorizontal || $[16] !== showVertical) {
+		t5 = showVertical && showHorizontal && <scroll_area_exports.Corner />;
+		$[15] = showHorizontal;
+		$[16] = showVertical;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== rest || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5) {
+		t6 = <scroll_area_exports.Root {...rest}>{t2}{t3}{t4}{t5}</scroll_area_exports.Root>;
+		$[18] = rest;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	return t6;
 });
 
 //#endregion

package/dist/components/segment-group/index.js

@@ -1,5 +1,6 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
 import { n as isString } from "../../function-DOGwA2sm.js";
+import { c } from "react/compiler-runtime";
 import { useMemo } from "react";
 import { createStyleContext } from "@pyck/styled-system/jsx";
 import { segmentGroup } from "@pyck/styled-system/recipes";
@@ -31,11 +32,39 @@ const ItemHiddenInput = SegmentGroup.ItemHiddenInput;
 const ItemText = withContext(SegmentGroup.ItemText, "itemText");
 const Label = withContext(SegmentGroup.Label, "label");
 const Items = (props) => {
-	const { items, ...itemProps } = props;
-	return useMemo(() => normalize(items), [items]).map((item) => <Item key={item.value} value={item.value} disabled={item.disabled} {...itemProps}>
-      <ItemText>{item.label}</ItemText>
-      <ItemHiddenInput />
-    </Item>);
+	const $ = c(10);
+	let itemProps;
+	let items;
+	if ($[0] !== props) {
+		({items, ...itemProps} = props);
+		$[0] = props;
+		$[1] = itemProps;
+		$[2] = items;
+	} else {
+		itemProps = $[1];
+		items = $[2];
+	}
+	let t0;
+	if ($[3] !== items) {
+		t0 = normalize(items);
+		$[3] = items;
+		$[4] = t0;
+	} else t0 = $[4];
+	const data = t0;
+	let t1;
+	if ($[5] !== data || $[6] !== itemProps) {
+		let t2;
+		if ($[8] !== itemProps) {
+			t2 = (item) => <Item key={item.value} value={item.value} disabled={item.disabled} {...itemProps}><ItemText>{item.label}</ItemText><ItemHiddenInput /></Item>;
+			$[8] = itemProps;
+			$[9] = t2;
+		} else t2 = $[9];
+		t1 = data.map(t2);
+		$[5] = data;
+		$[6] = itemProps;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
 };
 const normalize = (items) => items.map((item) => isString(item) ? {
 	value: item,

package/dist/components/select/index.js

@@ -1,5 +1,6 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
 import { createListCollection } from "@ark-ui/react/collection";
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { ark } from "@ark-ui/react/factory";
 import { createStyleContext } from "@pyck/styled-system/jsx";
@@ -52,12 +53,33 @@ const Indicator = withContext(Select$1.Indicator, "indicator", { defaultProps: {
 const HiddenSelect = Select$1.HiddenSelect;
 const StyledItemIndicator = withContext(Select$1.ItemIndicator, "itemIndicator");
 const ItemIndicator$1 = forwardRef(function ItemIndicator(props, ref) {
+	const $ = c(8);
 	const item = useSelectItemContext();
-	return <Show when={item.selected} fallback={<svg aria-hidden="true" focusable="false" />}>
-        <StyledItemIndicator ref={ref} {...props}>
-          <CheckIcon />
-        </StyledItemIndicator>
-      </Show>;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = <svg aria-hidden="true" focusable="false" />;
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = <CheckIcon />;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== props || $[3] !== ref) {
+		t2 = <StyledItemIndicator ref={ref} {...props}>{t1}</StyledItemIndicator>;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== item.selected || $[6] !== t2) {
+		t3 = <Show when={item.selected} fallback={t0}>{t2}</Show>;
+		$[5] = item.selected;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 });
 
 //#endregion
@@ -68,23 +90,65 @@ var select_field_exports = /* @__PURE__ */ __exportAll({
 	Root: () => Root
 });
 const Root = (props) => {
-	const { name, label, placeholder, hideLabel, helperText, disabled, required, ...selectProps } = props;
+	const $ = c(22);
+	let disabled;
+	let helperText;
+	let hideLabel;
+	let label;
+	let name;
+	let placeholder;
+	let required;
+	let selectProps;
+	if ($[0] !== props) {
+		({name, label, placeholder, hideLabel, helperText, disabled, required, ...selectProps} = props);
+		$[0] = props;
+		$[1] = disabled;
+		$[2] = helperText;
+		$[3] = hideLabel;
+		$[4] = label;
+		$[5] = name;
+		$[6] = placeholder;
+		$[7] = required;
+		$[8] = selectProps;
+	} else {
+		disabled = $[1];
+		helperText = $[2];
+		hideLabel = $[3];
+		label = $[4];
+		name = $[5];
+		placeholder = $[6];
+		required = $[7];
+		selectProps = $[8];
+	}
 	const { control } = useFormContext();
-	return <Controller name={name} control={control} render={({ field, fieldState }) => <Field label={label} helperText={helperText} hideLabel={hideLabel} disabled={field.disabled || disabled} invalid={!!fieldState.error} errorText={fieldState.error?.message} required={required}>
-          <Select.Root {...selectProps} name={field.name} onBlur={field.onBlur} onInteractOutside={field.onBlur} onValueChange={({ value }) => field.onChange(selectProps.multiple ? value : value[0])} value={[field.value].flat().filter(Boolean)}>
-            <Select.Control>
-              <Select.Trigger>
-                <Select.ValueText placeholder={placeholder} />
-                <Select.IndicatorGroup>
-                  <Select.Indicator />
-                </Select.IndicatorGroup>
-              </Select.Trigger>
-            </Select.Control>
-            <Select.Positioner>
-              <Select.Content>{props.children}</Select.Content>
-            </Select.Positioner>
-          </Select.Root>
-        </Field>} />;
+	let t0;
+	if ($[9] !== disabled || $[10] !== helperText || $[11] !== hideLabel || $[12] !== label || $[13] !== placeholder || $[14] !== props.children || $[15] !== required || $[16] !== selectProps) {
+		t0 = (t1) => {
+			const { field, fieldState } = t1;
+			return <Field label={label} helperText={helperText} hideLabel={hideLabel} disabled={field.disabled || disabled} invalid={!!fieldState.error} errorText={fieldState.error?.message} required={required}><Select.Root {...selectProps} name={field.name} onBlur={field.onBlur} onInteractOutside={field.onBlur} onValueChange={(t2) => {
+				const { value } = t2;
+				return field.onChange(selectProps.multiple ? value : value[0]);
+			}} value={[field.value].flat().filter(Boolean)}><Select.Control><Select.Trigger><Select.ValueText placeholder={placeholder} /><Select.IndicatorGroup><Select.Indicator /></Select.IndicatorGroup></Select.Trigger></Select.Control><Select.Positioner><Select.Content>{props.children}</Select.Content></Select.Positioner></Select.Root></Field>;
+		};
+		$[9] = disabled;
+		$[10] = helperText;
+		$[11] = hideLabel;
+		$[12] = label;
+		$[13] = placeholder;
+		$[14] = props.children;
+		$[15] = required;
+		$[16] = selectProps;
+		$[17] = t0;
+	} else t0 = $[17];
+	let t1;
+	if ($[18] !== control || $[19] !== name || $[20] !== t0) {
+		t1 = <Controller name={name} control={control} render={t0} />;
+		$[18] = control;
+		$[19] = name;
+		$[20] = t0;
+		$[21] = t1;
+	} else t1 = $[21];
+	return t1;
 };
 const Item = Select.Item;
 const ItemIndicator = Select.ItemIndicator;

package/dist/components/show/index.js

@@ -1,3 +1,3 @@
-import { t as Show } from "../../show-IaI-36v9.js";
+import { t as Show } from "../../show-DAysVQAC.js";
 
 export { Show };

package/dist/components/skeleton/index.js

@@ -1,3 +1,4 @@
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { ark } from "@ark-ui/react/factory";
 import { Stack, styled } from "@pyck/styled-system/jsx";
@@ -7,10 +8,49 @@ import { skeleton } from "@pyck/styled-system/recipes";
 const Skeleton = styled(ark.div, skeleton);
 const SkeletonCircle = styled(ark.div, skeleton, { defaultProps: { circle: true } });
 const SkeletonText = forwardRef(function SkeletonText(props, ref) {
-	const { noOfLines = 3, gap, rootProps, ...skeletonProps } = props;
-	return <Stack ref={ref} gap={gap} width="full" {...rootProps}>
-        {[...Array(noOfLines).keys()].map((index) => <Skeleton key={index} height="4" _last={{ maxW: noOfLines === 1 ? "100%" : "80%" }} {...skeletonProps} />)}
-      </Stack>;
+	const $ = c(16);
+	let gap;
+	let rootProps;
+	let skeletonProps;
+	let t0;
+	if ($[0] !== props) {
+		({noOfLines: t0, gap, rootProps, ...skeletonProps} = props);
+		$[0] = props;
+		$[1] = gap;
+		$[2] = rootProps;
+		$[3] = skeletonProps;
+		$[4] = t0;
+	} else {
+		gap = $[1];
+		rootProps = $[2];
+		skeletonProps = $[3];
+		t0 = $[4];
+	}
+	const noOfLines = t0 === void 0 ? 3 : t0;
+	let t1;
+	if ($[5] !== noOfLines) {
+		t1 = [...Array(noOfLines).keys()];
+		$[5] = noOfLines;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== noOfLines || $[8] !== skeletonProps || $[9] !== t1) {
+		t2 = t1.map((index) => <Skeleton key={index} height="4" _last={{ maxW: noOfLines === 1 ? "100%" : "80%" }} {...skeletonProps} />);
+		$[7] = noOfLines;
+		$[8] = skeletonProps;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== gap || $[12] !== ref || $[13] !== rootProps || $[14] !== t2) {
+		t3 = <Stack ref={ref} gap={gap} width="full" {...rootProps}>{t2}</Stack>;
+		$[11] = gap;
+		$[12] = ref;
+		$[13] = rootProps;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 });
 
 //#endregion