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

package/README.md

@@ -121,16 +121,20 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 ### Inputs & forms
 
-| Component                                            | Purpose                                                                 |
-| ---------------------------------------------------- | ----------------------------------------------------------------------- |
-| `Button`, `ButtonGroup`, `ToggleButton`              | Actions and toggles                                                     |
-| `TextInput`                                          | Text field                                                              |
-| `Checkbox`, `Radio`, `Switch`                        | Selection controls                                                      |
-| `NativeSelect`                                       | Low-level platform `<select>` - not recommended; use `Select native`    |
-| `Select`                                             | The select to use - custom listbox, or `native` for the platform picker |
-| `MenuItem`                                           | Option row for `Select`'s listbox, and a menu row in a `MenuList`       |
-| `Form`, `FormControl`, `FormLabel`, `FormHelperText` | Form composition and labeling                                           |
-| `Pagination`                                         | Page navigation control                                                 |
+| Component                                            | Purpose                                                                                   |
+| ---------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `Button`, `ButtonGroup`, `ToggleButton`              | Actions and toggles                                                                       |
+| `TextInput`                                          | Text field                                                                                |
+| `Checkbox`, `Radio`, `Switch`                        | Selection controls                                                                        |
+| `InputRange`                                         | A slider - one value on a range, or two or more thumbs for a range of values              |
+| `TransferList`                                       | Two lists and the buttons that move the checked items from one to the other               |
+| `NumberField`                                        | A field for a number - read in its locale, clamped to a range, stepped by keys or buttons |
+| `Rating`                                             | A row of icons the user sets as a rating, or a read-only display of one                   |
+| `NativeSelect`                                       | Low-level platform `<select>` - not recommended; use `Select native`                      |
+| `Select`                                             | The select to use - custom listbox, or `native` for the platform picker                   |
+| `MenuItem`                                           | Option row for `Select`'s listbox, and a menu row in a `MenuList`                         |
+| `Form`, `FormControl`, `FormLabel`, `FormHelperText` | Form composition and labeling                                                             |
+| `Pagination`                                         | Page navigation control                                                                   |
 
 ### Navigation & menus
 

package/dist/AppBar.d.cts

