@12-apps/ui 6.19.0 → 6.20.0

package/dist/{chunk-QIV73V2X.js → chunk-7BYFC2MR.js}

@@ -1,6 +1,17 @@
+import {
+  AVATAR_DEFAULTS,
+  contentTypeOf,
+  pickAvatarContent
+} from "./chunk-3ZVUNSFF.js";
 import {
   AvatarView
-} from "./chunk-LYNJJV2X.js";
+} from "./chunk-4SQFO4GW.js";
+import {
+  BORDER_WIDTH,
+  GROUP_HOVER,
+  GROUP_MAX,
+  GROUP_OVERLAP
+} from "./chunk-FAITHWIO.js";
 
 // src/components/data-display/Avatar/Avatar.tsx
 import BrokenImage from "@mui/icons-material/BrokenImage";
@@ -8,29 +19,23 @@ import Person from "@mui/icons-material/Person";
 import { styled } from "@mui/material/styles/index.js";
 import React, { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var AVATAR_DEFAULTS = {
-  variant: "circle",
-  size: "md",
-  glow: false,
-  pulse: false,
-  bordered: false,
-  color: "primary",
-  loading: false,
-  interactive: false,
-  showFallbackOnError: true,
-  animationDelay: 0
-};
 function resolveContent(args) {
   const { children, fallback, icon, imageError, showFallbackOnError } = args;
-  if (imageError && showFallbackOnError) {
-    if (fallback) return { content: fallback, contentType: "fallback" };
-    if (icon) return { content: icon, contentType: "icon" };
-    return { content: /* @__PURE__ */ jsx(BrokenImage, {}), contentType: "icon" };
-  }
-  if (children) return { content: children, contentType: "children" };
-  if (fallback) return { content: fallback, contentType: "fallback" };
-  if (icon) return { content: icon, contentType: "icon" };
-  return { content: /* @__PURE__ */ jsx(Person, {}), contentType: "default" };
+  const pick = pickAvatarContent({
+    hasChildren: Boolean(children),
+    hasFallback: Boolean(fallback),
+    hasIcon: Boolean(icon),
+    imageError,
+    showFallbackOnError
+  });
+  const NODES = {
+    children,
+    fallback,
+    icon,
+    broken: /* @__PURE__ */ jsx(BrokenImage, {}),
+    default: /* @__PURE__ */ jsx(Person, {})
+  };
+  return { content: NODES[pick], contentType: contentTypeOf(pick) };
 }
 function useMountedFade(animationDelay) {
   const [mounted, setMounted] = useState(false);
@@ -80,6 +85,9 @@ function useAvatarModel(raw, ref) {
     animationDelay,
     className,
     dataTestId,
+    // React Native's spelling of the same id; it names the component on both
+    // sides and must not reach the DOM as an attribute.
+    testID,
     ...rest
   } = { ...AVATAR_DEFAULTS, ...raw };
   const mounted = useMountedFade(animationDelay);
@@ -112,7 +120,7 @@ function useAvatarModel(raw, ref) {
     content,
     contentType,
     className,
-    dataTestId,
+    dataTestId: testID ?? dataTestId,
     status,
     forwardedRef: ref,
     onClick: handleClick,
@@ -123,24 +131,24 @@ function useAvatarModel(raw, ref) {
 }
 var Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(AvatarView, { ...useAvatarModel(props, ref) }));
 Avatar.displayName = "Avatar";
-var AvatarGroupContainer = styled("div")(({ theme, overlap = 8 }) => ({
+var AvatarGroupContainer = styled("div")(({ theme, overlap = GROUP_OVERLAP }) => ({
   display: "flex",
   alignItems: "center",
   "& > *": {
     marginLeft: -overlap,
     transition: "all 0.3s ease",
     position: "relative",
-    border: `2px solid ${theme.palette.background.paper}`,
+    border: `${BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
     "&:hover": {
       zIndex: 100,
-      transform: "scale(1.1) translateY(-4px)"
+      transform: `scale(${GROUP_HOVER.scale}) translateY(-${GROUP_HOVER.lift}px)`
     },
     "&:first-of-type": {
       marginLeft: 0
     }
   }
 }));
-var AvatarGroup = ({ children, max = 4, overlap = 8, className, dataTestId }) => {
+var AvatarGroup = ({ children, max = GROUP_MAX, overlap = GROUP_OVERLAP, className, dataTestId }) => {
   const childrenArray = React.Children.toArray(children);
   const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
   const remainingCount = childrenArray.length - visibleChildren.length;
@@ -164,4 +172,4 @@ export {
   Avatar,
   AvatarGroup
 };
-//# sourceMappingURL=chunk-QIV73V2X.js.map
+//# sourceMappingURL=chunk-7BYFC2MR.js.map

package/dist/chunk-7BYFC2MR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.tsx"],"sourcesContent":["import BrokenImage from '@mui/icons-material/BrokenImage';\nimport Person from '@mui/icons-material/Person';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport {\n  AVATAR_DEFAULTS,\n  contentTypeOf,\n  pickAvatarContent,\n  type AvatarContentPick,\n} from './Avatar.helpers';\nimport { GROUP_MAX, GROUP_OVERLAP, GROUP_HOVER, BORDER_WIDTH } from './Avatar.metrics';\nimport type { AvatarProps, ContentType } from './Avatar.types';\nimport { AvatarView, type AvatarViewProps } from './Avatar.view';\n\n/** The node behind the winning content slot; the pick itself is shared. */\nfunction resolveContent(args: {\n  children?: React.ReactNode;\n  fallback?: React.ReactNode;\n  icon?: React.ReactNode;\n  imageError: boolean;\n  showFallbackOnError: boolean;\n}): { content: React.ReactNode; contentType: ContentType } {\n  const { children, fallback, icon, imageError, showFallbackOnError } = args;\n  const pick = pickAvatarContent({\n    hasChildren: Boolean(children),\n    hasFallback: Boolean(fallback),\n    hasIcon: Boolean(icon),\n    imageError,\n    showFallbackOnError,\n  });\n  const NODES: Record<AvatarContentPick, React.ReactNode> = {\n    children,\n    fallback,\n    icon,\n    broken: <BrokenImage />,\n    default: <Person />,\n  };\n  return { content: NODES[pick], contentType: contentTypeOf(pick) };\n}\n\n/** Fades the avatar in after `animationDelay`ms. */\nfunction useMountedFade(animationDelay: number): boolean {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    const timer = window.setTimeout(() => setMounted(true), animationDelay);\n    return () => window.clearTimeout(timer);\n  }, [animationDelay]);\n  return mounted;\n}\n\ninterface ImageState {\n  imageError: boolean;\n  imageLoading: boolean;\n  handleImageError: React.ReactEventHandler;\n  handleImageLoad: () => void;\n}\n\n/**\n * Tracks the `<img>` load lifecycle. `imageLoading` starts true whenever there is\n * a `src` and clears on load/error — the handlers must be wired to the actual img\n * (via `slotProps.img` in the view), since load/error don't bubble to the root.\n */\nfunction useImageState(src: string | undefined, onError?: React.ReactEventHandler): ImageState {\n  const [imageError, setImageError] = useState(false);\n  const [imageLoading, setImageLoading] = useState(!!src);\n\n  useEffect(() => {\n    setImageError(false);\n    setImageLoading(!!src);\n  }, [src]);\n\n  const handleImageError = useCallback<React.ReactEventHandler>(\n    (event) => {\n      setImageError(true);\n      setImageLoading(false);\n      onError?.(event);\n    },\n    [onError],\n  );\n\n  const handleImageLoad = useCallback(() => setImageLoading(false), []);\n\n  return { imageError, imageLoading, handleImageError, handleImageLoad };\n}\n\n/** Normalizes props (defaults + rest passthrough) and derives everything the view needs. */\nfunction useAvatarModel(raw: AvatarProps, ref: React.Ref<HTMLDivElement>): AvatarViewProps {\n  const {\n    variant,\n    size,\n    glow,\n    pulse,\n    status,\n    fallback,\n    icon,\n    bordered,\n    color,\n    src,\n    alt,\n    children,\n    loading,\n    onError,\n    onClick,\n    interactive,\n    showFallbackOnError,\n    animationDelay,\n    className,\n    dataTestId,\n    // React Native's spelling of the same id; it names the component on both\n    // sides and must not reach the DOM as an attribute.\n    testID,\n    ...rest\n  } = { ...AVATAR_DEFAULTS, ...raw };\n\n  const mounted = useMountedFade(animationDelay);\n  const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => onClick?.(event),\n    [onClick],\n  );\n  const { content, contentType } = resolveContent({\n    children,\n    fallback,\n    icon,\n    imageError,\n    showFallbackOnError,\n  });\n\n  return {\n    mounted,\n    variant,\n    size,\n    color,\n    glow,\n    pulse,\n    bordered,\n    showSpinner: loading || imageLoading,\n    imageError,\n    clickable: interactive || !!onClick,\n    imgSrc: imageError ? undefined : src,\n    alt,\n    ariaLabel: (rest['aria-label'] as string) || alt || 'Avatar',\n    content,\n    contentType,\n    className,\n    dataTestId: testID ?? dataTestId,\n    status,\n    forwardedRef: ref,\n    onClick: handleClick,\n    handleImageError,\n    handleImageLoad,\n    rest,\n  };\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => (\n  <AvatarView {...useAvatarModel(props, ref)} />\n));\n\nAvatar.displayName = 'Avatar';\n\nconst AvatarGroupContainer = styled('div')<{ overlap?: number }>(({ theme, overlap = GROUP_OVERLAP }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  '& > *': {\n    marginLeft: -overlap,\n    transition: 'all 0.3s ease',\n    position: 'relative',\n    border: `${BORDER_WIDTH}px solid ${theme.palette.background.paper}`,\n    '&:hover': {\n      zIndex: 100,\n      transform: `scale(${GROUP_HOVER.scale}) translateY(-${GROUP_HOVER.lift}px)`,\n    },\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n  },\n}));\n\n// Export AvatarGroup for grouped avatars\nexport const AvatarGroup: React.FC<{\n  children: React.ReactNode;\n  max?: number;\n  overlap?: number;\n  className?: string;\n  dataTestId?: string;\n}> = ({ children, max = GROUP_MAX, overlap = GROUP_OVERLAP, className, dataTestId }) => {\n  const childrenArray = React.Children.toArray(children);\n  const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;\n  const remainingCount = childrenArray.length - visibleChildren.length;\n\n  return (\n    <AvatarGroupContainer overlap={overlap} className={className} data-testid={dataTestId}>\n      {visibleChildren}\n      {remainingCount > 0 && (\n        <Avatar\n          size={(visibleChildren[0] as React.ReactElement<AvatarProps>)?.props?.size || 'md'}\n          color=\"neutral\"\n          fallback={`+${remainingCount}`}\n          bordered\n          dataTestId={dataTestId ? `${dataTestId}-overflow` : undefined}\n        />\n      )}\n    </AvatarGroupContainer>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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","names":[]}

package/dist/{chunk-DLFOEXUP.js → chunk-7EESF76V.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-IDHZHOZW.js";
 import {
   Button
-} from "./chunk-SL4NFGOL.js";
+} from "./chunk-24BUCMQA.js";
 
 // src/components/data-display/CardKit/CardKebab.tsx
 import { jsx } from "react/jsx-runtime";
@@ -25,4 +25,4 @@ function CardKebab({
 export {
   CardKebab
 };
-//# sourceMappingURL=chunk-DLFOEXUP.js.map
+//# sourceMappingURL=chunk-7EESF76V.js.map

package/dist/{chunk-HKZHEK3Z.js → chunk-7JWXLDRH.js}

@@ -1,12 +1,12 @@
 import {
   Avatar
-} from "./chunk-QIV73V2X.js";
+} from "./chunk-7BYFC2MR.js";
 import {
   Card
 } from "./chunk-D2IASECY.js";
 import {
   Button
-} from "./chunk-SL4NFGOL.js";
+} from "./chunk-24BUCMQA.js";
 import {
   Text
 } from "./chunk-2PCOC3PT.js";
@@ -74,4 +74,4 @@ export {
   UserAvatar,
   UserMenu
 };
-//# sourceMappingURL=chunk-HKZHEK3Z.js.map
+//# sourceMappingURL=chunk-7JWXLDRH.js.map

package/dist/{chunk-OR7UH2ZQ.js → chunk-7P2HZLEG.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-NECUCG2S.js";
+} from "./chunk-RQDN4BN5.js";
 import {
   useDataViewsState
-} from "./chunk-SG6VULKS.js";
+} from "./chunk-ZEBJT5JZ.js";
 
 // src/components/data-display/DataViews/DataViewsGrid.tsx
 import { useEffect, useRef } from "react";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-OR7UH2ZQ.js.map
+//# sourceMappingURL=chunk-7P2HZLEG.js.map

package/dist/{chunk-6DXYCXH4.js → chunk-7RZ4WOQW.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-SL4NFGOL.js";
+} from "./chunk-24BUCMQA.js";
 import {
   Text
 } from "./chunk-2PCOC3PT.js";
@@ -85,4 +85,4 @@ function SelectAllStrip({
 export {
   SelectAllStrip
 };
-//# sourceMappingURL=chunk-6DXYCXH4.js.map
+//# sourceMappingURL=chunk-7RZ4WOQW.js.map

package/dist/{chunk-EMNGIYH6.js → chunk-7TZ6OC5T.js}

@@ -1,13 +1,13 @@
 import {
   renderChartByType
-} from "./chunk-WZUNBSS7.js";
+} from "./chunk-DVUPIVI2.js";
+import {
+  ChartContainer
+} from "./chunk-M5T3COS2.js";
 import {
   getSizeStyles,
   getVariantStyles
 } from "./chunk-XXDXW6TX.js";
-import {
-  ChartContainer
-} from "./chunk-M5T3COS2.js";
 import {
   muiColor
 } from "./chunk-7ZPUN7TV.js";
@@ -104,4 +104,4 @@ var Chart = (props) => {
 export {
   Chart
 };
-//# sourceMappingURL=chunk-EMNGIYH6.js.map
+//# sourceMappingURL=chunk-7TZ6OC5T.js.map

package/dist/{chunk-HXYXDQ7U.js → chunk-7WDPC46N.js}

@@ -12,8 +12,10 @@ var definedProps = (props) => Object.fromEntries(
   Object.entries(props).filter(([, value]) => value !== void 0)
 );
 var resolveSkeletonProps = (props) => ({ ...SKELETON_DEFAULTS, ...definedProps(props) });
+var skeletonInstanceTestId = (base, index) => base ? `${base}-${index}` : void 0;
 
 export {
-  resolveSkeletonProps
+  resolveSkeletonProps,
+  skeletonInstanceTestId
 };
-//# sourceMappingURL=chunk-HXYXDQ7U.js.map
+//# sourceMappingURL=chunk-7WDPC46N.js.map

package/dist/chunk-7WDPC46N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.helpers.ts"],"sourcesContent":["import type { SkeletonBaseProps } from './Skeleton.base';\n\ntype SkeletonDefaultedKeys =\n  | 'variant'\n  | 'animation'\n  | 'count'\n  | 'spacing'\n  | 'intensity'\n  | 'glassmorphism'\n  | 'shimmer';\n\n/**\n * Generic over the renderer's own props: the web and the native `Skeleton`\n * carry different extras (`className`/`style` against a `View`'s props), and\n * both come back out untouched.\n */\ntype ResolvedSkeletonProps<P extends SkeletonBaseProps> = P &\n  Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>>;\n\nconst SKELETON_DEFAULTS: Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>> = {\n  variant: 'text',\n  animation: 'pulse',\n  count: 1,\n  spacing: 1,\n  intensity: 'medium',\n  glassmorphism: false,\n  shimmer: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `count={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = <P extends SkeletonBaseProps>(props: P): Partial<P> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<P>;\n\nexport const resolveSkeletonProps = <P extends SkeletonBaseProps>(\n  props: P,\n): ResolvedSkeletonProps<P> =>\n  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps<P>;\n\n/**\n * The id of instance `index` when a caller asked for several. Unnamed\n * skeletons stay unnamed — the web has always cloned `undefined` there.\n */\nexport const skeletonInstanceTestId = (\n  base: string | undefined,\n  index: number,\n): string | undefined => (base ? `${base}-${index}` : undefined);\n"],"mappings":";AAmBA,IAAM,oBAA8E;AAAA,EAClF,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,SAAS;AACX;AAIA,IAAM,eAAe,CAA8B,UACjD,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,uBAAuB,CAClC,WAEC,EAAE,GAAG,mBAAmB,GAAG,aAAa,KAAK,EAAE;AAM3C,IAAM,yBAAyB,CACpC,MACA,UACwB,OAAO,GAAG,IAAI,IAAI,KAAK,KAAK;","names":[]}

package/dist/{chunk-CDJPDZCA.js → chunk-AEGX66N7.js}

@@ -1,6 +1,6 @@
 import {
   Skeleton
-} from "./chunk-IRDGC7FK.js";
+} from "./chunk-QZWKC3AP.js";
 
 // src/components/data-display/StatCard/StatCard.tsx
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
@@ -200,4 +200,4 @@ export {
   StatCard,
   StatCard_default
 };
-//# sourceMappingURL=chunk-CDJPDZCA.js.map
+//# sourceMappingURL=chunk-AEGX66N7.js.map

package/dist/{chunk-65DLYC4S.js → chunk-AVGTTWTE.js}

@@ -1,12 +1,12 @@
-import {
-  useAutocomplete
-} from "./chunk-362OGE5J.js";
 import {
   AutocompleteInput,
   ChipList,
   DefaultSuggestion,
   SuggestionListBox
 } from "./chunk-6TSP45KC.js";
+import {
+  useAutocomplete
+} from "./chunk-362OGE5J.js";
 import {
   defaultGetKey,
   defaultGetLabel,
@@ -131,4 +131,4 @@ export {
   Autocomplete,
   Autocomplete_default
 };
-//# sourceMappingURL=chunk-65DLYC4S.js.map
+//# sourceMappingURL=chunk-AVGTTWTE.js.map

package/dist/{chunk-C6XESZ3R.js → chunk-B2A4DG77.js}

@@ -4,17 +4,17 @@ import {
 } from "./chunk-5WNQJ5KS.js";
 import {
   PillControl
-} from "./chunk-ES2RN7YV.js";
+} from "./chunk-NRUYYGDZ.js";
 import {
   MoreFilters
-} from "./chunk-PC3ZFERM.js";
-import {
-  RangePill
-} from "./chunk-QZBUGUOY.js";
+} from "./chunk-PC5FFEIY.js";
 import {
   CollapsedSearch,
   InlineKeyword
 } from "./chunk-A7Q5AQVD.js";
+import {
+  RangePill
+} from "./chunk-QZBUGUOY.js";
 
 // src/components/data-display/DataViews/data-views-inline-bar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -220,4 +220,4 @@ function FilterSlots({
 export {
   InlineFilterControls
 };
-//# sourceMappingURL=chunk-C6XESZ3R.js.map
+//# sourceMappingURL=chunk-B2A4DG77.js.map

package/dist/{chunk-VOOPGAQO.js → chunk-B7BZAIHL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   CepField
-} from "./chunk-FWCUELBU.js";
+} from "./chunk-BILE3A7F.js";
 
 // src/components/form/total-form/Fields/CepField.tsx
 import { useCallback, useMemo, useRef } from "react";
@@ -80,4 +80,4 @@ function CepField2({
 export {
   CepField2 as CepField
 };
-//# sourceMappingURL=chunk-VOOPGAQO.js.map
+//# sourceMappingURL=chunk-B7BZAIHL.js.map

package/dist/{chunk-DZN3JF5E.js → chunk-BBC4KT5G.js}

@@ -1,9 +1,9 @@
-import {
-  tabsRootStyles
-} from "./chunk-EWSGWLHN.js";
 import {
   CustomTabPanel
 } from "./chunk-7UZ2TFIK.js";
+import {
+  tabsRootStyles
+} from "./chunk-EWSGWLHN.js";
 
 // src/components/navigation/Tabs/Tabs.tsx
 import Close from "@mui/icons-material/Close";
@@ -228,4 +228,4 @@ Tabs.displayName = "Tabs";
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-DZN3JF5E.js.map
+//# sourceMappingURL=chunk-BBC4KT5G.js.map

package/dist/chunk-BF4FYOAR.js

@@ -0,0 +1,23 @@
+// src/components/data-display/Chip/Chip.helpers.ts
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;
+var chipRole = (selectable, onClick) => {
+  if (selectable) return "option";
+  return onClick ? "button" : void 0;
+};
+var isClickable = (disabled, onClick, selectable) => !disabled && (Boolean(onClick) || Boolean(selectable));
+var DELETE_KEYS = /* @__PURE__ */ new Set(["Delete", "Backspace"]);
+var ACTIVATE_KEYS = /* @__PURE__ */ new Set(["Enter", " "]);
+function chipKeyAction(key, a) {
+  if (a.disabled) return null;
+  if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return "delete";
+  if (ACTIVATE_KEYS.has(key) && (a.onClick || a.selectable)) return "activate";
+  return null;
+}
+
+export {
+  makeTestId,
+  chipRole,
+  isClickable,
+  chipKeyAction
+};
+//# sourceMappingURL=chunk-BF4FYOAR.js.map

package/dist/chunk-BF4FYOAR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.helpers.ts"],"sourcesContent":["/** `${dataTestId}-label`, or `chip-label` when the caller named nothing. */\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;\n\n/** `option` when the chip belongs to a selectable set, `button` when it merely acts. */\nexport const chipRole = (\n  selectable?: boolean,\n  // `unknown`, because the two renderers hand this a differently-typed handler\n  // and all that is asked of it here is whether the caller supplied one.\n  onClick?: unknown,\n): 'option' | 'button' | undefined => {\n  if (selectable) return 'option';\n  return onClick ? 'button' : undefined;\n};\n\nexport const isClickable = (\n  disabled?: boolean,\n  onClick?: unknown,\n  selectable?: boolean,\n): boolean => !disabled && (Boolean(onClick) || Boolean(selectable));\n\n/** What a key press on a chip means, if anything. */\nexport type ChipKeyAction = 'delete' | 'activate' | null;\n\nconst DELETE_KEYS = new Set(['Delete', 'Backspace']);\nconst ACTIVATE_KEYS = new Set(['Enter', ' ']);\n\nexport interface ChipKeyArgs {\n  disabled?: boolean;\n  deletable?: boolean;\n  selectable?: boolean;\n  onClick?: unknown;\n  onDelete?: unknown;\n}\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are decided by hand: Delete/Backspace removes it, Enter/Space activates\n * it. Both renderers read this one decision — the web wires it to the DOM\n * handler, the native half to react-native-web's (see `Chip.native.tsx`).\n */\nexport function chipKeyAction(key: string, a: ChipKeyArgs): ChipKeyAction {\n  if (a.disabled) return null;\n  if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return 'delete';\n  if (ACTIVATE_KEYS.has(key) && (a.onClick || a.selectable)) return 'activate';\n  return null;\n}\n"],"mappings":";AACO,IAAM,aACX,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,QAAQ,MAAM;AAGpD,IAAM,WAAW,CACtB,YAGA,YACoC;AACpC,MAAI,WAAY,QAAO;AACvB,SAAO,UAAU,WAAW;AAC9B;AAEO,IAAM,cAAc,CACzB,UACA,SACA,eACY,CAAC,aAAa,QAAQ,OAAO,KAAK,QAAQ,UAAU;AAKlE,IAAM,cAAc,oBAAI,IAAI,CAAC,UAAU,WAAW,CAAC;AACnD,IAAM,gBAAgB,oBAAI,IAAI,CAAC,SAAS,GAAG,CAAC;AAgBrC,SAAS,cAAc,KAAa,GAA+B;AACxE,MAAI,EAAE,SAAU,QAAO;AACvB,MAAI,YAAY,IAAI,GAAG,KAAK,EAAE,aAAa,EAAE,SAAU,QAAO;AAC9D,MAAI,cAAc,IAAI,GAAG,MAAM,EAAE,WAAW,EAAE,YAAa,QAAO;AAClE,SAAO;AACT;","names":[]}

package/dist/{chunk-FWCUELBU.js → chunk-BILE3A7F.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-M3RIC6JI.js";
+} from "./chunk-OQXOYHIV.js";
 import {
   FormControl,
   FormLabel,
@@ -122,4 +122,4 @@ export {
   CepField,
   CepField_default
 };
-//# sourceMappingURL=chunk-FWCUELBU.js.map
+//# sourceMappingURL=chunk-BILE3A7F.js.map

package/dist/{chunk-UEJQQVP2.js → chunk-BLT5ZBVL.js}

@@ -1,9 +1,9 @@
-import {
-  renderMenuItem
-} from "./chunk-RXSGHPCR.js";
 import {
   MegaSection
 } from "./chunk-Q444G5X7.js";
+import {
+  renderMenuItem
+} from "./chunk-RXSGHPCR.js";
 import {
   slideIn
 } from "./chunk-FYLCSCMR.js";
@@ -56,4 +56,4 @@ var NavigationMegaSection = ({
 export {
   NavigationMegaSection
 };
-//# sourceMappingURL=chunk-UEJQQVP2.js.map
+//# sourceMappingURL=chunk-BLT5ZBVL.js.map

package/dist/chunk-BRMGHMYB.js

@@ -0,0 +1,45 @@
+// src/components/layout/Skeleton/Skeleton.metrics.ts
+var SKELETON_INTENSITY_OPACITY = {
+  low: 0.11,
+  medium: 0.13,
+  high: 0.15
+};
+var SKELETON_DEFAULT_DIMENSIONS = {
+  // `text` has no height of its own: MUI's line box gives it one (below).
+  text: { width: "100%", height: void 0 },
+  circular: { width: 40, height: 40 },
+  rectangular: { width: "100%", height: 40 },
+  wave: { width: "100%", height: 40 }
+};
+var GLASS_BACKGROUND_ALPHA_FROM = 0.8;
+var GLASS_BACKGROUND_ALPHA_TO = 0.4;
+var GLASS_BLUR_PX = 20;
+var GLASS_BORDER_ALPHA = 0.2;
+var GLASS_SHADOW = { offsetY: 8, blur: 32, alpha: 0.1 };
+var SHIMMER_ALPHA = 0.3;
+var SHIMMER_DURATION_MS = 2e3;
+var COMMON_BLACK = "#000";
+var COMMON_WHITE = "#fff";
+var PULSE = { durationMs: 2e3, delayMs: 500, dip: 0.4 };
+var WAVE = { durationMs: 1600, delayMs: 500 };
+var TEXT_LINE_HEIGHT_EM = 1.2;
+var TEXT_SCALE_Y = 0.6;
+
+export {
+  SKELETON_INTENSITY_OPACITY,
+  SKELETON_DEFAULT_DIMENSIONS,
+  GLASS_BACKGROUND_ALPHA_FROM,
+  GLASS_BACKGROUND_ALPHA_TO,
+  GLASS_BLUR_PX,
+  GLASS_BORDER_ALPHA,
+  GLASS_SHADOW,
+  SHIMMER_ALPHA,
+  SHIMMER_DURATION_MS,
+  COMMON_BLACK,
+  COMMON_WHITE,
+  PULSE,
+  WAVE,
+  TEXT_LINE_HEIGHT_EM,
+  TEXT_SCALE_Y
+};
+//# sourceMappingURL=chunk-BRMGHMYB.js.map

package/dist/chunk-BRMGHMYB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.metrics.ts"],"sourcesContent":["import type { SkeletonIntensity, SkeletonVariant } from './Skeleton.base';\n\n/**\n * THE NUMBERS BOTH `Skeleton` RENDERERS DRAW WITH.\n *\n * `Skeleton.styles.ts` (web, emotion over MUI's own `Skeleton`) and\n * `Skeleton.native.tsx` (React Native) read this one table. The web turns them\n * into CSS strings — `blur(20px)`, `shimmer 2s infinite` — and native uses the\n * numbers as they are, so neither renderer restates a value.\n *\n * Two groups live here. The first is what the web component WRITES (the\n * intensity alphas, the default box, the glass and shimmer washes). The second\n * is what MUI's own `Skeleton` contributes on the web and the native half\n * therefore has to restate: its pulse keyframe, its wave cadence, and the\n * geometry of the `text` variant. Those are MUI's DEFAULTS — a host that\n * re-themes them moves the web only, which `NATIVE-NOTES.md` records.\n */\n\n/** The tint's alpha over the ink, per intensity. */\nexport const SKELETON_INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {\n  low: 0.11,\n  medium: 0.13,\n  high: 0.15,\n};\n\n/** The box a variant draws when the caller gives no `width`/`height`. */\nexport const SKELETON_DEFAULT_DIMENSIONS: Record<\n  SkeletonVariant,\n  { width: number | string; height: number | undefined }\n> = {\n  // `text` has no height of its own: MUI's line box gives it one (below).\n  text: { width: '100%', height: undefined },\n  circular: { width: 40, height: 40 },\n  rectangular: { width: '100%', height: 40 },\n  wave: { width: '100%', height: 40 },\n};\n\n/* ── `glassmorphism` ──────────────────────────────────────────────────────── */\n\n/** The 135° wash over `background.paper`, from the first stop to the last. */\nexport const GLASS_BACKGROUND_ALPHA_FROM = 0.8;\nexport const GLASS_BACKGROUND_ALPHA_TO = 0.4;\nexport const GLASS_BLUR_PX = 20;\nexport const GLASS_BORDER_ALPHA = 0.2;\n/** `0 8px 32px 0 rgba(0, 0, 0, 0.1)`. */\nexport const GLASS_SHADOW = { offsetY: 8, blur: 32, alpha: 0.1 } as const;\n\n/* ── `shimmer` ────────────────────────────────────────────────────────────── */\n\n/** The sweep's middle stop, over white. */\nexport const SHIMMER_ALPHA = 0.3;\nexport const SHIMMER_DURATION_MS = 2000;\n\n/**\n * MUI's `palette.common`, which is a pair of fixed hexes rather than anything\n * derived — so the shared theme has no slot for them and they are named here.\n */\nexport const COMMON_BLACK = '#000';\nexport const COMMON_WHITE = '#fff';\n\n/* ── MUI's own `Skeleton`, restated for the renderer that has no MUI ──────── */\n\n/**\n * MUI's `pulseKeyframe`: opacity 1 → 0.4 → 1, `2s ease-in-out 0.5s infinite`.\n * The delay runs once on the web; native replays it each lap unless the\n * animation is sequenced, which `Skeleton.native.tsx` does.\n */\nexport const PULSE = { durationMs: 2000, delayMs: 500, dip: 0.4 } as const;\n\n/** MUI's `wave` sweep: `1.6s linear 0.5s infinite`, in `palette.action.hover`. */\nexport const WAVE = { durationMs: 1600, delayMs: 500 } as const;\n\n/**\n * The `text` variant, as MUI draws it: a line box `1.2em` tall squashed to 60%\n * of its height (`transform: scale(1, 0.60)`), with a `4px/6.7px` elliptical\n * radius that the same squash turns back into a round 4px. React Native has no\n * `em`, and its transforms do not change layout, so the native half multiplies\n * the two out into one height and draws the plain 4px radius the squash lands on.\n */\nexport const TEXT_LINE_HEIGHT_EM = 1.2;\nexport const TEXT_SCALE_Y = 0.6;\n"],"mappings":";AAmBO,IAAM,6BAAgE;AAAA,EAC3E,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AACR;AAGO,IAAM,8BAGT;AAAA;AAAA,EAEF,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAU;AAAA,EACzC,UAAU,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,EAClC,aAAa,EAAE,OAAO,QAAQ,QAAQ,GAAG;AAAA,EACzC,MAAM,EAAE,OAAO,QAAQ,QAAQ,GAAG;AACpC;AAKO,IAAM,8BAA8B;AACpC,IAAM,4BAA4B;AAClC,IAAM,gBAAgB;AACtB,IAAM,qBAAqB;AAE3B,IAAM,eAAe,EAAE,SAAS,GAAG,MAAM,IAAI,OAAO,IAAI;AAKxD,IAAM,gBAAgB;AACtB,IAAM,sBAAsB;AAM5B,IAAM,eAAe;AACrB,IAAM,eAAe;AASrB,IAAM,QAAQ,EAAE,YAAY,KAAM,SAAS,KAAK,KAAK,IAAI;AAGzD,IAAM,OAAO,EAAE,YAAY,MAAM,SAAS,IAAI;AAS9C,IAAM,sBAAsB;AAC5B,IAAM,eAAe;","names":[]}

package/dist/{chunk-ISSJNFJV.js → chunk-C52BELLW.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-SL4NFGOL.js";
+} from "./chunk-24BUCMQA.js";
 import {
   Text
 } from "./chunk-2PCOC3PT.js";
@@ -77,4 +77,4 @@ function DataViewsEmpty({
 export {
   DataViewsEmpty
 };
-//# sourceMappingURL=chunk-ISSJNFJV.js.map
+//# sourceMappingURL=chunk-C52BELLW.js.map

package/dist/{chunk-BPYPUEM5.js → chunk-CZJLWCEG.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-SUALMVL7.js";
 import {
   CalendarMonth
-} from "./chunk-IPE5FFFD.js";
+} from "./chunk-PUBPZOQJ.js";
 
 // src/components/form/Calendar/Calendar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -83,4 +83,4 @@ export {
   Calendar,
   Calendar_default
 };
-//# sourceMappingURL=chunk-BPYPUEM5.js.map
+//# sourceMappingURL=chunk-CZJLWCEG.js.map

package/dist/{chunk-WZUNBSS7.js → chunk-DVUPIVI2.js}

@@ -1,10 +1,10 @@
-import {
-  buildChartContext
-} from "./chunk-HKV4MQ2W.js";
 import {
   ChartLegendContent,
   ChartTooltipContent
 } from "./chunk-M5T3COS2.js";
+import {
+  buildChartContext
+} from "./chunk-HKV4MQ2W.js";
 
 // src/components/data-display/Chart/chart-renderers.tsx
 import {
@@ -312,4 +312,4 @@ function renderChartByType(props, theme) {
 export {
   renderChartByType
 };
-//# sourceMappingURL=chunk-WZUNBSS7.js.map
+//# sourceMappingURL=chunk-DVUPIVI2.js.map

package/dist/chunk-E46PG577.js

@@ -0,0 +1,78 @@
+import {
+  CHIP_SIZES,
+  CHIP_TRANSITION_EASING,
+  CHIP_TRANSITION_MS,
+  HOVER_LIFT_PX,
+  HOVER_SHADOW
+} from "./chunk-KU6VHNRV.js";
+import {
+  chipKeyAction
+} from "./chunk-BF4FYOAR.js";
+
+// src/components/data-display/Chip/Chip.styles.tsx
+import Avatar from "@mui/material/Avatar/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var makeKeyDownHandler = (args) => (event) => {
+  const action = chipKeyAction(event.key, args);
+  if (action === null) return;
+  event.preventDefault();
+  if (action === "delete") {
+    args.onDelete?.();
+    return;
+  }
+  args.onClick?.();
+};
+var avatarFor = (avatar, avatarSrc) => {
+  if (avatar && React.isValidElement(avatar)) {
+    return avatar;
+  }
+  if (avatarSrc) {
+    const { avatarSize } = CHIP_SIZES.medium;
+    return /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, sx: { width: avatarSize, height: avatarSize } });
+  }
+  return void 0;
+};
+var hoverShadow = (mode) => `0 ${HOVER_SHADOW.offsetY}px ${HOVER_SHADOW.blur}px rgba(0, 0, 0, ${mode === "dark" ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight})`;
+var chipStyles = ({
+  variant,
+  selected,
+  clickable,
+  disabled
+}) => {
+  const lifts = clickable && !disabled;
+  return {
+    // Enhanced styling for outlined variant
+    ...variant === "outlined" && {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      backgroundColor: "transparent"
+    },
+    ...selected && variant === "outlined" && {
+      backgroundColor: (theme) => theme.palette.action.selected
+    },
+    "&:hover": {
+      ...lifts && {
+        transform: `translateY(-${HOVER_LIFT_PX}px)`,
+        boxShadow: (theme) => hoverShadow(theme.palette.mode)
+      }
+    },
+    "&:active": {
+      ...lifts && {
+        transform: "translateY(0px)"
+      }
+    },
+    transition: `all ${CHIP_TRANSITION_MS / 1e3}s ${CHIP_TRANSITION_EASING}`
+  };
+};
+var iconWithTestId = (icon, testId) => icon && React.isValidElement(icon) ? React.cloneElement(icon, {
+  "data-testid": testId
+}) : void 0;
+
+export {
+  makeKeyDownHandler,
+  avatarFor,
+  chipStyles,
+  iconWithTestId
+};
+//# sourceMappingURL=chunk-E46PG577.js.map

package/dist/chunk-E46PG577.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.styles.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';\nimport { CHIP_SIZES, CHIP_TRANSITION_EASING, CHIP_TRANSITION_MS, HOVER_LIFT_PX, HOVER_SHADOW } from './Chip.metrics';\nimport type { ChipProps } from './Chip.types';\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n * The DECISION is `chipKeyAction`, which the native half reads too.\n */\nexport const makeKeyDownHandler =\n  (args: ChipKeyArgs & { onClick?: () => void; onDelete?: () => void }) =>\n  (event: KeyboardEvent): void => {\n    const action = chipKeyAction(event.key, args);\n    if (action === null) return;\n    event.preventDefault();\n    if (action === 'delete') {\n      args.onDelete?.();\n      return;\n    }\n    args.onClick?.();\n  };\n\nexport const avatarFor = (\n  avatar: ChipProps['avatar'],\n  avatarSrc?: string,\n): ReactElement | undefined => {\n  if (avatar && React.isValidElement(avatar)) {\n    return avatar;\n  }\n  if (avatarSrc) {\n    const { avatarSize } = CHIP_SIZES.medium;\n    return <Avatar src={avatarSrc} sx={{ width: avatarSize, height: avatarSize }} />;\n  }\n  return undefined;\n};\n\ninterface ChipStyleArgs {\n  variant: ChipProps['variant'];\n  selected?: boolean;\n  clickable?: boolean;\n  disabled?: boolean;\n}\n\n/** The lift's shadow, per mode — the same numbers the native chip reads. */\nconst hoverShadow = (mode: Theme['palette']['mode']): string =>\n  `0 ${HOVER_SHADOW.offsetY}px ${HOVER_SHADOW.blur}px rgba(0, 0, 0, ${\n    mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight\n  })`;\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\nexport const chipStyles = ({\n  variant,\n  selected,\n  clickable,\n  disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n  const lifts = clickable && !disabled;\n\n  return {\n    // Enhanced styling for outlined variant\n    ...(variant === 'outlined' && {\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      backgroundColor: 'transparent',\n    }),\n    ...(selected &&\n      variant === 'outlined' && {\n        backgroundColor: (theme: Theme) => theme.palette.action.selected,\n      }),\n    '&:hover': {\n      ...(lifts && {\n        transform: `translateY(-${HOVER_LIFT_PX}px)`,\n        boxShadow: (theme: Theme) => hoverShadow(theme.palette.mode),\n      }),\n    },\n    '&:active': {\n      ...(lifts && {\n        transform: 'translateY(0px)',\n      }),\n    },\n    transition: `all ${CHIP_TRANSITION_MS / 1000}s ${CHIP_TRANSITION_EASING}`,\n  };\n};\n\nexport const iconWithTestId = (\n  icon: ChipProps['icon'],\n  testId: string,\n): ReactElement | undefined =>\n  icon && React.isValidElement(icon)\n    ? React.cloneElement(icon as ReactElement, {\n        'data-testid': testId,\n      } as Record<string, unknown>)\n    : undefined;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,YAAY;AAGnB,OAAO,WAAW;AAiCP;AAtBJ,IAAM,qBACX,CAAC,SACD,CAAC,UAA+B;AAC9B,QAAM,SAAS,cAAc,MAAM,KAAK,IAAI;AAC5C,MAAI,WAAW,KAAM;AACrB,QAAM,eAAe;AACrB,MAAI,WAAW,UAAU;AACvB,SAAK,WAAW;AAChB;AAAA,EACF;AACA,OAAK,UAAU;AACjB;AAEK,IAAM,YAAY,CACvB,QACA,cAC6B;AAC7B,MAAI,UAAU,MAAM,eAAe,MAAM,GAAG;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,UAAM,EAAE,WAAW,IAAI,WAAW;AAClC,WAAO,oBAAC,UAAO,KAAK,WAAW,IAAI,EAAE,OAAO,YAAY,QAAQ,WAAW,GAAG;AAAA,EAChF;AACA,SAAO;AACT;AAUA,IAAM,cAAc,CAAC,SACnB,KAAK,aAAa,OAAO,MAAM,aAAa,IAAI,oBAC9C,SAAS,SAAS,aAAa,YAAY,aAAa,UAC1D;AAQK,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,QAAQ,aAAa,CAAC;AAE5B,SAAO;AAAA;AAAA,IAEL,GAAI,YAAY,cAAc;AAAA,MAC5B,aAAa;AAAA,MACb,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,GAAI,YACF,YAAY,cAAc;AAAA,MACxB,iBAAiB,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACF,WAAW;AAAA,MACT,GAAI,SAAS;AAAA,QACX,WAAW,eAAe,aAAa;AAAA,QACvC,WAAW,CAAC,UAAiB,YAAY,MAAM,QAAQ,IAAI;AAAA,MAC7D;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,YAAY,OAAO,qBAAqB,GAAI,KAAK,sBAAsB;AAAA,EACzE;AACF;AAEO,IAAM,iBAAiB,CAC5B,MACA,WAEA,QAAQ,MAAM,eAAe,IAAI,IAC7B,MAAM,aAAa,MAAsB;AAAA,EACvC,eAAe;AACjB,CAA4B,IAC5B;","names":[]}