@bug-on/m3-expressive 1.3.2 → 1.3.4

package/dist/index.mjs

@@ -3,9 +3,9 @@ import * as React67 from 'react';
 import { createContext, forwardRef, useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect, useReducer, useContext, useId, cloneElement, createElement } from 'react';
 import { hexFromArgb, Hct, SchemeExpressive, SchemeNeutral, SchemeMonochrome, SchemeContent, SchemeFidelity, SchemeVibrant, SchemeTonalSpot } from '@material/material-color-utilities';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { AnimatePresence, m, LazyMotion, domMax, useReducedMotion, useMotionValue, animate, useAnimationFrame, useSpring, useTransform, LayoutGroup, useScroll, useMotionValueEvent } from 'motion/react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { AnimatePresence, m, LazyMotion, domMax, useReducedMotion, useMotionValue, animate, useAnimationFrame, useSpring, useTransform, LayoutGroup, useScroll, useMotionValueEvent } from 'motion/react';
 import * as RxContextMenu from '@radix-ui/react-context-menu';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
 import { cornerRadius } from '@bug-on/m3-tokens';
@@ -228,7 +228,7 @@ function applyTheme(sourceColorHex, mode = "light", root = document.documentElem
   const resolved = resolveMode(mode);
   const colors = generateM3Theme(sourceColorHex, resolved, options);
   for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m71) => `-${m71.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m72) => `-${m72.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
     root.style.setProperty(`--color-m3-${kebabKey}`, value);
   }