@@ -1,4 +1,4 @@
-import { V as Theme, Wt as FlexProps } from "./index-DmJ7yWWi.cjs";
+import { Jt as FlexProps, W as Theme } from "./index-DJ0f69wh.cjs";
 //#region src/AppBar/AppBar.d.ts
 /** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];

package/dist/AppBar.d.mts

@@ -1,4 +1,4 @@
-import { V as Theme, Wt as FlexProps } from "./index-CVNJEUwJ.mjs";
+import { Jt as FlexProps, W as Theme } from "./index-CJhK7JND.mjs";
 //#region src/AppBar/AppBar.d.ts
 /** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];

package/dist/Avatar.d.cts

@@ -1,4 +1,4 @@
-import { V as Theme, Wt as FlexProps } from "./index-DmJ7yWWi.cjs";
+import { Jt as FlexProps, W as Theme } from "./index-DJ0f69wh.cjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Avatar.d.mts

@@ -1,4 +1,4 @@
-import { V as Theme, Wt as FlexProps } from "./index-CVNJEUwJ.mjs";
+import { Jt as FlexProps, W as Theme } from "./index-CJhK7JND.mjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Backdrop.d.cts

@@ -1,4 +1,4 @@
-import { Qt as ViewProps } from "./index-DmJ7yWWi.cjs";
+import { nn as ViewProps } from "./index-DJ0f69wh.cjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Backdrop.d.mts

@@ -1,4 +1,4 @@
-import { Qt as ViewProps } from "./index-CVNJEUwJ.mjs";
+import { nn as ViewProps } from "./index-CJhK7JND.mjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Breadcrumbs.cjs

@@ -3,7 +3,7 @@ const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-Cvuhp9ek.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Breadcrumbs/Breadcrumbs.tsx

package/dist/Breadcrumbs.d.cts

@@ -1,6 +1,6 @@
-import { dt as TypographyVariant } from "./index-DmJ7yWWi.cjs";
-import { a as TypographyProps } from "./index-IdMqR82e.cjs";
-import { n as IconProps } from "./index-qlfNErNd.cjs";
+import { ht as TypographyVariant } from "./index-DJ0f69wh.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.cjs";
+import { n as IconProps } from "./index-Dv_fk1_F.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Breadcrumbs/Breadcrumbs.d.ts
 interface BreadcrumbsProps extends Omit<TypographyProps, 'children' | 'variant'> {

package/dist/Breadcrumbs.d.mts

@@ -1,6 +1,6 @@
-import { dt as TypographyVariant } from "./index-CVNJEUwJ.mjs";
-import { a as TypographyProps } from "./index-BSA6SKao.mjs";
-import { n as IconProps } from "./index-BqpS_Huq.mjs";
+import { ht as TypographyVariant } from "./index-CJhK7JND.mjs";
+import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
+import { n as IconProps } from "./index-ha1WjSZ5.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Breadcrumbs/Breadcrumbs.d.ts
 interface BreadcrumbsProps extends Omit<TypographyProps, 'children' | 'variant'> {

package/dist/Breadcrumbs.mjs

@@ -2,7 +2,7 @@ import { a as src_exports, o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { n as useDefaultProps } from "./theme-Z9_QludW.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-DlheCTJb.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
 import { Children, isValidElement, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Breadcrumbs/Breadcrumbs.tsx

package/dist/Button.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-XxydXX8l.cjs";
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-DAwcmIjN.cjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.d.mts

@@ -1,2 +1,2 @@
-import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-Bxd9NOWb.mjs";
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-CG_1uPrD.mjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/ButtonGroup.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-BjfPEP_5.cjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-CQfJZADG.cjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.d.mts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-B8DNxyEw.mjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-BrgwkY6z.mjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/Card.cjs

@@ -3,7 +3,7 @@ const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-Cvuhp9ek.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
 const require_Paper = require("./Paper.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Card.d.cts

@@ -1,7 +1,7 @@
-import { Ht as PaperProps } from "./index-DmJ7yWWi.cjs";
-import { a as TypographyProps } from "./index-IdMqR82e.cjs";
-import { n as IconProps, r as IconName } from "./index-qlfNErNd.cjs";
-import "./index-DBteSahY.cjs";
+import { Kt as PaperProps } from "./index-DJ0f69wh.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.cjs";
+import { n as IconProps, r as IconName } from "./index-Dv_fk1_F.cjs";
+import "./index-BxVTIMnB.cjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.d.mts

@@ -1,7 +1,7 @@
-import { Ht as PaperProps } from "./index-CVNJEUwJ.mjs";
-import { a as TypographyProps } from "./index-BSA6SKao.mjs";
-import { n as IconProps, r as IconName } from "./index-BqpS_Huq.mjs";
-import "./index-_G1osn09.mjs";
+import { Kt as PaperProps } from "./index-CJhK7JND.mjs";
+import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
+import { n as IconProps, r as IconName } from "./index-ha1WjSZ5.mjs";
+import "./index-DaIIo5QU.mjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.mjs

@@ -2,7 +2,7 @@ import { o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-DlheCTJb.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
 import { Paper } from "./Paper.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/Checkbox.d.cts

@@ -1,4 +1,4 @@
-import { M as PaletteColor, V as Theme } from "./index-DmJ7yWWi.cjs";
+import { P as PaletteColor, W as Theme } from "./index-DJ0f69wh.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Checkbox/Checkbox.d.ts

package/dist/Checkbox.d.mts

@@ -1,4 +1,4 @@
-import { M as PaletteColor, V as Theme } from "./index-CVNJEUwJ.mjs";
+import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/Checkbox/Checkbox.d.ts

package/dist/CircularProgress.d.cts

@@ -1,5 +1,5 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
-import { n as ButtonColor } from "./index-XxydXX8l.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { n as ButtonColor } from "./index-DAwcmIjN.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/CircularProgress.d.mts

@@ -1,5 +1,5 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
-import { n as ButtonColor } from "./index-Bxd9NOWb.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { n as ButtonColor } from "./index-CG_1uPrD.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/Drawer.d.cts

@@ -1,6 +1,6 @@
-import { Vt as PaperElevation } from "./index-DmJ7yWWi.cjs";
-import { i as ButtonProps } from "./index-XxydXX8l.cjs";
-import "./index-DBteSahY.cjs";
+import { Gt as PaperElevation } from "./index-DJ0f69wh.cjs";
+import { i as ButtonProps } from "./index-DAwcmIjN.cjs";
+import "./index-BxVTIMnB.cjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Drawer.d.mts

@@ -1,6 +1,6 @@
-import { Vt as PaperElevation } from "./index-CVNJEUwJ.mjs";
-import { i as ButtonProps } from "./index-Bxd9NOWb.mjs";
-import "./index-_G1osn09.mjs";
+import { Gt as PaperElevation } from "./index-CJhK7JND.mjs";
+import { i as ButtonProps } from "./index-CG_1uPrD.mjs";
+import "./index-DaIIo5QU.mjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Flex.d.cts

@@ -1,2 +1,2 @@
-import { Gt as GapToken, Ut as Flex, Wt as FlexProps } from "./index-DmJ7yWWi.cjs";
+import { Jt as FlexProps, Yt as GapToken, qt as Flex } from "./index-DJ0f69wh.cjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.d.mts

@@ -1,2 +1,2 @@
-import { Gt as GapToken, Ut as Flex, Wt as FlexProps } from "./index-CVNJEUwJ.mjs";
+import { Jt as FlexProps, Yt as GapToken, qt as Flex } from "./index-CJhK7JND.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Form.d.cts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/Form.d.mts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/FormControl.cjs

@@ -21,10 +21,15 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 	const generatedId = (0, react.useId)();
 	const resolvedId = id ?? generatedId;
 	const helperId = `${resolvedId}-helper`;
+	const labelId = `${resolvedId}-label`;
 	const [hasHelperText, setHasHelperText] = (0, react.useState)(false);
+	const [registeredLabelId, setRegisteredLabelId] = (0, react.useState)(null);
 	const value = (0, react.useMemo)(() => ({
 		id: resolvedId,
 		helperId,
+		labelId,
+		registeredLabelId,
+		setLabelId: setRegisteredLabelId,
 		error,
 		disabled,
 		required,
@@ -37,6 +42,8 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 	}), [
 		resolvedId,
 		helperId,
+		labelId,
+		registeredLabelId,
 		error,
 		disabled,
 		required,
@@ -75,7 +82,8 @@ function useFormControl(overrides = {}) {
 		fullWidth: overrides.fullWidth ?? control?.fullWidth ?? form.fullWidth ?? false,
 		color: overrides.color ?? control?.color ?? form.color,
 		textColor: overrides.textColor ?? control?.textColor ?? form.textColor,
-		"aria-describedby": control?.hasHelperText ? control.helperId : void 0
+		"aria-describedby": control?.hasHelperText ? control.helperId : void 0,
+		labelId: control?.registeredLabelId ?? void 0
 	};
 }
 //#endregion

package/dist/FormControl.d.cts

@@ -1,4 +1,4 @@
-import { Qt as ViewProps, V as Theme } from "./index-DmJ7yWWi.cjs";
+import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.cjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {
@@ -35,6 +35,12 @@ interface FormControlContextValue {
   color?: keyof Theme['palette'];
   /** Text color for label/helper/input content - resolves against `theme.text`. */
   textColor?: keyof Theme['text'];
