@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-IFSUKWE7.js

@@ -1,219 +0,0 @@
-import {
-  FLEET_DOT,
-  FLEET_ROSTER,
-  FLEET_ROW,
-  FLEET_SKELETON
-} from "./chunk-BTQZ3EX3.js";
-import {
-  freshnessOf
-} from "./chunk-XPMGFAJ3.js";
-import {
-  Skeleton
-} from "./chunk-7F7TTOYN.js";
-
-// src/components/data-display/FleetMap/FleetRoster.tsx
-import Box from "@mui/material/Box/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";
-function freshnessColor(freshness, theme) {
-  if (freshness === "live") return theme.palette.success.main;
-  if (freshness === "lagging") return theme.palette.warning.main;
-  return theme.palette.text.disabled;
-}
-function RowText({
-  unit,
-  copy,
-  freshness,
-  testId
-}) {
-  const theme = useTheme();
-  const meta = [
-    copy.freshness[freshness],
-    copy.lastSeen(unit.staleSeconds),
-    unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM)
-  ].filter((part) => Boolean(part)).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs(Stack, { sx: { minWidth: 0, flexGrow: 1 }, children: [
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "body2",
-        component: "p",
-        "data-testid": `${testId}-label`,
-        sx: { fontWeight: theme.typography.fontWeightMedium, overflowWrap: "anywhere" },
-        children: unit.label
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "caption",
-        component: "p",
-        "data-testid": `${testId}-meta`,
-        sx: { color: theme.palette.text.secondary },
-        children: meta
-      }
-    )
-  ] });
-}
-function useKeptInView(selected, position) {
-  const row = React.useRef(null);
-  React.useEffect(() => {
-    const box = row.current;
-    const list = box?.parentElement;
-    if (!selected || !box || !list) return;
-    const top = box.offsetTop - list.offsetTop;
-    if (top < list.scrollTop) {
-      list.scrollTop = top;
-    } else if (top + box.offsetHeight > list.scrollTop + list.clientHeight) {
-      list.scrollTop = top + box.offsetHeight - list.clientHeight;
-    }
-  }, [selected, position]);
-  return row;
-}
-function rowSx(theme, selected) {
-  const resting = selected ? theme.palette.action.selected : "transparent";
-  return {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(FLEET_ROW.gapUnits),
-    padding: theme.spacing(FLEET_ROW.paddingYUnits, FLEET_ROW.paddingXUnits),
-    // `1`, not `theme.shape.borderRadius / 4`. MUI's `sx` reads a NUMBER here as
-    // a multiple of `theme.shape.borderRadius`, so dividing the theme value out
-    // and letting `sx` multiply it back in is quadratic: measured 4px on the
-    // default theme — which is why this looked right — and 36px on a host that
-    // sets its own radius to 12. In a package whose whole premise is being
-    // re-themed, only the multiple is portable.
-    borderRadius: FLEET_ROW.radiusMultiple,
-    cursor: "pointer",
-    backgroundColor: resting,
-    "&:hover": {
-      backgroundColor: selected ? theme.palette.action.selected : theme.palette.action.hover
-    }
-  };
-}
-function FleetRow({
-  unit,
-  copy,
-  freshness,
-  selected,
-  onSelect,
-  optionId,
-  position,
-  testId
-}) {
-  const theme = useTheme();
-  const color = freshnessColor(freshness, theme);
-  const row = useKeptInView(selected, position);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ref: row,
-      role: "option",
-      "aria-selected": selected,
-      id: optionId,
-      "data-testid": testId,
-      "data-freshness": freshness,
-      onClick: () => onSelect(unit.id),
-      sx: rowSx(theme, selected),
-      children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            "aria-hidden": "true",
-            "data-testid": `${testId}-dot`,
-            sx: {
-              width: FLEET_DOT.size,
-              height: FLEET_DOT.size,
-              borderRadius: "50%",
-              flexShrink: 0,
-              backgroundColor: color
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(RowText, { unit, copy, freshness, testId }),
-        unit.badge && /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "caption",
-            component: "span",
-            "data-testid": `${testId}-badge`,
-            sx: { color: theme.palette.text.secondary, flexShrink: 0 },
-            children: unit.badge
-          }
-        )
-      ]
-    }
-  );
-}
-function FirstLoad({ testId }) {
-  return /* @__PURE__ */ jsx(Stack, { spacing: FLEET_SKELETON.gapUnits, "data-testid": `${testId}-skeleton`, "aria-hidden": "true", children: Array.from({ length: FLEET_SKELETON.rows }, (_, row) => /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      variant: "rectangular",
-      height: FLEET_SKELETON.height,
-      borderRadius: FLEET_SKELETON.radiusMultiple
-    },
-    row
-  )) });
-}
-function FleetRoster({
-  units,
-  copy,
-  selectedId,
-  onSelect,
-  laggingAfterSeconds,
-  staleAfterSeconds,
-  loading,
-  testId,
-  onKeyDown
-}) {
-  const theme = useTheme();
-  const rowIdPrefix = React.useId();
-  const optionId = (id) => `${rowIdPrefix}-${id}`;
-  const active = units.some((unit) => unit.id === selectedId) ? selectedId : null;
-  if (loading && units.length === 0) return /* @__PURE__ */ jsx(FirstLoad, { testId });
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      role: "listbox",
-      tabIndex: 0,
-      "aria-label": copy.rosterLabel,
-      "aria-activedescendant": active ? optionId(active) : void 0,
-      "data-testid": `${testId}-roster`,
-      onKeyDown,
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        gap: theme.spacing(FLEET_ROSTER.gapUnits),
-        overflowY: "auto",
-        minWidth: 0,
-        "&:focus-visible": {
-          outline: `${FLEET_ROSTER.focusRingWidth}px solid ${theme.palette.primary.main}`,
-          outlineOffset: FLEET_ROSTER.focusRingOffset
-        }
-      },
-      children: units.map((unit, index) => /* @__PURE__ */ jsx(
-        FleetRow,
-        {
-          unit,
-          copy,
-          freshness: freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds),
-          selected: unit.id === active,
-          onSelect,
-          optionId: optionId(unit.id),
-          position: index,
-          testId: `${testId}-${unit.id}`
-        },
-        unit.id
-      ))
-    }
-  );
-}
-
-export {
-  FleetRoster
-};
-//# sourceMappingURL=chunk-IFSUKWE7.js.map