@@ -250,7 +250,7 @@ function createMd3ExpressiveTheme(options) {
 function schemeToCssVariables(scheme) {
   const result = {};
   for (const [key, value] of Object.entries(scheme)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m71) => `-${m71.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m72) => `-${m72.toLowerCase()}`);
     result[`--md-sys-color-${kebabKey}`] = value;
   }
   return result;
@@ -294,9 +294,6 @@ function MaterialSymbolsPreconnect({
     )
   ] });
 }
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 
 // src/shapes/core/features.ts
 function cornerFeature(cubics, convex2) {
@@ -1087,8 +1084,8 @@ var RoundedPolygon = class _RoundedPolygon {
       );
       const mid = c.pointOnCurve(0.5);
       const md = distanceSquared(mid.x - this.centerX, mid.y - this.centerY);
-      const m71 = Math.max(ad, md);
-      if (m71 > maxDistSq) maxDistSq = m71;
+      const m72 = Math.max(ad, md);
+      if (m72 > maxDistSq) maxDistSq = m72;
     }
     const d = Math.sqrt(maxDistSq);
     return [
@@ -2830,6 +2827,9 @@ function interpolatePath(morph, progress, width, height) {
 function fmt(v) {
   return Number(v.toFixed(4)).toString();
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 function getMaskGradient(direction) {
   switch (direction) {
     case "bottom":
@@ -15440,7 +15440,7 @@ var TimePickerDialog = ({
 TimePickerDialog.displayName = "TimePickerDialog";
 var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 var isValidHourInput = (h, is24hour) => is24hour ? h >= 0 && h <= 23 : h >= 1 && h <= 12;
-var isValidMinuteInput = (m71) => m71 >= 0 && m71 <= 59;
+var isValidMinuteInput = (m72) => m72 >= 0 && m72 <= 59;
 var to24Hour = (hour12, isPm) => {
   if (isPm) {
     return hour12 === 12 ? 12 : hour12 + 12;
@@ -15476,8 +15476,8 @@ var useTimePickerState = (options) => {
     },
     [is24hour]
   );
-  const setMinute = useCallback((m71) => {
-    const clamped = clamp(m71, 0, 59);
+  const setMinute = useCallback((m72) => {
+    const clamped = clamp(m72, 0, 59);
     setMinuteState(clamped);
     setMinuteInputState(clamped);
   }, []);
@@ -15491,10 +15491,10 @@ var useTimePickerState = (options) => {
     },
     [is24hour, isPm]
   );
-  const setMinuteInput = useCallback((m71) => {
-    setMinuteInputState(m71);
-    if (isValidMinuteInput(m71)) {
-      setMinuteState(m71);
+  const setMinuteInput = useCallback((m72) => {
+    setMinuteInputState(m72);
+    if (isValidMinuteInput(m72)) {
+      setMinuteState(m72);
     }
   }, []);
   const setSelection = useCallback((mode) => {
@@ -18892,7 +18892,12 @@ var SEARCH_COLORS = {
   /** SearchViewTokens.DividerColor → outline */
   divider: "var(--md-sys-color-outline)",
   /** Focus indicator → secondary */
-  focusIndicator: "var(--md-sys-color-secondary)"
+  focusIndicator: "var(--md-sys-color-secondary)",
+  /** State layer overlay for interactive hover/press */
+  stateLayer: "var(--md-sys-color-on-surface)"
+};
+var SEARCH_ELEVATION = {
+  level3: "elevation-3"
 };
 var SEARCH_TYPOGRAPHY = {
   /** BodyLarge — used for input text and placeholder. */
@@ -18997,6 +19002,7 @@ function SearchBar({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   className,
@@ -19010,6 +19016,9 @@ function SearchBar({
   const inputRef = React67.useRef(null);
   const prevActiveRef = React67.useRef(active);
   const isRestoringFocusRef = React67.useRef(false);
+  const [isHovered, setIsHovered] = React67.useState(false);
+  const [isPressed, setIsPressed] = React67.useState(false);
+  const [isFocused, setIsFocused] = React67.useState(false);
   React67.useEffect(() => {
     var _a;
     let rafId;
@@ -19026,10 +19035,14 @@ function SearchBar({
     };
   }, [active]);
   const handleFocus = () => {
+    setIsFocused(true);
     if (!active && !isRestoringFocusRef.current) {
       onActiveChange(true);
     }
   };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
   const handleFormSubmit = (e) => {
     e.preventDefault();
     onSearch(query);
@@ -19048,18 +19061,39 @@ function SearchBar({
         layout: !shouldReduceMotion,
         layoutId: shouldReduceMotion ? void 0 : searchId,
         transition: shouldReduceMotion ? void 0 : SEARCH_BAR_EXPAND_SPRING,
-        className: cn("relative", className),
+        className: cn(
+          "relative group select-none",
+          SEARCH_ELEVATION.level3,
+          className
+        ),
         style: { height: SearchTokens.heights.bar },
         initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
         exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.95, transition: SEARCH_BAR_EXIT_SPRING },
+        onPointerEnter: () => setIsHovered(true),
+        onPointerLeave: () => {
+          setIsHovered(false);
+          setIsPressed(false);
+        },
+        onPointerDown: () => setIsPressed(true),
+        onPointerUp: () => setIsPressed(false),
+        onPointerCancel: () => setIsPressed(false),
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute inset-0 rounded-full",
+              className: "absolute inset-0 rounded-full overflow-hidden",
               style: { backgroundColor: SEARCH_COLORS.container },
-              "aria-hidden": "true"
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                StateLayer,
+                {
+                  hovered: isHovered,
+                  focused: isFocused,
+                  pressed: isPressed,
+                  style: { color: SEARCH_COLORS.stateLayer }
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx(
@@ -19105,21 +19139,36 @@ function SearchBar({
                         ),
                         style: { color: SEARCH_COLORS.inputText },
                         onFocus: handleFocus,
+                        onBlur: handleBlur,
                         onChange: (e) => onQueryChange(e.target.value),
                         onKeyDown
                       }
                     )
                   }
                 ),
-                trailingIcon && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "flex shrink-0 items-center justify-center",
-                    style: { color: SEARCH_COLORS.trailingIcon },
-                    "aria-hidden": "true",
-                    children: trailingIcon
-                  }
-                )
+                (trailingIcon || avatar) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  trailingIcon && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "flex shrink-0 items-center justify-center",
+                      style: { color: SEARCH_COLORS.trailingIcon },
+                      "aria-hidden": "true",
+                      children: trailingIcon
+                    }
+                  ),
+                  avatar && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "flex shrink-0 items-center justify-center rounded-full overflow-hidden",
+                      style: {
+                        width: SearchTokens.avatarSize,
+                        height: SearchTokens.avatarSize
+                      },
+                      "aria-hidden": "true",
+                      children: avatar
+                    }
+                  )
+                ] })
               ] })
             }
           )
@@ -19182,40 +19231,77 @@ function useSearchViewFocus(inputRef, active) {
 function TrailingAction({
   query,
   trailingIcon,
+  avatar,
   onClear
 }) {
-  if (query) {
-    return /* @__PURE__ */ jsx(
-      IconButton,
+  const shouldReduceMotion = useReducedMotion();
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: query ? /* @__PURE__ */ jsx(
+      m.div,
       {
-        size: "sm",
-        style: { color: SEARCH_COLORS.trailingIcon },
-        "aria-label": "Clear search",
-        onClick: onClear,
+        initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.8 },
+        transition: { duration: 0.15 },
+        className: "flex items-center justify-center",
         children: /* @__PURE__ */ jsx(
-          "span",
+          IconButton,
           {
-            className: "material-symbols-rounded select-none leading-none",
-            style: { fontSize: 20 },
-            "aria-hidden": "true",
-            children: "close"
+            size: "sm",
+            style: { color: SEARCH_COLORS.trailingIcon },
+            "aria-label": "Clear search",
+            onClick: onClear,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "material-symbols-rounded select-none leading-none",
+                style: { fontSize: 20 },
+                "aria-hidden": "true",
+                children: "close"
+              }
+            )
           }
         )
-      }
-    );
-  }
-  if (trailingIcon) {
-    return /* @__PURE__ */ jsx(
-      "span",
+      },
+      "clear-action"
+    ) : trailingIcon && /* @__PURE__ */ jsx(
+      m.span,
       {
+        initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.8 },
+        transition: { duration: 0.15 },
         className: "flex shrink-0 items-center justify-center",
         style: { color: SEARCH_COLORS.trailingIcon },
         "aria-hidden": "true",
         children: trailingIcon
+      },
+      "trailing-icon"
+    ) }),
+    avatar && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex shrink-0 items-center justify-center rounded-full overflow-hidden",
+        style: {
+          width: SearchTokens.avatarSize,
+          height: SearchTokens.avatarSize
+        },
+        "aria-hidden": "true",
+        children: avatar
       }
-    );
-  }
-  return null;
+    )
+  ] });
+}
+function DefaultSearchIcon2() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "material-symbols-rounded select-none leading-none",
+      style: { fontSize: SearchTokens.iconSize },
+      "aria-hidden": "true",
+      children: "search"
+    }
+  );
 }
 function SearchViewDocked({
   query,
@@ -19225,6 +19311,7 @@ function SearchViewDocked({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   styleType = "contained",
@@ -19257,10 +19344,12 @@ function SearchViewDocked({
       m.div,
       {
         ref: dropdownRef,
+        layout: !shouldReduceMotion,
         layoutId: shouldReduceMotion ? void 0 : searchId,
         className: cn(
           // DockedContainerShape = CornerExtraLarge = 28dp radius
           "rounded-[28px] overflow-hidden",
+          SEARCH_ELEVATION.level3,
           viewClassName
         ),
         style: { backgroundColor: SEARCH_COLORS.container },
@@ -19282,7 +19371,7 @@ function SearchViewDocked({
                     className: "flex shrink-0 items-center justify-center",
                     style: { color: SEARCH_COLORS.leadingIcon },
                     "aria-hidden": "true",
-                    children: leadingIcon
+                    children: leadingIcon != null ? leadingIcon : /* @__PURE__ */ jsx(DefaultSearchIcon2, {})
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -19323,6 +19412,7 @@ function SearchViewDocked({
                   {
                     query,
                     trailingIcon,
+                    avatar,
                     onClear: () => onQueryChange("")
                   }
                 )
@@ -19343,7 +19433,7 @@ function SearchViewDocked({
               id: listboxId,
               role: "listbox",
               "aria-label": `${ariaLabel} results`,
-              className: "min-h-30",
+              className: "min-h-[120px]",
               children
             }
           )
@@ -19372,6 +19462,7 @@ function SearchViewFullScreen({
   onActiveChange,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   styleType = "contained",
@@ -19486,6 +19577,7 @@ function SearchViewFullScreen({
                   {
                     query,
                     trailingIcon,
+                    avatar,
                     onClear: () => onQueryChange("")
                   }
                 )
@@ -19537,6 +19629,7 @@ function SearchComponent({
   hasGap = false,
   leadingIcon,
   trailingIcon,
+  avatar,
   placeholder = "Search",
   textAlign = "left",
   children,
@@ -19564,6 +19657,7 @@ function SearchComponent({
     onActiveChange,
     leadingIcon,
     trailingIcon,
+    avatar,
     placeholder,
     textAlign,
     "aria-label": ariaLabel,
@@ -24059,11 +24153,13 @@ var Snackbar = React67.memo(function Snackbar2({
                   type: "button",
                   onClick: handleAction,
                   className: cn(
-                    "text-sm font-medium",
-                    "px-2 py-1 rounded-sm",
-                    "focus-visible:outline-none focus-visible:ring-2",
-                    "transition-colors whitespace-nowrap",
-                    "text-m3-inverse-primary"
+                    "inline-flex items-center justify-center",
+                    "h-10 px-3 py-2.5 rounded-sm",
+                    "text-sm font-medium leading-5 whitespace-nowrap",
+                    "text-m3-inverse-primary",
+                    "hover:bg-m3-inverse-primary/8 focus-visible:bg-m3-inverse-primary/12 active:bg-m3-inverse-primary/12",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-inverse-primary",
+                    "transition-colors select-none cursor-pointer"
                   ),
                   children: actionLabel
                 }
@@ -24072,10 +24168,10 @@ var Snackbar = React67.memo(function Snackbar2({
                 IconButton,
                 {
                   size: "sm",
-                  colorStyle: "filled",
+                  colorStyle: "standard",
                   "aria-label": "Dismiss notification",
                   onClick: handleDismiss,
-                  className: "text-m3-inverse-on-surface bg-m3-inverse-surface",
+                  className: "text-m3-inverse-on-surface hover:bg-m3-inverse-on-surface/8 active:bg-m3-inverse-on-surface/12 focus-visible:ring-m3-inverse-primary",
                   children: /* @__PURE__ */ jsx(Icon, { name: "close", "aria-hidden": "true" })
                 }
               )
@@ -25569,12 +25665,15 @@ function useThemeMode() {
 function TableOfContents({
   items,
   className,
-  scrollAreaProps
+  scrollAreaProps,
+  scrollContainerRef
 }) {
   const [activeId, setActiveId] = useState("");
   const itemIds = useMemo(() => items.map((i) => i.id), [items]);
   useEffect(() => {
+    var _a;
     if (typeof IntersectionObserver === "undefined") return;
+    const root = (_a = scrollContainerRef == null ? void 0 : scrollContainerRef.current) != null ? _a : null;
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
@@ -25582,19 +25681,20 @@ function TableOfContents({
         }
       },
       // rootMargin: top offset ~100px (fixed header), bottom -80% (early switch)
-      { rootMargin: "-100px 0% -80% 0%" }
+      { root, rootMargin: "-100px 0% -80% 0%" }
     );
     for (const id of itemIds) {
       const el = document.getElementById(id);
       if (el) observer.observe(el);
     }
     return () => observer.disconnect();
-  }, [itemIds]);
+  }, [itemIds, scrollContainerRef]);
   const handleClick = useCallback(
     (e, id) => {
-      var _a;
       e.preventDefault();
-      (_a = document.getElementById(id)) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" });
+      const target = document.getElementById(id);
+      if (!target) return;
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
     },
     []
   );
@@ -25611,19 +25711,35 @@ function TableOfContents({
             type: "hover"
           }, scrollAreaProps), {
             className: cn("flex-1 min-h-0", scrollAreaProps == null ? void 0 : scrollAreaProps.className),
-            children: /* @__PURE__ */ jsx("ul", { className: "space-y-4 pr-4", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: `#${item.id}`,
-                onClick: (e) => handleClick(e, item.id),
-                "aria-current": activeId === item.id ? "true" : void 0,
-                className: cn(
-                  "text-sm transition-colors hover:text-m3-primary block",
-                  activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant font-medium"
-                ),
-                children: item.label
-              }
-            ) }, item.id)) })
+            children: /* @__PURE__ */ jsx("ul", { className: "space-y-2 pr-4", children: items.map((item) => {
+              var _a;
+              const depth = (_a = item.depth) != null ? _a : 1;
+              const isSubItem = depth > 1;
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: cn(
+                    isSubItem && "pl-3.5 border-l border-m3-outline-variant/40 ml-1"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `#${item.id}`,
+                      onClick: (e) => handleClick(e, item.id),
+                      "aria-current": activeId === item.id ? "true" : void 0,
+                      className: cn(
+                        "transition-colors hover:text-m3-primary block truncate",
+                        isSubItem ? "text-xs py-0.5 leading-relaxed" : "text-sm py-1 font-medium leading-snug",
+                        activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant"
+                      ),
+                      title: item.label,
+                      children: item.label
+                    }
+                  )
+                },
+                item.id
+              );
+            }) })
           })
         )
       ]