+  /** The id a FormLabel takes when it is not given one of its own. */
+  labelId: string;
+  /** The id of the FormLabel now rendered - a group control (a radio group, a rating) names itself by it - or `null` with none. */
+  registeredLabelId: string | null;
+  /** Stable setter FormLabel calls to register its rendered id, and to clear it when it goes. */
+  setLabelId: (id: string | null) => void;
   /** Whether a FormHelperText is currently rendered - drives `aria-describedby` on the control. */
   hasHelperText: boolean;
   /** Stable setter FormHelperText calls to register/unregister its presence. */
@@ -66,6 +72,8 @@ interface ResolvedFormControl {
   textColor?: keyof Theme['text'];
   /** Points at the helper text id only while one is rendered - avoids a dangling reference. */
   'aria-describedby'?: string;
+  /** The FormLabel's id while one is rendered - for a group control, which a `for` can't label. */
+  labelId?: string;
 }
 /**
  * Merges a control's explicit props with FormControl and Form context.

package/dist/FormControl.d.mts

@@ -1,4 +1,4 @@
-import { Qt as ViewProps, V as Theme } from "./index-CVNJEUwJ.mjs";
+import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.mjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {
@@ -35,6 +35,12 @@ interface FormControlContextValue {
   color?: keyof Theme['palette'];
   /** Text color for label/helper/input content - resolves against `theme.text`. */
   textColor?: keyof Theme['text'];
+  /** The id a FormLabel takes when it is not given one of its own. */
+  labelId: string;
+  /** The id of the FormLabel now rendered - a group control (a radio group, a rating) names itself by it - or `null` with none. */
+  registeredLabelId: string | null;
+  /** Stable setter FormLabel calls to register its rendered id, and to clear it when it goes. */
+  setLabelId: (id: string | null) => void;
   /** Whether a FormHelperText is currently rendered - drives `aria-describedby` on the control. */
   hasHelperText: boolean;
   /** Stable setter FormHelperText calls to register/unregister its presence. */
