@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/Flex.d.mts

@@ -1,2 +1,2 @@
-import { Jt as FlexProps, Yt as GapToken, qt as Flex } from "./index-CJhK7JND.mjs";
+import { dn as FlexProps, fn as GapToken, un as Flex } from "./index-CR8qkP8U.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.mjs

@@ -1,6 +1,6 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { View } from "./View.mjs";
-//#region src/Flex/Flex.tsx
+// src/Flex/Flex.tsx
 const shouldForwardProp = createShouldForwardProp([...props, "layout"]);
 const Flex = styled(View, {
 	name: "Flex",
@@ -11,5 +11,4 @@ const Flex = styled(View, {
 	display: "flex",
 	flexDirection: "column"
 });
-//#endregion
 export { Flex };

package/dist/FocusTrap.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/FocusTrap/FocusTrap.tsx
+// src/FocusTrap/FocusTrap.tsx
 const FocusTrapRoot = require_src.styled("div", {
 	name: "FocusTrap",
 	label: "FocusTrap"
@@ -78,5 +78,4 @@ function FocusTrap({ children, isEnabled = true, shouldAutoFocus = true, shouldT
 		children
 	});
 }
-//#endregion
 exports.FocusTrap = FocusTrap;

package/dist/FocusTrap.d.cts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-//#region src/FocusTrap/FocusTrap.d.ts
 interface FocusTrapProps {
   /** The content whose focusable descendants are trapped. */
   children: ReactNode;
@@ -20,5 +19,4 @@ interface FocusTrapProps {
  * it escapes, and restores focus to the previously focused element on deactivation.
  */
 declare function FocusTrap({ children, isEnabled, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus }: Readonly<FocusTrapProps>): import("react").JSX.Element;
-//#endregion
 export { FocusTrap, FocusTrapProps };

package/dist/FocusTrap.d.mts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-//#region src/FocusTrap/FocusTrap.d.ts
 interface FocusTrapProps {
   /** The content whose focusable descendants are trapped. */
   children: ReactNode;
@@ -20,5 +19,4 @@ interface FocusTrapProps {
  * it escapes, and restores focus to the previously focused element on deactivation.
  */
 declare function FocusTrap({ children, isEnabled, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus }: Readonly<FocusTrapProps>): import("react").JSX.Element;
-//#endregion
 export { FocusTrap, FocusTrapProps };

package/dist/FocusTrap.mjs

@@ -1,7 +1,7 @@
-import { o as styled } from "./src-DLGYOJMh.mjs";
+import { o as styled } from "./src-B-rNjHIL.mjs";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/FocusTrap/FocusTrap.tsx
+// src/FocusTrap/FocusTrap.tsx
 const FocusTrapRoot = styled("div", {
 	name: "FocusTrap",
 	label: "FocusTrap"
@@ -77,5 +77,4 @@ function FocusTrap({ children, isEnabled = true, shouldAutoFocus = true, shouldT
 		children
 	});
 }
-//#endregion
 export { FocusTrap };

package/dist/Form.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_FormContext = require("./FormContext-C2C49AJK.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Form/Form.tsx
+// src/Form/Form.tsx
 const FormRoot = require_src.styled("form", {
 	name: "Form",
 	label: "Form"
@@ -38,6 +38,5 @@ function Form({ children, onSubmit, size, color, textColor, disabled, fullWidth,
 		})
 	});
 }
-//#endregion
 exports.Form = Form;
 exports.FormContext = require_FormContext.FormContext;

package/dist/Form.d.cts

@@ -1,6 +1,5 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
 import { ReactNode, SyntheticEvent } from "react";
-//#region src/Form/Form.d.ts
 interface FormProps {
   children: ReactNode;
   onSubmit?: (event: SyntheticEvent<HTMLFormElement>) => void;
@@ -25,8 +24,6 @@ interface FormProps {
  * priority in the override chain (FormControl and explicit control props win).
  */
 declare function Form({ children, onSubmit, size, color, textColor, disabled, fullWidth, id, className, noValidate, 'data-testid': dataTestid }: Readonly<FormProps>): import("react").JSX.Element;
-//#endregion
-//#region src/Form/FormContext.d.ts
 /** Form-wide defaults, lowest priority in the override chain (overridden by FormControl, then explicit props). */
 interface FormContextValue {
   size?: keyof Theme['sizes'];
@@ -37,5 +34,4 @@ interface FormContextValue {
   fullWidth?: boolean;
 }
 declare const FormContext: import("react").Context<FormContextValue>;
-//#endregion
 export { Form, FormContext, FormContextValue, FormProps };

package/dist/Form.d.mts

@@ -1,6 +1,5 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
 import { ReactNode, SyntheticEvent } from "react";
-//#region src/Form/Form.d.ts
 interface FormProps {
   children: ReactNode;
   onSubmit?: (event: SyntheticEvent<HTMLFormElement>) => void;
@@ -25,8 +24,6 @@ interface FormProps {
  * priority in the override chain (FormControl and explicit control props win).
  */
 declare function Form({ children, onSubmit, size, color, textColor, disabled, fullWidth, id, className, noValidate, 'data-testid': dataTestid }: Readonly<FormProps>): import("react").JSX.Element;
-//#endregion
-//#region src/Form/FormContext.d.ts
 /** Form-wide defaults, lowest priority in the override chain (overridden by FormControl, then explicit props). */
 interface FormContextValue {
   size?: keyof Theme['sizes'];
@@ -37,5 +34,4 @@ interface FormContextValue {
   fullWidth?: boolean;
 }
 declare const FormContext: import("react").Context<FormContextValue>;
-//#endregion
 export { Form, FormContext, FormContextValue, FormProps };

package/dist/Form.mjs

@@ -1,8 +1,8 @@
-import { o as styled } from "./src-DLGYOJMh.mjs";
-import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
+import { o as styled } from "./src-B-rNjHIL.mjs";
+import { t as FormContext } from "./FormContext-BTm-7WM6.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Form/Form.tsx
+// src/Form/Form.tsx
 const FormRoot = styled("form", {
 	name: "Form",
 	label: "Form"
@@ -37,5 +37,4 @@ function Form({ children, onSubmit, size, color, textColor, disabled, fullWidth,
 		})
 	});
 }
-//#endregion
 export { Form, FormContext };

package/dist/{FormContext-LrjAGe6U.mjs → FormContext-BTm-7WM6.mjs}

@@ -1,5 +1,4 @@
 import { createContext } from "react";
-//#region src/Form/FormContext.ts
+// src/Form/FormContext.ts
 const FormContext = createContext({});
-//#endregion
 export { FormContext as t };

package/dist/{FormContext-BGCsWAFc.cjs → FormContext-C2C49AJK.cjs}

@@ -1,6 +1,5 @@
-//#region src/Form/FormContext.ts
+// src/Form/FormContext.ts
 const FormContext = (0, require("react").createContext)({});
-//#endregion
 Object.defineProperty(exports, "FormContext", {
 	enumerable: true,
 	get: function() {

package/dist/FormControl.cjs

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_View = require("./View.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
-const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
-const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_Flex = require("./Flex.cjs");
+const require_FormControlContext = require("./FormControlContext-DvEyxrdM.cjs");
+const require_FormContext = require("./FormContext-C2C49AJK.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/FormControl/FormControl.tsx
-const FormControlRoot = require_src.styled(require_View.View, {
+// src/FormControl/FormControl.tsx
+const FormControlRoot = require_src.styled(require_Flex.Flex, {
 	name: "FormControl",
 	label: "FormControl"
 })();
@@ -57,13 +57,14 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlRoot, {
 			width: fullWidth ? "100%" : void 0,
+			flexDirection: "column",
+			alignItems: fullWidth ? "stretch" : "flex-start",
 			...viewProps,
 			children
 		})
 	});
 }
-//#endregion
-//#region src/FormControl/useFormControl.ts
+// src/FormControl/useFormControl.ts
 /**
 * Merges a control's explicit props with FormControl and Form context.
 * Priority: explicit prop → FormControl → Form → default.
@@ -86,7 +87,6 @@ function useFormControl(overrides = {}) {
 		labelId: control?.registeredLabelId ?? void 0
 	};
 }
-//#endregion
 exports.FormControl = FormControl;
 exports.FormControlContext = require_FormControlContext.FormControlContext;
 exports.useFormControl = useFormControl;

package/dist/FormControl.d.cts

@@ -1,6 +1,5 @@
-import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.cjs";
+import { nt as Theme, yn as ViewProps } from "./index-Lsm4v8fB.cjs";
 import { ReactNode } from "react";
-//#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {
   children: ReactNode;
   /** Field id - auto-generated via `useId()` when omitted. Links FormLabel, control, and helper text. */
@@ -19,8 +18,6 @@ interface FormControlProps extends Omit<ViewProps, 'color'> {
  * `htmlFor` / `aria-describedby` link without manual coordination.
  */
 declare function FormControl({ children, id, error, disabled, required, size, fullWidth, color, textColor, ...viewProps }: Readonly<FormControlProps>): import("react").JSX.Element;
-//#endregion
-//#region src/FormControl/FormControlContext.d.ts
 /** Per-field state, middle priority in the override chain (overrides Form, overridden by explicit props). */
 interface FormControlContextValue {
   /** Field id - links FormLabel `htmlFor` and the control. Auto-generated by FormControl when not provided. */
@@ -47,8 +44,6 @@ interface FormControlContextValue {
   setHasHelperText: (present: boolean) => void;
 }
 declare const FormControlContext: import("react").Context<FormControlContextValue | null>;
-//#endregion
-//#region src/FormControl/useFormControl.d.ts
 /** Explicit props a control passes in - always win over context when defined. */
 interface FormControlOverrides {
   id?: string;
@@ -81,5 +76,4 @@ interface ResolvedFormControl {
  * `error` and `required` are field-only and never read from Form.
  */
 declare function useFormControl(overrides?: FormControlOverrides): ResolvedFormControl;
-//#endregion
 export { FormControl, FormControlContext, FormControlContextValue, FormControlOverrides, FormControlProps, ResolvedFormControl, useFormControl };

package/dist/FormControl.d.mts

@@ -1,6 +1,5 @@
-import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.mjs";
+import { nt as Theme, yn as ViewProps } from "./index-CR8qkP8U.mjs";
 import { ReactNode } from "react";
-//#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {
   children: ReactNode;
   /** Field id - auto-generated via `useId()` when omitted. Links FormLabel, control, and helper text. */
@@ -19,8 +18,6 @@ interface FormControlProps extends Omit<ViewProps, 'color'> {
  * `htmlFor` / `aria-describedby` link without manual coordination.
  */
 declare function FormControl({ children, id, error, disabled, required, size, fullWidth, color, textColor, ...viewProps }: Readonly<FormControlProps>): import("react").JSX.Element;
-//#endregion
-//#region src/FormControl/FormControlContext.d.ts
 /** Per-field state, middle priority in the override chain (overrides Form, overridden by explicit props). */
 interface FormControlContextValue {
   /** Field id - links FormLabel `htmlFor` and the control. Auto-generated by FormControl when not provided. */
@@ -47,8 +44,6 @@ interface FormControlContextValue {
   setHasHelperText: (present: boolean) => void;
 }
 declare const FormControlContext: import("react").Context<FormControlContextValue | null>;
-//#endregion
-//#region src/FormControl/useFormControl.d.ts
 /** Explicit props a control passes in - always win over context when defined. */
 interface FormControlOverrides {
   id?: string;
@@ -81,5 +76,4 @@ interface ResolvedFormControl {
  * `error` and `required` are field-only and never read from Form.
  */
 declare function useFormControl(overrides?: FormControlOverrides): ResolvedFormControl;
-//#endregion
 export { FormControl, FormControlContext, FormControlContextValue, FormControlOverrides, FormControlProps, ResolvedFormControl, useFormControl };

package/dist/FormControl.mjs

@@ -1,13 +1,13 @@
-import { o as styled } from "./src-DLGYOJMh.mjs";
-import { View } from "./View.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
-import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
-import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
+import { o as styled } from "./src-B-rNjHIL.mjs";
+import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { Flex } from "./Flex.mjs";
+import { t as FormControlContext } from "./FormControlContext-Dg_ommiF.mjs";
+import { t as FormContext } from "./FormContext-BTm-7WM6.mjs";
 import { useContext, useId, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/FormControl/FormControl.tsx
-const FormControlRoot = styled(View, {
+// src/FormControl/FormControl.tsx
+const FormControlRoot = styled(Flex, {
 	name: "FormControl",
 	label: "FormControl"
 })();
@@ -56,13 +56,14 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 		value,
 		children: /* @__PURE__ */ jsx(FormControlRoot, {
 			width: fullWidth ? "100%" : void 0,
+			flexDirection: "column",
+			alignItems: fullWidth ? "stretch" : "flex-start",
 			...viewProps,
 			children
 		})
 	});
 }
-//#endregion
-//#region src/FormControl/useFormControl.ts
+// src/FormControl/useFormControl.ts
 /**
 * Merges a control's explicit props with FormControl and Form context.
 * Priority: explicit prop → FormControl → Form → default.
@@ -85,5 +86,4 @@ function useFormControl(overrides = {}) {
 		labelId: control?.registeredLabelId ?? void 0
 	};
 }
-//#endregion
 export { FormControl, FormControlContext, useFormControl };

package/dist/{FormControlContext-CC2kToms.mjs → FormControlContext-Dg_ommiF.mjs}

@@ -1,5 +1,4 @@
 import { createContext } from "react";
-//#region src/FormControl/FormControlContext.ts
+// src/FormControl/FormControlContext.ts
 const FormControlContext = createContext(null);
-//#endregion
 export { FormControlContext as t };

package/dist/{FormControlContext-74gvPGFk.cjs → FormControlContext-DvEyxrdM.cjs}

@@ -1,6 +1,5 @@
-//#region src/FormControl/FormControlContext.ts
+// src/FormControl/FormControlContext.ts
 const FormControlContext = (0, require("react").createContext)(null);
-//#endregion
 Object.defineProperty(exports, "FormControlContext", {
 	enumerable: true,
 	get: function() {

package/dist/FormHelperText.cjs

@@ -1,15 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
-const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
+const require_FormControlContext = require("./FormControlContext-DvEyxrdM.cjs");
+const require_FormContext = require("./FormContext-C2C49AJK.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/FormHelperText/FormHelperText.tsx
+// src/FormHelperText/FormHelperText.tsx
 const FormHelperTextRoot = require_src.styled(require_Typography.Typography, {
 	name: "FormHelperText",
 	label: "FormHelperText"
-})();
+})(({ theme }) => ({ marginTop: theme.space[.5] }));
 /**
 * Helper or error text for a field. Reads its id and error state from
 * FormControl context and registers its presence so the control can point
@@ -36,5 +36,4 @@ function FormHelperText({ children, error, id, role, color, ...rest }) {
 		children
 	});
 }
-//#endregion
 exports.FormHelperText = FormHelperText;

package/dist/FormHelperText.d.cts

@@ -1,6 +1,5 @@
-import { a as TypographyProps } from "./index-K5exjvnX.cjs";
+import { a as TypographyProps } from "./index-CGyIuCRh.cjs";
 import { ReactNode } from "react";
-//#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {
   children: ReactNode;
   /** Renders in the error color and announces via `role="alert"`. Falls back to the FormControl `error` value. */
@@ -12,5 +11,4 @@ interface FormHelperTextProps extends TypographyProps {
  * `aria-describedby` at it only while it is rendered.
  */
 declare function FormHelperText({ children, error, id, role, color, ...rest }: Readonly<FormHelperTextProps>): import("react").JSX.Element;
-//#endregion
 export { FormHelperText, FormHelperTextProps };

package/dist/FormHelperText.d.mts

@@ -1,6 +1,5 @@
-import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
+import { a as TypographyProps } from "./index-C2a-5yop.mjs";
 import { ReactNode } from "react";
-//#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {
   children: ReactNode;
   /** Renders in the error color and announces via `role="alert"`. Falls back to the FormControl `error` value. */
@@ -12,5 +11,4 @@ interface FormHelperTextProps extends TypographyProps {
  * `aria-describedby` at it only while it is rendered.
  */
 declare function FormHelperText({ children, error, id, role, color, ...rest }: Readonly<FormHelperTextProps>): import("react").JSX.Element;
-//#endregion
 export { FormHelperText, FormHelperTextProps };

package/dist/FormHelperText.mjs

@@ -1,14 +1,14 @@
-import { o as styled } from "./src-DLGYOJMh.mjs";
+import { o as styled } from "./src-B-rNjHIL.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
-import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
+import { t as FormControlContext } from "./FormControlContext-Dg_ommiF.mjs";
+import { t as FormContext } from "./FormContext-BTm-7WM6.mjs";
 import { useContext, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/FormHelperText/FormHelperText.tsx
+// src/FormHelperText/FormHelperText.tsx
 const FormHelperTextRoot = styled(Typography, {
 	name: "FormHelperText",
 	label: "FormHelperText"
-})();
+})(({ theme }) => ({ marginTop: theme.space[.5] }));
 /**
 * Helper or error text for a field. Reads its id and error state from
 * FormControl context and registers its presence so the control can point
@@ -35,5 +35,4 @@ function FormHelperText({ children, error, id, role, color, ...rest }) {
 		children
 	});
 }
-//#endregion
 export { FormHelperText };

package/dist/FormLabel.cjs

@@ -1,15 +1,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
-const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
+const require_FormControlContext = require("./FormControlContext-DvEyxrdM.cjs");
+const require_FormContext = require("./FormContext-C2C49AJK.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/FormLabel/FormLabel.tsx
+// src/FormLabel/FormLabel.tsx
 const FormLabelRoot = require_src.styled(require_Typography.Typography, {
 	name: "FormLabel",
 	label: "FormLabel"
-})();
+})(({ theme }) => ({
+	display: "block",
+	marginBottom: theme.space[.5]
+}));
 /**
 * Renders a `<label>` linked to the control via `htmlFor`, reading the id and
 * `required` flag from FormControl context. All Typography props pass through,
@@ -38,5 +41,4 @@ function FormLabel({ children, required, htmlFor, id, color, ...rest }) {
 		children: [children, isRequired ? " *" : ""]
 	});
 }
-//#endregion
 exports.FormLabel = FormLabel;

package/dist/FormLabel.d.cts

@@ -1,6 +1,5 @@
-import { a as TypographyProps } from "./index-K5exjvnX.cjs";
+import { a as TypographyProps } from "./index-CGyIuCRh.cjs";
 import { ReactNode } from "react";
-//#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {
   children: ReactNode;
   /** Appends a `*` indicator. Falls back to the FormControl `required` value. */
@@ -14,5 +13,4 @@ interface FormLabelProps extends TypographyProps {
  * so callers can restyle freely while keeping the wiring automatic.
  */
 declare function FormLabel({ children, required, htmlFor, id, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
-//#endregion
 export { FormLabel, FormLabelProps };

package/dist/FormLabel.d.mts

@@ -1,6 +1,5 @@
-import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
+import { a as TypographyProps } from "./index-C2a-5yop.mjs";
 import { ReactNode } from "react";
-//#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {
   children: ReactNode;
   /** Appends a `*` indicator. Falls back to the FormControl `required` value. */
@@ -14,5 +13,4 @@ interface FormLabelProps extends TypographyProps {
  * so callers can restyle freely while keeping the wiring automatic.
  */
 declare function FormLabel({ children, required, htmlFor, id, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
-//#endregion
 export { FormLabel, FormLabelProps };

package/dist/FormLabel.mjs

@@ -1,14 +1,17 @@
-import { o as styled } from "./src-DLGYOJMh.mjs";
+import { o as styled } from "./src-B-rNjHIL.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
-import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
+import { t as FormControlContext } from "./FormControlContext-Dg_ommiF.mjs";
+import { t as FormContext } from "./FormContext-BTm-7WM6.mjs";
 import { useContext, useEffect } from "react";
 import { jsxs } from "react/jsx-runtime";
-//#region src/FormLabel/FormLabel.tsx
+// src/FormLabel/FormLabel.tsx
 const FormLabelRoot = styled(Typography, {
 	name: "FormLabel",
 	label: "FormLabel"
-})();
+})(({ theme }) => ({
+	display: "block",
+	marginBottom: theme.space[.5]
+}));
 /**
 * Renders a `<label>` linked to the control via `htmlFor`, reading the id and
 * `required` flag from FormControl context. All Typography props pass through,
@@ -37,5 +40,4 @@ function FormLabel({ children, required, htmlFor, id, color, ...rest }) {
 		children: [children, isRequired ? " *" : ""]
 	});
 }
-//#endregion
 export { FormLabel };

package/dist/Grid.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_View = require("./View.cjs");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Grid/Grid.tsx
+// src/Grid/Grid.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "layout"]);
 const Grid = require_src.styled(require_View.View, {
 	name: "Grid",
@@ -15,5 +15,4 @@ const Grid = require_src.styled(require_View.View, {
 		require_src.src_exports.space
 	]
 })({ display: "grid" });
-//#endregion
 exports.Grid = Grid;

package/dist/Grid.d.cts

@@ -1,6 +1,5 @@
-import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.cjs";
+import { nt as Theme, yn as ViewProps } from "./index-Lsm4v8fB.cjs";
 import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } from "@soroush.tech/styled-system";
-//#region src/Grid/Grid.d.ts
 /** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */
 type GapToken = keyof Theme['space'];
 /**
@@ -17,5 +16,4 @@ declare const Grid: import("@emotion/styled").StyledComponent<{
 } & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
   theme?: Theme;
 } & GridProps, {}, {}>;
-//#endregion
 export { GapToken, Grid, GridProps };

package/dist/Grid.d.mts

@@ -1,6 +1,5 @@
-import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.mjs";
+import { nt as Theme, yn as ViewProps } from "./index-CR8qkP8U.mjs";
 import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } from "@soroush.tech/styled-system";
-//#region src/Grid/Grid.d.ts
 /** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */
 type GapToken = keyof Theme['space'];
 /**
@@ -17,5 +16,4 @@ declare const Grid: import("@emotion/styled").StyledComponent<{
 } & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
   theme?: Theme;
 } & GridProps, {}, {}>;
-//#endregion
 export { GapToken, Grid, GridProps };

package/dist/Grid.mjs

@@ -1,6 +1,6 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { View } from "./View.mjs";
-//#region src/Grid/Grid.tsx
+// src/Grid/Grid.tsx
 const shouldForwardProp = createShouldForwardProp([...props, "layout"]);
 const Grid = styled(View, {
 	name: "Grid",
@@ -13,5 +13,4 @@ const Grid = styled(View, {
 		src_exports.space
 	]
 })({ display: "grid" });
-//#endregion
 export { Grid };

package/dist/Grow.cjs

@@ -0,0 +1,20 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useTransitionChild = require("./useTransitionChild-COlRozbU.cjs");
+// src/Grow/Grow.tsx
+/**
+* @description Grows one child in from a little smaller, fading as it does, and shrinks it out.
+* The child holds a `ref` and takes a `style`; out, it is hidden. A user who asked for less
+* motion sees it change at once.
+*/
+function Grow(props) {
+	return require_useTransitionChild.useTransitionChild(props, ({ status, duration, easing }) => {
+		const isIn = status === "entering" || status === "entered";
+		return {
+			opacity: isIn ? 1 : 0,
+			transform: isIn ? "none" : "scale(0.75)",
+			transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
+			visibility: status === "exited" ? "hidden" : void 0
+		};
+	});
+}
+exports.Grow = Grow;

package/dist/Grow.d.cts

@@ -0,0 +1,9 @@
+import { n as TransitionProps } from "./useTransition-C89K0mS7.cjs";
+type GrowProps = TransitionProps;
+/**
+ * @description Grows one child in from a little smaller, fading as it does, and shrinks it out.
+ * The child holds a `ref` and takes a `style`; out, it is hidden. A user who asked for less
+ * motion sees it change at once.
+ */
+declare function Grow(props: Readonly<GrowProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export { Grow, GrowProps };

package/dist/Grow.d.mts

@@ -0,0 +1,9 @@
+import { n as TransitionProps } from "./useTransition-3EoagwIe.mjs";
+type GrowProps = TransitionProps;
+/**
+ * @description Grows one child in from a little smaller, fading as it does, and shrinks it out.
+ * The child holds a `ref` and takes a `style`; out, it is hidden. A user who asked for less
+ * motion sees it change at once.
+ */
+declare function Grow(props: Readonly<GrowProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export { Grow, GrowProps };