package/dist/chunk-IFSUKWE7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/FleetMap/FleetRoster.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport { freshnessOf } from './FleetMap.helpers';\nimport { FLEET_DOT, FLEET_ROSTER, FLEET_ROW, FLEET_SKELETON } from './FleetMap.metrics';\nimport type { FleetFreshness, FleetMapCopy, FleetUnit } from './FleetMap.types';\n\n/**\n * The roster beside the map — and the ACCESSIBLE half of this component.\n *\n * A map is a picture of positions and a screen reader cannot read a picture, so\n * the panel's information is carried by this list. That is not a consolation\n * prize: the list answers the questions a dispatcher actually asks — who is\n * reporting, how recently, and what are they carrying — and it answers them in\n * an order the map cannot express.\n *\n * The map beside it is a NAMED LANDMARK rather than an `aria-hidden` one, so a\n * reader can skip it in one gesture — see `FleetCanvas`, which carries the\n * reason it must not be hidden.\n */\n\n/** Each freshness draws from the semantic palette, never a hardcoded hex. */\nfunction freshnessColor(freshness: FleetFreshness, theme: Theme): string {\n  if (freshness === 'live') return theme.palette.success.main;\n  if (freshness === 'lagging') return theme.palette.warning.main;\n  return theme.palette.text.disabled;\n}\n\n/**\n * A row's two lines of text — the name, and the one-line summary under it.\n *\n * Split out of `FleetRow` to keep that function under the size gate, and the\n * seam is the natural one: everything here is READ, nothing is interactive.\n */\nfunction RowText({\n  unit,\n  copy,\n  freshness,\n  testId,\n}: Pick<RowProps, 'unit' | 'copy' | 'freshness' | 'testId'>): React.JSX.Element {\n  const theme = useTheme();\n\n  // Dropped rather than rendered empty: a phone that reports no accuracy radius\n  // would otherwise print a trailing separator with nothing after it.\n  const meta = [\n    copy.freshness[freshness],\n    copy.lastSeen(unit.staleSeconds),\n    unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM),\n  ]\n    .filter((part): part is string => Boolean(part))\n    .join(' · ');\n\n  return (\n    <Stack sx={{ minWidth: 0, flexGrow: 1 }}>\n      <Typography\n        variant=\"body2\"\n        component=\"p\"\n        data-testid={`${testId}-label`}\n        sx={{ fontWeight: theme.typography.fontWeightMedium, overflowWrap: 'anywhere' }}\n      >\n        {unit.label}\n      </Typography>\n      <Typography\n        variant=\"caption\"\n        component=\"p\"\n        data-testid={`${testId}-meta`}\n        sx={{ color: theme.palette.text.secondary }}\n      >\n        {meta}\n      </Typography>\n    </Stack>\n  );\n}\n\n/**\n * Keep the selected row visible INSIDE the roster.\n *\n * The roster caps its own height, so a dispatcher arrowing through a fleet of\n * thirty otherwise walks the selection below the fold with nothing moving —\n * `aria-activedescendant` follows, and a SIGHTED keyboard user sees no feedback\n * at all.\n *\n * Watches the row's POSITION as well as its selectedness, because the roster\n * re-sorts on every poll: a rider who stays selected while their staleness\n * moves them down the list would otherwise slide out of view with the effect\n * never re-running.\n *\n * Arithmetic rather than `scrollIntoView({ block: 'nearest' })` because that\n * walks every scrollable ancestor, the document included, and `nearest` only\n * spares an ancestor the row is already visible in — which is exactly false\n * when the panel is off screen. Re-running on every re-sort, it would yank the\n * whole page back to the map on a timer, and drag it there on mount for any\n * board rendered below the fold with a selection already set.\n */\nfunction useKeptInView(\n  selected: boolean,\n  position: number,\n): React.RefObject<HTMLDivElement | null> {\n  const row = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const box = row.current;\n    const list = box?.parentElement;\n    if (!selected || !box || !list) return;\n    const top = box.offsetTop - list.offsetTop;\n    if (top < list.scrollTop) {\n      list.scrollTop = top;\n    } else if (top + box.offsetHeight > list.scrollTop + list.clientHeight) {\n      list.scrollTop = top + box.offsetHeight - list.clientHeight;\n    }\n  }, [selected, position]);\n\n  return row;\n}\n\n/**\n * A row's own box, selected or not.\n *\n * Out of line because the hover rule needs the explanation more than the JSX\n * has room for: hover must never WEAKEN the selection. Written flat as\n * `'&:hover': { backgroundColor: action.hover }`, the pseudo-class wins on\n * specificity and repaints the selected row with the hover tint — measured at\n * `rgba(0,0,0,0.08)` idle against `rgba(0,0,0,0.04)` hovered, so pointing at\n * the selected row visually DESELECTED it and made it indistinguishable from\n * any other row under the cursor.\n */\nfunction rowSx(theme: Theme, selected: boolean): SxProps<Theme> {\n  const resting = selected ? theme.palette.action.selected : 'transparent';\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(FLEET_ROW.gapUnits),\n    padding: theme.spacing(FLEET_ROW.paddingYUnits, FLEET_ROW.paddingXUnits),\n    // `1`, not `theme.shape.borderRadius / 4`. MUI's `sx` reads a NUMBER here as\n    // a multiple of `theme.shape.borderRadius`, so dividing the theme value out\n    // and letting `sx` multiply it back in is quadratic: measured 4px on the\n    // default theme — which is why this looked right — and 36px on a host that\n    // sets its own radius to 12. In a package whose whole premise is being\n    // re-themed, only the multiple is portable.\n    borderRadius: FLEET_ROW.radiusMultiple,\n    cursor: 'pointer',\n    backgroundColor: resting,\n    '&:hover': {\n      backgroundColor: selected ? theme.palette.action.selected : theme.palette.action.hover,\n    },\n  };\n}\n\ninterface RowProps {\n  unit: FleetUnit;\n  copy: FleetMapCopy;\n  freshness: FleetFreshness;\n  selected: boolean;\n  onSelect: (id: string) => void;\n  /** The row's DOM id, which `aria-activedescendant` points at. */\n  optionId: string;\n  /** Where the row sits in the re-sorted roster — see the scroll effect. */\n  position: number;\n  testId: string;\n}\n\nfunction FleetRow({\n  unit,\n  copy,\n  freshness,\n  selected,\n  onSelect,\n  optionId,\n  position,\n  testId,\n}: RowProps): React.JSX.Element {\n  const theme = useTheme();\n  const color = freshnessColor(freshness, theme);\n  const row = useKeptInView(selected, position);\n\n  return (\n    <Box\n      ref={row}\n      role=\"option\"\n      aria-selected={selected}\n      id={optionId}\n      data-testid={testId}\n      data-freshness={freshness}\n      onClick={() => onSelect(unit.id)}\n      sx={rowSx(theme, selected)}\n    >\n      {/* The dot repeats what the freshness word beside it already says, so it\n          is hidden rather than read twice — and colour is never the only\n          carrier of the state. */}\n      <Box\n        aria-hidden=\"true\"\n        data-testid={`${testId}-dot`}\n        sx={{\n          width: FLEET_DOT.size,\n          height: FLEET_DOT.size,\n          borderRadius: '50%',\n          flexShrink: 0,\n          backgroundColor: color,\n        }}\n      />\n      <RowText unit={unit} copy={copy} freshness={freshness} testId={testId} />\n      {unit.badge && (\n        <Typography\n          variant=\"caption\"\n          component=\"span\"\n          data-testid={`${testId}-badge`}\n          sx={{ color: theme.palette.text.secondary, flexShrink: 0 }}\n        >\n          {unit.badge}\n        </Typography>\n      )}\n    </Box>\n  );\n}\n\n/**\n * What stands in for the roster before any unit has landed.\n *\n * `aria-hidden`, because three grey bars are not information — the panel's\n * `aria-busy` and its optional announcement carry that. The radius is the same\n * MULTIPLE a real row uses rather than a raw pixel count: `Skeleton` forwards\n * the number into `sx`, where it scales with `theme.shape.borderRadius`, so a\n * literal `4` drew 16px against the rows' 4px on the default theme and 48px\n * against 12px on a re-themed host.\n */\nfunction FirstLoad({ testId }: { testId: string }): React.JSX.Element {\n  return (\n    <Stack spacing={FLEET_SKELETON.gapUnits} data-testid={`${testId}-skeleton`} aria-hidden=\"true\">\n      {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (\n        <Skeleton\n          key={row}\n          variant=\"rectangular\"\n          height={FLEET_SKELETON.height}\n          borderRadius={FLEET_SKELETON.radiusMultiple}\n        />\n      ))}\n    </Stack>\n  );\n}\n\nexport interface FleetRosterProps {\n  units: readonly FleetUnit[];\n  copy: FleetMapCopy;\n  selectedId: string | null | undefined;\n  onSelect: (id: string) => void;\n  laggingAfterSeconds: number;\n  staleAfterSeconds: number;\n  loading: boolean;\n  testId: string;\n  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport function FleetRoster({\n  units,\n  copy,\n  selectedId,\n  onSelect,\n  laggingAfterSeconds,\n  staleAfterSeconds,\n  loading,\n  testId,\n  onKeyDown,\n}: FleetRosterProps): React.JSX.Element {\n  const theme = useTheme();\n  // Generated, not derived from `dataTestId`: two boards on one page filtered\n  // from the same fleet would otherwise emit duplicate DOM ids and an ambiguous\n  // `aria-activedescendant`. Same reason the heading uses one.\n  const rowIdPrefix = React.useId();\n  const optionId = (id: string): string => `${rowIdPrefix}-${id}`;\n\n  // The selection is CONTROLLED, so it can name a unit that has since dropped\n  // out of the freshness window — a courier ending their shift mid-poll. The\n  // attribute must then be absent rather than pointing at an element that no\n  // longer renders, which announces nothing and fails an axe audit. `mapCentre`\n  // and `nextSelection` both handle the same case; this is the third place.\n  const active = units.some((unit) => unit.id === selectedId) ? selectedId : null;\n\n  // Only when there is nothing to show yet. Unmounting a populated listbox on\n  // every poll destroys the focus inside it, so a dispatcher arrowing through\n  // the roster is thrown back to the top of the page each time the data\n  // refreshes — and the rows they were reading vanish and return.\n  if (loading && units.length === 0) return <FirstLoad testId={testId} />;\n\n  return (\n    <Box\n      role=\"listbox\"\n      // A single tab stop with arrow keys inside, which is the listbox pattern:\n      // a dispatcher tabbing past a fleet of thirty should not have to press it\n      // thirty times to reach the map.\n      tabIndex={0}\n      aria-label={copy.rosterLabel}\n      aria-activedescendant={active ? optionId(active) : undefined}\n      data-testid={`${testId}-roster`}\n      onKeyDown={onKeyDown}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: theme.spacing(FLEET_ROSTER.gapUnits),\n        overflowY: 'auto',\n        minWidth: 0,\n        '&:focus-visible': {\n          outline: `${FLEET_ROSTER.focusRingWidth}px solid ${theme.palette.primary.main}`,\n          outlineOffset: FLEET_ROSTER.focusRingOffset,\n        },\n      }}\n    >\n      {units.map((unit, index) => (\n        <FleetRow\n          key={unit.id}\n          unit={unit}\n          copy={copy}\n          freshness={freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds)}\n          selected={unit.id === active}\n          onSelect={onSelect}\n          optionId={optionId(unit.id)}\n          position={index}\n          testId={`${testId}-${unit.id}`}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-IPPTOL53.js

@@ -1,112 +0,0 @@
-// src/components/form/Form/Form.tsx
-import Box from "@mui/material/Box/index.js";
-import Stack from "@mui/material/Stack/index.js";
-import { styled } from "@mui/material/styles/index.js";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var StyledForm = styled("form", {
-  shouldForwardProp: (prop) => prop !== "variant"
-})(({ theme, variant }) => ({
-  width: "100%",
-  ...variant === "inline" && {
-    display: "flex",
-    gap: theme.spacing(2),
-    alignItems: "flex-start"
-  }
-}));
-var spacingMap = {
-  xs: 1,
-  sm: 2,
-  md: 3,
-  lg: 4,
-  xl: 5
-};
-var maxWidthMap = {
-  sm: "600px",
-  md: "900px",
-  lg: "1200px",
-  xl: "1536px",
-  full: "100%"
-};
-var Form = React.forwardRef(
-  ({ variant = "vertical", maxWidth = "full", spacing = "md", children, dataTestId, ...props }, ref) => /* @__PURE__ */ jsx(StyledForm, { ref, variant, role: "form", "data-testid": dataTestId, ...props, children: /* @__PURE__ */ jsx(Box, { sx: { maxWidth: maxWidthMap[maxWidth], width: "100%" }, children: variant === "inline" ? children : /* @__PURE__ */ jsx(Stack, { spacing: spacingMap[spacing], children }) }) })
-);
-Form.displayName = "Form";
-var StyledFormField = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "variant"
-})(
-  ({ theme, variant }) => ({
-    display: variant === "horizontal" ? "grid" : "flex",
-    flexDirection: variant === "horizontal" ? void 0 : "column",
-    gridTemplateColumns: variant === "horizontal" ? "200px 1fr" : void 0,
-    columnGap: variant === "horizontal" ? theme.spacing(1) : void 0,
-    alignItems: variant === "horizontal" ? "center" : void 0
-  })
-);
-var FormField = ({
-  name,
-  label,
-  required,
-  error,
-  helperText,
-  children,
-  dataTestId
-}) => /* @__PURE__ */ jsxs(StyledFormField, { "data-testid": dataTestId, children: [
-  label && /* @__PURE__ */ jsx(FormLabel, { required, error: !!error, htmlFor: name, dataTestId: dataTestId ? `${dataTestId}-label` : void 0, children: label }),
-  /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, dataTestId: dataTestId ? `${dataTestId}-control` : void 0, children: [
-    children,
-    (error || helperText) && /* @__PURE__ */ jsx(FormMessage, { error: !!error, dataTestId: dataTestId ? `${dataTestId}-message` : void 0, children: error || helperText })
-  ] })
-] });
-var StyledFormLabel = styled("label", {
-  shouldForwardProp: (prop) => prop !== "error"
-})(({ theme, error }) => ({
-  fontSize: "0.875rem",
-  fontWeight: 500,
-  color: error ? theme.palette.error.main : theme.palette.text.primary,
-  marginBottom: theme.spacing(0.5),
-  display: "block",
-  "&::after": {
-    content: '" *"',
-    color: theme.palette.error.main,
-    display: "var(--required-display, none)"
-  }
-}));
-var FormLabel = ({ required, error, children, htmlFor, dataTestId }) => /* @__PURE__ */ jsx(
-  StyledFormLabel,
-  {
-    error,
-    htmlFor,
-    "data-testid": dataTestId,
-    style: { "--required-display": required ? "inline" : "none" },
-    children
-  }
-);
-var StyledFormControl = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "fullWidth"
-})(({ fullWidth }) => ({
-  width: fullWidth ? "100%" : "auto",
-  position: "relative"
-}));
-var FormControl = ({ fullWidth = true, children, dataTestId }) => (
-  // Don't pass error prop to the DOM element
-  /* @__PURE__ */ jsx(StyledFormControl, { fullWidth, "data-testid": dataTestId, children })
-);
-var StyledFormMessage = styled("span", {
-  shouldForwardProp: (prop) => prop !== "error"
-})(({ theme, error }) => ({
-  fontSize: "0.75rem",
-  marginTop: theme.spacing(0.5),
-  color: error ? theme.palette.error.main : theme.palette.text.secondary,
-  display: "block"
-}));
-var FormMessage = ({ error, children, dataTestId }) => /* @__PURE__ */ jsx(StyledFormMessage, { error, "data-testid": dataTestId, children });
-
-export {
-  Form,
-  FormField,
-  FormLabel,
-  FormControl,
-  FormMessage
-};
-//# sourceMappingURL=chunk-IPPTOL53.js.map

