@12-apps/ui 6.33.0 → 6.34.0

package/src/tokens/index.native.ts

@@ -15,3 +15,5 @@ export {
   fieldHeightPx,
   fieldHeightRem,
 } from './field-height.core';
+// The named colour sets a *.metrics.ts table reads (FUT-2593); no MUI behind them.
+export * from './ink.core';

package/src/tokens/ink.core.ts

@@ -0,0 +1,128 @@
+/**
+ * THE COLOURS THAT HAVE NO PALETTE ROLE, NAMED — with no renderer behind them.
+ *
+ * Every colour a component draws comes from the theme (FUT-2593, under
+ * FUT-2585). Most have a palette role — text, divider, a semantic main, a
+ * neutral tone (`./ink.ts`). These do not: a chart's neon series, a map's
+ * terrain, a code editor's syntax chrome, a vendor's brand. They were hex
+ * literals inside components; they are NAMED sets here, which a host can
+ * replace through `theme.uiInk` (`./ink.ts`), and each default is exactly the
+ * value the component drew before, so moving it here changed nothing on screen.
+ *
+ * This file imports nothing: `*.metrics.ts` tables, which the native renderer
+ * reads too, take their colours from it.
+ */
+
+/** The `neon` Chart variant: its series, its ground, its accent (`Chart`). */
+export const DATA_VIZ_NEON = {
+  series: ['#00ffff', '#ff00ff', '#ffff00', '#00ff00', '#ff0080', '#8000ff'],
+  ground: '#000',
+  accent: '#00ffff',
+} as const;
+
+/** The phases a `TimingDiagram` bar is split into, in order. */
+export const TIMING_PHASES = {
+  dns: '#9C27B0',
+  connect: '#2196F3',
+  tls: '#00BCD4',
+  request: '#4CAF50',
+  response: '#FF9800',
+} as const;
+
+/** `MapPreview`'s ground for the terrain and satellite map types. */
+export const MAP_SURFACE = {
+  terrainFrom: '#8BC34A',
+  terrainTo: '#4CAF50',
+  terrainTileFrom: '#7cb342',
+  terrainTileTo: '#558b2f',
+  satelliteTileFrom: '#1a1a1a',
+  satelliteTileTo: '#2a2a2a',
+} as const;
+
+/** `CodeEditor`'s Monaco chrome, per mode — GitHub's own light and dark. */
+export const CODE_EDITOR_CHROME = {
+  light: {
+    background: '#FFFFFF',
+    foreground: '#24292E',
+    lineHighlight: '#F6F8FA',
+    lineNumber: '#959DA5',
+    lineNumberActive: '#24292E',
+    gutterBorder: '#D1D5DA',
+    selection: '#C8E1FF',
+  },
+  dark: {
+    background: '#0D1117',
+    foreground: '#C9D1D9',
+    lineHighlight: '#161B22',
+    lineNumber: '#8B949E',
+    lineNumberActive: '#C9D1D9',
+    gutterBorder: '#21262D',
+    selection: '#3392FF44',
+  },
+} as const;
+
+/**
+ * The social-login providers' OWN colours. Brand rules fix these — a host may
+ * not "theme" Google's button — so the override exists only for a provider that
+ * changes its guideline.
+ */
+export const SOCIAL_BRAND = {
+  googleLogo: { blue: '#4285F4', green: '#34A853', yellow: '#FBBC05', red: '#EA4335' },
+  google: { background: '#ffffff', text: '#1f1f1f', border: '#dadce0', hover: '#f5f5f5', hoverBorder: '#dadce0' },
+  facebook: { background: '#1877F2', text: '#ffffff', hover: '#166fe5', logo: '#1877F2' },
+  apple: { background: '#000000', text: '#ffffff', hover: '#1a1a1a' },
+} as const;
+
+/** The two decorative gradients a completed step and a tutorial's call to action wear. */
+export const CELEBRATION_GRADIENTS = {
+  mint: ['#84fab0', '#8fd3f4'],
+  violet: ['#667eea', '#764ba2'],
+} as const;
+
+/** A count that wants attention before it is read (`NavigationMenu`'s badge). */
+export const ATTENTION_INK = { from: '#ff5252', to: '#ff1744', glow: 'rgb(255, 23, 68)' } as const;
+
+/** A search hit inside a row label (`CategorySelect`). */
+export const HIGHLIGHT_MARK = '#fff2a8';
+
+/** The slate a frosted breadcrumb bar is tinted with in dark mode. */
+export const GLASS_SLATE = 'rgb(17, 24, 39)';
+
+/** The ink of a raised floating panel's shadow (`CategorySelect`). */
+export const PANEL_SHADOW_INK = 'rgb(16, 20, 35)';
+
+/**
+ * Glows that were drawn in a FIXED hue rather than the host's primary: MUI's
+ * default blue (`Checkbox`, `NavigationMenu`) and the platform's default indigo
+ * (`Breadcrumbs`). Kept as they are — moving them onto `palette.primary` would
+ * recolour them for every host — and named so that a host can.
+ */
+export const EFFECT_GLOW = { muiBlue: 'rgb(25, 118, 210)', brandIndigo: 'rgb(99, 102, 241)' } as const;
+
+/**
+ * MUI's own elevation shadows 1, 2, 3 and 8 — what `theme.shadows[n]` holds at
+ * MUI's defaults — for the `*.metrics.ts` tables the native renderer reads.
+ */
+export const ELEVATION_SHADOWS = {
+  1: '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+  2: '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)',
+  3: '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+  8: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+} as const;
+
+/** The two absolutes, for a renderer with no palette to read them from. */
+export const ABSOLUTE_INK = { black: '#000', white: '#fff' } as const;
+
+/** The grey ramp's steps the neutral tones are drawn from (MUI's). */
+export const NEUTRAL_RAMP = {
+  50: '#fafafa',
+  100: '#f5f5f5',
+  200: '#eeeeee',
+  300: '#e0e0e0',
+  400: '#bdbdbd',
+  500: '#9e9e9e',
+  600: '#757575',
+  700: '#616161',
+  800: '#424242',
+  900: '#212121',
+} as const;

