@12-apps/ui 6.11.0 → 6.12.0

package/dist/form/Label.js

@@ -1,318 +1,13 @@
+import "../chunk-ZB4VIVRS.js";
 import {
-  withDefaults
-} from "../chunk-Y2JYDXL7.js";
-import {
-  accentFor
-} from "../chunk-OZCEKQIX.js";
+  Label
+} from "../chunk-LQR2IVSL.js";
+import "../chunk-BMEJN27K.js";
+import "../chunk-NR3J7VQL.js";
+import "../chunk-HPK33ACY.js";
+import "../chunk-I6PZVHIT.js";
+import "../chunk-7CA6GVBO.js";
 import "../chunk-PZ5AY32C.js";
-
-// src/components/form/Label/Label.tsx
-import { Box as Box2, Tooltip, Typography, useTheme as useTheme2 } from "@mui/material";
-import { forwardRef } from "react";
-
-// src/components/form/Label/Label.parts.tsx
-import { Box, CircularProgress, useTheme } from "@mui/material";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Asterisk = ({
-  placement
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      component: "span",
-      sx: {
-        color: theme.palette.error.main,
-        marginLeft: placement === "end" ? theme.spacing(0.5) : 0,
-        marginRight: placement === "start" ? theme.spacing(0.5) : 0
-      },
-      children: "*"
-    }
-  );
-};
-var LabelIcon = ({ icon }) => /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center", fontSize: "inherit" }, children: icon });
-var LabelSpinner = ({
-  fontSize,
-  color
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(CircularProgress, { size: fontSize, sx: { color, marginLeft: theme.spacing(0.5) } });
-};
-var LabelBody = ({
-  children,
-  required,
-  asteriskPlacement,
-  icon,
-  iconPosition,
-  loading,
-  fontSize,
-  color
-}) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  required && asteriskPlacement === "start" && /* @__PURE__ */ jsx(Asterisk, { placement: asteriskPlacement }),
-  icon && iconPosition === "start" && /* @__PURE__ */ jsx(LabelIcon, { icon }),
-  children,
-  icon && iconPosition === "end" && /* @__PURE__ */ jsx(LabelIcon, { icon }),
-  required && asteriskPlacement === "end" && /* @__PURE__ */ jsx(Asterisk, { placement: asteriskPlacement }),
-  loading && /* @__PURE__ */ jsx(LabelSpinner, { fontSize, color })
-] });
-
-// src/components/form/Label/Label.styles.ts
-import { alpha } from "@mui/material";
-var SIZES = {
-  xs: (theme) => ({ fontSize: "0.75rem", lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
-  sm: (theme) => ({ fontSize: "0.875rem", lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
-  md: (theme) => ({ fontSize: "1rem", lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
-  lg: (theme) => ({ fontSize: "1.125rem", lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
-  xl: (theme) => ({ fontSize: "1.25rem", lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) })
-};
-var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
-var WEIGHTS = {
-  light: 300,
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
-var fontWeight = (weight) => WEIGHTS[weight] ?? WEIGHTS.regular;
-var textColor = (theme, flags) => {
-  if (flags.error) return theme.palette.error.main;
-  if (flags.disabled) return theme.palette.text.disabled;
-  if (flags.color === "neutral") return theme.palette.text.primary;
-  return accentFor(theme, flags.color).main;
-};
-var rippleStyles = (theme) => ({
-  overflow: "hidden",
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    width: 0,
-    height: 0,
-    borderRadius: "50%",
-    backgroundColor: alpha(theme.palette.primary.main, 0.3),
-    transform: "translate(-50%, -50%)",
-    transition: "width 0.6s, height 0.6s"
-  },
-  "&:active::after": { width: "300%", height: "300%" }
-});
-var SURFACES = {
-  filled: ({ theme, flags, accent }) => ({
-    backgroundColor: alpha(accent, 0.1),
-    borderRadius: theme.spacing(0.5),
-    "&:hover": flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {}
-  }),
-  outlined: ({ theme, flags, accent }) => ({
-    border: `1px solid ${alpha(accent, 0.5)}`,
-    borderRadius: theme.spacing(0.5),
-    "&:hover": flags.clickable ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) } : {}
-  }),
-  glass: ({ theme, flags }) => ({
-    backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(10px)",
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    borderRadius: theme.spacing(0.5),
-    "&:hover": flags.clickable ? {
-      backgroundColor: alpha(theme.palette.background.paper, 0.15),
-      borderColor: alpha(theme.palette.primary.main, 0.3)
-    } : {}
-  }),
-  gradient: ({ theme, flags }) => {
-    const accent = accentFor(theme, flags.color === "neutral" ? "primary" : flags.color);
-    const clip = {
-      WebkitBackgroundClip: "text",
-      WebkitTextFillColor: "transparent",
-      backgroundClip: "text"
-    };
-    return {
-      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,
-      ...clip,
-      "&:hover": flags.clickable ? {
-        background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,
-        ...clip
-      } : {}
-    };
-  },
-  minimal: ({ theme, flags }) => ({
-    padding: 0,
-    "&:hover": flags.clickable ? { color: theme.palette.primary.main } : {}
-  }),
-  default: () => ({})
-};
-var textLayout = (theme, flags) => {
-  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;
-  return {
-    display: srOnly ? "none" : "inline-flex",
-    alignItems: "center",
-    gap: theme.spacing(0.5),
-    transition: theme.transitions.create(["all"], {
-      duration: theme.transitions.duration.standard
-    }),
-    cursor: clickable ? "pointer" : "default",
-    textAlign: align,
-    fontWeight: fontWeight(weight),
-    textTransform: transform,
-    whiteSpace: nowrap ? "nowrap" : "normal",
-    overflow: truncate ? "hidden" : "visible",
-    textOverflow: truncate ? "ellipsis" : "clip",
-    position: "relative"
-  };
-};
-var labelStyles = (theme, flags) => {
-  const { variant, size, clickable } = flags;
-  const color = textColor(theme, flags);
-  const accent = color || theme.palette.primary.main;
-  return {
-    ...textLayout(theme, flags),
-    ...sizeStyles(theme, size),
-    color,
-    ...flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` },
-    ...flags.pulse && {
-      animation: "pulse 2s infinite",
-      "@keyframes pulse": {
-        "0%": { opacity: 1 },
-        "50%": { opacity: 0.6 },
-        "100%": { opacity: 1 }
-      }
-    },
-    ...flags.ripple && clickable && rippleStyles(theme),
-    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent })
-  };
-};
-var SR_ONLY_SX = {
-  position: "absolute",
-  width: "1px",
-  height: "1px",
-  padding: 0,
-  margin: "-1px",
-  overflow: "hidden",
-  clip: "rect(0, 0, 0, 0)",
-  whiteSpace: "nowrap",
-  border: 0
-};
-
-// src/components/form/Label/Label.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } 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 = useTheme2();
-  const flags = {
-    variant,
-    size,
-    color,
-    weight,
-    transform,
-    align,
-    error,
-    disabled,
-    glow,
-    pulse,
-    ripple,
-    srOnly,
-    nowrap,
-    truncate,
-    clickable: Boolean(onClick)
-  };
-  const labelContent = /* @__PURE__ */ jsx2(
-    Box2,
-    {
-      component: "label",
-      ref,
-      htmlFor,
-      onClick,
-      onFocus,
-      onBlur,
-      className,
-      "data-testid": dataTestId,
-      sx: { ...labelStyles(theme, flags), ...style },
-      ...rest,
-      children: /* @__PURE__ */ jsx2(
-        LabelBody,
-        {
-          required,
-          asteriskPlacement,
-          icon,
-          iconPosition,
-          loading,
-          fontSize: sizeStyles(theme, size).fontSize,
-          color: textColor(theme, flags),
-          children
-        }
-      )
-    }
-  );
-  if (srOnly) {
-    return /* @__PURE__ */ jsx2(Box2, { component: "label", htmlFor, "data-testid": dataTestId, sx: SR_ONLY_SX, children });
-  }
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    tooltip ? /* @__PURE__ */ jsx2(Tooltip, { title: tooltip, arrow: true, children: labelContent }) : labelContent,
-    helperText && /* @__PURE__ */ jsx2(
-      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
 };

package/dist/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/form/Label/Label.tsx","../../src/components/form/Label/Label.parts.tsx","../../src/components/form/Label/Label.styles.ts"],"sourcesContent":["import { Box, Tooltip, Typography, useTheme } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { LabelBody } from './Label.parts';\nimport { labelStyles, sizeStyles, SR_ONLY_SX, textColor } from './Label.styles';\nimport type { LabelStyleFlags } from './Label.styles';\nimport type { LabelProps } from './Label.types';\n\nconst DEFAULTS = {\n  required: false,\n  disabled: false,\n  error: false,\n  variant: 'default',\n  size: 'md',\n  color: 'neutral',\n  glow: false,\n  pulse: false,\n  ripple: false,\n  loading: false,\n  asteriskPlacement: 'end',\n  iconPosition: 'start',\n  srOnly: false,\n  weight: 'regular',\n  transform: 'none',\n  align: 'left',\n  nowrap: false,\n  truncate: false,\n} satisfies Partial<LabelProps>;\n\ntype ResolvedProps = LabelProps & Required<Pick<LabelProps, keyof typeof DEFAULTS>>;\n\nexport const Label = forwardRef<globalThis.HTMLLabelElement, LabelProps>((props, ref) => {\n  const {\n    children, htmlFor, required, disabled, error, variant, size, color,\n    glow, pulse, ripple, loading, className, style, tooltip, helperText,\n    asteriskPlacement, icon, iconPosition, onClick, onFocus, onBlur,\n    srOnly, weight, transform, align, nowrap, truncate, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const theme = useTheme();\n\n  const flags: LabelStyleFlags = {\n    variant, size, color, weight, transform, align,\n    error, disabled, glow, pulse, ripple, srOnly, nowrap, truncate,\n    clickable: Boolean(onClick),\n  };\n\n  const labelContent = (\n    <Box\n      component=\"label\"\n      ref={ref}\n      htmlFor={htmlFor}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      className={className}\n      data-testid={dataTestId}\n      sx={{ ...labelStyles(theme, flags), ...style }}\n      {...rest}\n    >\n      <LabelBody\n        required={required}\n        asteriskPlacement={asteriskPlacement}\n        icon={icon}\n        iconPosition={iconPosition}\n        loading={loading}\n        fontSize={sizeStyles(theme, size).fontSize as string}\n        color={textColor(theme, flags)}\n      >\n        {children}\n      </LabelBody>\n    </Box>\n  );\n\n  // A screen-reader-only label is rendered on its own: the tooltip, the styling\n  // and the helper text all describe something nothing can see.\n  if (srOnly) {\n    return (\n      <Box component=\"label\" htmlFor={htmlFor} data-testid={dataTestId} sx={SR_ONLY_SX}>\n        {children}\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      {tooltip ? (\n        <Tooltip title={tooltip} arrow>\n          {labelContent}\n        </Tooltip>\n      ) : (\n        labelContent\n      )}\n\n      {helperText && (\n        <Typography\n          variant=\"caption\"\n          sx={{\n            display: 'block',\n            color: error ? theme.palette.error.main : theme.palette.text.secondary,\n            marginTop: theme.spacing(0.5),\n            fontSize: '0.75rem',\n          }}\n        >\n          {helperText}\n        </Typography>\n      )}\n    </>\n  );\n});\n\nLabel.displayName = 'Label';\n","import { Box, CircularProgress, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport type { LabelProps } from './Label.types';\n\n/** The required marker, on whichever side the caller asked for. */\nexport const Asterisk: React.FC<{ placement: NonNullable<LabelProps['asteriskPlacement']> }> = ({\n  placement,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      component=\"span\"\n      sx={{\n        color: theme.palette.error.main,\n        marginLeft: placement === 'end' ? theme.spacing(0.5) : 0,\n        marginRight: placement === 'start' ? theme.spacing(0.5) : 0,\n      }}\n    >\n      *\n    </Box>\n  );\n};\n\nexport const LabelIcon: React.FC<{ icon: React.ReactNode }> = ({ icon }) => (\n  <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center', fontSize: 'inherit' }}>\n    {icon}\n  </Box>\n);\n\n/** Sized to the label's own font so it sits on the text baseline. */\nexport const LabelSpinner: React.FC<{ fontSize?: CSSStyleDeclaration['fontSize']; color: string }> = ({\n  fontSize,\n  color,\n}) => {\n  const theme = useTheme();\n\n  return <CircularProgress size={fontSize} sx={{ color, marginLeft: theme.spacing(0.5) }} />;\n};\n\nexport interface LabelBodyProps {\n  children: React.ReactNode;\n  required: boolean;\n  asteriskPlacement: NonNullable<LabelProps['asteriskPlacement']>;\n  icon?: React.ReactNode;\n  iconPosition: NonNullable<LabelProps['iconPosition']>;\n  loading: boolean;\n  fontSize?: string;\n  color: string;\n}\n\n/**\n * The run inside the label: the required marker and the icon on whichever side\n * each was asked for, the text, and the spinner after it all.\n */\nexport const LabelBody: React.FC<LabelBodyProps> = ({\n  children,\n  required,\n  asteriskPlacement,\n  icon,\n  iconPosition,\n  loading,\n  fontSize,\n  color,\n}) => (\n  <>\n    {required && asteriskPlacement === 'start' && <Asterisk placement={asteriskPlacement} />}\n    {icon && iconPosition === 'start' && <LabelIcon icon={icon} />}\n    {children}\n    {icon && iconPosition === 'end' && <LabelIcon icon={icon} />}\n    {required && asteriskPlacement === 'end' && <Asterisk placement={asteriskPlacement} />}\n    {loading && <LabelSpinner fontSize={fontSize} color={color} />}\n  </>\n);\n","import { alpha } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\nimport type { LabelProps } from './Label.types';\nimport { accentFor} from '../../../tokens/scales';\n\ntype Size = NonNullable<LabelProps['size']>;\ntype Variant = NonNullable<LabelProps['variant']>;\ntype Weight = NonNullable<LabelProps['weight']>;\n\nconst SIZES: Record<Size, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ fontSize: '0.75rem', lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),\n  sm: (theme) => ({ fontSize: '0.875rem', lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),\n  md: (theme) => ({ fontSize: '1rem', lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),\n  lg: (theme) => ({ fontSize: '1.125rem', lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),\n  xl: (theme) => ({ fontSize: '1.25rem', lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) }),\n};\n\nexport const sizeStyles = (theme: Theme, size: Size): CSSObject => (SIZES[size] ?? SIZES.md)(theme);\n\nconst WEIGHTS: Record<Weight, number> = {\n  light: 300,\n  regular: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\nconst fontWeight = (weight: Weight) => WEIGHTS[weight] ?? WEIGHTS.regular;\n\nexport interface LabelStyleFlags {\n  variant: Variant;\n  size: Size;\n  color: NonNullable<LabelProps['color']>;\n  weight: Weight;\n  transform: NonNullable<LabelProps['transform']>;\n  align: NonNullable<LabelProps['align']>;\n  error: boolean;\n  disabled: boolean;\n  glow: boolean;\n  pulse: boolean;\n  ripple: boolean;\n  srOnly: boolean;\n  nowrap: boolean;\n  truncate: boolean;\n  clickable: boolean;\n}\n\n/**\n * The text colour, which error and disabled override before the palette is\n * consulted at all. Resolved once and threaded through — the variant styles\n * read it up to four times each.\n */\nexport const textColor = (theme: Theme, flags: LabelStyleFlags): string => {\n  if (flags.error) return theme.palette.error.main;\n  if (flags.disabled) return theme.palette.text.disabled;\n  if (flags.color === 'neutral') return theme.palette.text.primary;\n  return accentFor(theme, flags.color).main;\n};\n\n/** The ripple that expands from the centre on press, for clickable labels. */\nconst rippleStyles = (theme: Theme): CSSObject => ({\n  overflow: 'hidden',\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 0,\n    height: 0,\n    borderRadius: '50%',\n    backgroundColor: alpha(theme.palette.primary.main, 0.3),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.6s, height 0.6s',\n  },\n  '&:active::after': { width: '300%', height: '300%' },\n});\n\ninterface SurfaceInput {\n  theme: Theme;\n  flags: LabelStyleFlags;\n  /** The resolved text colour, or the primary accent when it resolves to none. */\n  accent: string;\n}\n\n/**\n * Each variant's own additions. Every arm previously re-spread the same base,\n * glow, pulse and ripple objects and re-derived the colour for each use; the\n * shared prefix is applied once by `labelStyles`.\n *\n * The hover rules are only attached when the label is clickable, which is what\n * the `onClick ? {…} : {}` in every arm was saying.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {\n  filled: ({ theme, flags, accent }) => ({\n    backgroundColor: alpha(accent, 0.1),\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {},\n  }),\n\n  outlined: ({ theme, flags, accent }) => ({\n    border: `1px solid ${alpha(accent, 0.5)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) }\n      : {},\n  }),\n\n  glass: ({ theme, flags }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(10px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? {\n          backgroundColor: alpha(theme.palette.background.paper, 0.15),\n          borderColor: alpha(theme.palette.primary.main, 0.3),\n        }\n      : {},\n  }),\n\n  gradient: ({ theme, flags }) => {\n    // `neutral` has no accent of its own in the gradient; it borrows primary,\n    // which is what this branch already did before the vocabulary was named.\n    const accent = accentFor(theme, flags.color === 'neutral' ? 'primary' : flags.color);\n    // The gradient paints the glyphs themselves rather than the box behind them.\n    const clip = {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      backgroundClip: 'text',\n    };\n\n    return {\n      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,\n      ...clip,\n      '&:hover': flags.clickable\n        ? {\n            background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,\n            ...clip,\n          }\n        : {},\n    };\n  },\n\n  minimal: ({ theme, flags }) => ({\n    padding: 0,\n    '&:hover': flags.clickable ? { color: theme.palette.primary.main } : {},\n  }),\n\n  default: () => ({}),\n};\n\n/** How the text sits: its alignment, weight, casing and overflow behaviour. */\nconst textLayout = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;\n\n  return {\n    display: srOnly ? 'none' : 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    cursor: clickable ? 'pointer' : 'default',\n    textAlign: align,\n    fontWeight: fontWeight(weight),\n    textTransform: transform,\n    whiteSpace: nowrap ? 'nowrap' : 'normal',\n    overflow: truncate ? 'hidden' : 'visible',\n    textOverflow: truncate ? 'ellipsis' : 'clip',\n    position: 'relative' as const,\n  };\n};\n\nexport const labelStyles = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { variant, size, clickable } = flags;\n  const color = textColor(theme, flags);\n  const accent = color || theme.palette.primary.main;\n\n  return {\n    ...textLayout(theme, flags),\n    ...sizeStyles(theme, size),\n    color,\n    ...(flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` }),\n    ...(flags.pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { opacity: 1 },\n        '50%': { opacity: 0.6 },\n        '100%': { opacity: 1 },\n      },\n    }),\n    ...(flags.ripple && clickable && rippleStyles(theme)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent }),\n  };\n};\n\n/** Visually hidden but still read aloud, for the `srOnly` label. */\nexport const SR_ONLY_SX: CSSObject = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n"],"mappings":"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","names":["Box","useTheme","Fragment","jsx","jsxs","useTheme","Box"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}