musae 0.2.26 → 0.3.0

package/dist/components/avatar/avatar.cjs

@@ -0,0 +1,179 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var context = require('./context.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var theme = require('../theme/theme.cjs');
+var relax = require('@aiszlab/relax');
+var componentToken = require('../../utils/component-token.cjs');
+
+var _excluded = ["src", "alt", "shape", "size", "className", "style"];
+var styles = {
+  avatar: function avatar(props) {
+    return [{
+      borderWidth: "musaex-bupo1m",
+      borderInlineWidth: null,
+      borderInlineStartWidth: null,
+      borderLeftWidth: null,
+      borderInlineEndWidth: null,
+      borderRightWidth: null,
+      borderBlockWidth: null,
+      borderTopWidth: null,
+      borderBottomWidth: null,
+      borderStyle: "musaex-1y0btm7",
+      borderInlineStyle: null,
+      borderInlineStartStyle: null,
+      borderLeftStyle: null,
+      borderInlineEndStyle: null,
+      borderRightStyle: null,
+      borderBlockStyle: null,
+      borderTopStyle: null,
+      borderBottomStyle: null,
+      borderColor: "musaex-9r1u3d",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
+      boxSizing: "musaex-9f619",
+      display: "musaex-3nfvp2",
+      backgroundColor: "musaex-q1mx2j",
+      color: "musaex-19dipnz",
+      alignItems: "musaex-6s0dn4",
+      justifyContent: "musaex-l56j7k",
+      userSelect: "musaex-87ps6o",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  },
+  image: {
+    objectFit: "musaex-l1xv1r",
+    objectPosition: "musaex-1s8dy9j",
+    borderRadius: "musaex-1pjcqnp",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  },
+  overlapping: function overlapping(props) {
+    return [{
+      ":not(:first-child)_marginInlineStart": "musaex-3d5u6r",
+      ":not(:first-child)_marginLeft": null,
+      ":not(:first-child)_marginRight": null,
+      borderColor: "musaex-eqt46j",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
+      $$css: true
+    }, {
+      "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }];
+  },
+  circular: {
+    borderRadius: "musaex-z7qqyb",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  },
+  squared: {
+    borderRadius: "musaex-ok3b7d",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  },
+  small: {
+    width: "musaex-6hukdw",
+    height: "musaex-q5eura",
+    $$css: true
+  },
+  medium: {
+    width: "musaex-zx3e9c",
+    height: "musaex-1dql3xx",
+    $$css: true
+  },
+  large: {
+    width: "musaex-1opwmbq",
+    height: "musaex-19ak84k",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * `Avatar`
+ */
+var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _group$size, _group$shape;
+  var src = _ref.src,
+    alt = _ref.alt,
+    _ref$shape = _ref.shape,
+    _shape = _ref$shape === void 0 ? "circular" : _ref$shape,
+    _ref$size = _ref.size,
+    _size = _ref$size === void 0 ? "medium" : _ref$size,
+    className$1 = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme$1 = hooks.useTheme();
+  var group = React.useContext(context.Context);
+  var isInGroup = !!group;
+  var size = (_group$size = group === null || group === void 0 ? void 0 : group.size) !== null && _group$size !== void 0 ? _group$size : _size;
+  var shape = (_group$shape = group === null || group === void 0 ? void 0 : group.shape) !== null && _group$shape !== void 0 ? _group$shape : _shape;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Avatar);
+  var loadStatus = relax.useImageLoader({
+    src: src
+  });
+  var styled = {
+    avatar: stylex.default.props(theme.typography.label[size], styles.avatar({
+      backgroundColor: theme$1.colors[colors.ColorToken.PrimaryContainer],
+      color: theme$1.colors[colors.ColorToken.Primary]
+    }), styles[size], styles[shape], isInGroup && styles.overlapping({
+      outlineColor: theme$1.colors[colors.ColorToken.OnPrimary]
+    })),
+    image: stylex.default.props(styles.image, styles[size])
+  };
+  return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props), {}, {
+    className: relax.clsx(classNames[className.AvatarClassToken.Avatar], className$1, styled.avatar.className),
+    style: _objectSpread(_objectSpread({}, styled.avatar.style), style),
+    ref: ref
+  }), loadStatus === "loaded" ? (/*#__PURE__*/React.createElement("img", {
+    draggable: false,
+    src: src,
+    alt: alt,
+    className: styled.image.className,
+    style: styled.image.style
+  })) : alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase());
+});
+
+exports.default = Avatar;

package/dist/components/avatar/{avatar.js → avatar.mjs}

@@ -1,15 +1,15 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useContext } from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { Context } from './context.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { AvatarClassToken } from '../../utils/class-name.js';
-import { typography } from '../theme/theme.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { Context } from './context.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { AvatarClassToken } from '../../utils/class-name.mjs';
+import { typography } from '../theme/theme.mjs';
 import { useImageLoader, clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style"];
 var styles = {
@@ -142,7 +142,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _size = _ref$size === void 0 ? "medium" : _ref$size,
     className = _ref.className,
     style = _ref.style,
-    props$1 = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var group = useContext(Context);
   var isInGroup = !!group;
@@ -153,15 +153,15 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     src: src
   });
   var styled = {
-    avatar: props(typography.label[size], styles.avatar({
+    avatar: _stylex.props(typography.label[size], styles.avatar({
       backgroundColor: theme.colors[ColorToken.PrimaryContainer],
       color: theme.colors[ColorToken.Primary]
     }), styles[size], styles[shape], isInGroup && styles.overlapping({
       outlineColor: theme.colors[ColorToken.OnPrimary]
     })),
-    image: props(styles.image, styles[size])
+    image: _stylex.props(styles.image, styles[size])
   };
-  return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props$1), {}, {
+  return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props), {}, {
     className: clsx(classNames[AvatarClassToken.Avatar], className, styled.avatar.className),
     style: _objectSpread(_objectSpread({}, styled.avatar.style), style),
     ref: ref

package/dist/components/avatar/context.cjs

@@ -0,0 +1,9 @@
+var React = require('react');
+
+/**
+ * @description
+ * context
+ */
+var Context = /*#__PURE__*/React.createContext(null);
+
+exports.Context = Context;

package/dist/components/avatar/group.cjs

@@ -0,0 +1,67 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var context = require('./context.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var popover = require('../popover/popover.cjs');
+var avatar = require('./avatar.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var relax = require('@aiszlab/relax');
+
+var _Group = function Group(_ref) {
+  var _children = _ref.children,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "circular" : _ref$shape,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 3 : _ref$max;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Avatar);
+  var styled = {
+    className: "musaex-3nfvp2 musaex-87ps6o"
+  };
+  var children = React.useMemo(function () {
+    var _Children$toArray$red = React.Children.toArray(_children).reduce(function (prev, child, index) {
+        // @ts-ignore
+        var element = /*#__PURE__*/React.cloneElement(child, {
+          key: "avatars-".concat(index)
+        });
+        // great than max, hide current node
+        if (index >= max) {
+          prev[1].push(element);
+        } else {
+          prev[0].push(element);
+        }
+        return prev;
+      }, [[], []]),
+      _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.default, {
+        content: /*#__PURE__*/React.createElement(_Group, {
+          max: Infinity
+        }, hidden),
+        key: "avatars-hidden",
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(avatar.default, {
+        alt: "+".concat(hidden.length)
+      })));
+    }
+    return visible;
+  }, [_children, max]);
+  return /*#__PURE__*/React.createElement(context.Context.Provider, {
+    value: {
+      shape: shape,
+      size: size
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.AvatarClassToken.Group], styled.className),
+    style: styled.style
+  }, children));
+};
+
+exports.default = _Group;