package/src/tokens/ink.ts

@@ -0,0 +1,170 @@
+import type { Theme } from '@mui/material/styles/index.js';
+
+import { alpha } from './color';
+import {
+  ATTENTION_INK,
+  CELEBRATION_GRADIENTS,
+  CODE_EDITOR_CHROME,
+  DATA_VIZ_NEON,
+  EFFECT_GLOW,
+  GLASS_SLATE,
+  HIGHLIGHT_MARK,
+  MAP_SURFACE,
+  NEUTRAL_RAMP,
+  PANEL_SHADOW_INK,
+  SOCIAL_BRAND,
+  TIMING_PHASES,
+} from './ink.core';
+
+/**
+ * EVERY COLOUR A COMPONENT DRAWS, BY ROLE (FUT-2593, under FUT-2585).
+ *
+ * A component never writes a hex, an `rgba()`, a named colour or a step on the
+ * grey ramp; it asks for a ROLE, and the role reads the theme:
+ *
+ * - the palette's own roles, straight — `text.secondary`, `divider`,
+ *   `action.hover`, a semantic `main` and its `contrastText`;
+ * - the INK roles below, over the palette's two absolutes — a scrim behind a
+ *   modal, a shadow's ink, a glass sheen, the ink on a photo;
+ * - the NEUTRAL tones, over the grey ramp, named by what they do rather than by
+ *   their step, so a host that re-greys the ramp re-greys every one;
+ * - `uiInk(theme)`, the colours with no palette role at all (`./ink.core.ts`),
+ *   which a host can replace through `theme.uiInk`.
+ *
+ * Every default is the value the component drew before, so moving a component
+ * onto these changed nothing on screen. `scripts/ui-tokens-gate.mjs` refuses a
+ * raw colour or a ramp step in a component from here on.
+ */
+
+export interface UiInk {
+  dataVizNeon: { series: readonly string[]; ground: string; accent: string };
+  timingPhases: Record<keyof typeof TIMING_PHASES, string>;
+  mapSurface: Record<keyof typeof MAP_SURFACE, string>;
+  codeEditor: { light: Record<keyof typeof CODE_EDITOR_CHROME.light, string>; dark: Record<keyof typeof CODE_EDITOR_CHROME.dark, string> };
+  socialBrand: typeof SOCIAL_BRAND;
+  celebration: { mint: readonly [string, string]; violet: readonly [string, string] };
+  attention: { from: string; to: string; glow: string };
+  highlightMark: string;
+  glassSlate: string;
+  panelShadowInk: string;
+  effectGlow: { muiBlue: string; brandIndigo: string };
+}
+
+export const DEFAULT_UI_INK: UiInk = {
+  dataVizNeon: DATA_VIZ_NEON,
+  timingPhases: TIMING_PHASES,
+  mapSurface: MAP_SURFACE,
+  codeEditor: CODE_EDITOR_CHROME,
+  socialBrand: SOCIAL_BRAND,
+  celebration: CELEBRATION_GRADIENTS,
+  attention: ATTENTION_INK,
+  highlightMark: HIGHLIGHT_MARK,
+  glassSlate: GLASS_SLATE,
+  panelShadowInk: PANEL_SHADOW_INK,
+  effectGlow: EFFECT_GLOW,
+};
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    /** Colours with no palette role, by name. See `@12-apps/ui/tokens`' `uiInk`. */
+    uiInk?: Partial<UiInk>;
+  }
+  interface ThemeOptions {
+    /**
+     * Replace any of the named colour sets `@12-apps/ui` draws with. Each set is
+     * replaced WHOLE (the merge is one level deep): to change `codeEditor.dark`,
+     * pass `codeEditor` with both `light` and `dark`.
+     */
+    uiInk?: Partial<UiInk>;
+  }
+}
+
+/** The named colour sets, with the host's `theme.uiInk` layered over the defaults. */
+export function uiInk(theme: Theme): UiInk {
+  return { ...DEFAULT_UI_INK, ...theme.uiInk };
+}
+
+/* ── Ink roles over the palette's two absolutes ───────────────────────────── */
+
+/** The dim laid behind a modal, a lightbox, a spotlight. */
+export const scrim = (theme: Theme, opacity: number): string => alpha(theme.palette.common.black, opacity);
+
+/** The colour of a drop shadow or a glow's dark half. */
+export const shadowInk = (theme: Theme, opacity = 1): string => alpha(theme.palette.common.black, opacity);
+
+/** A highlight: a glass edge, a shimmer, a pressed-in light. */
+export const sheen = (theme: Theme, opacity = 1): string => alpha(theme.palette.common.white, opacity);
+
+/** Ink that sits ON a photo, a gradient or a scrim — never on the page. */
+export const onMedia = (theme: Theme): string => theme.palette.common.white;
+
+/**
+ * The palette's two absolutes, for the places the hue must be exactly black or
+ * white: a CSS mask's opaque stop, the black `dark` tooltip.
+ */
+export const absoluteInk = (theme: Theme): { black: string; white: string } => ({
+  black: theme.palette.common.black,
+  white: theme.palette.common.white,
+});
+
+/** The absolute that CONTRASTS with the mode's page: black in light mode, white in dark. */
+export const modeInk = (theme: Theme): string =>
+  theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black;
+
+/* ── Neutral tones over the grey ramp ─────────────────────────────────────── */
+
+const step = (theme: Theme, n: keyof typeof NEUTRAL_RAMP): string => theme.palette.grey[n] ?? NEUTRAL_RAMP[n];
+
+/**
+ * The neutral scale by ROLE. The names say what a tone is for, so a component
+ * reads `neutralTones(theme).track` rather than "grey 300", and a host that
+ * re-greys the ramp moves every one of them together.
+ */
+export function neutralTones(theme: Theme) {
+  return {
+    /** A dark chip on a light UI: a tooltip, a context menu, a code block's dark ground. */
+    inverseSurface: step(theme, 900),
+    /** A raised dark panel. */
+    raised: step(theme, 800),
+    /** A neutral control's fill. */
+    strong: step(theme, 700),
+    /** A neutral accent: a badge, a strong scrollbar thumb. */
+    emphasis: step(theme, 600),
+    /** A quiet mark: an offline dot, a secondary icon. */
+    muted: step(theme, 500),
+    /** An idle connector, a light scrollbar thumb. */
+    subtle: step(theme, 400),
+    /** An idle track, a placeholder fill. */
+    track: step(theme, 300),
+    /** A faint track, a light scrollbar channel. */
+    faint: step(theme, 200),
+    /** A light code block, a light card. */
+    surface: step(theme, 100),
+    /** The lightest ground. */
+    canvas: step(theme, 50),
+  };
+}
+
+/** The four-stop accent a component's `neutral` colour resolves to. */
+export interface NeutralAccent {
+  main: string;
+  light: string;
+  dark: string;
+  contrastText: string;
+}
+
+/**
+ * The neutral the CONTROLS draw with — grey 700, pressed 800, soft 500, white
+ * ink — for `Button`, `Toggle`, `RadioGroup`, `Switch`, `Slider`, `Textarea`,
+ * `InputOTP`. Not `accentFor(theme, 'neutral')` (600/400/800, a badge's): the
+ * controls have always been one step darker.
+ */
+export function controlNeutral(theme: Theme): NeutralAccent {
+  return { main: step(theme, 700), dark: step(theme, 800), light: step(theme, 500), contrastText: theme.palette.common.white };
+}
+
+/** The softer neutral a notice or a progress track draws with — 500 on a 300 ground, 700 pressed. */
+export function softNeutral(theme: Theme): NeutralAccent {
+  const main = step(theme, 500);
+  return { main, light: step(theme, 300), dark: step(theme, 700), contrastText: theme.palette.getContrastText(main) };
+}