@@ -66,6 +72,8 @@ interface ResolvedFormControl {
   textColor?: keyof Theme['text'];
   /** Points at the helper text id only while one is rendered - avoids a dangling reference. */
   'aria-describedby'?: string;
+  /** The FormLabel's id while one is rendered - for a group control, which a `for` can't label. */
+  labelId?: string;
 }
 /**
  * Merges a control's explicit props with FormControl and Form context.

package/dist/FormControl.mjs

@@ -20,10 +20,15 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 	const generatedId = useId();
 	const resolvedId = id ?? generatedId;
 	const helperId = `${resolvedId}-helper`;
+	const labelId = `${resolvedId}-label`;
 	const [hasHelperText, setHasHelperText] = useState(false);
+	const [registeredLabelId, setRegisteredLabelId] = useState(null);
 	const value = useMemo(() => ({
 		id: resolvedId,
 		helperId,
+		labelId,
+		registeredLabelId,
+		setLabelId: setRegisteredLabelId,
 		error,
 		disabled,
 		required,
@@ -36,6 +41,8 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 	}), [
 		resolvedId,
 		helperId,
+		labelId,
+		registeredLabelId,
 		error,
 		disabled,
 		required,
@@ -74,7 +81,8 @@ function useFormControl(overrides = {}) {
 		fullWidth: overrides.fullWidth ?? control?.fullWidth ?? form.fullWidth ?? false,
 		color: overrides.color ?? control?.color ?? form.color,
 		textColor: overrides.textColor ?? control?.textColor ?? form.textColor,
-		"aria-describedby": control?.hasHelperText ? control.helperId : void 0
+		"aria-describedby": control?.hasHelperText ? control.helperId : void 0,
+		labelId: control?.registeredLabelId ?? void 0
 	};
 }
 //#endregion

package/dist/FormHelperText.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-IdMqR82e.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.cjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormHelperText.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BSA6SKao.mjs";
+import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormLabel.cjs

@@ -15,14 +15,22 @@ const FormLabelRoot = require_src.styled(require_Typography.Typography, {
 * `required` flag from FormControl context. All Typography props pass through,
 * so callers can restyle freely while keeping the wiring automatic.
 */
