@ttoss/fsl-ui 0.2.4

package/dist/components/GridList/GridList.d.cts

@@ -0,0 +1,72 @@
+
+import * as React from "react";
+import { GridListItemProps, GridListProps } from "react-aria-components";
+
+//#region src/components/GridList/GridList.d.ts
+/** Formal semantic identity — GridList root (Collection entity, surface). */
+declare const gridListMeta: {
+  readonly displayName: "GridList";
+  readonly entity: "Collection";
+  readonly structure: "root";
+};
+/** Formal semantic identity — GridListItem (Selection entity, selectable row). */
+declare const gridListItemMeta: {
+  readonly displayName: "GridListItem";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/** Props for the GridList component. */
+type GridListProps$1<T extends object = object> = Omit<GridListProps<T>, 'style' | 'className'>;
+/**
+ * A standalone semantic grid list built on React Aria's `GridList` — rows of
+ * selectable content, each with a selection checkbox.
+ *
+ * Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+ * surface) and each `GridListItem` is Entity = Selection (`input` chrome).
+ * Set `selectionMode="single|multiple"`. Use `GridListItem` per row (pass
+ * `textValue` when the row content is not plain text).
+ *
+ * @example
+ * ```tsx
+ * <GridList aria-label="Files" selectionMode="multiple">
+ *   <GridListItem id="a" textValue="Report">Report.pdf</GridListItem>
+ *   <GridListItem id="b" textValue="Notes">Notes.txt</GridListItem>
+ * </GridList>
+ * ```
+ */
+declare const GridList: {
+  <T extends object = object>({
+    children,
+    ...props
+  }: GridListProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "GridList";
+};
+/** Props for the GridListItem component. */
+type GridListItemProps$1 = Omit<GridListItemProps, 'style' | 'className' | 'children'> & {
+  /**
+   * Row content. Plain nodes only — the item owns its render prop
+   * internally (selection control + content wrapper), so React Aria's
+   * function-children form is not part of this API.
+   */
+  children?: React.ReactNode;
+};
+/**
+ * A single selectable row inside a `GridList`. Entity = Selection → reads
+ * `vars.colors.input.primary.*`, renders a `selectionControl` checkbox, and
+ * surfaces the `selected` State.
+ *
+ * @example
+ * ```tsx
+ * <GridListItem id="a" textValue="Report">Report.pdf</GridListItem>
+ * ```
+ */
+declare const GridListItem: {
+  ({
+    children,
+    ...props
+  }: GridListItemProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "GridListItem";
+};
+//#endregion
+export { GridList, GridListItem, GridListItemProps$1 as GridListItemProps, GridListProps$1 as GridListProps, gridListItemMeta, gridListMeta };

package/dist/components/GridList/GridList.d.mts

@@ -0,0 +1,72 @@
+
+import { GridListItemProps, GridListProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/GridList/GridList.d.ts
+/** Formal semantic identity — GridList root (Collection entity, surface). */
+declare const gridListMeta: {
+  readonly displayName: "GridList";
+  readonly entity: "Collection";
+  readonly structure: "root";
+};
+/** Formal semantic identity — GridListItem (Selection entity, selectable row). */
+declare const gridListItemMeta: {
+  readonly displayName: "GridListItem";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/** Props for the GridList component. */
+type GridListProps$1<T extends object = object> = Omit<GridListProps<T>, 'style' | 'className'>;
+/**
+ * A standalone semantic grid list built on React Aria's `GridList` — rows of
+ * selectable content, each with a selection checkbox.
+ *
+ * Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+ * surface) and each `GridListItem` is Entity = Selection (`input` chrome).
+ * Set `selectionMode="single|multiple"`. Use `GridListItem` per row (pass
+ * `textValue` when the row content is not plain text).
+ *
+ * @example
+ * ```tsx
+ * <GridList aria-label="Files" selectionMode="multiple">
+ *   <GridListItem id="a" textValue="Report">Report.pdf</GridListItem>
+ *   <GridListItem id="b" textValue="Notes">Notes.txt</GridListItem>
+ * </GridList>
+ * ```
+ */
+declare const GridList$1: {
+  <T extends object = object>({
+    children,
+    ...props
+  }: GridListProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "GridList";
+};
+/** Props for the GridListItem component. */
+type GridListItemProps$1 = Omit<GridListItemProps, 'style' | 'className' | 'children'> & {
+  /**
+   * Row content. Plain nodes only — the item owns its render prop
+   * internally (selection control + content wrapper), so React Aria's
+   * function-children form is not part of this API.
+   */
+  children?: React.ReactNode;
+};
+/**
+ * A single selectable row inside a `GridList`. Entity = Selection → reads
+ * `vars.colors.input.primary.*`, renders a `selectionControl` checkbox, and
+ * surfaces the `selected` State.
+ *
+ * @example
+ * ```tsx
+ * <GridListItem id="a" textValue="Report">Report.pdf</GridListItem>
+ * ```
+ */
+declare const GridListItem$1: {
+  ({
+    children,
+    ...props
+  }: GridListItemProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "GridListItem";
+};
+//#endregion
+export { GridList$1 as GridList, GridListItem$1 as GridListItem, GridListItemProps$1 as GridListItemProps, GridListProps$1 as GridListProps, gridListItemMeta, gridListMeta };

package/dist/components/GridList/GridList.mjs

@@ -0,0 +1,217 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+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 { Checkbox, GridList, GridListItem } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/GridList/GridList.tsx
+/** Formal semantic identity — GridList root (Collection entity, surface). */
+var gridListMeta = {
+  displayName: "GridList",
+  entity: "Collection",
+  structure: "root"
+};
+/** Formal semantic identity — GridListItem (Selection entity, selectable row). */
+var gridListItemMeta = {
+  displayName: "GridListItem",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/** Row (item) chrome — reflects the `selected` set-membership State. */
+var buildRowStyle = ({
+  c,
+  isSelected,
+  isHovered,
+  isFocusVisible,
+  isDisabled
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    gap: vars.spacing.gap.inline.sm,
+    minHeight: vars.sizing.hit.base,
+    paddingBlock: vars.spacing.inset.control.sm,
+    paddingInline: vars.spacing.inset.control.md,
+    borderRadius: vars.radii.control,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? vars.opacity.disabled : void 0,
+    ...vars.text.label.md,
+    transitionProperty: "background-color, color",
+    transitionDuration: vars.motion.feedback.duration,
+    transitionTimingFunction: vars.motion.feedback.easing,
+    backgroundColor: resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isSelected,
+      isHovered
+    }),
+    color: resolveInteractiveStyle(c?.text, {
+      isDisabled,
+      isSelected,
+      isHovered
+    }) ?? c?.text?.default,
+    outline: focusRingOutline(isFocusVisible),
+    outlineOffset: "-2px"
+  };
+};
+var SELECTION_BOX_SIZE = "1.125rem";
+/** Static box chrome for the row's selection checkbox. */
+var SELECTION_BOX_STYLE = {
+  boxSizing: "border-box",
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: SELECTION_BOX_SIZE,
+  height: SELECTION_BOX_SIZE,
+  borderRadius: vars.radii.control,
+  borderWidth: vars.border.outline.control.width,
+  borderStyle: vars.border.outline.control.style
+};
+/**
+* Selection-box colors resolved once (checked vs default). Hoisted so the
+* render callback stays under the cyclomatic-complexity limit.
+*/
+var buildSelectionBoxStyle = ({
+  c,
+  on
+}) => {
+  const text = c?.text;
+  const key = on ? "checked" : "default";
+  return {
+    ...SELECTION_BOX_STYLE,
+    backgroundColor: c?.background?.[key],
+    borderColor: c?.border?.[key],
+    color: text?.checked ?? text?.default
+  };
+};
+/**
+* The per-row selection control (a checkbox). Internal — RAC wires it to the
+* row's selection via `slot="selection"`; reads `input.primary` chrome.
+*/
+var RowSelectionControl = () => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(Checkbox, {
+    slot: "selection",
+    "data-scope": "grid-list",
+    "data-part": "selectionControl",
+    style: {
+      display: "inline-flex"
+    },
+    children: ({
+      isSelected,
+      isIndeterminate
+    }) => {
+      const on = isSelected || isIndeterminate;
+      return /* @__PURE__ */jsx("span", {
+        "aria-hidden": true,
+        style: buildSelectionBoxStyle({
+          c,
+          on
+        }),
+        children: on && /* @__PURE__ */jsx(Icon, {
+          intent: isIndeterminate ? "selection.indeterminate" : "selection.checked",
+          size: "sm"
+        })
+      });
+    }
+  });
+};
+/**
+* A standalone semantic grid list built on React Aria's `GridList` — rows of
+* selectable content, each with a selection checkbox.
+*
+* Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+* surface) and each `GridListItem` is Entity = Selection (`input` chrome).
+* Set `selectionMode="single|multiple"`. Use `GridListItem` per row (pass
+* `textValue` when the row content is not plain text).
+*
+* @example
+* ```tsx
+* <GridList aria-label="Files" selectionMode="multiple">
+*   <GridListItem id="a" textValue="Report">Report.pdf</GridListItem>
+*   <GridListItem id="b" textValue="Notes">Notes.txt</GridListItem>
+* </GridList>
+* ```
+*/
+var GridList$1 = ({
+  children,
+  ...props
+}) => {
+  const surface = vars.colors.informational.primary;
+  return /* @__PURE__ */jsx(GridList, {
+    ...props,
+    "data-scope": "grid-list",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs,
+      padding: vars.spacing.inset.surface.sm,
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor: surface?.border?.default ?? "transparent",
+      backgroundColor: surface?.background?.default
+    },
+    children
+  });
+};
+GridList$1.displayName = gridListMeta.displayName;
+/**
+* A single selectable row inside a `GridList`. Entity = Selection → reads
+* `vars.colors.input.primary.*`, renders a `selectionControl` checkbox, and
+* surfaces the `selected` State.
+*
+* @example
+* ```tsx
+* <GridListItem id="a" textValue="Report">Report.pdf</GridListItem>
+* ```
+*/
+var GridListItem$1 = ({
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(GridListItem, {
+    ...props,
+    "data-scope": "grid-list",
+    "data-part": "item",
+    style: ({
+      isSelected,
+      isHovered,
+      isFocusVisible,
+      isDisabled
+    }) => {
+      return buildRowStyle({
+        c,
+        isSelected,
+        isHovered,
+        isFocusVisible,
+        isDisabled
+      });
+    },
+    children: ({
+      selectionMode
+    }) => {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [selectionMode !== "none" && /* @__PURE__ */jsx(RowSelectionControl, {}), /* @__PURE__ */jsx("span", {
+          "data-scope": "grid-list",
+          "data-part": "content",
+          style: {
+            flex: 1
+          },
+          children
+        })]
+      });
+    }
+  });
+};
+GridListItem$1.displayName = gridListItemMeta.displayName;
+
+//#endregion
+export { GridList$1 as GridList, GridListItem$1 as GridListItem, gridListItemMeta, gridListMeta };

package/dist/components/Group/Group.cjs

@@ -0,0 +1,77 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_runtime = require('../../_virtual/_rolldown/runtime.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 = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/components/Group/Group.tsx
+/** Formal semantic identity — Group root (Structure entity, grouping frame). */
+var groupMeta = {
+  displayName: "Group",
+  entity: "Structure",
+  structure: "root"
+};
+/**
+* A semantic grouping frame built on React Aria's `Group` (`role="group"`).
+*
+* Entity = Structure → reads `vars.colors.informational.{primary|muted}` for
+* the boundary and label color, `vars.radii.surface` for the corner, and
+* `vars.spacing.inset.surface` for its padding. Use it to associate a set of
+* related controls (a segmented address block, a pair of range inputs, a
+* toolbar of filters) under one accessible region. Non-interactive: it has no
+* hover/focus chrome of its own; keyboard behavior belongs to the controls
+* inside it.
+*
+* @example
+* ```tsx
+* <Group label="Shipping address">
+*   <TextField><TextFieldLabel>Street</TextFieldLabel><TextFieldControl /></TextField>
+*   <TextField><TextFieldLabel>City</TextFieldLabel><TextFieldControl /></TextField>
+* </Group>
+* ```
+*/
+var Group = ({
+  label,
+  evaluation = "primary",
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.informational[evaluation];
+  const labelId = react.useId();
+  const borderColor = c?.border?.default ?? "transparent";
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.Group, {
+    ...props,
+    "aria-labelledby": label != null ? labelId : props["aria-labelledby"],
+    "data-scope": "group",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm,
+      padding: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.md,
+      borderRadius: _ttoss_fsl_theme_vars.vars.radii.surface,
+      borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+      borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+      borderColor
+    },
+    children: [label != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)("span", {
+      id: labelId,
+      "data-scope": "group",
+      "data-part": "label",
+      style: {
+        color: c?.text?.default,
+        ..._ttoss_fsl_theme_vars.vars.text.title.sm
+      },
+      children: label
+    }), children]
+  });
+};
+Group.displayName = groupMeta.displayName;
+
+//#endregion
+exports.Group = Group;
+exports.groupMeta = groupMeta;

package/dist/components/Group/Group.d.cts

@@ -0,0 +1,61 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import * as React from "react";
+import { GroupProps } from "react-aria-components";
+
+//#region src/components/Group/Group.d.ts
+/** Formal semantic identity — Group root (Structure entity, grouping frame). */
+declare const groupMeta: {
+  readonly displayName: "Group";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Props for the Group component. */
+interface GroupProps$1 extends Omit<GroupProps, 'style' | 'className' | 'children'> {
+  /**
+   * Optional visible label for the group. When provided it is rendered above
+   * the grouped content and wired to the `role="group"` region via
+   * `aria-labelledby`, giving the region an accessible name. Supply
+   * caller-localized copy (i18n rule / §6) — it is display text, not a
+   * flow-critical label, so it has no default.
+   */
+  label?: React.ReactNode;
+  /**
+   * Authorial emphasis of the frame chrome. `primary` is the standard
+   * grouping boundary; `muted` is a subdued variant for dense layouts.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof groupMeta)['entity']>;
+  /** The related controls to group. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic grouping frame built on React Aria's `Group` (`role="group"`).
+ *
+ * Entity = Structure → reads `vars.colors.informational.{primary|muted}` for
+ * the boundary and label color, `vars.radii.surface` for the corner, and
+ * `vars.spacing.inset.surface` for its padding. Use it to associate a set of
+ * related controls (a segmented address block, a pair of range inputs, a
+ * toolbar of filters) under one accessible region. Non-interactive: it has no
+ * hover/focus chrome of its own; keyboard behavior belongs to the controls
+ * inside it.
+ *
+ * @example
+ * ```tsx
+ * <Group label="Shipping address">
+ *   <TextField><TextFieldLabel>Street</TextFieldLabel><TextFieldControl /></TextField>
+ *   <TextField><TextFieldLabel>City</TextFieldLabel><TextFieldControl /></TextField>
+ * </Group>
+ * ```
+ */
+declare const Group: {
+  ({
+    label,
+    evaluation,
+    children,
+    ...props
+  }: GroupProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Group";
+};
+//#endregion
+export { Group, GroupProps$1 as GroupProps, groupMeta };

package/dist/components/Group/Group.d.mts

@@ -0,0 +1,61 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { GroupProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Group/Group.d.ts
+/** Formal semantic identity — Group root (Structure entity, grouping frame). */
+declare const groupMeta: {
+  readonly displayName: "Group";
+  readonly entity: "Structure";
+  readonly structure: "root";
+};
+/** Props for the Group component. */
+interface GroupProps$1 extends Omit<GroupProps, 'style' | 'className' | 'children'> {
+  /**
+   * Optional visible label for the group. When provided it is rendered above
+   * the grouped content and wired to the `role="group"` region via
+   * `aria-labelledby`, giving the region an accessible name. Supply
+   * caller-localized copy (i18n rule / §6) — it is display text, not a
+   * flow-critical label, so it has no default.
+   */
+  label?: React.ReactNode;
+  /**
+   * Authorial emphasis of the frame chrome. `primary` is the standard
+   * grouping boundary; `muted` is a subdued variant for dense layouts.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<(typeof groupMeta)['entity']>;
+  /** The related controls to group. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic grouping frame built on React Aria's `Group` (`role="group"`).
+ *
+ * Entity = Structure → reads `vars.colors.informational.{primary|muted}` for
+ * the boundary and label color, `vars.radii.surface` for the corner, and
+ * `vars.spacing.inset.surface` for its padding. Use it to associate a set of
+ * related controls (a segmented address block, a pair of range inputs, a
+ * toolbar of filters) under one accessible region. Non-interactive: it has no
+ * hover/focus chrome of its own; keyboard behavior belongs to the controls
+ * inside it.
+ *
+ * @example
+ * ```tsx
+ * <Group label="Shipping address">
+ *   <TextField><TextFieldLabel>Street</TextFieldLabel><TextFieldControl /></TextField>
+ *   <TextField><TextFieldLabel>City</TextFieldLabel><TextFieldControl /></TextField>
+ * </Group>
+ * ```
+ */
+declare const Group$1: {
+  ({
+    label,
+    evaluation,
+    children,
+    ...props
+  }: GroupProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "Group";
+};
+//#endregion
+export { Group$1 as Group, GroupProps$1 as GroupProps, groupMeta };

package/dist/components/Group/Group.mjs

@@ -0,0 +1,74 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Group } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/components/Group/Group.tsx
+/** Formal semantic identity — Group root (Structure entity, grouping frame). */
+var groupMeta = {
+  displayName: "Group",
+  entity: "Structure",
+  structure: "root"
+};
+/**
+* A semantic grouping frame built on React Aria's `Group` (`role="group"`).
+*
+* Entity = Structure → reads `vars.colors.informational.{primary|muted}` for
+* the boundary and label color, `vars.radii.surface` for the corner, and
+* `vars.spacing.inset.surface` for its padding. Use it to associate a set of
+* related controls (a segmented address block, a pair of range inputs, a
+* toolbar of filters) under one accessible region. Non-interactive: it has no
+* hover/focus chrome of its own; keyboard behavior belongs to the controls
+* inside it.
+*
+* @example
+* ```tsx
+* <Group label="Shipping address">
+*   <TextField><TextFieldLabel>Street</TextFieldLabel><TextFieldControl /></TextField>
+*   <TextField><TextFieldLabel>City</TextFieldLabel><TextFieldControl /></TextField>
+* </Group>
+* ```
+*/
+var Group$1 = ({
+  label,
+  evaluation = "primary",
+  children,
+  ...props
+}) => {
+  const c = vars.colors.informational[evaluation];
+  const labelId = React.useId();
+  const borderColor = c?.border?.default ?? "transparent";
+  return /* @__PURE__ */jsxs(Group, {
+    ...props,
+    "aria-labelledby": label != null ? labelId : props["aria-labelledby"],
+    "data-scope": "group",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.sm,
+      padding: vars.spacing.inset.surface.md,
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor
+    },
+    children: [label != null && /* @__PURE__ */jsx("span", {
+      id: labelId,
+      "data-scope": "group",
+      "data-part": "label",
+      style: {
+        color: c?.text?.default,
+        ...vars.text.title.sm
+      },
+      children: label
+    }), children]
+  });
+};
+Group$1.displayName = groupMeta.displayName;
+
+//#endregion
+export { Group$1 as Group, groupMeta };

package/dist/components/Icon/Icon.cjs

@@ -0,0 +1,52 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_glyphs = require('./glyphs.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _iconify_icon_react = require("@iconify-icon/react");
+
+//#region src/components/Icon/Icon.tsx
+/** Formal semantic identity — Icon (Structure entity, static glyph). */
+var iconMeta = {
+  displayName: "Icon",
+  entity: "Structure",
+  structure: "icon"
+};
+/**
+* Renders a semantic glyph via the Iconify provider (ADR-005).
+*
+* Icon is named by intent and inherits its color from context
+* (`currentColor`); only its size is a token. Glyphs are registered offline
+* on first render (`ensureIconGlyphs`), so no network request is made.
+*
+* @example
+* ```tsx
+* <Icon intent="disclosure.expand" />
+* <Icon intent="action.close" size="sm" label={closeLabel} />
+* ```
+*/
+var Icon = ({
+  intent,
+  size = "md",
+  label
+}) => {
+  require_glyphs.ensureIconGlyphs();
+  const decorative = label === void 0;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_iconify_icon_react.Icon, {
+    "data-scope": "icon",
+    "data-part": "icon",
+    icon: require_glyphs.iconifyName(intent),
+    noobserver: true,
+    "aria-hidden": decorative ? "true" : void 0,
+    "aria-label": label,
+    role: decorative ? void 0 : "img",
+    style: {
+      fontSize: _ttoss_fsl_theme_vars.vars.sizing.icon[size],
+      lineHeight: 1,
+      flexShrink: 0
+    }
+  });
+};
+Icon.displayName = iconMeta.displayName;
+
+//#endregion
+exports.Icon = Icon;