@@ -27156,6 +27272,6 @@ function TooltipBox({
   ] });
 }
 
-export { ANGLE_EPSILON, APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, BadgedBox, BottomAppBar, BottomDockedToolbar, BottomSheet, BottomSheetModal, Button, ButtonDistribute, ButtonGroup, CHECK_ICON_VARIANTS, Card, CardContent, CardFooter, CardHeader, CardMedia, Carousel, CarouselGrid, CarouselItem, CarouselScrollClient, CarouselTokens, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Cubic, DISTANCE_EPSILON, DIVIDER_COLOR, DIVIDER_PADDING, DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FLOAT_PI, FadingBlurMask, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, LIST_TOKENS, LargeFlexibleAppBar, List, ListContext, ListDivider, ListItem, LoadingIndicator, MD3CornerRadius, MD3Shapes, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MeasuredPolygon, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, Morph, MutableCubic, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, RoundedPolygon, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Scrim, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, Select, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, SideSheet, SideSheetModal, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, SubMenu, Switch, SwitchColors, SwitchTokens, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, TimeInput, TimePicker, TimePickerDialog, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, ToolbarToggleButton, ToolbarToggleButtonTokens, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, UNROUNDED, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, addPoints, appBarTypography, applyTheme, buildWavePath, cardVariants, circle, clockwise, cn, convex, cornerFeature, cornerRounding, createDoubleMapper, createMd3ExpressiveTheme, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, generateM3Theme, getDirection, getDistance, getDistanceSquared, getExpressiveShape, getListItemHeight, getToolbarColors, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, resolveMode, rotate90, scalePoint, shouldTopAlign, square, standardFloatingToolbarColors, star, subtractPoints, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, toClipPath, toSvgPath, transformFeature, transformPoint, useAppBarScroll, useBottomSheet, useCarouselA11y, useCarouselKeylines, useRipple as useDOMRipple, useDatePickerState, useDateRangePickerState, useFloatingToolbarScrollBehavior, useListContext, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useShapeMorph, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTimePickerState, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
+export { ANGLE_EPSILON, APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BUTTON_COLOR_TOKENS, BUTTON_SIZE_TOKENS, Badge, BadgedBox, BottomAppBar, BottomDockedToolbar, BottomSheet, BottomSheetModal, Button, ButtonDistribute, ButtonGroup, CHECK_ICON_VARIANTS, Card, CardContent, CardFooter, CardHeader, CardMedia, Carousel, CarouselGrid, CarouselItem, CarouselScrollClient, CarouselTokens, Checkbox, Chip, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Cubic, DISTANCE_EPSILON, DIVIDER_COLOR, DIVIDER_PADDING, DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, DatePicker, DatePickerDialog, DatePickerInput, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, DragHandle, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, ElevatedSplitButtonLeading, ElevatedSplitButtonTrailing, ElevatedSplitButtonTrailingUncheckable, ExtendedFAB, FAB, FABMenu, FABMenuItem, FABPosition, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FLOAT_PI, FadingBlurMask, FilledSplitButtonLeading, FilledSplitButtonTrailing, FilledSplitButtonTrailingUncheckable, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, Icon, IconButton, LIST_TOKENS, LargeFlexibleAppBar, List, ListContext, ListDivider, ListItem, LoadingIndicator, MD3CornerRadius, MD3Shapes, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MaterialSymbolsPreconnect, MeasuredPolygon, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, Morph, MutableCubic, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OutlinedSplitButtonLeading, OutlinedSplitButtonTrailing, OutlinedSplitButtonTrailingUncheckable, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup, RangeSlider, RichTooltip, Ripple, RoundedPolygon, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Scrim, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, Select, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, SideSheet, SideSheetModal, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarContext, SnackbarHost, SnackbarProvider, SplitButtonLayout, SplitButtonLeading, SplitButtonTrailing, SplitButtonTrailingUncheckable, SubMenu, Switch, SwitchColors, SwitchTokens, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, Text, TextField, TimeInput, TimePicker, TimePickerDialog, ToggleFAB, TonalSplitButtonLeading, TonalSplitButtonTrailing, TonalSplitButtonTrailingUncheckable, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, ToolbarToggleButton, ToolbarToggleButtonTokens, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, UNROUNDED, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, addPoints, appBarTypography, applyTheme, buildWavePath, cardVariants, circle, clockwise, convex, cornerFeature, cornerRounding, createDoubleMapper, createMd3ExpressiveTheme, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, generateM3Theme, getDirection, getDistance, getDistanceSquared, getExpressiveShape, getListItemHeight, getToolbarColors, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, resolveMode, rotate90, scalePoint, shouldTopAlign, square, standardFloatingToolbarColors, star, subtractPoints, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, toClipPath, toSvgPath, transformFeature, transformPoint, useAppBarScroll, useBottomSheet, useCarouselA11y, useCarouselKeylines, useRipple as useDOMRipple, useDatePickerState, useDateRangePickerState, useFloatingToolbarScrollBehavior, useListContext, useMediaQuery, useMenuContext, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useShapeMorph, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTimePickerState, useTooltipPosition, useTooltipState, useTypography, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map