-function FormLabel({ children, required, htmlFor, color, ...rest }) {
+function FormLabel({ children, required, htmlFor, id, color, ...rest }) {
 	const control = (0, react.useContext)(require_FormControlContext.FormControlContext);
 	const form = (0, react.useContext)(require_FormContext.FormContext);
 	const isRequired = required ?? control?.required ?? false;
 	const resolvedFor = htmlFor ?? control?.id;
+	const renderedId = id ?? control?.labelId;
+	const setLabelId = control?.setLabelId;
+	(0, react.useEffect)(() => {
+		if (!setLabelId || !renderedId) return void 0;
+		setLabelId(renderedId);
+		return () => setLabelId(null);
+	}, [setLabelId, renderedId]);
 	const resolvedColor = color ?? control?.textColor ?? form.textColor;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FormLabelRoot, {
 		as: "label",
+		id: renderedId,
 		htmlFor: resolvedFor,
 		variant: "body2",
 		...rest,

package/dist/FormLabel.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-IdMqR82e.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.cjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {
@@ -13,6 +13,6 @@ interface FormLabelProps extends TypographyProps {
  * `required` flag from FormControl context. All Typography props pass through,
  * so callers can restyle freely while keeping the wiring automatic.
  */
-declare function FormLabel({ children, required, htmlFor, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
+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,4 +1,4 @@
-import { a as TypographyProps } from "./index-BSA6SKao.mjs";
+import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {
@@ -13,6 +13,6 @@ interface FormLabelProps extends TypographyProps {
  * `required` flag from FormControl context. All Typography props pass through,
  * so callers can restyle freely while keeping the wiring automatic.
  */
-declare function FormLabel({ children, required, htmlFor, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
+declare function FormLabel({ children, required, htmlFor, id, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
 //#endregion
 export { FormLabel, FormLabelProps };

package/dist/FormLabel.mjs

@@ -2,7 +2,7 @@ import { o as styled } from "./src-DLGYOJMh.mjs";
 import { Typography } from "./Typography.mjs";
 import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
 import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { jsxs } from "react/jsx-runtime";
 //#region src/FormLabel/FormLabel.tsx
 const FormLabelRoot = styled(Typography, {
@@ -14,14 +14,22 @@ const FormLabelRoot = styled(Typography, {
 * `required` flag from FormControl context. All Typography props pass through,
 * so callers can restyle freely while keeping the wiring automatic.
 */
-function FormLabel({ children, required, htmlFor, color, ...rest }) {
+function FormLabel({ children, required, htmlFor, id, color, ...rest }) {
 	const control = useContext(FormControlContext);
 	const form = useContext(FormContext);
 	const isRequired = required ?? control?.required ?? false;
 	const resolvedFor = htmlFor ?? control?.id;
+	const renderedId = id ?? control?.labelId;
+	const setLabelId = control?.setLabelId;
+	useEffect(() => {
+		if (!setLabelId || !renderedId) return void 0;
+		setLabelId(renderedId);
+		return () => setLabelId(null);
+	}, [setLabelId, renderedId]);
 	const resolvedColor = color ?? control?.textColor ?? form.textColor;
 	return /* @__PURE__ */ jsxs(FormLabelRoot, {
 		as: "label",
+		id: renderedId,
 		htmlFor: resolvedFor,
 		variant: "body2",
 		...rest,

package/dist/Grid.d.cts

@@ -1,4 +1,4 @@
-import { Qt as ViewProps, V as Theme } from "./index-DmJ7yWWi.cjs";
+import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.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. */

package/dist/Grid.d.mts

@@ -1,4 +1,4 @@
-import { Qt as ViewProps, V as Theme } from "./index-CVNJEUwJ.mjs";
+import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.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. */

package/dist/{Icon-DlheCTJb.mjs → Icon-BihOAP4u.mjs}

@@ -12,6 +12,15 @@ const SvgAccountTree = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M604-120v-125H450v-410h-93v130H80v-315h277v125h247v-125h276v315H604v-130h-94v350h94v-130h276v315H604ZM140-780v195-195Zm524 405v195-195Zm0-405v195-195Zm0 195h156v-195H664v195Zm0 405h156v-195H664v195ZM140-585h157v-195H140v195Z" })
 });
 //#endregion
+//#region src/Icon/icons/Add.tsx
+const SvgAdd = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" })
+});
+//#endregion
 //#region src/Icon/icons/AdsClick.tsx
 const SvgAdsClick = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 24 24",
@@ -579,6 +588,15 @@ const SvgRefresh = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" })
 });
 //#endregion
+//#region src/Icon/icons/Remove.tsx
+const SvgRemove = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M19 13H5v-2h14v2z" })
+});
+//#endregion
 //#region src/Icon/icons/Schema.tsx
 const SvgSchema = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 -960 960 960",
@@ -642,6 +660,24 @@ const SvgStacks = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M12 14L1 8l11-6l11 6zm0 4L1.575 12.325l2.1-1.15L12 15.725l8.325-4.55l2.1 1.15zm0 4L1.575 16.325l2.1-1.15L12 19.725l8.325-4.55l2.1 1.15z" })
 });
 //#endregion
+//#region src/Icon/icons/Star.tsx
+const SvgStar = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+});
+//#endregion
+//#region src/Icon/icons/StarBorder.tsx
+const SvgStarBorder = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" })
+});
+//#endregion
 //#region src/Icon/icons/Table.tsx
 const SvgTable = (props) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
@@ -734,6 +770,7 @@ const SvgZoomOut = (props) => /* @__PURE__ */ jsx("svg", {
 /** Registry of available icons, keyed by their asset file name. */
 const icons = {
 	account_tree: SvgAccountTree,
+	add: SvgAdd,
 	ads_click: SvgAdsClick,
 	analytics: SvgAnalytics,
 	architecture: SvgArchitecture,
@@ -777,6 +814,7 @@ const icons = {
 	psychology: SvgPsychology,
 	rebase_edit: SvgRebaseEdit,
 	refresh: SvgRefresh,
+	remove: SvgRemove,
 	schema: SvgSchema,
 	security: SvgSecurity,
 	settings_input_component: SvgSettingsInputComponent,
@@ -784,6 +822,8 @@ const icons = {
 	smartphone: SvgSmartphone,
 	speed: SvgSpeed,
 	stacks: SvgStacks,
+	star: SvgStar,
+	star_border: SvgStarBorder,
 	table: SvgTable,
 	terminal: SvgTerminal,
 	visibility: SvgVisibility,