package/dist/chunk-IPPTOL53.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Form/Form.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  FormControlProps,\n  FormFieldProps,\n  FormLabelProps,\n  FormMessageProps,\n  FormProps,\n} from './Form.types';\n\nconst StyledForm = styled('form', {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: FormProps['variant'] }>(({ theme, variant }) => ({\n  width: '100%',\n  ...(variant === 'inline' && {\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'flex-start',\n  }),\n}));\n\nconst spacingMap = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 5,\n};\n\nconst maxWidthMap = {\n  sm: '600px',\n  md: '900px',\n  lg: '1200px',\n  xl: '1536px',\n  full: '100%',\n};\n\nexport const Form = React.forwardRef<HTMLFormElement, FormProps>(\n  ({ variant = 'vertical', maxWidth = 'full', spacing = 'md', children, dataTestId, ...props }, ref) => (\n      <StyledForm ref={ref} variant={variant} role=\"form\" data-testid={dataTestId} {...props}>\n        <Box sx={{ maxWidth: maxWidthMap[maxWidth], width: '100%' }}>\n          {variant === 'inline' ? (\n            children\n          ) : (\n            <Stack spacing={spacingMap[spacing]}>{children}</Stack>\n          )}\n        </Box>\n      </StyledForm>\n    ),\n);\n\nForm.displayName = 'Form';\n\n/**\n * NO ROW GAP HERE, and that is the fix rather than an omission.\n *\n * `FormLabel` already carries `marginBottom: theme.spacing(0.5)` — 4px — and it\n * carries it because it has to: every OTHER user of it (`CepField`,\n * `CategorySelect`, `CreatableSelect`, the three `total-form` fields, five of\n * `@12-apps/discounts`' builders and the host's own `currency-field`) puts a\n * bare `FormLabel` straight inside a `FormControl`, which is a plain block box\n * with no gap of its own. There, the label's own margin is the ONLY thing\n * between the label and the control.\n *\n * A `gap: theme.spacing(1)` here was a second mechanism for that one job, and in\n * a column the two ADD: 8px + 4px put `FormField` at 12px where every one of\n * those siblings sits at 4px. Measured in Chromium at 320x568 on a consuming\n * app's six-field delivery address form, the 8px a row it added pushed the\n * submit button from 561px to 609px — 41px below the fold of the smallest\n * supported phone, i.e. a checkout whose primary action is off-screen.\n *\n * That claim is about `FormLabel`'s own callers, not about the whole package:\n * `Textarea` labels its control through MUI's `InputLabel` at\n * `theme.spacing(1)` and still draws 8px. It composes nothing out of\n * `FormLabel`, so it is a separate inconsistency rather than a reason to keep\n * a second spacing here.\n *\n * ## The `columnGap` is scaffolding, and currently unreachable\n *\n * `FormFieldProps` has no `variant` and `FormField` passes none, so `variant`\n * is ALWAYS undefined and every branch below resolves to the vertical shape.\n * `Form` accepts `variant=\"horizontal\"` and `Form.md` documents it as \"labels\n * beside inputs\", but nothing carries that variant down to the field — so a\n * horizontal form draws vertical rows today. That gap is older than this\n * change and fixing it is a feature, not a spacing fix.\n *\n * The branch is kept, scoped to the COLUMN axis, so that whoever does wire it\n * up inherits the right answer: with the label beside the control, a horizontal\n * gap and a vertical margin are orthogonal and nothing double-counts. A `gap`\n * shorthand there would put the 8px back on the row axis the moment a field\n * wrapped.\n */\nconst StyledFormField = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'vertical' | 'horizontal' }>(\n  ({ theme, variant }) => ({\n    display: variant === 'horizontal' ? 'grid' : 'flex',\n    flexDirection: variant === 'horizontal' ? undefined : 'column',\n    gridTemplateColumns: variant === 'horizontal' ? '200px 1fr' : undefined,\n    columnGap: variant === 'horizontal' ? theme.spacing(1) : undefined,\n    alignItems: variant === 'horizontal' ? 'center' : undefined,\n  }),\n);\n\nexport const FormField: React.FC<FormFieldProps> = ({\n  name,\n  label,\n  required,\n  error,\n  helperText,\n  children,\n  dataTestId,\n}) => (\n    <StyledFormField data-testid={dataTestId}>\n      {label && (\n        <FormLabel required={required} error={!!error} htmlFor={name} dataTestId={dataTestId ? `${dataTestId}-label` : undefined}>\n          {label}\n        </FormLabel>\n      )}\n      <FormControl fullWidth dataTestId={dataTestId ? `${dataTestId}-control` : undefined}>\n        {children}\n        {(error || helperText) && <FormMessage error={!!error} dataTestId={dataTestId ? `${dataTestId}-message` : undefined}>{error || helperText}</FormMessage>}\n      </FormControl>\n    </StyledFormField>\n  );\n\nconst StyledFormLabel = styled('label', {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(({ theme, error }) => ({\n  fontSize: '0.875rem',\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  marginBottom: theme.spacing(0.5),\n  display: 'block',\n  '&::after': {\n    content: '\" *\"',\n    color: theme.palette.error.main,\n    display: 'var(--required-display, none)',\n  },\n}));\n\nexport const FormLabel: React.FC<FormLabelProps> = ({ required, error, children, htmlFor, dataTestId }) => (\n    <StyledFormLabel\n      error={error}\n      htmlFor={htmlFor}\n      data-testid={dataTestId}\n      style={{ '--required-display': required ? 'inline' : 'none' } as React.CSSProperties}\n    >\n      {children}\n    </StyledFormLabel>\n  );\n\nconst StyledFormControl = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth }) => ({\n  width: fullWidth ? '100%' : 'auto',\n  position: 'relative',\n}));\n\nexport const FormControl: React.FC<FormControlProps> = ({ fullWidth = true, children, dataTestId }) =>\n  // Don't pass error prop to the DOM element\n   <StyledFormControl fullWidth={fullWidth} data-testid={dataTestId}>{children}</StyledFormControl>\n;\n\nconst StyledFormMessage = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(({ theme, error }) => ({\n  fontSize: '0.75rem',\n  marginTop: theme.spacing(0.5),\n  color: error ? theme.palette.error.main : theme.palette.text.secondary,\n  display: 'block',\n}));\n\nexport const FormMessage: React.FC<FormMessageProps> = ({ error, children, dataTestId }) => <StyledFormMessage error={error} data-testid={dataTestId}>{children}</StyledFormMessage>;\n"],"mappings":"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","names":[]}

