musae 0.2.14 → 0.2.16

package/dist/components/avatar/group.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { type AvatarGroupProps } from "./types";
-declare const Group: ({ children: _children, shape, size, max }: AvatarGroupProps) => React.JSX.Element;
+declare const Group: ({ children: _children, shape, size, max, }: AvatarGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/avatar/group.js

@@ -5,6 +5,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
 import Popover from '../popover/popover.js';
 import Avatar from './avatar.js';
+import clsx from 'clsx';
 
 var _Group = function Group(_ref) {
   var _children = _ref.children,
@@ -14,13 +15,12 @@ var _Group = function Group(_ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 3 : _ref$max;
+  var classNames = useClassNames(ComponentToken.Avatar);
   var styled = {
     className: "musae-3nfvp2 musae-87ps6o"
   };
-  var classNames = useClassNames(ComponentToken.Avatar);
   var children = useMemo(function () {
-    var __children = Children.toArray(_children);
-    var _children$reduce = __children.reduce(function (prev, child, index) {
+    var _Children$toArray$red = Children.toArray(_children).reduce(function (prev, child, index) {
         // @ts-ignore
         var element = /*#__PURE__*/cloneElement(child, {
           key: "avatars-".concat(index)
@@ -33,13 +33,15 @@ var _Group = function Group(_ref) {
         }
         return prev;
       }, [[], []]),
-      _children$reduce2 = _slicedToArray(_children$reduce, 2),
-      visible = _children$reduce2[0],
-      hidden = _children$reduce2[1];
+      _Children$toArray$red2 = _slicedToArray(_Children$toArray$red, 2),
+      visible = _Children$toArray$red2[0],
+      hidden = _Children$toArray$red2[1];
     // got hidden nodes, show ellipse node
     if (hidden.length > 0) {
       visible.push( /*#__PURE__*/React.createElement(Popover, {
-        description: /*#__PURE__*/React.createElement(_Group, null, hidden),
+        description: /*#__PURE__*/React.createElement(_Group, {
+          max: Infinity
+        }, hidden),
         key: "avatars-hidden",
         placement: "top"
       }, /*#__PURE__*/React.createElement(Avatar, {
@@ -54,7 +56,7 @@ var _Group = function Group(_ref) {
       size: size
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: (classNames[AvatarClassToken.Group], styled.className),
+    className: clsx(classNames[AvatarClassToken.Group], styled.className),
     style: styled.style
   }, children));
 };

package/dist/components/bench/bench.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BenchProps } from "./types";
+declare const Bench: ({ children, title, logo, navigations, className, style, trailing, onNavigate, location, defaultExpandedKeys, classNames: { main: mainClassName }, }: BenchProps) => React.JSX.Element;
+export default Bench;

package/dist/components/bench/bench.js

@@ -0,0 +1,150 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React from 'react';
+import { Layout } from '../layout/index.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import Divider from '../divider/divider.js';
+import { useLogo, useNavigations } from './hooks.js';
+import Menu from '../menu/menu.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { typography } from '../theme/theme.js';
+import clsx from 'clsx';
+
+var Header = Layout.Header,
+  Main = Layout.Main,
+  Sider = Layout.Sider;
+var styles = {
+  bench: {
+    "default": {
+      $$css: true
+    },
+    sider: function sider(props) {
+      return [{
+        borderRightWidth: "musae-1xkobc8",
+        borderInlineStartWidth: null,
+        borderInlineEndWidth: null,
+        borderRightStyle: "musae-32b0ac",
+        borderInlineStartStyle: null,
+        borderInlineEndStyle: null,
+        borderRightColor: "musae-104k1kx",
+        borderInlineStartColor: null,
+        borderInlineEndColor: null,
+        paddingInline: "musae-gj1dgu",
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        position: "musae-7wzq59",
+        height: "musae-1r05exa",
+        top: "musae-kwake1",
+        overflowY: "musae-10wlt62 musae-r8ctv5",
+        $$css: true
+      }, {
+        "--borderRightColor": props.outlineColor != null ? props.outlineColor : "initial"
+      }];
+    },
+    main: {
+      $$css: true
+    }
+  },
+  header: {
+    "default": {
+      gap: "musae-vbka3v",
+      rowGap: null,
+      columnGap: null,
+      boxShadow: "musae-ezd0au",
+      $$css: true
+    },
+    navigation: {
+      marginLeft: "musae-19i9eir",
+      marginInlineStart: null,
+      marginInlineEnd: null,
+      marginRight: "musae-ack27t",
+      height: "musae-b27hse",
+      $$css: true
+    },
+    divider: {
+      height: "musae-lry4nc",
+      $$css: true
+    }
+  }
+};
+var Bench = function Bench(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    logo = _ref.logo,
+    _ref$navigations = _ref.navigations,
+    navigations = _ref$navigations === void 0 ? [] : _ref$navigations,
+    className = _ref.className,
+    style = _ref.style,
+    trailing = _ref.trailing,
+    onNavigate = _ref.onNavigate,
+    location = _ref.location,
+    defaultExpandedKeys = _ref.defaultExpandedKeys,
+    _ref$classNames = _ref.classNames,
+    _ref$classNames2 = _ref$classNames === void 0 ? {} : _ref$classNames,
+    mainClassName = _ref$classNames2.main;
+  var theme = useTheme();
+  var _logo = useLogo(logo);
+  var _useNavigations = useNavigations({
+      navigations: navigations,
+      onNavigate: onNavigate,
+      location: location
+    }),
+    navigate = _useNavigations.navigate,
+    topMenuItems = _useNavigations.topMenuItems,
+    sideMenuItems = _useNavigations.sideMenuItems,
+    selectedKeys = _useNavigations.selectedKeys;
+  var styled = {
+    bench: _stylex.props(styles.bench["default"]),
+    header: _stylex.props(styles.header["default"]),
+    main: _stylex.props(styles.bench.main),
+    sider: _stylex.props(styles.bench.sider({
+      outlineColor: theme.colors[ColorToken.OutlineVariant]
+    })),
+    title: _stylex.props(typography.title.large),
+    divider: _stylex.props(styles.header.divider),
+    headerNavigation: _stylex.props(styles.header.navigation)
+  };
+  return /*#__PURE__*/React.createElement(Layout, {
+    className: clsx(styled.bench.className, className),
+    style: _objectSpread(_objectSpread({}, styled.bench.style), style)
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: styled.header.className,
+    style: styled.header.style
+  }, !!_logo && /*#__PURE__*/React.createElement("img", {
+    src: _logo === null || _logo === void 0 ? void 0 : _logo.url,
+    alt: "logo"
+  }), !!_logo && ( /*#__PURE__*/React.createElement("div", {
+    className: styled.divider.className,
+    style: styled.divider.style
+  }, /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: styled.title.className,
+    style: styled.title.style
+  }, title), /*#__PURE__*/React.createElement(Menu, _objectSpread({
+    items: topMenuItems,
+    onClick: navigate,
+    mode: "horizontal",
+    className: styled.headerNavigation.className,
+    style: styled.headerNavigation.style
+  }, !!selectedKeys[0] && {
+    selectedKeys: [selectedKeys[0]]
+  })), trailing), sideMenuItems.length > 0 && ( /*#__PURE__*/React.createElement(Sider, {
+    className: styled.sider.className,
+    style: styled.sider.style
+  }, /*#__PURE__*/React.createElement(Menu, _objectSpread({
+    items: sideMenuItems,
+    onClick: navigate,
+    defaultExpandedKeys: defaultExpandedKeys
+  }, !!selectedKeys[1] && {
+    selectedKeys: [selectedKeys[1]]
+  })))), /*#__PURE__*/React.createElement(Main, {
+    className: clsx(mainClassName, styled.main.className),
+    style: styled.main.style
+  }, children));
+};
+var Bench$1 = Bench;
+
+export { Bench$1 as default };

package/dist/components/bench/hooks.d.ts

@@ -0,0 +1,22 @@
+import { type Key } from "react";
+import type { BenchProps, Logo, NavigationItem } from "./types";
+import { MenuItem } from "../menu";
+/**
+ * @description
+ * logo
+ */
+export declare const useLogo: (logo?: string | Logo) => Logo | null;
+/**
+ * @description
+ * menu
+ */
+export declare const useNavigations: ({ navigations, onNavigate, location, }: {
+    navigations: NavigationItem[];
+    onNavigate: BenchProps["onNavigate"];
+    location?: string;
+}) => {
+    selectedKeys: [(Key | undefined)?, (Key | undefined)?];
+    topMenuItems: MenuItem[];
+    sideMenuItems: MenuItem[];
+    navigate: (path: Key) => void;
+};

package/dist/components/bench/hooks.js

@@ -0,0 +1,111 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useMemo } from 'react';
+import { useEvent, isUndefined } from '@aiszlab/relax';
+
+var _excluded = ["path", "children"],
+  _excluded2 = ["children"];
+/**
+ * @description
+ * logo
+ */
+var useLogo = function useLogo(logo) {
+  return useMemo(function () {
+    if (!logo) return null;
+    if (typeof logo === "string") {
+      return {
+        url: logo
+      };
+    }
+    return logo;
+  }, [logo]);
+};
+var _toMenuItem3 = function toMenuItem(_ref, parentKeys, paths) {
+  var path = _ref.path,
+    children = _ref.children,
+    item = _objectWithoutProperties(_ref, _excluded);
+  // convert children
+  var _reduce = (children !== null && children !== void 0 ? children : []).reduce(function (_ref2, child) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        _menuItems = _ref3[0],
+        _paths = _ref3[1];
+      var _toMenuItem = _toMenuItem3(child, [].concat(_toConsumableArray(parentKeys), [path]), _paths),
+        _toMenuItem2 = _slicedToArray(_toMenuItem, 2),
+        menuItem = _toMenuItem2[0],
+        paths = _toMenuItem2[1];
+      _menuItems.push(menuItem);
+      return [_menuItems, paths];
+    }, [[], new Map(paths.set(path, parentKeys))]),
+    _reduce2 = _slicedToArray(_reduce, 2),
+    _menuItems = _reduce2[0],
+    _paths = _reduce2[1];
+  // return with paths
+  return [_objectSpread({
+    key: path,
+    children: _menuItems
+  }, item), _paths];
+};
+/**
+ * @description
+ * menu
+ */
+var useNavigations = function useNavigations(_ref4) {
+  var navigations = _ref4.navigations,
+    onNavigate = _ref4.onNavigate,
+    location = _ref4.location;
+  // menu click handler => jump link
+  var navigate = useEvent(function (path) {
+    if (onNavigate) {
+      onNavigate(path.toString());
+      return;
+    }
+    window.open(path.toString(), "_self");
+  });
+  // convert navigations into diff menus
+  var _useMemo = useMemo(function () {
+      return navigations.reduce(function (_ref5, item) {
+        var _ref6 = _slicedToArray(_ref5, 3),
+          topMenuItems = _ref6[0],
+          sideNavigations = _ref6[1],
+          paths = _ref6[2];
+        var _toMenuItem4 = _toMenuItem3(item, [], paths),
+          _toMenuItem5 = _slicedToArray(_toMenuItem4, 2),
+          _toMenuItem5$ = _toMenuItem5[0],
+          children = _toMenuItem5$.children,
+          _menuItem = _objectWithoutProperties(_toMenuItem5$, _excluded2),
+          _paths = _toMenuItem5[1];
+        topMenuItems.set(item.path, _menuItem);
+        sideNavigations.set(item.path, children);
+        return [topMenuItems, sideNavigations, _paths];
+      }, [new Map(), new Map(), new Map()]);
+    }, [navigations]),
+    _useMemo2 = _slicedToArray(_useMemo, 3),
+    topMenuItems = _useMemo2[0],
+    sideNavigations = _useMemo2[1],
+    paths = _useMemo2[2];
+  // menu selected keys
+  var selectedKeys = useMemo(function () {
+    var _paths$get$at, _paths$get;
+    if (isUndefined(location)) return [];
+    return [(_paths$get$at = (_paths$get = paths.get(location)) === null || _paths$get === void 0 ? void 0 : _paths$get.at(0)) !== null && _paths$get$at !== void 0 ? _paths$get$at : location, location];
+  }, [location, paths]);
+  var sideMenuItems = useMemo(function () {
+    var _sideNavigations$get;
+    if (!selectedKeys[0]) {
+      return [];
+    }
+    return (_sideNavigations$get = sideNavigations.get(selectedKeys[0])) !== null && _sideNavigations$get !== void 0 ? _sideNavigations$get : [];
+  }, [sideNavigations, selectedKeys]);
+  return {
+    selectedKeys: selectedKeys,
+    topMenuItems: useMemo(function () {
+      return Array.from(topMenuItems.values());
+    }, [topMenuItems]),
+    sideMenuItems: sideMenuItems,
+    navigate: navigate
+  };
+};
+
+export { useLogo, useNavigations };

package/dist/components/bench/index.d.ts

@@ -0,0 +1,4 @@
+import Bench from "./bench";
+import type { NavigationItem } from "./types";
+export { Bench };
+export type { NavigationItem };

package/dist/components/bench/types.d.ts

@@ -0,0 +1,78 @@
+import { Key, ReactNode } from "react";
+import { ComponentProps } from "../../types/element";
+export type Logo = {
+    /**
+     * @description
+     * url
+     */
+    url: string;
+};
+export type NavigationItem = {
+    /**
+     * @description
+     * path
+     */
+    path: string;
+    /**
+     * @description
+     * label
+     * @default void 0
+     */
+    label: ReactNode;
+    /**
+     * @description
+     * children
+     */
+    children?: NavigationItem[];
+};
+/**
+ * @description
+ * workbench props
+ */
+export type BenchProps = ComponentProps & {
+    /**
+     * @description
+     * logo
+     */
+    logo?: string | Logo;
+    /**
+     * @description
+     * title
+     */
+    title?: ReactNode;
+    /**
+     * @description
+     * children
+     */
+    children?: ReactNode;
+    /**
+     * @description
+     * navigations
+     */
+    navigations?: NavigationItem[];
+    /**
+     * @description
+     * trailing
+     */
+    trailing?: ReactNode;
+    /**
+     * @description
+     * navigate handler
+     */
+    onNavigate?: (path: string) => void;
+    /**
+     * @description
+     * location
+     */
+    location?: string;
+    /**
+     * @description
+     * default expanded keys
+     */
+    defaultExpandedKeys?: Key[];
+    /**
+     * @description
+     * class names
+     */
+    classNames?: Partial<Record<"main", string>>;
+};

package/dist/components/dialog/dialog.js

@@ -12,7 +12,7 @@ var Dialog = function Dialog(_ref) {
     _ref$closable = _ref.closable,
     closable = _ref$closable === void 0 ? true : _ref$closable,
     props = _objectWithoutProperties(_ref, _excluded);
-  /// `Portal` should disappear after `Dialog` disappear completely
+  /// `Portal` should disappear after `Dialog` disappear animation completely
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     _isVisible = _useBoolean2[0],

package/dist/components/dialog/popup.js

@@ -114,7 +114,7 @@ var Popup = function Popup(_ref) {
   var theme = useTheme();
   var panelRef = useRef(null);
   var overlayRef = useRef(null);
-  /// children render hooks
+  // children render hooks
   var footer = useFooter([props$1.footer, props$1.onConfirm, onClose]);
   var _useClosable = useClosable({
       closable: closable,
@@ -159,7 +159,7 @@ var Popup = function Popup(_ref) {
     }))();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
-  /// when open, try focus dialog
+  // when open, try focus dialog
   useEffect(function () {
     if (!open) return;
     if (contains(scope.current, document.activeElement)) return;

package/dist/components/dialog/types.d.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactNode } from "react";
 import type { Closable } from "../../hooks/use-closable";
 import { RequiredIn } from "@aiszlab/relax/types";
+import { PortalProps } from "../portal/types";
 /**
  * @description
  * dialog props
@@ -62,6 +63,10 @@ export interface DialogProps {
      * @default void 0
      */
     onClose?: VoidFunction;
+    /**
+     * @link {PortalProps.container}
+     */
+    container?: PortalProps["container"];
 }
 /**
  * @description

package/dist/components/divider/divider.d.ts

@@ -1,4 +1,4 @@
 import { type DividerProps } from "./types";
 import React from "react";
-declare const Divider: ({ align, children, type, className, style }: DividerProps) => React.JSX.Element;
+declare const Divider: ({ align, children, type, className, style, }: DividerProps) => React.JSX.Element;
 export default Divider;

package/dist/components/divider/divider.js

@@ -32,7 +32,7 @@ var styles = {
     },
     vertical: function vertical(props) {
       return [{
-        height: "musae-1yri8c6",
+        width: "musae-131wp52",
         backgroundColor: "musae-q1mx2j",
         $$css: true
       }, {
@@ -132,13 +132,13 @@ var Divider = function Divider(_ref) {
       backgroundColor: theme.colors[ColorToken.OutlineVariant],
       offset: offset
     })),
-    label: props(typography.body.small, styles.label[type])
+    label: props(styles.label[type], typography.body.small)
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx(styled.divider.className, className, classNames[DividerClassToken.Divider]),
+    className: clsx(classNames[DividerClassToken.Divider], className, styled.divider.className),
     style: _objectSpread(_objectSpread({}, styled.divider.style), style)
   }, !!children && ( /*#__PURE__*/React.createElement("span", {
-    className: clsx(styled.label.className, classNames[DividerClassToken.Label]),
+    className: clsx(classNames[DividerClassToken.Label], styled.label.className),
     style: styled.label.style
   }, children)));
 };

package/dist/components/drawer/drawer.js

@@ -16,7 +16,7 @@ var Drawer = function Drawer(_ref) {
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "right" : _ref$placement,
     props = _objectWithoutProperties(_ref, _excluded);
-  /// `Portal` should disappear after `Dialog` disappear completely
+  /// `Portal` should disappear after `Drawer` disappear animation completely
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     _isVisible = _useBoolean2[0],

package/dist/components/highlight/highlight.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { HighlightProps } from "./types";
-declare const Highlight: ({ children }: HighlightProps) => React.JSX.Element;
-export default Highlight;
+declare const _default: React.MemoExoticComponent<({ children, capture }: HighlightProps) => React.JSX.Element>;
+export default _default;

package/dist/components/highlight/highlight.js

@@ -0,0 +1,54 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React, { memo, useMemo } from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, HighlightClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import clsx from 'clsx';
+
+var styles = {
+  capture: function capture(props) {
+    return [{
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  }
+};
+var Highlight = function Highlight(_ref) {
+  var children = _ref.children,
+    capture = _ref.capture;
+  var classNames = useClassNames(ComponentToken.Highlight);
+  var theme = useTheme();
+  var _children = useMemo(function () {
+    if (!capture) return [children];
+    var styled = _stylex.props(styles.capture({
+      color: theme.colors[ColorToken.Primary]
+    }));
+    // 1. use regex match
+    // 2. replace with custom node
+    var _Array$from$reduce = Array.from(children.matchAll(new RegExp(capture, "g"))).reduce(function (prev, item) {
+        prev[0].push(children.slice(prev[1], item.index));
+        prev[0].push( /*#__PURE__*/React.createElement("span", {
+          className: clsx(classNames[HighlightClassToken.Capture], styled.className),
+          style: styled.style,
+          key: item.index
+        }, item[0]));
+        prev[1] = item.index + item[0].length;
+        return prev;
+      }, [[], 0]),
+      _Array$from$reduce2 = _slicedToArray(_Array$from$reduce, 2),
+      _children = _Array$from$reduce2[0],
+      end = _Array$from$reduce2[1];
+    _children.push(children.slice(end));
+    return _children;
+  }, [capture, children, theme, classNames]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames[HighlightClassToken.Highlight]
+  }, _children);
+};
+var highlight = /*#__PURE__*/memo(Highlight);
+
+export { highlight as default };

package/dist/components/highlight/types.d.ts

@@ -8,4 +8,9 @@ export type HighlightProps = {
      * children
      */
     children: string;
+    /**
+     * @description
+     * capture
+     */
+    capture?: string | RegExp;
 };

package/dist/components/layout/header.js

@@ -8,6 +8,8 @@ import clsx from 'clsx';
 var styles = {
   header: function header(props) {
     return [{
+      display: "musae-78zum5",
+      alignItems: "musae-6s0dn4",
       height: "musae-b4kbli",
       paddingInline: "musae-1mmg125",
       paddingStart: null,
@@ -18,8 +20,6 @@ var styles = {
       position: "musae-7wzq59",
       top: "musae-13vifvy",
       zIndex: "musae-1ac462h",
-      display: "musae-78zum5",
-      alignItems: "musae-6s0dn4",
       backgroundColor: "musae-q1mx2j",
       $$css: true
     }, {

package/dist/components/layout/sider.d.ts

@@ -1,4 +1,4 @@
-import { SiderProps } from "./types";
+import type { SiderProps } from "./types";
 import React from "react";
-declare const Sider: (props: SiderProps) => React.JSX.Element;
+declare const Sider: ({ style, children, className }: SiderProps) => React.JSX.Element;
 export default Sider;

package/dist/components/layout/sider.js

@@ -1,18 +1,16 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { Grid } from '../grid/index.js';
 import React from 'react';
-import clsx from 'clsx';
 
-var Sider = function Sider(props) {
-  var styled = {
-    className: "musae-1r05exa musae-7wzq59 musae-kwake1"
-  };
+var Sider = function Sider(_ref) {
+  var style = _ref.style,
+    children = _ref.children,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(Grid.Col, {
-    style: _objectSpread(_objectSpread({}, styled.style), props.style),
-    className: clsx(props.className, styled.className),
+    style: style,
+    className: className,
     span: 5,
     as: "aside"
-  }, props.children);
+  }, children);
 };
 
 export { Sider as default };

package/dist/components/menu/context.js

@@ -12,7 +12,6 @@ var Context = /*#__PURE__*/createContext({
   click: function click() {},
   toggle: function toggle() {},
   collect: function collect() {},
-  variant: "filled",
   size: "medium"
 });