@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-WVPA3ONO.js

@@ -0,0 +1,125 @@
+import {
+  Input
+} from "./chunk-IBGX6H4J.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-IPPTOL53.js";
+
+// src/components/form/CepField/CepField.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cepDigits, formatCep, isValidCep } from "@12-apps/forms-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useCepLookup({
+  digits,
+  complete,
+  disabled,
+  debounceMs,
+  onLookup,
+  onResolved,
+  onNotFound
+}) {
+  const [status, setStatus] = useState("idle");
+  const lastQueriedRef = useRef("");
+  const seqRef = useRef(0);
+  const lookupRef = useRef(onLookup);
+  const resolvedRef = useRef(onResolved);
+  const notFoundRef = useRef(onNotFound);
+  lookupRef.current = onLookup;
+  resolvedRef.current = onResolved;
+  notFoundRef.current = onNotFound;
+  useEffect(() => {
+    if (!complete || disabled || !lookupRef.current) {
+      seqRef.current += 1;
+      setStatus("idle");
+      lastQueriedRef.current = "";
+      return;
+    }
+    if (lastQueriedRef.current === digits) return;
+    const mySeq = seqRef.current += 1;
+    const handle = setTimeout(() => {
+      lastQueriedRef.current = digits;
+      setStatus("loading");
+      void (async () => {
+        const address = await Promise.resolve().then(() => lookupRef.current?.(digits)).catch(() => null);
+        if (seqRef.current !== mySeq) return;
+        setStatus(address ? "found" : "notfound");
+        if (address) resolvedRef.current?.(address);
+        else notFoundRef.current?.();
+      })();
+    }, debounceMs);
+    return () => clearTimeout(handle);
+  }, [digits, complete, disabled, debounceMs]);
+  return status;
+}
+function CepStatus({
+  status,
+  testId,
+  suppressed,
+  copy
+}) {
+  const visible = !suppressed && status !== "idle";
+  return /* @__PURE__ */ jsx("span", { id: `${testId}-status`, role: "status", "aria-live": "polite", children: visible && /* @__PURE__ */ jsx(FormMessage, { error: status === "notfound", dataTestId: `${testId}-${status}`, children: copy[status] }) });
+}
+function CepField({
+  value,
+  onChange,
+  onLookup,
+  onResolved,
+  onNotFound,
+  label = "CEP",
+  placeholder = "00000-000",
+  error,
+  disabled = false,
+  debounceMs = 500,
+  name = "postalCode",
+  dataTestId,
+  copy
+}) {
+  const testId = dataTestId ?? `cep-field-${name}`;
+  const status = useCepLookup({
+    digits: cepDigits(value),
+    complete: isValidCep(value),
+    disabled,
+    debounceMs,
+    onLookup,
+    onResolved,
+    onNotFound
+  });
+  const handleChange = useCallback(
+    (event) => onChange(formatCep(event.target.value)),
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: name,
+        name,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "postal-code",
+        placeholder,
+        value,
+        error: Boolean(error),
+        disabled,
+        loading: status === "loading",
+        onChange: handleChange,
+        "data-testid": testId,
+        "aria-describedby": `${testId}-status`,
+        "aria-busy": status === "loading"
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error }),
+    /* @__PURE__ */ jsx(CepStatus, { status, testId, suppressed: Boolean(error), copy })
+  ] });
+}
+var CepField_default = CepField;
+
+export {
+  CepField,
+  CepField_default
+};
+//# sourceMappingURL=chunk-WVPA3ONO.js.map

package/dist/chunk-WXDJBSES.js

@@ -0,0 +1,26 @@
+import {
+  ConfirmActionDialog
+} from "./chunk-GPUYB3ST.js";
+import {
+  useConfirmAction
+} from "./chunk-EMYESBIT.js";
+
+// src/components/feedback/ConfirmAction/ConfirmAction.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ConfirmAction({
+  onConfirm,
+  children,
+  ...options
+}) {
+  const state = useConfirmAction(onConfirm, options.errorText);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children(state.request, { pending: state.pending }),
+    /* @__PURE__ */ jsx(ConfirmActionDialog, { state, ...options })
+  ] });
+}
+ConfirmAction.displayName = "ConfirmAction";
+
+export {
+  ConfirmAction
+};
+//# sourceMappingURL=chunk-WXDJBSES.js.map