package/dist/chunk-IRYSJ74J.js

@@ -1,176 +0,0 @@
-import {
-  asFieldSize,
-  fieldBorder,
-  fieldHeight
-} from "./chunk-CGO452DC.js";
-import {
-  fieldRadius
-} from "./chunk-GDN2LUTZ.js";
-import {
-  absoluteInk,
-  controlNeutral,
-  sheen
-} from "./chunk-FQ6UW7IY.js";
-
-// src/components/form/Toggle/Toggle.styles.ts
-import { alpha, keyframes } from "@mui/material/styles/index.js";
-var glowAnimation = keyframes`
-  0% { box-shadow: 0 0 5px currentColor; }
-  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
-  100% { box-shadow: 0 0 5px currentColor; }
-`;
-var floatAnimation = keyframes`
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-2px); }
-`;
-var neutralPalette = (theme) => controlNeutral(theme);
-var shade = (palette, key, fallback) => palette?.[key] || palette?.main || fallback[key];
-var getColorFromTheme = (theme, color) => {
-  if (color === "neutral") return neutralPalette(theme);
-  const colorMap = {
-    primary: theme.palette.primary,
-    secondary: theme.palette.secondary,
-    success: theme.palette.success,
-    warning: theme.palette.warning,
-    info: theme.palette.info,
-    danger: theme.palette.error
-  };
-  const fallback = theme.palette.primary;
-  const palette = colorMap[color] || fallback;
-  return {
-    main: palette?.main || fallback.main,
-    dark: shade(palette, "dark", fallback),
-    light: shade(palette, "light", fallback),
-    contrastText: palette?.contrastText || absoluteInk(theme).white
-  };
-};
-var SIZE_MAP = {
-  xs: { padding: "4px 8px", fontSize: "0.75rem" },
-  sm: { padding: "6px 12px", fontSize: "0.875rem" },
-  md: { padding: "8px 16px", fontSize: "1rem" },
-  lg: { padding: "10px 20px", fontSize: "1.125rem" },
-  xl: { padding: "12px 24px", fontSize: "1.25rem" }
-};
-var baseStyles = (theme, colorPalette, customSize) => ({
-  textTransform: "none",
-  fontWeight: 500,
-  borderRadius: fieldRadius(theme),
-  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-  border: fieldBorder(theme),
-  color: theme.palette.text.primary,
-  backgroundColor: "transparent",
-  position: "relative",
-  overflow: "hidden",
-  // A zero-sized circle that grows to fill the button on hover.
-  "&::before": {
-    content: '""',
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    width: 0,
-    height: 0,
-    borderRadius: "50%",
-    backgroundColor: alpha(colorPalette.main, 0.2),
-    transform: "translate(-50%, -50%)",
-    transition: "width 0.4s, height 0.4s"
-  },
-  "&:hover": {
-    backgroundColor: alpha(colorPalette.main, 0.08),
-    borderColor: colorPalette.main,
-    transform: "translateY(-1px)",
-    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,
-    animation: `${floatAnimation} 2s ease-in-out infinite`,
-    "&::before": {
-      width: "100%",
-      height: "100%"
-    }
-  },
-  "&:active": {
-    transform: "scale(0.98)"
-  },
-  "&.Mui-selected": {
-    backgroundColor: colorPalette.main,
-    color: colorPalette.contrastText || absoluteInk(theme).white,
-    borderColor: colorPalette.main,
-    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
-    "&::after": {
-      content: '""',
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      background: `linear-gradient(135deg, transparent, ${sheen(theme, 0.1)})`,
-      pointerEvents: "none"
-    },
-    "&:hover": {
-      backgroundColor: colorPalette.dark,
-      transform: "translateY(-2px) scale(1.02)",
-      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`
-    }
-  },
-  // Size wins over everything above it — its font and horizontal padding; the
-  // height is the theme's field height for the size.
-  ...SIZE_MAP[customSize] ?? {},
-  minHeight: fieldHeight(theme, asFieldSize(customSize)),
-  paddingTop: 0,
-  paddingBottom: 0
-});
-var variantStyles = (theme, customVariant, colorPalette) => {
-  switch (customVariant) {
-    case "outline":
-      return {
-        backgroundColor: "transparent",
-        border: `2px solid ${colorPalette.main}`,
-        color: colorPalette.main,
-        "&.Mui-selected": {
-          backgroundColor: colorPalette.main,
-          color: colorPalette.contrastText || absoluteInk(theme).white
-        }
-      };
-    case "soft":
-      return {
-        backgroundColor: alpha(colorPalette.main, 0.1),
-        border: "none",
-        color: colorPalette.main,
-        "&.Mui-selected": {
-          backgroundColor: alpha(colorPalette.main, 0.2),
-          color: colorPalette.main
-        }
-      };
-    default:
-      return {};
-  }
-};
-var effectStyles = (theme, colorPalette, { glass, gradient, glow }) => ({
-  ...glass && {
-    backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
-  },
-  ...gradient && {
-    "&.Mui-selected": {
-      background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,
-      backgroundSize: "200% 200%",
-      animation: `${floatAnimation} 3s ease-in-out infinite`,
-      border: "none",
-      "&:hover": {
-        backgroundPosition: "100% 100%"
-      }
-    }
-  },
-  ...glow && {
-    "&.Mui-selected": {
-      animation: `${glowAnimation} 2s ease-in-out infinite`,
-      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`
-    }
-  }
-});
-
-export {
-  getColorFromTheme,
-  baseStyles,
-  variantStyles,
-  effectStyles
-};
-//# sourceMappingURL=chunk-IRYSJ74J.js.map

