@ttoss/fsl-ui 0.2.4 → 0.2.6

package/dist/components/Text/Text.d.cts

@@ -0,0 +1,89 @@
+
+import * as React from "react";
+
+//#region src/components/Text/Text.d.ts
+/** Formal semantic identity — Text root (Structure entity, body/label text). */
+declare const textMeta: {
+  readonly displayName: "Text";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/**
+ * A step of the body/label type scale (`{family}-{step}`). `display-sm` is
+ * the stat step: display-scale figures that are *data*, not document
+ * headings (KPI values, prices) — admitted on the Dashboard/Pricing blocks'
+ * evidence (friction F-014).
+ */
+type TextVariant = 'display-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
+/** The tone of the text colour — default inherits; `muted` recedes. */
+type TextTone = 'default' | 'muted';
+/** Inline text alignment. */
+type TextAlign = 'start' | 'center' | 'end';
+/** Numeric figure style — `tabular` aligns digits in columns (metrics, tables). */
+type TextNumeric = 'normal' | 'tabular';
+/** The element Text renders as. */
+type TextAs = 'p' | 'span' | 'div';
+/** Props for the Text component. */
+interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'className'> {
+  /**
+   * Step of the body/label type scale. `body-*` is running copy; `label-*` is
+   * the tighter, slightly heavier form for field labels and captions.
+   * @default 'body-md'
+   */
+  variant?: TextVariant;
+  /**
+   * Colour tone. `default` inherits the surrounding surface's text colour;
+   * `muted` recedes to the muted informational text colour for secondary copy.
+   * @default 'default'
+   */
+  tone?: TextTone;
+  /**
+   * Inline alignment (`text-align`). A layout keyword, not a design token.
+   * @default 'start'
+   */
+  align?: TextAlign;
+  /**
+   * Numeric figure style. `tabular` renders `tabular-nums` so digits occupy
+   * equal width — use it for metrics, counts, and any figures that must line up
+   * in a column. A rendering *meaning*, not a raw style.
+   * @default 'normal'
+   */
+  numeric?: TextNumeric;
+  /**
+   * The element to render. `p` for paragraphs, `span` for inline runs, `div`
+   * for grouping.
+   * @default 'p'
+   */
+  as?: TextAs;
+  /** The text content. */
+  children?: React.ReactNode;
+}
+/**
+ * Running copy and labels bound to the FSL type scale.
+ *
+ * Entity = Structure. `variant` picks the step of the body/label scale — there
+ * is no raw font-size vocabulary, which is how the theme's typography reaches
+ * the screen consistently. `tone="muted"` is the sanctioned way to build text
+ * hierarchy (secondary copy recedes); otherwise colour is inherited from the
+ * surface.
+ *
+ * @example
+ * ```tsx
+ * <Text>Your changes are saved automatically.</Text>
+ * <Text variant="label-md" tone="muted">Last updated 2 minutes ago</Text>
+ * ```
+ */
+declare const Text: {
+  ({
+    variant,
+    tone,
+    align,
+    numeric,
+    as,
+    children,
+    ...props
+  }: TextProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Text";
+};
+//#endregion
+export { Text, TextAlign, TextAs, TextNumeric, TextProps, TextTone, TextVariant, textMeta };

package/dist/components/Text/Text.d.mts

@@ -0,0 +1,89 @@
+
+import * as React from "react";
+
+//#region src/components/Text/Text.d.ts
+/** Formal semantic identity — Text root (Structure entity, body/label text). */
+declare const textMeta: {
+  readonly displayName: "Text";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/**
+ * A step of the body/label type scale (`{family}-{step}`). `display-sm` is
+ * the stat step: display-scale figures that are *data*, not document
+ * headings (KPI values, prices) — admitted on the Dashboard/Pricing blocks'
+ * evidence (friction F-014).
+ */
+type TextVariant = 'display-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
+/** The tone of the text colour — default inherits; `muted` recedes. */
+type TextTone = 'default' | 'muted';
+/** Inline text alignment. */
+type TextAlign = 'start' | 'center' | 'end';
+/** Numeric figure style — `tabular` aligns digits in columns (metrics, tables). */
+type TextNumeric = 'normal' | 'tabular';
+/** The element Text renders as. */
+type TextAs = 'p' | 'span' | 'div';
+/** Props for the Text component. */
+interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'style' | 'className'> {
+  /**
+   * Step of the body/label type scale. `body-*` is running copy; `label-*` is
+   * the tighter, slightly heavier form for field labels and captions.
+   * @default 'body-md'
+   */
+  variant?: TextVariant;
+  /**
+   * Colour tone. `default` inherits the surrounding surface's text colour;
+   * `muted` recedes to the muted informational text colour for secondary copy.
+   * @default 'default'
+   */
+  tone?: TextTone;
+  /**
+   * Inline alignment (`text-align`). A layout keyword, not a design token.
+   * @default 'start'
+   */
+  align?: TextAlign;
+  /**
+   * Numeric figure style. `tabular` renders `tabular-nums` so digits occupy
+   * equal width — use it for metrics, counts, and any figures that must line up
+   * in a column. A rendering *meaning*, not a raw style.
+   * @default 'normal'
+   */
+  numeric?: TextNumeric;
+  /**
+   * The element to render. `p` for paragraphs, `span` for inline runs, `div`
+   * for grouping.
+   * @default 'p'
+   */
+  as?: TextAs;
+  /** The text content. */
+  children?: React.ReactNode;
+}
+/**
+ * Running copy and labels bound to the FSL type scale.
+ *
+ * Entity = Structure. `variant` picks the step of the body/label scale — there
+ * is no raw font-size vocabulary, which is how the theme's typography reaches
+ * the screen consistently. `tone="muted"` is the sanctioned way to build text
+ * hierarchy (secondary copy recedes); otherwise colour is inherited from the
+ * surface.
+ *
+ * @example
+ * ```tsx
+ * <Text>Your changes are saved automatically.</Text>
+ * <Text variant="label-md" tone="muted">Last updated 2 minutes ago</Text>
+ * ```
+ */
+declare const Text: {
+  ({
+    variant,
+    tone,
+    align,
+    numeric,
+    as,
+    children,
+    ...props
+  }: TextProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Text";
+};
+//#endregion
+export { Text, TextAlign, TextAs, TextNumeric, TextProps, TextTone, TextVariant, textMeta };

package/dist/components/Text/Text.mjs

@@ -0,0 +1,69 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Text/Text.tsx
+/** Formal semantic identity — Text root (Structure entity, body/label text). */
+var textMeta = {
+  displayName: "Text",
+  entity: "Structure",
+  structure: "root"
+};
+/** Typography token per variant — the scale reaches the DOM only here. */
+var TYPE_BY_VARIANT = {
+  "display-sm": vars.text.display.sm,
+  "body-lg": vars.text.body.lg,
+  "body-md": vars.text.body.md,
+  "body-sm": vars.text.body.sm,
+  "label-lg": vars.text.label.lg,
+  "label-md": vars.text.label.md,
+  "label-sm": vars.text.label.sm
+};
+/** Muted text colour; `default` tone inherits (no colour set). */
+var colorForTone = tone => {
+  return tone === "muted" ? vars.colors.informational.muted.text?.default : "inherit";
+};
+/**
+* Running copy and labels bound to the FSL type scale.
+*
+* Entity = Structure. `variant` picks the step of the body/label scale — there
+* is no raw font-size vocabulary, which is how the theme's typography reaches
+* the screen consistently. `tone="muted"` is the sanctioned way to build text
+* hierarchy (secondary copy recedes); otherwise colour is inherited from the
+* surface.
+*
+* @example
+* ```tsx
+* <Text>Your changes are saved automatically.</Text>
+* <Text variant="label-md" tone="muted">Last updated 2 minutes ago</Text>
+* ```
+*/
+var Text = ({
+  variant = "body-md",
+  tone = "default",
+  align = "start",
+  numeric = "normal",
+  as = "p",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(as, {
+    ...props,
+    "data-scope": "text",
+    "data-part": "root",
+    "data-variant": variant,
+    "data-tone": tone,
+    style: {
+      margin: 0,
+      color: colorForTone(tone),
+      textAlign: align,
+      fontVariantNumeric: numeric === "tabular" ? "tabular-nums" : void 0,
+      ...TYPE_BY_VARIANT[variant]
+    },
+    children
+  });
+};
+Text.displayName = textMeta.displayName;
+
+//#endregion
+export { Text, textMeta };

package/dist/components/Toast/Toast.cjs

@@ -3,8 +3,8 @@ const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 const require_Icon = require('../Icon/Icon.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Toast/Toast.tsx
 /** Formal semantic identity — Toast root (Feedback entity). */

package/dist/components/Toast/Toast.mjs

@@ -3,8 +3,8 @@ import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
 import { Icon } from "../Icon/Icon.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
 
 //#region src/components/Toast/Toast.tsx
 /** Formal semantic identity — Toast root (Feedback entity). */

package/dist/components/ToggleButton/ToggleButton.cjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 const require_focusRing = require('../../tokens/focusRing.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/ToggleButton/ToggleButton.tsx
 /** Formal semantic identity — ToggleButton root (Action entity, toggle). */
@@ -99,7 +99,7 @@ var ToggleButton = ({
         borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
         borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
         borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
-        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
         paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
         paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.lg,
         ..._ttoss_fsl_theme_vars.vars.text.label.md,

package/dist/components/ToggleButton/ToggleButton.mjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { ToggleButton } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { ToggleButton } from "react-aria-components";
 
 //#region src/components/ToggleButton/ToggleButton.tsx
 /** Formal semantic identity — ToggleButton root (Action entity, toggle). */
@@ -99,7 +99,7 @@ var ToggleButton$1 = ({
         borderRadius: vars.radii.control,
         borderWidth: vars.border.outline.control.width,
         borderStyle: vars.border.outline.control.style,
-        minHeight: vars.sizing.hit.base,
+        minHeight: vars.sizing.hit,
         paddingBlock: vars.spacing.inset.control.sm,
         paddingInline: vars.spacing.inset.control.lg,
         ...vars.text.label.md,

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.cjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
 /** Formal semantic identity — ToggleButtonGroup root (Selection entity). */

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { vars } from "@ttoss/fsl-theme/vars";
-import { ToggleButtonGroup } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { ToggleButtonGroup } from "react-aria-components";
 
 //#region src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
 /** Formal semantic identity — ToggleButtonGroup root (Selection entity). */

package/dist/components/Toolbar/Toolbar.cjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/components/Toolbar/Toolbar.tsx
 /** Formal semantic identity — Toolbar root (Structure entity, actions bar). */

package/dist/components/Toolbar/Toolbar.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Toolbar } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { Toolbar } from "react-aria-components";
 
 //#region src/components/Toolbar/Toolbar.tsx
 /** Formal semantic identity — Toolbar root (Structure entity, actions bar). */

package/dist/composites/Accordion/Accordion.cjs

@@ -5,8 +5,8 @@ const require_resolveInteractiveStyle = require('../../tokens/resolveInteractive
 const require_Icon = require('../../components/Icon/Icon.cjs');
 const require_scope = require('../scope.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 let react = require("react");
 react = require_runtime.__toESM(react);
 
@@ -187,7 +187,7 @@ var AccordionTrigger = ({
           alignItems: "center",
           justifyContent: "space-between",
           gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
-          minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+          minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
           paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
           paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
           border: "none",
@@ -256,14 +256,19 @@ var AccordionPanel = ({
     "data-scope": "accordion",
     "data-part": "content",
     style: {
-      boxSizing: "border-box",
-      paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
-      paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
-      backgroundColor: c?.background?.default,
-      color: c?.text?.default,
-      ..._ttoss_fsl_theme_vars.vars.text.body.md
+      boxSizing: "border-box"
     },
-    children
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+      style: {
+        boxSizing: "border-box",
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        backgroundColor: c?.background?.default,
+        color: c?.text?.default,
+        ..._ttoss_fsl_theme_vars.vars.text.body.md
+      },
+      children
+    })
   });
 };
 AccordionPanel.displayName = accordionPanelMeta.displayName;

package/dist/composites/Accordion/Accordion.mjs

@@ -4,8 +4,8 @@ import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mj
 import { Icon } from "../../components/Icon/Icon.mjs";
 import { createCompositeScope } from "../scope.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Button, Disclosure, DisclosureGroup, DisclosurePanel, DisclosureStateContext, Heading } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Disclosure, DisclosureGroup, DisclosurePanel, DisclosureStateContext, Heading } from "react-aria-components";
 import * as React from "react";
 
 //#region src/composites/Accordion/Accordion.tsx
@@ -185,7 +185,7 @@ var AccordionTrigger = ({
           alignItems: "center",
           justifyContent: "space-between",
           gap: vars.spacing.gap.inline.sm,
-          minHeight: vars.sizing.hit.base,
+          minHeight: vars.sizing.hit,
           paddingBlock: vars.spacing.inset.control.md,
           paddingInline: vars.spacing.inset.control.md,
           border: "none",
@@ -254,14 +254,19 @@ var AccordionPanel = ({
     "data-scope": "accordion",
     "data-part": "content",
     style: {
-      boxSizing: "border-box",
-      paddingBlock: vars.spacing.inset.control.md,
-      paddingInline: vars.spacing.inset.control.md,
-      backgroundColor: c?.background?.default,
-      color: c?.text?.default,
-      ...vars.text.body.md
+      boxSizing: "border-box"
     },
-    children
+    children: /* @__PURE__ */jsx("div", {
+      style: {
+        boxSizing: "border-box",
+        paddingBlock: vars.spacing.inset.control.md,
+        paddingInline: vars.spacing.inset.control.md,
+        backgroundColor: c?.background?.default,
+        color: c?.text?.default,
+        ...vars.text.body.md
+      },
+      children
+    })
   });
 };
 AccordionPanel.displayName = accordionPanelMeta.displayName;

package/dist/composites/Dialog/Dialog.cjs

@@ -3,8 +3,8 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_scope = require('../scope.cjs');
 const require_escapeHatch = require('../../tokens/escapeHatch.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 let react = require("react");
 react = require_runtime.__toESM(react);
 

package/dist/composites/Dialog/Dialog.mjs

@@ -2,8 +2,8 @@
 import { createPresenceScope } from "../scope.mjs";
 import { fslVar } from "../../tokens/escapeHatch.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
 import * as React from "react";
 
 //#region src/composites/Dialog/Dialog.tsx

package/dist/composites/Disclosure/Disclosure.cjs

@@ -5,8 +5,8 @@ const require_resolveInteractiveStyle = require('../../tokens/resolveInteractive
 const require_Icon = require('../../components/Icon/Icon.cjs');
 const require_scope = require('../scope.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 let react = require("react");
 react = require_runtime.__toESM(react);
 
@@ -124,7 +124,7 @@ var DisclosureTrigger = ({
           alignItems: "center",
           justifyContent: "space-between",
           gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
-          minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+          minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
           paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
           paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
           border: "none",
@@ -193,14 +193,19 @@ var DisclosurePanel = ({
     "data-scope": "disclosure",
     "data-part": "content",
     style: {
-      boxSizing: "border-box",
-      paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
-      paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
-      backgroundColor: c?.background?.default,
-      color: c?.text?.default,
-      ..._ttoss_fsl_theme_vars.vars.text.body.md
+      boxSizing: "border-box"
     },
-    children
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+      style: {
+        boxSizing: "border-box",
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        backgroundColor: c?.background?.default,
+        color: c?.text?.default,
+        ..._ttoss_fsl_theme_vars.vars.text.body.md
+      },
+      children
+    })
   });
 };
 DisclosurePanel.displayName = disclosurePanelMeta.displayName;

package/dist/composites/Disclosure/Disclosure.mjs

@@ -4,8 +4,8 @@ import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mj
 import { Icon } from "../../components/Icon/Icon.mjs";
 import { createCompositeScope } from "../scope.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Button, Disclosure, DisclosurePanel, DisclosureStateContext, Heading } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Disclosure, DisclosurePanel, DisclosureStateContext, Heading } from "react-aria-components";
 import * as React from "react";
 
 //#region src/composites/Disclosure/Disclosure.tsx
@@ -122,7 +122,7 @@ var DisclosureTrigger = ({
           alignItems: "center",
           justifyContent: "space-between",
           gap: vars.spacing.gap.inline.sm,
-          minHeight: vars.sizing.hit.base,
+          minHeight: vars.sizing.hit,
           paddingBlock: vars.spacing.inset.control.md,
           paddingInline: vars.spacing.inset.control.md,
           border: "none",
@@ -191,14 +191,19 @@ var DisclosurePanel$1 = ({
     "data-scope": "disclosure",
     "data-part": "content",
     style: {
-      boxSizing: "border-box",
-      paddingBlock: vars.spacing.inset.control.md,
-      paddingInline: vars.spacing.inset.control.md,
-      backgroundColor: c?.background?.default,
-      color: c?.text?.default,
-      ...vars.text.body.md
+      boxSizing: "border-box"
     },
-    children
+    children: /* @__PURE__ */jsx("div", {
+      style: {
+        boxSizing: "border-box",
+        paddingBlock: vars.spacing.inset.control.md,
+        paddingInline: vars.spacing.inset.control.md,
+        backgroundColor: c?.background?.default,
+        color: c?.text?.default,
+        ...vars.text.body.md
+      },
+      children
+    })
   });
 };
 DisclosurePanel$1.displayName = disclosurePanelMeta.displayName;

package/dist/composites/Form/Form.cjs

@@ -2,8 +2,8 @@
 const require_Button = require('../../components/Button/Button.cjs');
 const require_scope = require('../scope.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/composites/Form/Form.tsx
 var formScope = require_scope.createPresenceScope("Form");

package/dist/composites/Form/Form.mjs

@@ -2,8 +2,8 @@
 import { Button as Button$1 } from "../../components/Button/Button.mjs";
 import { createPresenceScope } from "../scope.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Form } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { Form } from "react-aria-components";
 
 //#region src/composites/Form/Form.tsx
 var formScope = createPresenceScope("Form");

package/dist/composites/Menu/Menu.cjs

@@ -4,8 +4,8 @@ const require_resolveInteractiveStyle = require('../../tokens/resolveInteractive
 const require_scope = require('../scope.cjs');
 const require_escapeHatch = require('../../tokens/escapeHatch.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/composites/Menu/Menu.tsx
 var MENU_MIN_WIDTH_DEFAULT = "12rem";
@@ -156,7 +156,7 @@ var MenuItem = ({
         alignItems: "center",
         cursor: isDisabled ? "not-allowed" : "pointer",
         borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
-        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit.base,
+        minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
         paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
         paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
         ..._ttoss_fsl_theme_vars.vars.text.label.md,

package/dist/composites/Menu/Menu.mjs

@@ -4,8 +4,8 @@ import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mj
 import { createPresenceScope } from "../scope.mjs";
 import { fslVar } from "../../tokens/escapeHatch.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { Menu, MenuItem, MenuTrigger, Popover } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { Menu, MenuItem, MenuTrigger, Popover } from "react-aria-components";
 
 //#region src/composites/Menu/Menu.tsx
 var MENU_MIN_WIDTH_DEFAULT = "12rem";
@@ -156,7 +156,7 @@ var MenuItem$1 = ({
         alignItems: "center",
         cursor: isDisabled ? "not-allowed" : "pointer",
         borderRadius: vars.radii.control,
-        minHeight: vars.sizing.hit.base,
+        minHeight: vars.sizing.hit,
         paddingBlock: vars.spacing.inset.control.sm,
         paddingInline: vars.spacing.inset.control.md,
         ...vars.text.label.md,

package/dist/composites/Popover/Popover.cjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 const require_escapeHatch = require('../../tokens/escapeHatch.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
-let react_aria_components = require("react-aria-components");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
 
 //#region src/composites/Popover/Popover.tsx
 var POPOVER_MAX_WIDTH_DEFAULT = "min(320px, 90vw)";

package/dist/composites/Popover/Popover.mjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { fslVar } from "../../tokens/escapeHatch.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
-import { DialogTrigger, Popover } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
+import { DialogTrigger, Popover } from "react-aria-components";
 
 //#region src/composites/Popover/Popover.tsx
 var POPOVER_MAX_WIDTH_DEFAULT = "min(320px, 90vw)";