package/dist/chunk-WXTXCJ5V.js

@@ -0,0 +1,97 @@
+import {
+  iconSx,
+  sizeConfigs
+} from "./chunk-63UQJVBW.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.tsx
+import Box from "@mui/material/Box/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var AnimationContainer = styled(Box)(({ theme, ...flags }) => ({
+  ...iconSx(theme, flags)
+}));
+var DEFAULTS = {
+  variant: "none",
+  size: "md",
+  duration: 2,
+  delay: 0,
+  loop: true,
+  glow: false,
+  glass: false,
+  metallic: false,
+  gradient: false,
+  shadow: "none",
+  ripple: false,
+  neon: false,
+  holographic: false
+};
+var AnimatedIcon = (props) => {
+  const {
+    children,
+    variant,
+    size,
+    color,
+    duration,
+    delay,
+    loop,
+    glow,
+    glass,
+    glowColor,
+    metallic,
+    gradient,
+    shadow,
+    ripple,
+    neon,
+    holographic,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    onClick,
+    tabIndex,
+    onFocus,
+    onBlur,
+    dataTestId
+  } = withDefaults(props, DEFAULTS);
+  const config = sizeConfigs[size] ?? sizeConfigs.md;
+  return /* @__PURE__ */ jsx(
+    AnimationContainer,
+    {
+      $size: config.size,
+      $fontSize: config.fontSize,
+      $animationVariant: variant,
+      $duration: duration,
+      $delay: delay,
+      $loop: loop,
+      $glow: glow,
+      $glass: glass,
+      $glowColor: glowColor,
+      $customColor: color,
+      $metallic: metallic,
+      $gradient: gradient,
+      $shadow: shadow,
+      $ripple: ripple,
+      $neon: neon,
+      $holographic: holographic,
+      className,
+      style,
+      role: "img",
+      "aria-label": ariaLabel || `Animated ${variant} icon`,
+      onClick,
+      tabIndex,
+      onFocus,
+      onBlur,
+      "data-testid": dataTestId,
+      children
+    }
+  );
+};
+var AnimatedIcon_default = AnimatedIcon;
+
+export {
+  AnimatedIcon,
+  AnimatedIcon_default
+};
+//# sourceMappingURL=chunk-WXTXCJ5V.js.map

package/dist/chunk-WYXNFH5Y.js

