@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-D2IASECY.js

@@ -0,0 +1,183 @@
+import {
+  cardStyles
+} from "./chunk-VMF3UXM4.js";
+import {
+  resolveCardProps
+} from "./chunk-RI5JZLZL.js";
+
+// src/components/layout/Card/Card.tsx
+import Box from "@mui/material/Box/index.js";
+import MuiCard from "@mui/material/Card/index.js";
+import MuiCardActions from "@mui/material/CardActions/index.js";
+import MuiCardContent from "@mui/material/CardContent/index.js";
+import MuiCardHeader from "@mui/material/CardHeader/index.js";
+import MuiCardMedia from "@mui/material/CardMedia/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Card = (rawProps) => {
+  const {
+    children,
+    variant,
+    interactive,
+    glow,
+    pulse,
+    borderRadius,
+    loading,
+    onClick,
+    onFocus,
+    onBlur,
+    sx,
+    dataTestId,
+    // These props are reserved for future implementation but need to be extracted
+    // to prevent them from being passed to the underlying MuiCard
+    expandable: _expandable,
+    expanded: _expanded,
+    onExpandToggle: _onExpandToggle,
+    entranceAnimation: _entranceAnimation,
+    animationDelay: _animationDelay,
+    skeleton: _skeleton,
+    hoverScale: _hoverScale,
+    ...restProps
+  } = resolveCardProps(rawProps);
+  const theme = useTheme();
+  const idle = !loading;
+  return /* @__PURE__ */ jsxs(
+    MuiCard,
+    {
+      "data-testid": dataTestId || "card",
+      onClick: idle ? onClick : void 0,
+      onFocus: idle ? onFocus : void 0,
+      onBlur: idle ? onBlur : void 0,
+      sx: {
+        ...cardStyles(theme, { variant, interactive, glow, pulse, borderRadius }),
+        position: "relative",
+        opacity: loading ? 0.6 : 1,
+        pointerEvents: loading ? "none" : "auto",
+        ...sx
+      },
+      ...restProps,
+      children: [
+        loading && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              zIndex: 10
+            },
+            children: /* @__PURE__ */ jsx(CircularProgress, {})
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var CardHeader = ({
+  title,
+  subtitle,
+  action,
+  avatar,
+  children,
+  dataTestId,
+  ...props
+}) => {
+  if (children) {
+    return /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, "data-testid": dataTestId || "card-header", children });
+  }
+  return /* @__PURE__ */ jsx(
+    MuiCardHeader,
+    {
+      "data-testid": dataTestId || "card-header",
+      avatar,
+      action,
+      title,
+      subheader: subtitle,
+      titleTypographyProps: {
+        "data-testid": dataTestId ? `${dataTestId}-title` : "card-title"
+      },
+      subheaderTypographyProps: {
+        "data-testid": dataTestId ? `${dataTestId}-subtitle` : "card-subtitle"
+      },
+      ...props
+    }
+  );
+};
+var CardContent = ({ children, dense = false, dataTestId, ...props }) => /* @__PURE__ */ jsx(
+  MuiCardContent,
+  {
+    "data-testid": dataTestId || "card-content",
+    sx: {
+      padding: dense ? 1 : 2,
+      "&:last-child": {
+        paddingBottom: dense ? 1 : 2
+      }
+    },
+    ...props,
+    children
+  }
+);
+var CardActions = ({
+  children,
+  disableSpacing = false,
+  alignment = "left",
+  dataTestId,
+  ...props
+}) => {
+  const getJustifyContent = () => {
+    switch (alignment) {
+      case "center":
+        return "center";
+      case "right":
+        return "flex-end";
+      case "space-between":
+        return "space-between";
+      default:
+        return "flex-start";
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    MuiCardActions,
+    {
+      "data-testid": dataTestId || "card-actions",
+      disableSpacing,
+      sx: {
+        justifyContent: getJustifyContent()
+      },
+      ...props,
+      children
+    }
+  );
+};
+var CardMedia = ({
+  component = "div",
+  image,
+  title,
+  height = 200,
+  children,
+  dataTestId,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  MuiCardMedia,
+  {
+    "data-testid": dataTestId || "card-media",
+    component,
+    height,
+    image,
+    title,
+    ...props,
+    children
+  }
+);
+
+export {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  CardMedia
+};
+//# sourceMappingURL=chunk-D2IASECY.js.map

package/dist/chunk-D2IASECY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Card/Card.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport MuiCard from '@mui/material/Card/index.js';\nimport MuiCardActions from '@mui/material/CardActions/index.js';\nimport MuiCardContent from '@mui/material/CardContent/index.js';\nimport MuiCardHeader from '@mui/material/CardHeader/index.js';\nimport MuiCardMedia from '@mui/material/CardMedia/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { resolveCardProps } from './Card.helpers';\nimport { cardStyles } from './Card.styles';\nimport type {\n  CardActionsProps,\n  CardContentProps,\n  CardHeaderProps,\n  CardMediaProps,\n  CardProps,\n} from './Card.types';\n\nexport const Card: React.FC<CardProps> = (rawProps) => {\n  const {\n    children,\n    variant,\n    interactive,\n    glow,\n    pulse,\n    borderRadius,\n    loading,\n    onClick,\n    onFocus,\n    onBlur,\n    sx,\n    dataTestId,\n    // These props are reserved for future implementation but need to be extracted\n    // to prevent them from being passed to the underlying MuiCard\n    expandable: _expandable,\n    expanded: _expanded,\n    onExpandToggle: _onExpandToggle,\n    entranceAnimation: _entranceAnimation,\n    animationDelay: _animationDelay,\n    skeleton: _skeleton,\n    hoverScale: _hoverScale,\n    ...restProps\n  } = resolveCardProps(rawProps);\n\n  const theme = useTheme();\n\n  // A loading card is inert: no handlers fire and pointer events are off, so a\n  // half-rendered card cannot be clicked through.\n  const idle = !loading;\n\n  return (\n    <MuiCard\n      data-testid={dataTestId || 'card'}\n      onClick={idle ? onClick : undefined}\n      onFocus={idle ? onFocus : undefined}\n      onBlur={idle ? onBlur : undefined}\n      sx={{\n        ...cardStyles(theme, { variant, interactive, glow, pulse, borderRadius }),\n        position: 'relative',\n        opacity: loading ? 0.6 : 1,\n        pointerEvents: loading ? 'none' : 'auto',\n        ...sx,\n      }}\n      {...restProps}\n    >\n      {loading && (\n        <Box\n          sx={{\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            transform: 'translate(-50%, -50%)',\n            zIndex: 10,\n          }}\n        >\n          <CircularProgress />\n        </Box>\n      )}\n      {children}\n    </MuiCard>\n  );\n};\n\nexport const CardHeader: React.FC<CardHeaderProps> = ({\n  title,\n  subtitle,\n  action,\n  avatar,\n  children,\n  dataTestId,\n  ...props\n}) => {\n  if (children) {\n    return <Box sx={{ p: 2 }} data-testid={dataTestId || 'card-header'}>{children}</Box>;\n  }\n\n  return (\n    <MuiCardHeader\n      data-testid={dataTestId || 'card-header'}\n      avatar={avatar}\n      action={action}\n      title={title}\n      subheader={subtitle}\n      titleTypographyProps={{\n        'data-testid': dataTestId ? `${dataTestId}-title` : 'card-title',\n      } as Record<string, unknown>}\n      subheaderTypographyProps={{\n        'data-testid': dataTestId ? `${dataTestId}-subtitle` : 'card-subtitle',\n      } as Record<string, unknown>}\n      {...props}\n    />\n  );\n};\n\nexport const CardContent: React.FC<CardContentProps> = ({ children, dense = false, dataTestId, ...props }) => (\n    <MuiCardContent\n      data-testid={dataTestId || 'card-content'}\n      sx={{\n        padding: dense ? 1 : 2,\n        '&:last-child': {\n          paddingBottom: dense ? 1 : 2,\n        },\n      }}\n      {...props}\n    >\n      {children}\n    </MuiCardContent>\n  );\n\nexport const CardActions: React.FC<CardActionsProps> = ({\n  children,\n  disableSpacing = false,\n  alignment = 'left',\n  dataTestId,\n  ...props\n}) => {\n  const getJustifyContent = () => {\n    switch (alignment) {\n      case 'center':\n        return 'center';\n      case 'right':\n        return 'flex-end';\n      case 'space-between':\n        return 'space-between';\n      default:\n        return 'flex-start';\n    }\n  };\n\n  return (\n    <MuiCardActions\n      data-testid={dataTestId || 'card-actions'}\n      disableSpacing={disableSpacing}\n      sx={{\n        justifyContent: getJustifyContent(),\n      }}\n      {...props}\n    >\n      {children}\n    </MuiCardActions>\n  );\n};\n\nexport const CardMedia: React.FC<CardMediaProps> = ({\n  component = 'div',\n  image,\n  title,\n  height = 200,\n  children,\n  dataTestId,\n  ...props\n}) => (\n    <MuiCardMedia\n      data-testid={dataTestId || 'card-media'}\n      component={component}\n      height={height}\n      image={image}\n      title={title}\n      {...props}\n    >\n      {children}\n    </MuiCardMedia>\n  );\n"],"mappings":"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","names":[]}

package/dist/chunk-D3IXNCEU.js

@@ -0,0 +1,167 @@
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/navigation/AppHeader/AppHeader.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BAR_MIN_HEIGHT = { regular: 64, dense: 52 };
+var HEADER_DEFAULTS = {
+  position: "sticky",
+  offsetTop: 0,
+  maxWidth: 1200,
+  divider: true,
+  elevateOnScroll: false,
+  dense: false,
+  disableSpacer: false,
+  dataTestId: "app-header"
+};
+function useScrolled(enabled) {
+  const [scrolled, setScrolled] = React.useState(false);
+  React.useEffect(() => {
+    if (!enabled) return void 0;
+    const onScroll = () => setScrolled(window.scrollY > 0);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [enabled]);
+  return enabled && scrolled;
+}
+function useMeasuredHeight(enabled) {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!enabled || !node) return void 0;
+    const measure = () => setHeight(node.getBoundingClientRect().height);
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return [ref, height];
+}
+function surfaceSx({
+  position,
+  offsetTop,
+  divider,
+  scrolled
+}) {
+  return {
+    position,
+    ...position === "static" ? {} : { top: offsetTop, zIndex: "appBar" },
+    ...position === "fixed" ? { left: 0, right: 0 } : {},
+    backgroundColor: "background.paper",
+    borderBottom: divider ? 1 : 0,
+    borderColor: "divider",
+    boxShadow: scrolled ? 2 : 0,
+    transition: "box-shadow 150ms ease"
+  };
+}
+var HeaderTrailing = ({ meta, actions }) => {
+  if (!meta && !actions) return null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        flex: "0 0 auto",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-end",
+        gap: 0.5
+      },
+      children: [
+        meta && /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": "app-header-meta",
+            sx: {
+              fontSize: 11,
+              fontWeight: 700,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              color: "text.disabled",
+              lineHeight: 1
+            },
+            children: meta
+          }
+        ),
+        actions && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "nav",
+            "data-testid": "app-header-actions",
+            sx: { display: "flex", alignItems: "center", gap: 1 },
+            children: actions
+          }
+        )
+      ]
+    }
+  );
+};
+var AppHeader = (props) => {
+  const {
+    leading,
+    children,
+    actions,
+    meta,
+    below,
+    position,
+    offsetTop,
+    maxWidth,
+    divider,
+    elevateOnScroll,
+    dense,
+    disableSpacer,
+    className,
+    dataTestId
+    // True by construction — `withDefaults` fills exactly these keys — but not
+    // something TS can follow through a `Partial<T>` table.
+  } = withDefaults(props, HEADER_DEFAULTS);
+  const scrolled = useScrolled(elevateOnScroll);
+  const needsSpacer = position === "fixed" && !disableSpacer;
+  const [ref, height] = useMeasuredHeight(needsSpacer);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        component: "header",
+        className,
+        "data-testid": dataTestId,
+        sx: surfaceSx({ position, offsetTop, divider, scrolled }),
+        children: /* @__PURE__ */ jsxs(Box, { sx: { maxWidth, mx: "auto", px: { xs: 2, md: 3 } }, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: { xs: 1, md: 2 },
+                minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,
+                py: 1
+              },
+              children: [
+                leading,
+                /* @__PURE__ */ jsx(Box, { sx: { flex: "1 1 auto", minWidth: 0 }, children }),
+                /* @__PURE__ */ jsx(HeaderTrailing, { meta, actions })
+              ]
+            }
+          ),
+          below && /* @__PURE__ */ jsx(Box, { "data-testid": `${dataTestId}-below`, sx: { pb: 1.5 }, children: below })
+        ] })
+      }
+    ),
+    needsSpacer && /* @__PURE__ */ jsx(Box, { "aria-hidden": true, "data-testid": `${dataTestId}-spacer`, sx: { height } })
+  ] });
+};
+AppHeader.displayName = "AppHeader";
+var AppHeader_default = AppHeader;
+
+export {
+  AppHeader,
+  AppHeader_default
+};
+//# sourceMappingURL=chunk-D3IXNCEU.js.map