package/dist/components/avatar/{group.js → group.mjs}

@@ -1,11 +1,11 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo, Children, cloneElement } from 'react';
-import { Context } from './context.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { AvatarClassToken } from '../../utils/class-name.js';
-import Popover from '../popover/popover.js';
-import Avatar from './avatar.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { Context } from './context.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { AvatarClassToken } from '../../utils/class-name.mjs';
+import Popover from '../popover/popover.mjs';
+import Avatar from './avatar.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 import { clsx } from '@aiszlab/relax';
 
 var _Group = function Group(_ref) {

package/dist/components/avatar/index.cjs

@@ -0,0 +1,8 @@
+var avatar = require('./avatar.cjs');
+var group = require('./group.cjs');
+
+var Avatar = Object.assign(avatar.default, {
+  Group: group.default
+});
+
+exports.Avatar = Avatar;

package/dist/components/avatar/{index.js → index.mjs}

@@ -1,5 +1,5 @@
-import Avatar$1 from './avatar.js';
-import _Group from './group.js';
+import Avatar$1 from './avatar.mjs';
+import _Group from './group.mjs';
 
 var Avatar = Object.assign(Avatar$1, {
   Group: _Group

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

@@ -1,5 +1,5 @@
 import type { ReactNode, RefAttributes } from "react";
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 type Size = "small" | "medium" | "large";
 type Shape = "circular" | "squared";
 /**

package/dist/components/badge/badge.cjs

@@ -0,0 +1,120 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var theme = require('../theme/theme.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var relax = require('@aiszlab/relax');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  badge: {
+    "default": {
+      position: "musaex-1n2onr6",
+      display: "musaex-3nfvp2",
+      $$css: true
+    }
+  },
+  tail: {
+    "default": function _default(props) {
+      return [{
+        position: "musaex-10l6tqk",
+        borderRadius: "musaex-z7qqyb",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        minWidth: "musaex-wgl7p8",
+        textAlign: "musaex-2b8uid",
+        boxShadow: "musaex-igitpm",
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--boxShadow": "0 0 0 ".concat(tokens_stylex.sizes.smallest, " ").concat(props.color) != null ? "0 0 0 ".concat(tokens_stylex.sizes.smallest, " ").concat(props.color) : "initial",
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    dot: {
+      minWidth: null,
+      width: "musaex-1ankuk0",
+      height: "musaex-drj9st",
+      $$css: true
+    },
+    invisible: {
+      display: "musaex-1s85apg",
+      $$css: true
+    },
+    "top-right": {
+      top: "musaex-13vifvy",
+      right: "musaex-3m8u43",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musaex-rycbv3",
+      $$css: true
+    },
+    "top-left": {
+      top: "musaex-13vifvy",
+      left: "musaex-u96u03",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musaex-1i3z1r0",
+      $$css: true
+    },
+    "bottom-right": {
+      bottom: "musaex-1ey2m1c",
+      right: "musaex-3m8u43",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musaex-1vfo23u",
+      $$css: true
+    },
+    "bottom-left": {
+      bottom: "musaex-1ey2m1c",
+      left: "musaex-u96u03",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musaex-itovws",
+      $$css: true
+    }
+  }
+};
+var Badge = function Badge(_ref) {
+  var className$1 = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    content = _ref.content,
+    _ref$invisible = _ref.invisible,
+    invisible = _ref$invisible === void 0 ? false : _ref$invisible,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top-right" : _ref$placement;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Badge);
+  var theme$1 = hooks.useTheme();
+  var isDot = relax.isVoid(content);
+  var styled = {
+    badge: stylex.default.props(styles.badge["default"]),
+    tail: stylex.default.props(styles.tail["default"]({
+      backgroundColor: theme$1.colors[colors.ColorToken.Primary],
+      color: theme$1.colors[colors.ColorToken.OnPrimary]
+    }), isDot && styles.tail.dot, theme.typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.BadgeClassToken.Badge], className$1, styled.badge.className),
+    style: _objectSpread(_objectSpread({}, styled.badge.style), style)
+  }, children, /*#__PURE__*/React.createElement("span", {
+    className: relax.clsx(classNames[className.BadgeClassToken.Tail], styled.tail.className),
+    style: styled.tail.style
+  }, content));
+};
+
+exports.default = Badge;

package/dist/components/badge/{badge.js → badge.mjs}

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { BadgeClassToken } 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 { typography } from '../theme/theme.js';
-import { sizes } from '../theme/tokens.stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { BadgeClassToken } from '../../utils/class-name.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { typography } from '../theme/theme.mjs';
+import { sizes } from '../theme/tokens.stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { isVoid, clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   badge: {
@@ -114,6 +114,5 @@ var Badge = function Badge(_ref) {
     style: styled.tail.style
   }, content));
 };