package/dist/chunk-IRYSJ74J.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Toggle/Toggle.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';\n\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, controlNeutral, sheen } from '../../../tokens/ink';\n\nconst glowAnimation = keyframes`\n  0% { box-shadow: 0 0 5px currentColor; }\n  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }\n  100% { box-shadow: 0 0 5px currentColor; }\n`;\n\nconst floatAnimation = keyframes`\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-2px); }\n`;\n\ninterface TogglePalette {\n  main: string;\n  dark: string;\n  light: string;\n  contrastText: string;\n}\n\nconst neutralPalette = (theme: Theme): TogglePalette => controlNeutral(theme);\n\n// A theme can be handed to us with shades missing, so each one falls back through\n// the palette's own main colour before reaching for primary.\nconst shade = (\n  palette: PaletteColor | undefined,\n  key: 'dark' | 'light',\n  fallback: PaletteColor,\n): string => palette?.[key] || palette?.main || fallback[key];\n\nexport const getColorFromTheme = (theme: Theme, color: string): TogglePalette => {\n  if (color === 'neutral') return neutralPalette(theme);\n\n  const colorMap: Record<string, PaletteColor> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  const fallback = theme.palette.primary;\n  const palette = colorMap[color] || fallback;\n\n  return {\n    main: palette?.main || fallback.main,\n    dark: shade(palette, 'dark', fallback),\n    light: shade(palette, 'light', fallback),\n    contrastText: palette?.contrastText || absoluteInk(theme).white,\n  };\n};\n\nconst SIZE_MAP: Record<string, CSSObject> = {\n  xs: { padding: '4px 8px', fontSize: '0.75rem' },\n  sm: { padding: '6px 12px', fontSize: '0.875rem' },\n  md: { padding: '8px 16px', fontSize: '1rem' },\n  lg: { padding: '10px 20px', fontSize: '1.125rem' },\n  xl: { padding: '12px 24px', fontSize: '1.25rem' },\n};\n\nexport const baseStyles = (\n  theme: Theme,\n  colorPalette: TogglePalette,\n  customSize: string,\n): CSSObject => ({\n  textTransform: 'none',\n  fontWeight: 500,\n  borderRadius: fieldRadius(theme),\n  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n  border: fieldBorder(theme),\n  color: theme.palette.text.primary,\n  backgroundColor: 'transparent',\n  position: 'relative',\n  overflow: 'hidden',\n\n  // A zero-sized circle that grows to fill the button on hover.\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 0,\n    height: 0,\n    borderRadius: '50%',\n    backgroundColor: alpha(colorPalette.main, 0.2),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.4s, height 0.4s',\n  },\n\n  '&:hover': {\n    backgroundColor: alpha(colorPalette.main, 0.08),\n    borderColor: colorPalette.main,\n    transform: 'translateY(-1px)',\n    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,\n    animation: `${floatAnimation} 2s ease-in-out infinite`,\n\n    '&::before': {\n      width: '100%',\n      height: '100%',\n    },\n  },\n\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n\n  '&.Mui-selected': {\n    backgroundColor: colorPalette.main,\n    color: colorPalette.contrastText || absoluteInk(theme).white,\n    borderColor: colorPalette.main,\n    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,\n\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      background: `linear-gradient(135deg, transparent, ${sheen(theme, 0.1)})`,\n      pointerEvents: 'none',\n    },\n\n    '&:hover': {\n      backgroundColor: colorPalette.dark,\n      transform: 'translateY(-2px) scale(1.02)',\n      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`,\n    },\n  },\n\n  // Size wins over everything above it — its font and horizontal padding; the\n  // height is the theme's field height for the size.\n  ...(SIZE_MAP[customSize] ?? {}),\n  minHeight: fieldHeight(theme, asFieldSize(customSize)),\n  paddingTop: 0,\n  paddingBottom: 0,\n});\n\nexport const variantStyles = (\n  theme: Theme,\n  customVariant: string | undefined,\n  colorPalette: TogglePalette,\n): CSSObject => {\n  switch (customVariant) {\n    case 'outline':\n      return {\n        backgroundColor: 'transparent',\n        border: `2px solid ${colorPalette.main}`,\n        color: colorPalette.main,\n\n        '&.Mui-selected': {\n          backgroundColor: colorPalette.main,\n          color: colorPalette.contrastText || absoluteInk(theme).white,\n        },\n      };\n    case 'soft':\n      return {\n        backgroundColor: alpha(colorPalette.main, 0.1),\n        border: 'none',\n        color: colorPalette.main,\n\n        '&.Mui-selected': {\n          backgroundColor: alpha(colorPalette.main, 0.2),\n          color: colorPalette.main,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\ninterface ToggleEffects {\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n}\n\n// gradient and glow both target `.Mui-selected`; with both on, the later spread\n// wins, so glow's animation replaces gradient's.\nexport const effectStyles = (\n  theme: Theme,\n  colorPalette: TogglePalette,\n  { glass, gradient, glow }: ToggleEffects,\n): CSSObject => ({\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(20px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  }),\n\n  ...(gradient && {\n    '&.Mui-selected': {\n      background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,\n      backgroundSize: '200% 200%',\n      animation: `${floatAnimation} 3s ease-in-out infinite`,\n      border: 'none',\n\n      '&:hover': {\n        backgroundPosition: '100% 100%',\n      },\n    },\n  }),\n\n  ...(glow && {\n    '&.Mui-selected': {\n      animation: `${glowAnimation} 2s ease-in-out infinite`,\n      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`,\n    },\n  }),\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-IT7ATXU7.js

@@ -1,76 +0,0 @@
-// src/components/data-display/HoverCard/HoverCard.animations.ts
-import { keyframes } from "@mui/material/styles/index.js";
-var pulseAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 1;
-  }
-  70% {
-    box-shadow: 0 0 0 10px currentColor;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0;
-  }
-`;
-var slideInUp = keyframes`
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-var slideInDown = keyframes`
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-var slideInLeft = keyframes`
-  from {
-    opacity: 0;
-    transform: translateX(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-`;
-var slideInRight = keyframes`
-  from {
-    opacity: 0;
-    transform: translateX(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-`;
-var scaleIn = keyframes`
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-
-export {
-  pulseAnimation,
-  slideInUp,
-  slideInDown,
-  slideInLeft,
-  slideInRight,
-  scaleIn
-};
-//# sourceMappingURL=chunk-IT7ATXU7.js.map

package/dist/chunk-IT7ATXU7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/HoverCard/HoverCard.animations.ts"],"sourcesContent":["import { keyframes } from '@mui/material/styles/index.js';\n\nexport const pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 10px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const slideInUp = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const slideInDown = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const slideInLeft = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nexport const slideInRight = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nexport const scaleIn = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\n// Arrow component\n"],"mappings":";AAAA,SAAS,iBAAiB;AAEnB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevB,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlB,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrB,IAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}