package/src/tokens/scales.ts

@@ -16,6 +16,9 @@ export * from './theme';
 export * from './color';
 // The relative-size vocabulary every component writes its sizes in (FUT-2585).
 export { rem, rems, remPx, resetRootFontCache, sxRem } from './relative';
+// Every colour by role (FUT-2593): ink roles, neutral tones, the named sets.
+export * from './ink';
+export * from './ink.core';
 export { DEFAULT_FIELD_RADIUS, fieldRadius, fieldRadiusOverrides, fieldRadiusPx, fieldRootStyles } from './field-radius';
 export {
   asFieldSize,

package/dist/chunk-25R3ITGZ.js

@@ -1,203 +0,0 @@
-import {
-  ACTIONS_GAP_UNITS,
-  ACTIONS_MARGIN_TOP_UNITS,
-  ACTION_MIN_WIDTH,
-  CONTENT_GAP_UNITS,
-  DESCRIPTION_LINE_HEIGHT,
-  DESCRIPTION_MAX_WIDTH,
-  EMPTY_STATE_GAP_UNITS,
-  EMPTY_STATE_MIN_HEIGHT,
-  EMPTY_STATE_PADDING_UNITS,
-  EXTERNAL_LINK_MARK,
-  HELP_LINK_MARGIN_TOP_UNITS,
-  TITLE_MAX_WIDTH,
-  illustrationMaxWidth,
-  illustrationOpacity
-} from "./chunk-RKCS6K36.js";
-import {
-  actionsOf,
-  makeTestId
-} from "./chunk-MWFSIB6K.js";
-import {
-  resolveTestId
-} from "./chunk-TYJR4GOF.js";
-
-// src/components/data-display/EmptyState/EmptyState.tsx
-import AddIcon from "@mui/icons-material/Add";
-import RefreshIcon from "@mui/icons-material/Refresh";
-import Box from "@mui/material/Box/index.js";
-import Button from "@mui/material/Button/index.js";
-import Link from "@mui/material/Link/index.js";
-import Stack from "@mui/material/Stack/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { useTheme } from "@mui/material/styles/index.js";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ACTION_ICONS = {
-  Add: /* @__PURE__ */ jsx(AddIcon, {}),
-  Refresh: /* @__PURE__ */ jsx(RefreshIcon, {})
-};
-var Illustration = ({ illustration, variant, testId }) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    "data-testid": testId,
-    sx: {
-      maxWidth: illustrationMaxWidth(variant),
-      width: "100%",
-      height: "auto",
-      opacity: illustrationOpacity(variant),
-      display: variant === "minimal" ? "none" : "block"
-    },
-    children: illustration
-  }
-);
-var Actions = ({ specs, testId }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Stack,
-    {
-      direction: { xs: "column", sm: "row" },
-      spacing: ACTIONS_GAP_UNITS,
-      alignItems: "center",
-      sx: { mt: theme.spacing(ACTIONS_MARGIN_TOP_UNITS) },
-      children: specs.map((spec) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: spec.variant,
-          onClick: spec.onClick,
-          startIcon: spec.icon && ACTION_ICONS[spec.icon],
-          "data-testid": testId(spec.key),
-          sx: { minWidth: ACTION_MIN_WIDTH },
-          children: spec.label
-        },
-        spec.key
-      ))
-    }
-  );
-};
-var HelpLink = ({ helpLink, testId }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Link,
-    {
-      href: helpLink.href,
-      target: helpLink.external ? "_blank" : void 0,
-      rel: helpLink.external ? "noopener noreferrer" : void 0,
-      "data-testid": testId,
-      sx: {
-        mt: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),
-        color: theme.palette.primary.main,
-        textDecoration: "none",
-        "&:hover": {
-          textDecoration: "underline"
-        }
-      },
-      children: [
-        helpLink.label,
-        helpLink.external && EXTERNAL_LINK_MARK
-      ]
-    }
-  );
-};
-var Content = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(Stack, { spacing: CONTENT_GAP_UNITS, alignItems: "center", children: [
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        id: titleId,
-        variant: "h6",
-        component: "h3",
-        "data-testid": testId("title"),
-        sx: {
-          fontWeight: theme.typography.fontWeightMedium,
-          color: theme.palette.text.primary,
-          maxWidth: TITLE_MAX_WIDTH
-        },
-        children: title
-      }
-    ),
-    description && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "body2",
-        color: "text.secondary",
-        "data-testid": testId("description"),
-        sx: {
-          maxWidth: DESCRIPTION_MAX_WIDTH,
-          lineHeight: DESCRIPTION_LINE_HEIGHT
-        },
-        children: description
-      }
-    ),
-    showActions && /* @__PURE__ */ jsx(Actions, { specs: actions, testId }),
-    helpLink && /* @__PURE__ */ jsx(HelpLink, { helpLink, testId: testId("help-link") })
-  ] });
-};
-var EmptyState = React.memo((props) => {
-  const {
-    variant = "default",
-    title,
-    description,
-    illustration,
-    helpLink,
-    refreshLabel = "Refresh",
-    createLabel = "Create New",
-    className
-  } = props;
-  const theme = useTheme();
-  const titleId = React.useId();
-  const dataTestId = resolveTestId(props);
-  const testId = makeTestId(dataTestId);
-  const actions = actionsOf(props, refreshLabel, createLabel);
-  const showActions = variant === "action" || actions.length > 0;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      role: "region",
-      "aria-labelledby": titleId,
-      className,
-      "data-testid": dataTestId || "empty-state",
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
-        padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
-        minHeight: EMPTY_STATE_MIN_HEIGHT,
-        gap: theme.spacing(EMPTY_STATE_GAP_UNITS)
-      },
-      children: [
-        illustration && /* @__PURE__ */ jsx(
-          Illustration,
-          {
-            illustration,
-            variant,
-            testId: testId("icon")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Content,
-          {
-            title,
-            description,
-            titleId,
-            testId,
-            actions,
-            showActions,
-            helpLink
-          }
-        )
-      ]
-    }
-  );
-});
-EmptyState.displayName = "EmptyState";
-var EmptyState_default = EmptyState;
-
-export {
-  EmptyState,
-  EmptyState_default
-};
-//# sourceMappingURL=chunk-25R3ITGZ.js.map