@@ -0,0 +1,42 @@
+import {
+  ICON_SIZES
+} from "./chunk-RTSK5OZT.js";
+import {
+  ELEVATION_SHADOWS
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/form/Select/Select.metrics.ts
+var inputVariantFor = (variant) => variant === "default" ? "outlined" : variant;
+var selectInputSize = (size) => size === "sm" ? "sm" : "md";
+var SELECT_ICON = {
+  size: ICON_SIZES.md,
+  right: 7,
+  displayPaddingRight: 32,
+  openRotateDeg: 180
+};
+var SELECT_ICON_GAP = SELECT_ICON.displayPaddingRight - SELECT_ICON.size - SELECT_ICON.right;
+var SELECT_DISPLAY_MIN_HEIGHT = 23;
+var SELECT_MENU = {
+  itemMinHeight: 48,
+  itemPaddingVertical: 6,
+  itemPaddingHorizontal: 16,
+  listPaddingVertical: 8,
+  selectedAlpha: { light: 0.08, dark: 0.16 },
+  disabledOpacity: 0.38,
+  /** MUI's `Menu` paper is `calc(100% - 96px)` tall at most. */
+  maxHeightInset: 96
+};
+var MUI_MENU_SHADOW = ELEVATION_SHADOWS[8];
+var selectedWashAlpha = (theme) => theme.mode === "dark" ? SELECT_MENU.selectedAlpha.dark : SELECT_MENU.selectedAlpha.light;
+
+export {
+  inputVariantFor,
+  selectInputSize,
+  SELECT_ICON,
+  SELECT_ICON_GAP,
+  SELECT_DISPLAY_MIN_HEIGHT,
+  SELECT_MENU,
+  MUI_MENU_SHADOW,
+  selectedWashAlpha
+};
+//# sourceMappingURL=chunk-WYXNFH5Y.js.map

package/dist/chunk-WYXNFH5Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Select/Select.metrics.ts"],"sourcesContent":["import type { SelectVariant } from './Select.base';\nimport type { InputVariant } from '../Input/Input.base';\nimport { ICON_SIZES } from '../../../icons/Icon.types';\nimport { ELEVATION_SHADOWS } from '../../../tokens/ink.core';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Select` RENDERERS DRAW WITH.\n *\n * A `Select` on the web IS an `OutlinedInput` with a display slot and an arrow\n * where the value would be typed, so the box's own numbers — the padding, the\n * border, the radius, the field edge — are `Input.metrics.ts`'s, read through\n * {@link inputVariantFor} rather than restated. What is here is what a select\n * has and a text field does not: the arrow, the option list, and the two\n * heights MUI's `FormControl` offers.\n */\n\n/** Our three variants onto the `Input` variant that draws the same box. */\nexport const inputVariantFor = (variant: SelectVariant): InputVariant =>\n  variant === 'default' ? 'outlined' : variant;\n\n/**\n * The house scale as a `FormControl` size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two — `sm` draws small and EVERY other step, `xs` included, draws\n * medium. Restated from `Select.tsx`'s `formControlSize` so the native side\n * reads the same lossy map rather than inventing a kinder one.\n */\nexport const selectInputSize = (size: SizeValue | undefined): 'sm' | 'md' =>\n  size === 'sm' ? 'sm' : 'md';\n\n/**\n * The arrow: MUI's `ArrowDropDown` at `SvgIcon`'s medium size, 7px from the\n * right edge, turned over while the list is open. The display slot reserves\n * 32px for it, so the flow-laid glyph takes the difference as a margin.\n */\nexport const SELECT_ICON = {\n  size: ICON_SIZES.md,\n  right: 7,\n  displayPaddingRight: 32,\n  openRotateDeg: 180,\n} as const;\n\n/** What the glyph leaves between itself and the value: 32 - 24 - 7. */\nexport const SELECT_ICON_GAP =\n  SELECT_ICON.displayPaddingRight - SELECT_ICON.size - SELECT_ICON.right;\n\n/** `.MuiSelect-select`'s floor, MUI's `1.4375em` at the 16px body size. */\nexport const SELECT_DISPLAY_MIN_HEIGHT = 23;\n\n/**\n * The option list: MUI's `Menu` over a `MenuList` of `MenuItem`s.\n *\n * `selectedAlpha` is `palette.action.selectedOpacity`, which MUI doubles in\n * dark mode; `disabledOpacity` is `palette.action.disabledOpacity`. Neither is\n * on `UiTheme`, whose `action` carries colours rather than opacities.\n */\nexport const SELECT_MENU = {\n  itemMinHeight: 48,\n  itemPaddingVertical: 6,\n  itemPaddingHorizontal: 16,\n  listPaddingVertical: 8,\n  selectedAlpha: { light: 0.08, dark: 0.16 },\n  disabledOpacity: 0.38,\n  /** MUI's `Menu` paper is `calc(100% - 96px)` tall at most. */\n  maxHeightInset: 96,\n} as const;\n\n/** MUI's `theme.shadows[8]`, the elevation a `Menu` paper rests at. */\nexport const MUI_MENU_SHADOW = ELEVATION_SHADOWS[8];\n\n/** The wash behind the option the value currently names. */\nexport const selectedWashAlpha = (theme: UiTheme): number =>\n  theme.mode === 'dark' ? SELECT_MENU.selectedAlpha.dark : SELECT_MENU.selectedAlpha.light;\n\n/**\n * The box a select draws IS the input's box, so these are the input's tables\n * under this component's names — the border widths, the glass and gradient\n * alphas, the halo and the pulse. Restating them here is how the two controls\n * would come to disagree about what an outlined field looks like.\n */\nexport {\n  INPUT_BORDER as SELECT_BORDER,\n  INPUT_GLASS as SELECT_GLASS,\n  INPUT_GLOW as SELECT_GLOW,\n  INPUT_GRADIENT as SELECT_GRADIENT,\n  INPUT_PULSE as SELECT_PULSE,\n} from '../Input/Input.metrics';\n"],"mappings":";;;;;;;;AAmBO,IAAM,kBAAkB,CAAC,YAC9B,YAAY,YAAY,aAAa;AAUhC,IAAM,kBAAkB,CAAC,SAC9B,SAAS,OAAO,OAAO;AAOlB,IAAM,cAAc;AAAA,EACzB,MAAM,WAAW;AAAA,EACjB,OAAO;AAAA,EACP,qBAAqB;AAAA,EACrB,eAAe;AACjB;AAGO,IAAM,kBACX,YAAY,sBAAsB,YAAY,OAAO,YAAY;AAG5D,IAAM,4BAA4B;AASlC,IAAM,cAAc;AAAA,EACzB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,qBAAqB;AAAA,EACrB,eAAe,EAAE,OAAO,MAAM,MAAM,KAAK;AAAA,EACzC,iBAAiB;AAAA;AAAA,EAEjB,gBAAgB;AAClB;AAGO,IAAM,kBAAkB,kBAAkB,CAAC;AAG3C,IAAM,oBAAoB,CAAC,UAChC,MAAM,SAAS,SAAS,YAAY,cAAc,OAAO,YAAY,cAAc;","names":[]}

package/dist/chunk-X4PS3E3V.js

@@ -0,0 +1,40 @@
+import {
+  neutralTones,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/MapPreview/mapSurface.ts
+import { alpha } from "@mui/material/styles/index.js";
+var toneGradient = (from, to, opacity = 1) => `linear-gradient(135deg, ${alpha(from, opacity)} 0%, ${alpha(to, opacity)} 100%)`;
+var surfaceBackground = (mapType, theme) => {
+  const tones = neutralTones(theme);
+  if (mapType === "satellite") return toneGradient(tones.inverseSurface, tones.raised);
+  if (mapType === "terrain") {
+    const ground = uiInk(theme).mapSurface;
+    return `linear-gradient(135deg, ${alpha(ground.terrainFrom, 0.2)} 0%, ${alpha(ground.terrainTo, 0.3)} 100%)`;
+  }
+  if (theme.palette.mode === "dark") return toneGradient(tones.inverseSurface, tones.raised);
+  return toneGradient(tones.surface, tones.faint);
+};
+var tileBackground = (mapType, theme) => {
+  const ground = uiInk(theme).mapSurface;
+  if (mapType === "satellite") {
+    return `linear-gradient(135deg, ${alpha(ground.satelliteTileFrom, 0.9)} 0%, ${alpha(ground.satelliteTileTo, 0.9)} 100%)`;
+  }
+  if (mapType === "terrain") {
+    return `linear-gradient(135deg, ${alpha(ground.terrainTileFrom, 0.1)} 0%, ${alpha(ground.terrainTileTo, 0.1)} 100%)`;
+  }
+  const tones = neutralTones(theme);
+  return toneGradient(tones.surface, tones.faint, 0.5);
+};
+var BOUNCE_KEYFRAMES = {
+  "0%, 100%": { transform: "translateY(0)" },
+  "50%": { transform: "translateY(-10px)" }
+};
+
+export {
+  surfaceBackground,
+  tileBackground,
+  BOUNCE_KEYFRAMES
+};
+//# sourceMappingURL=chunk-X4PS3E3V.js.map

package/dist/chunk-X4PS3E3V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/mapSurface.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport type { MapType } from './MapPreview.types';\nimport { neutralTones, uiInk } from '../../../tokens/ink';\n\nconst toneGradient = (from: string, to: string, opacity = 1): string =>\n  `linear-gradient(135deg, ${alpha(from, opacity)} 0%, ${alpha(to, opacity)} 100%)`;\n\n// The backdrop behind the tiles: dark for satellite, green for terrain, and\n// grey for road maps, following the theme's own light/dark choice.\nexport const surfaceBackground = (mapType: MapType, theme: Theme): string => {\n  const tones = neutralTones(theme);\n  if (mapType === 'satellite') return toneGradient(tones.inverseSurface, tones.raised);\n  if (mapType === 'terrain') {\n    const ground = uiInk(theme).mapSurface;\n    return `linear-gradient(135deg, ${alpha(ground.terrainFrom, 0.2)} 0%, ${alpha(ground.terrainTo, 0.3)} 100%)`;\n  }\n  if (theme.palette.mode === 'dark') return toneGradient(tones.inverseSurface, tones.raised);\n  return toneGradient(tones.surface, tones.faint);\n};\n\nexport const tileBackground = (mapType: MapType, theme: Theme): string => {\n  const ground = uiInk(theme).mapSurface;\n  if (mapType === 'satellite') {\n    return `linear-gradient(135deg, ${alpha(ground.satelliteTileFrom, 0.9)} 0%, ${alpha(ground.satelliteTileTo, 0.9)} 100%)`;\n  }\n  if (mapType === 'terrain') {\n    return `linear-gradient(135deg, ${alpha(ground.terrainTileFrom, 0.1)} 0%, ${alpha(ground.terrainTileTo, 0.1)} 100%)`;\n  }\n  const tones = neutralTones(theme);\n  return toneGradient(tones.surface, tones.faint, 0.5);\n};\n\nexport const BOUNCE_KEYFRAMES = {\n  '0%, 100%': { transform: 'translateY(0)' },\n  '50%': { transform: 'translateY(-10px)' },\n} as const;\n"],"mappings":";;;;;;AACA,SAAS,aAAa;AAKtB,IAAM,eAAe,CAAC,MAAc,IAAY,UAAU,MACxD,2BAA2B,MAAM,MAAM,OAAO,CAAC,QAAQ,MAAM,IAAI,OAAO,CAAC;AAIpE,IAAM,oBAAoB,CAAC,SAAkB,UAAyB;AAC3E,QAAM,QAAQ,aAAa,KAAK;AAChC,MAAI,YAAY,YAAa,QAAO,aAAa,MAAM,gBAAgB,MAAM,MAAM;AACnF,MAAI,YAAY,WAAW;AACzB,UAAM,SAAS,MAAM,KAAK,EAAE;AAC5B,WAAO,2BAA2B,MAAM,OAAO,aAAa,GAAG,CAAC,QAAQ,MAAM,OAAO,WAAW,GAAG,CAAC;AAAA,EACtG;AACA,MAAI,MAAM,QAAQ,SAAS,OAAQ,QAAO,aAAa,MAAM,gBAAgB,MAAM,MAAM;AACzF,SAAO,aAAa,MAAM,SAAS,MAAM,KAAK;AAChD;AAEO,IAAM,iBAAiB,CAAC,SAAkB,UAAyB;AACxE,QAAM,SAAS,MAAM,KAAK,EAAE;AAC5B,MAAI,YAAY,aAAa;AAC3B,WAAO,2BAA2B,MAAM,OAAO,mBAAmB,GAAG,CAAC,QAAQ,MAAM,OAAO,iBAAiB,GAAG,CAAC;AAAA,EAClH;AACA,MAAI,YAAY,WAAW;AACzB,WAAO,2BAA2B,MAAM,OAAO,iBAAiB,GAAG,CAAC,QAAQ,MAAM,OAAO,eAAe,GAAG,CAAC;AAAA,EAC9G;AACA,QAAM,QAAQ,aAAa,KAAK;AAChC,SAAO,aAAa,MAAM,SAAS,MAAM,OAAO,GAAG;AACrD;AAEO,IAAM,mBAAmB;AAAA,EAC9B,YAAY,EAAE,WAAW,gBAAgB;AAAA,EACzC,OAAO,EAAE,WAAW,oBAAoB;AAC1C;","names":[]}

package/dist/chunk-XEYLYUDM.js

@@ -0,0 +1,147 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  headingMetrics
+} from "./chunk-PT6TCWIW.js";
+import {
+  fieldOverrides
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  FONT_WEIGHTS,
+  TYPE_SIZES,
+  WEB_FONT_FAMILY,
+  WEB_MONOSPACE_FONT_FAMILY
+} from "./chunk-PE4ZW3IA.js";
+import {
+  cssLengthToPx,
+  cssTrackingToEm
+} from "./chunk-AG66JBNH.js";
+import {
+  HEADING_LEVELS
+} from "./chunk-FZXKH2ZT.js";
+import {
+  resolveFieldHeight
+} from "./chunk-PZBK3F52.js";
+
+// src/provider/mui-bridge.ts
+var slot = (color) => ({
+  main: color.main,
+  light: color.light,
+  dark: color.dark,
+  contrastText: color.contrastText
+});
+function headingSteps(theme) {
+  return Object.fromEntries(
+    HEADING_LEVELS.map((level) => {
+      const metrics = headingMetrics(theme, level);
+      return [
+        level,
+        {
+          fontSize: cssLengthToPx(metrics.fontSize, 16),
+          lineHeight: metrics.lineHeight,
+          letterSpacing: cssTrackingToEm(metrics.letterSpacing),
+          normalWeight: metrics.normalWeight
+        }
+      ];
+    })
+  );
+}
+function uiThemeFromMui(theme) {
+  const { palette } = theme;
+  const unit = cssLengthToPx(theme.spacing(1), 8);
+  const md = cssLengthToPx(theme.shape.borderRadius, 4);
+  return {
+    mode: palette.mode,
+    palette: {
+      mode: palette.mode,
+      primary: slot(palette.primary),
+      secondary: slot(palette.secondary),
+      success: slot(palette.success),
+      warning: slot(palette.warning),
+      info: slot(palette.info),
+      danger: slot(palette.error),
+      neutral: accentFor(theme, "neutral"),
+      text: {
+        primary: palette.text.primary,
+        secondary: palette.text.secondary,
+        disabled: palette.text.disabled
+      },
+      background: { default: palette.background.default, paper: palette.background.paper },
+      divider: palette.divider,
+      action: {
+        active: palette.action.active,
+        hover: palette.action.hover,
+        selected: palette.action.selected,
+        disabled: palette.action.disabled,
+        disabledBackground: palette.action.disabledBackground,
+        focus: palette.action.focus
+      },
+      grey: {
+        50: palette.grey[50],
+        100: palette.grey[100],
+        200: palette.grey[200],
+        300: palette.grey[300],
+        400: palette.grey[400],
+        500: palette.grey[500],
+        600: palette.grey[600],
+        700: palette.grey[700],
+        800: palette.grey[800],
+        900: palette.grey[900]
+      }
+    },
+    spacing: (units) => units * unit,
+    spacingUnit: unit,
+    radius: { sm: md / 2, md, lg: md * 2, xl: md * 4, full: 9999, field: fieldRadius(theme) },
+    fieldHeight: resolveFieldHeight(theme.fieldHeight),
+    typography: {
+      fontFamily: theme.typography.fontFamily ?? WEB_FONT_FAMILY,
+      monospaceFontFamily: WEB_MONOSPACE_FONT_FAMILY,
+      sizes: TYPE_SIZES,
+      weights: FONT_WEIGHTS,
+      heading: headingSteps(theme)
+    },
+    zIndex: {
+      appBar: theme.zIndex.appBar,
+      drawer: theme.zIndex.drawer,
+      modal: theme.zIndex.modal,
+      snackbar: theme.zIndex.snackbar,
+      tooltip: theme.zIndex.tooltip
+    }
+  };
+}
+function muiThemeOptionsFrom(ui) {
+  const { palette } = ui;
+  return {
+    palette: {
+      mode: palette.mode,
+      primary: { ...palette.primary },
+      secondary: { ...palette.secondary },
+      success: { ...palette.success },
+      warning: { ...palette.warning },
+      info: { ...palette.info },
+      error: { ...palette.danger },
+      text: { ...palette.text },
+      background: { ...palette.background },
+      divider: palette.divider,
+      action: { ...palette.action },
+      grey: { ...palette.grey }
+    },
+    shape: { borderRadius: ui.radius.md },
+    fieldRadius: ui.radius.field,
+    fieldHeight: ui.fieldHeight,
+    components: fieldOverrides(ui.radius.field, ui.fieldHeight),
+    spacing: ui.spacingUnit,
+    typography: { fontFamily: ui.typography.fontFamily ?? WEB_FONT_FAMILY },
+    zIndex: { ...ui.zIndex }
+  };
+}
+
+export {
+  uiThemeFromMui,
+  muiThemeOptionsFrom
+};
+//# sourceMappingURL=chunk-XEYLYUDM.js.map

package/dist/chunk-XNBN5CVF.js

@@ -0,0 +1,145 @@
+import {
+  LabelBody
+} from "./chunk-BMEJN27K.js";
+import {
+  SR_ONLY_SX,
+  labelStyles,
+  sizeStyles,
+  textColor
+} from "./chunk-KDIPBEVE.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Label/Label.tsx
+import Box from "@mui/material/Box/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  required: false,
+  disabled: false,
+  error: false,
+  variant: "default",
+  size: "md",
+  color: "neutral",
+  glow: false,
+  pulse: false,
+  ripple: false,
+  loading: false,
+  asteriskPlacement: "end",
+  iconPosition: "start",
+  srOnly: false,
+  weight: "regular",
+  transform: "none",
+  align: "left",
+  nowrap: false,
+  truncate: false
+};
+var Label = forwardRef((props, ref) => {
+  const {
+    children,
+    htmlFor,
+    required,
+    disabled,
+    error,
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    ripple,
+    loading,
+    className,
+    style,
+    tooltip,
+    helperText,
+    asteriskPlacement,
+    icon,
+    iconPosition,
+    onClick,
+    onFocus,
+    onBlur,
+    srOnly,
+    weight,
+    transform,
+    align,
+    nowrap,
+    truncate,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const theme = useTheme();
+  const flags = {
+    variant,
+    size,
+    color,
+    weight,
+    transform,
+    align,
+    error,
+    disabled,
+    glow,
+    pulse,
+    ripple,
+    srOnly,
+    nowrap,
+    truncate,
+    clickable: Boolean(onClick)
+  };
+  const labelContent = /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "label",
+      ref,
+      htmlFor,
+      onClick,
+      onFocus,
+      onBlur,
+      className,
+      "data-testid": dataTestId,
+      sx: { ...labelStyles(theme, flags), ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        LabelBody,
+        {
+          required,
+          asteriskPlacement,
+          icon,
+          iconPosition,
+          loading,
+          fontSize: sizeStyles(theme, size).fontSize,
+          color: textColor(theme, flags),
+          children
+        }
+      )
+    }
+  );
+  if (srOnly) {
+    return /* @__PURE__ */ jsx(Box, { component: "label", htmlFor, "data-testid": dataTestId, sx: SR_ONLY_SX, children });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, arrow: true, children: labelContent }) : labelContent,
+    helperText && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          display: "block",
+          color: error ? theme.palette.error.main : theme.palette.text.secondary,
+          marginTop: theme.spacing(0.5),
+          fontSize: "0.75rem"
+        },
+        children: helperText
+      }
+    )
+  ] });
+});
+Label.displayName = "Label";
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-XNBN5CVF.js.map