-var Badge$1 = Badge;
 
-export { Badge$1 as default };
+export { Badge as default };

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 type Placement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
 /**
  * @description

package/dist/components/bench/bench.cjs

@@ -0,0 +1,164 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var index = require('../layout/index.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var divider = require('../divider/divider.cjs');
+var hooks$1 = require('./hooks.cjs');
+var menu = require('../menu/menu.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var theme = require('../theme/theme.cjs');
+var relax = require('@aiszlab/relax');
+
+var Header = index.Layout.Header,
+  Main = index.Layout.Main,
+  Sider = index.Layout.Sider;
+var styles = {
+  bench: {
+    "default": {
+      $$css: true
+    },
+    sider: function sider(props) {
+      return [{
+        borderRightWidth: "musaex-1xs0jsv",
+        borderInlineStartWidth: null,
+        borderInlineEndWidth: null,
+        borderRightStyle: "musaex-32b0ac",
+        borderInlineStartStyle: null,
+        borderInlineEndStyle: null,
+        borderRightColor: "musaex-104k1kx",
+        borderInlineStartColor: null,
+        borderInlineEndColor: null,
+        paddingInline: "musaex-1dhq86w",
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        paddingBottom: "musaex-igxgg9",
+        position: "musaex-7wzq59",
+        height: "musaex-bmf846",
+        top: "musaex-98oeat",
+        overflowY: "musaex-10wlt62 musaex-r8ctv5",
+        $$css: true
+      }, {
+        "--borderRightColor": props.outlineColor != null ? props.outlineColor : "initial"
+      }];
+    },
+    main: {
+      $$css: true
+    }
+  },
+  header: {
+    "default": function _default(props) {
+      return [{
+        gap: "musaex-1lsrmdg",
+        rowGap: null,
+        columnGap: null,
+        boxShadow: "musaex-igitpm",
+        $$css: true
+      }, {
+        "--boxShadow": tokens_stylex.elevations[props.elevation] != null ? tokens_stylex.elevations[props.elevation] : "initial"
+      }];
+    },
+    navigation: {
+      marginLeft: "musaex-9x39mp",
+      marginInlineStart: null,
+      marginInlineEnd: null,
+      marginRight: "musaex-ack27t",
+      height: "musaex-1xj1dsn",
+      $$css: true
+    },
+    divider: {
+      height: "musaex-q5eura",
+      $$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,
+    _ref$elevation = _ref.elevation,
+    elevation = _ref$elevation === void 0 ? "xsmall" : _ref$elevation,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? "mix" : _ref$layout;
+  var theme$1 = hooks.useTheme();
+  var _logo = hooks$1.useLogo(logo);
+  var _useNavigations = hooks$1.useNavigations({
+      navigations: navigations,
+      onNavigate: onNavigate,
+      location: location,
+      layout: layout
+    }),
+    navigate = _useNavigations.navigate,
+    topMenuItems = _useNavigations.topMenuItems,
+    sideMenuItems = _useNavigations.sideMenuItems,
+    selectedKeys = _useNavigations.selectedKeys;
+  var styled = {
+    bench: stylex.default.props(styles.bench["default"]),
+    header: stylex.default.props(styles.header["default"]({
+      elevation: elevation
+    })),
+    main: stylex.default.props(styles.bench.main),
+    sider: stylex.default.props(styles.bench.sider({
+      outlineColor: theme$1.colors[colors.ColorToken.OutlineVariant]
+    })),
+    title: stylex.default.props(theme.typography.title.large),
+    divider: stylex.default.props(styles.header.divider),
+    headerNavigation: stylex.default.props(styles.header.navigation)
+  };
+  return /*#__PURE__*/React.createElement(index.Layout, {
+    className: relax.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.default, {
+    orientation: "vertical"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: styled.title.className,
+    style: styled.title.style
+  }, title), /*#__PURE__*/React.createElement(menu.default, _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.default, _objectSpread({
+    items: sideMenuItems,
+    onClick: navigate,
+    defaultExpandedKeys: defaultExpandedKeys
+  }, !!selectedKeys[1] && {
+    selectedKeys: [selectedKeys[1]]
+  })))), /*#__PURE__*/React.createElement(Main, {
+    className: relax.clsx(mainClassName, styled.main.className),
+    style: styled.main.style
+  }, children));
+};
+
+exports.default = Bench;