package/dist/chunk-2SKNSQCP.js

@@ -1,83 +0,0 @@
-import {
-  useFormContext
-} from "./chunk-4XK6JQ4D.js";
-import {
-  CepField
-} from "./chunk-5FA5S2YN.js";
-
-// src/components/form/total-form/Fields/CepField.tsx
-import { useCallback, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var PARTS = ["street", "neighborhood", "city", "state"];
-function useOwnedAutofill() {
-  const { values, setFieldValue } = useFormContext();
-  const autoFilledRef = useRef({});
-  const valuesRef = useRef(values);
-  valuesRef.current = values;
-  const write = useCallback(
-    (field, value) => {
-      const current = (valuesRef.current[field] ?? "").trim();
-      const ours = autoFilledRef.current[field] === current;
-      if (current !== "" && !ours) return;
-      setFieldValue(field, value);
-      if (value) {
-        autoFilledRef.current[field] = value;
-      } else {
-        delete autoFilledRef.current[field];
-      }
-    },
-    [setFieldValue]
-  );
-  const clearOwned = useCallback(() => {
-    for (const field of Object.keys(autoFilledRef.current)) {
-      write(field, "");
-    }
-  }, [write]);
-  return useMemo(() => ({ write, clearOwned }), [write, clearOwned]);
-}
-function CepField2({
-  name,
-  label,
-  lookup,
-  fills,
-  debounceMs,
-  copy
-}) {
-  const { values, errors, setFieldValue } = useFormContext();
-  const { write, clearOwned } = useOwnedAutofill();
-  const handleResolved = useCallback(
-    (address) => {
-      if (!fills) return;
-      for (const part of PARTS) {
-        const field = fills[part];
-        if (field) write(field, address[part] ?? "");
-      }
-    },
-    [fills, write]
-  );
-  const handleChange = useCallback(
-    (masked) => setFieldValue(name, masked),
-    [name, setFieldValue]
-  );
-  return /* @__PURE__ */ jsx(
-    CepField,
-    {
-      copy,
-      name,
-      label,
-      value: values[name] ?? "",
-      error: errors[name],
-      onChange: handleChange,
-      onLookup: lookup,
-      onResolved: handleResolved,
-      onNotFound: clearOwned,
-      debounceMs,
-      dataTestId: `total-form-field-${name}`
-    }
-  );
-}
-
-export {
-  CepField2 as CepField
-};
-//# sourceMappingURL=chunk-2SKNSQCP.js.map

package/dist/chunk-3CGLGOLO.js

@@ -1,97 +0,0 @@
-import {
-  iconSx,
-  sizeConfigs
-} from "./chunk-DBS74X2C.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-3CGLGOLO.js.map