package/dist/chunk-D3IXNCEU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport type { AppHeaderProps } from './AppHeader.types';\n\n/** Bar height, before the optional `below` row. */\nconst BAR_MIN_HEIGHT = { regular: 64, dense: 52 } as const;\n\n/** The props {@link HEADER_DEFAULTS} guarantees a value for. */\ntype Defaulted =\n  | 'position'\n  | 'offsetTop'\n  | 'maxWidth'\n  | 'divider'\n  | 'elevateOnScroll'\n  | 'dense'\n  | 'disableSpacer'\n  | 'dataTestId';\n\n/** `AppHeaderProps` as the body sees them: nothing defaulted is still optional. */\ntype ResolvedHeaderProps = AppHeaderProps & Required<Pick<AppHeaderProps, Defaulted>>;\n\nconst HEADER_DEFAULTS: Pick<ResolvedHeaderProps, Defaulted> = {\n  position: 'sticky',\n  offsetTop: 0,\n  maxWidth: 1200,\n  divider: true,\n  elevateOnScroll: false,\n  dense: false,\n  disableSpacer: false,\n  dataTestId: 'app-header',\n};\n\n/**\n * Watch the document scroll so a lifted bar can cast a shadow only once there\n * is something under it. Inert (and never attaches a listener) when off.\n */\nfunction useScrolled(enabled: boolean): boolean {\n  const [scrolled, setScrolled] = React.useState(false);\n  React.useEffect(() => {\n    if (!enabled) return undefined;\n    const onScroll = (): void => setScrolled(window.scrollY > 0);\n    onScroll();\n    window.addEventListener('scroll', onScroll, { passive: true });\n    return () => window.removeEventListener('scroll', onScroll);\n  }, [enabled]);\n  return enabled && scrolled;\n}\n\n/**\n * The bar's own height, republished whenever it changes.\n *\n * A `fixed` bar is out of flow, so something has to reserve its space — and a\n * constant cannot, because this bar's height is whatever the caller's slots add\n * up to. A search field in `below`, a status line, a wrapped title: each moves\n * it, and a hard-coded spacer would leave the page's first element under the\n * bar or floating below a gap.\n */\nfunction useMeasuredHeight(enabled: boolean): [React.RefObject<HTMLElement | null>, number] {\n  const ref = React.useRef<HTMLElement | null>(null);\n  const [height, setHeight] = React.useState(0);\n  React.useEffect(() => {\n    const node = ref.current;\n    if (!enabled || !node) return undefined;\n    const measure = (): void => setHeight(node.getBoundingClientRect().height);\n    measure();\n    // Measured once unconditionally, observed only where the API exists. jsdom\n    // has no ResizeObserver, so constructing it unguarded takes down every\n    // consumer's test that happens to render a fixed bar — a crash in THEIR\n    // suite, thrown from a component they only laid out.\n    if (typeof ResizeObserver === 'undefined') return undefined;\n    const observer = new ResizeObserver(measure);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [enabled]);\n  return [ref, height];\n}\n\n/**\n * The bar's own surface. Lifted out of the component both to keep it inside the\n * complexity bar and because the positioning rules are the fiddly part: a\n * `static` bar must claim neither a stacking context nor an offset, and only a\n * `fixed` one needs pinning to the viewport's edges.\n */\nfunction surfaceSx({\n  position,\n  offsetTop,\n  divider,\n  scrolled,\n}: Required<Pick<AppHeaderProps, 'position' | 'offsetTop' | 'divider'>> & {\n  scrolled: boolean;\n}): Record<string, unknown> {\n  return {\n    position,\n    ...(position === 'static' ? {} : { top: offsetTop, zIndex: 'appBar' }),\n    ...(position === 'fixed' ? { left: 0, right: 0 } : {}),\n    backgroundColor: 'background.paper',\n    borderBottom: divider ? 1 : 0,\n    borderColor: 'divider',\n    boxShadow: scrolled ? 2 : 0,\n    transition: 'box-shadow 150ms ease',\n  };\n}\n\n/** The trailing column: the muted note, and the actions under it. */\nconst HeaderTrailing: React.FC<Pick<AppHeaderProps, 'meta' | 'actions'>> = ({ meta, actions }) => {\n  if (!meta && !actions) return null;\n  return (\n    <Box\n      sx={{\n        flex: '0 0 auto',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-end',\n        gap: 0.5,\n      }}\n    >\n      {meta && (\n        <Box\n          data-testid=\"app-header-meta\"\n          sx={{\n            fontSize: 11,\n            fontWeight: 700,\n            letterSpacing: '0.08em',\n            textTransform: 'uppercase',\n            color: 'text.disabled',\n            lineHeight: 1,\n          }}\n        >\n          {meta}\n        </Box>\n      )}\n      {actions && (\n        <Box\n          component=\"nav\"\n          data-testid=\"app-header-actions\"\n          sx={{ display: 'flex', alignItems: 'center', gap: 1 }}\n        >\n          {actions}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\n/**\n * The application bar: a row of slots on one surface, plus an optional second\n * row that belongs to it.\n *\n * It knows nothing about routers, sessions, carts or stores — every slot is a\n * `ReactNode` and every behaviour is a callback, which is what lets one bar\n * serve a storefront, a back office and a platform console without any of them\n * leaking into the others. Compose it with {@link AppHeaderIdentity},\n * {@link AppHeaderStatus} and {@link AppHeaderDetails}, or put your own nodes in\n * the slots.\n *\n * The SURFACE always spans the viewport while the CONTENT stops at `maxWidth`\n * and centres, so the same bar reads as a phone header and as a desktop one\n * without a second component or a breakpoint at the call site.\n */\nexport const AppHeader: React.FC<AppHeaderProps> = (props) => {\n  // A table of defaults rather than one per destructured prop: each `= default`\n  // is a branch, and nine of them put this component over the complexity bar\n  // before it rendered anything.\n  const {\n    leading,\n    children,\n    actions,\n    meta,\n    below,\n    position,\n    offsetTop,\n    maxWidth,\n    divider,\n    elevateOnScroll,\n    dense,\n    disableSpacer,\n    className,\n    dataTestId,\n    // True by construction — `withDefaults` fills exactly these keys — but not\n    // something TS can follow through a `Partial<T>` table.\n  } = withDefaults(props, HEADER_DEFAULTS) as ResolvedHeaderProps;\n\n  const scrolled = useScrolled(elevateOnScroll);\n  const needsSpacer = position === 'fixed' && !disableSpacer;\n  const [ref, height] = useMeasuredHeight(needsSpacer);\n\n  return (\n    <>\n      <Box\n        ref={ref}\n        component=\"header\"\n        className={className}\n        data-testid={dataTestId}\n        sx={surfaceSx({ position, offsetTop, divider, scrolled })}\n      >\n        <Box sx={{ maxWidth, mx: 'auto', px: { xs: 2, md: 3 } }}>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: { xs: 1, md: 2 },\n              minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,\n              py: 1,\n            }}\n          >\n            {leading}\n            {/* The identity takes the slack and is the only part allowed to\n                shrink — the actions are targets and the meta note is already\n                the smallest thing in the bar. */}\n            <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>{children}</Box>\n            <HeaderTrailing meta={meta} actions={actions} />\n          </Box>\n          {below && (\n            <Box data-testid={`${dataTestId}-below`} sx={{ pb: 1.5 }}>\n              {below}\n            </Box>\n          )}\n        </Box>\n      </Box>\n      {needsSpacer && <Box aria-hidden data-testid={`${dataTestId}-spacer`} sx={{ height }} />}\n    </>\n  );\n};\n\nAppHeader.displayName = 'AppHeader';\n\nexport default AppHeader;\n"],"mappings":";;;;;AAEA,OAAO,SAAS;AAChB,OAAO,WAAW;AA6Gd,SAgFA,UAtEI,KAVJ;AAtGJ,IAAM,iBAAiB,EAAE,SAAS,IAAI,OAAO,GAAG;AAgBhD,IAAM,kBAAwD;AAAA,EAC5D,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AACd;AAMA,SAAS,YAAY,SAA2B;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS,QAAO;AACrB,UAAM,WAAW,MAAY,YAAY,OAAO,UAAU,CAAC;AAC3D,aAAS;AACT,WAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC7D,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,WAAW;AACpB;AAWA,SAAS,kBAAkB,SAAiE;AAC1F,QAAM,MAAM,MAAM,OAA2B,IAAI;AACjD,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,CAAC;AAC5C,QAAM,UAAU,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,WAAW,CAAC,KAAM,QAAO;AAC9B,UAAM,UAAU,MAAY,UAAU,KAAK,sBAAsB,EAAE,MAAM;AACzE,YAAQ;AAKR,QAAI,OAAO,mBAAmB,YAAa,QAAO;AAClD,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AACrB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,CAAC,KAAK,MAAM;AACrB;AAQA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAE4B;AAC1B,SAAO;AAAA,IACL;AAAA,IACA,GAAI,aAAa,WAAW,CAAC,IAAI,EAAE,KAAK,WAAW,QAAQ,SAAS;AAAA,IACpE,GAAI,aAAa,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,IAAI,CAAC;AAAA,IACpD,iBAAiB;AAAA,IACjB,cAAc,UAAU,IAAI;AAAA,IAC5B,aAAa;AAAA,IACb,WAAW,WAAW,IAAI;AAAA,IAC1B,YAAY;AAAA,EACd;AACF;AAGA,IAAM,iBAAqE,CAAC,EAAE,MAAM,QAAQ,MAAM;AAChG,MAAI,CAAC,QAAQ,CAAC,QAAS,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,KAAK;AAAA,MACP;AAAA,MAEC;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,IAAI;AAAA,cACF,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,eAAe;AAAA,cACf,OAAO;AAAA,cACP,YAAY;AAAA,YACd;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAED,WACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE;AAAA,YAEnD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAiBO,IAAM,YAAsC,CAAC,UAAU;AAI5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,EAGF,IAAI,aAAa,OAAO,eAAe;AAEvC,QAAM,WAAW,YAAY,eAAe;AAC5C,QAAM,cAAc,aAAa,WAAW,CAAC;AAC7C,QAAM,CAAC,KAAK,MAAM,IAAI,kBAAkB,WAAW;AAEnD,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACA,eAAa;AAAA,QACb,IAAI,UAAU,EAAE,UAAU,WAAW,SAAS,SAAS,CAAC;AAAA,QAExD,+BAAC,OAAI,IAAI,EAAE,UAAU,IAAI,QAAQ,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE,GACpD;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,gBACpB,WAAW,QAAQ,eAAe,QAAQ,eAAe;AAAA,gBACzD,IAAI;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,gBAID,oBAAC,OAAI,IAAI,EAAE,MAAM,YAAY,UAAU,EAAE,GAAI,UAAS;AAAA,gBACtD,oBAAC,kBAAe,MAAY,SAAkB;AAAA;AAAA;AAAA,UAChD;AAAA,UACC,SACC,oBAAC,OAAI,eAAa,GAAG,UAAU,UAAU,IAAI,EAAE,IAAI,IAAI,GACpD,iBACH;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IACC,eAAe,oBAAC,OAAI,eAAW,MAAC,eAAa,GAAG,UAAU,WAAW,IAAI,EAAE,OAAO,GAAG;AAAA,KACxF;AAEJ;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":[]}

package/dist/chunk-DBS74X2C.js

@@ -0,0 +1,193 @@
+import {
+  bounceAnimation,
+  breatheAnimation,
+  fadeInOutAnimation,
+  flipAnimation,
+  floatAnimation,
+  glowPulseAnimation,
+  heartbeatAnimation,
+  jelloAnimation,
+  morphAnimation,
+  neonFlickerAnimation,
+  pulseAnimation,
+  rippleAnimation,
+  rotateAnimation,
+  shakeAnimation,
+  spinAnimation,
+  swingAnimation,
+  translateAnimation,
+  wobbleAnimation
+} from "./chunk-3T5Z5HXF.js";
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var sizeConfigs = {
+  xs: { size: 12, fontSize: 10 },
+  sm: { size: 24, fontSize: 20 },
+  md: { size: 32, fontSize: 28 },
+  lg: { size: 48, fontSize: 44 },
+  xl: { size: 64, fontSize: 60 }
+};
+var ANIMATIONS = {
+  rotate: { keyframes: `${rotateAnimation}`, easing: "linear", scale: 1 },
+  pulse: { keyframes: `${pulseAnimation}`, easing: "ease-in-out", scale: 1 },
+  translate: { keyframes: `${translateAnimation}`, easing: "ease-in-out", scale: 1 },
+  bounce: { keyframes: `${bounceAnimation}`, easing: "ease-in-out", scale: 1 },
+  shake: { keyframes: `${shakeAnimation}`, easing: "ease-in-out", scale: 1 },
+  flip: { keyframes: `${flipAnimation}`, easing: "ease-in-out", scale: 1 },
+  spin: { keyframes: `${spinAnimation}`, easing: "ease-in-out", scale: 1 },
+  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: "ease-in-out", scale: 1 },
+  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: "ease-in-out", scale: 1 },
+  wobble: { keyframes: `${wobbleAnimation}`, easing: "ease-in-out", scale: 1 },
+  morph: { keyframes: `${morphAnimation}`, easing: "ease-in-out", scale: 1 },
+  swing: { keyframes: `${swingAnimation}`, easing: "ease-in-out", scale: 1 },
+  jello: { keyframes: `${jelloAnimation}`, easing: "ease-in-out", scale: 1 },
+  float: { keyframes: `${floatAnimation}`, easing: "ease-in-out", scale: 2 },
+  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: "ease-in-out", scale: 2 },
+  breathe: { keyframes: `${breatheAnimation}`, easing: "ease-in-out", scale: 1.5 }
+};
+var animationFor = (variant, duration, delay, loop) => {
+  const spec = ANIMATIONS[variant];
+  if (!spec) return "none";
+  const iterationCount = loop ? "infinite" : "1";
+  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : "0s"}`;
+};
+var SHADOWS = {
+  soft: (theme) => `0 4px 20px ${alpha(theme.palette.common.black, 0.15)}`,
+  hard: (theme) => `4px 4px 0px ${alpha(theme.palette.common.black, 0.25)}`,
+  elevated: (theme) => `0 10px 40px ${alpha(theme.palette.common.black, 0.2)}, 0 2px 10px ${alpha(theme.palette.common.black, 0.1)}`
+};
+var effectStyles = (theme, flags, animation, color) => {
+  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;
+  return {
+    ...$glass && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
+      backdropFilter: "blur(10px)",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, 0.3)}, 0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+    },
+    ...$metallic && {
+      background: `linear-gradient(145deg,
+      ${theme.palette.grey[300]} 0%,
+      ${theme.palette.grey[500]} 25%,
+      ${theme.palette.grey[400]} 50%,
+      ${theme.palette.grey[600]} 75%,
+      ${theme.palette.grey[400]} 100%)`,
+      backgroundSize: "200% 200%",
+      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
+      boxShadow: `inset 0 2px 4px ${alpha(theme.palette.common.white, 0.5)},
+                inset 0 -2px 4px ${alpha(theme.palette.common.black, 0.3)},
+                0 4px 8px ${alpha(theme.palette.common.black, 0.2)}`
+    },
+    ...$gradient && {
+      background: `linear-gradient(135deg,
+      ${theme.palette.primary.main} 0%,
+      ${theme.palette.secondary.main} 100%)`,
+      backgroundSize: "200% 200%",
+      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`
+    },
+    ...$neon && {
+      color,
+      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
+      filter: `brightness(1.2) contrast(1.2)`,
+      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`
+    },
+    ...$holographic && {
+      background: `linear-gradient(45deg,
+      ${theme.palette.primary.main} 0%,
+      ${theme.palette.secondary.main} 25%,
+      ${theme.palette.error.main} 50%,
+      ${theme.palette.warning.main} 75%,
+      ${theme.palette.primary.main} 100%)`,
+      backgroundSize: "400% 400%",
+      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,
+      backgroundClip: "text",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      filter: `hue-rotate(0deg)`,
+      "@keyframes hueRotate": {
+        "0%": { filter: "hue-rotate(0deg)" },
+        "100%": { filter: "hue-rotate(360deg)" }
+      },
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: -2,
+        borderRadius: "50%",
+        background: "inherit",
+        filter: "blur(10px)",
+        opacity: 0.5,
+        zIndex: -1
+      }
+    }
+  };
+};
+var iconSx = (theme, flags) => {
+  const {
+    $size,
+    $fontSize,
+    $animationVariant,
+    $duration,
+    $delay,
+    $loop,
+    $glow,
+    $glowColor,
+    $customColor,
+    $shadow,
+    $ripple,
+    $neon
+  } = flags;
+  const color = $customColor || theme.palette.primary.main;
+  const glowColor = $glowColor || color;
+  const animation = animationFor($animationVariant, $duration, $delay, $loop);
+  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: $size,
+    height: $size,
+    color,
+    animation,
+    position: "relative",
+    cursor: "default",
+    borderRadius: "50%",
+    transition: "all 0.3s ease",
+    boxShadow: SHADOWS[$shadow ?? "none"]?.(theme) ?? "none",
+    ...$glow && {
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: -8,
+        borderRadius: "50%",
+        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,
+        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,
+        zIndex: -1
+      },
+      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`
+    },
+    ...effectStyles(theme, flags, animation, color),
+    ...$ripple && {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: "50%",
+        border: `2px solid ${color}`,
+        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`
+      }
+    },
+    "& .MuiSvgIcon-root": glyphSize,
+    "& svg": glyphSize,
+    "&:hover": {
+      transform: "scale(1.05)",
+      filter: $neon ? `brightness(1.4) contrast(1.3)` : void 0
+    }
+  };
+};
+
+export {
+  sizeConfigs,
+  iconSx
+};
+//# sourceMappingURL=chunk-DBS74X2C.js.map

package/dist/chunk-DBS74X2C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  breatheAnimation,\n  fadeInOutAnimation,\n  flipAnimation,\n  floatAnimation,\n  glowPulseAnimation,\n  heartbeatAnimation,\n  jelloAnimation,\n  morphAnimation,\n  neonFlickerAnimation,\n  pulseAnimation,\n  rippleAnimation,\n  rotateAnimation,\n  shakeAnimation,\n  spinAnimation,\n  swingAnimation,\n  translateAnimation,\n  wobbleAnimation,\n} from './AnimatedIcon.animations';\nimport type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';\n\nexport const sizeConfigs: Record<AnimationSize, { size: number; fontSize: number }> = {\n  xs: { size: 12, fontSize: 10 },\n  sm: { size: 24, fontSize: 20 },\n  md: { size: 32, fontSize: 28 },\n  lg: { size: 48, fontSize: 44 },\n  xl: { size: 64, fontSize: 60 },\n};\n\n/**\n * Every variant produces the same shorthand — keyframes, duration, easing,\n * iteration count, delay — so only the three things that actually differ are\n * tabulated. `scale` multiplies the caller's duration for the variants that\n * read as slower than the rest.\n */\nconst ANIMATIONS: Record<string, { keyframes: string; easing: string; scale: number }> = {\n  rotate: { keyframes: `${rotateAnimation}`, easing: 'linear', scale: 1 },\n  pulse: { keyframes: `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },\n  translate: { keyframes: `${translateAnimation}`, easing: 'ease-in-out', scale: 1 },\n  bounce: { keyframes: `${bounceAnimation}`, easing: 'ease-in-out', scale: 1 },\n  shake: { keyframes: `${shakeAnimation}`, easing: 'ease-in-out', scale: 1 },\n  flip: { keyframes: `${flipAnimation}`, easing: 'ease-in-out', scale: 1 },\n  spin: { keyframes: `${spinAnimation}`, easing: 'ease-in-out', scale: 1 },\n  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: 'ease-in-out', scale: 1 },\n  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: 'ease-in-out', scale: 1 },\n  wobble: { keyframes: `${wobbleAnimation}`, easing: 'ease-in-out', scale: 1 },\n  morph: { keyframes: `${morphAnimation}`, easing: 'ease-in-out', scale: 1 },\n  swing: { keyframes: `${swingAnimation}`, easing: 'ease-in-out', scale: 1 },\n  jello: { keyframes: `${jelloAnimation}`, easing: 'ease-in-out', scale: 1 },\n  float: { keyframes: `${floatAnimation}`, easing: 'ease-in-out', scale: 2 },\n  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: 'ease-in-out', scale: 2 },\n  breathe: { keyframes: `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },\n};\n\nconst animationFor = (\n  variant: AnimationVariant,\n  duration: number,\n  delay: number,\n  loop: boolean,\n) => {\n  const spec = ANIMATIONS[variant];\n  if (!spec) return 'none';\n\n  const iterationCount = loop ? 'infinite' : '1';\n  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;\n};\n\nconst SHADOWS: Record<string, (theme: Theme) => string> = {\n  soft: (theme) => `0 4px 20px ${alpha(theme.palette.common.black, 0.15)}`,\n  hard: (theme) => `4px 4px 0px ${alpha(theme.palette.common.black, 0.25)}`,\n  elevated: (theme) =>\n    `0 10px 40px ${alpha(theme.palette.common.black, 0.2)}, 0 2px 10px ${alpha(theme.palette.common.black, 0.1)}`,\n};\n\nexport interface IconStyleFlags {\n  $size: number;\n  $fontSize: number;\n  $animationVariant: AnimationVariant;\n  $duration: number;\n  $delay: number;\n  $loop: boolean;\n  $glow: boolean;\n  $glass: boolean;\n  $glowColor?: string;\n  $customColor?: string;\n  $metallic?: boolean;\n  $gradient?: boolean;\n  $shadow?: 'soft' | 'hard' | 'elevated' | 'none';\n  $ripple?: boolean;\n  $neon?: boolean;\n  $holographic?: boolean;\n}\n\n/**\n * The four surface treatments that paint the icon themselves — metallic,\n * gradient, neon and holographic — each run a second animation alongside the\n * chosen one, so they all need the base animation string.\n */\nconst effectStyles = (\n  theme: Theme,\n  flags: IconStyleFlags,\n  animation: string,\n  color: string,\n): CSSObject => {\n  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;\n\n  return {\n    ...($glass && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,\n      backdropFilter: 'blur(10px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, 0.3)}, 0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,\n    }),\n    ...($metallic && {\n      background: `linear-gradient(145deg,\n      ${theme.palette.grey[300]} 0%,\n      ${theme.palette.grey[500]} 25%,\n      ${theme.palette.grey[400]} 50%,\n      ${theme.palette.grey[600]} 75%,\n      ${theme.palette.grey[400]} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,\n      boxShadow: `inset 0 2px 4px ${alpha(theme.palette.common.white, 0.5)},\n                inset 0 -2px 4px ${alpha(theme.palette.common.black, 0.3)},\n                0 4px 8px ${alpha(theme.palette.common.black, 0.2)}`,\n    }),\n    ...($gradient && {\n      background: `linear-gradient(135deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`,\n    }),\n    ...($neon && {\n      color,\n      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,\n      filter: `brightness(1.2) contrast(1.2)`,\n      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`,\n    }),\n    ...($holographic && {\n      background: `linear-gradient(45deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 25%,\n      ${theme.palette.error.main} 50%,\n      ${theme.palette.warning.main} 75%,\n      ${theme.palette.primary.main} 100%)`,\n      backgroundSize: '400% 400%',\n      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,\n      backgroundClip: 'text',\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      filter: `hue-rotate(0deg)`,\n      '@keyframes hueRotate': {\n        '0%': { filter: 'hue-rotate(0deg)' },\n        '100%': { filter: 'hue-rotate(360deg)' },\n      },\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: -2,\n        borderRadius: '50%',\n        background: 'inherit',\n        filter: 'blur(10px)',\n        opacity: 0.5,\n        zIndex: -1,\n      },\n    }),\n  };\n};\n\nexport const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {\n  const {\n    $size, $fontSize, $animationVariant, $duration, $delay, $loop,\n    $glow, $glowColor, $customColor, $shadow, $ripple, $neon,\n  } = flags;\n\n  const color = $customColor || theme.palette.primary.main;\n  const glowColor = $glowColor || color;\n  const animation = animationFor($animationVariant, $duration, $delay, $loop);\n\n  // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,\n  // a bare child renders an svg.\n  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };\n\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: $size,\n    height: $size,\n    color,\n    animation,\n    position: 'relative' as const,\n    cursor: 'default',\n    borderRadius: '50%',\n    transition: 'all 0.3s ease',\n    boxShadow: SHADOWS[$shadow ?? 'none']?.(theme) ?? 'none',\n    ...($glow && {\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: -8,\n        borderRadius: '50%',\n        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,\n        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,\n        zIndex: -1,\n      },\n      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`,\n    }),\n    ...effectStyles(theme, flags, animation, color),\n    ...($ripple && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: 0,\n        borderRadius: '50%',\n        border: `2px solid ${color}`,\n        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`,\n      },\n    }),\n    '& .MuiSvgIcon-root': glyphSize,\n    '& svg': glyphSize,\n    '&:hover': {\n      transform: 'scale(1.05)',\n      filter: $neon ? `brightness(1.4) contrast(1.3)` : undefined,\n    },\n  };\n};\n"],"mappings":"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","names":[]}