@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/multi-content-module/__figma__/MultiContentModule.figma.js

@@ -0,0 +1,39 @@
+const _excluded = ["pictogram"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { MultiContentModule } from '../MultiContentModule';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(MultiContentModule, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14727%3A26365', {
+  imports: ["import { MultiContentModule } from '@coinbase/cds-web/multi-content-module/MultiContentModule';"],
+  props: {
+    title: figma.string('headline'),
+    description: figma.boolean('show description', {
+      true: figma.string('description'),
+      false: undefined
+    }),
+    pictogram: figma.instance('↳ illustration type').getProps(),
+    children: figma.instance('↳ content type'),
+    action: figma.enum('action type', {
+      button: figma.instance('action type'),
+      'button group': figma.instance('action type'),
+      'button + secondary content': figma.instance('action type'),
+      none: undefined
+    })
+  },
+  example: _ref => {
+    let {
+        pictogram
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(MultiContentModule, _objectSpread({
+      pictogram: pictogram.name
+    }, props));
+  }
+});

package/esm/navigation/NavLink.css

@@ -0,0 +1 @@
+@layer cds{.navLinkCss-n1ricjms{padding-top:var(--space-3);padding-bottom:var(--space-3);color:var(--color-fg);border-bottom:2px solid var(--color-transparent);}.navLinkCss-n1ricjms:hover,.navLinkCss-n1ricjms:active{color:var(--color-fgPrimary);}.navLinkCss-n1ricjms:active{opacity:0.86;}.navLinkCss-n1ricjms[data-active='true']{border-bottom-color:var(--color-fgPrimary);}.navLinkCss-n1ricjms[data-active='true']:hover{color:var(--color-fg);}}

package/esm/navigation/NavLink.js

@@ -0,0 +1,29 @@
+const _excluded = ["active", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo } from 'react';
+import { cx } from '../cx';
+import { Link } from '../typography/Link';
+import { jsx as _jsx } from "react/jsx-runtime";
+const navLinkCss = "navLinkCss-n1ricjms";
+export const NavLink = /*#__PURE__*/memo(_ref => {
+  let {
+      active,
+      className: customClassName
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Link, _objectSpread({
+    className: cx(navLinkCss, customClassName),
+    color: "currentColor",
+    "data-active": active,
+    font: "label1",
+    tabIndex: 0,
+    underline: false
+  }, props));
+});
+import "./NavLink.css";

package/esm/navigation/NavigationBar.js

@@ -0,0 +1,73 @@
+import React, { memo, useMemo } from 'react';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { Collapsible } from '../collapsible/Collapsible';
+import { HStack, VStack } from '../layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NavigationBar = /*#__PURE__*/memo(_ref => {
+  let {
+    start,
+    children,
+    end,
+    bottom,
+    accessibilityLabel = 'main navigation',
+    paddingX = 2,
+    paddingTop = 2,
+    paddingBottom = bottom ? undefined : 2,
+    dangerouslyDisableOverflowHidden,
+    columnGap,
+    rowGap = 1
+  } = _ref;
+  const prevStart = usePreviousValue(start);
+  const startNode = useMemo(() => start || prevStart, [start, prevStart]);
+  return /*#__PURE__*/_jsxs(VStack, {
+    borderedBottom: true,
+    accessibilityLabel: accessibilityLabel,
+    as: "nav",
+    background: "bg",
+    gap: rowGap,
+    left: 0,
+    paddingBottom: paddingBottom,
+    paddingTop: paddingTop,
+    paddingX: paddingX,
+    position: "sticky",
+    right: 0,
+    top: 0,
+    width: "100%",
+    zIndex: zIndex.navigation,
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: columnGap !== null && columnGap !== void 0 ? columnGap : {
+        base: 2,
+        phone: 1
+      },
+      justifyContent: "space-between",
+      overflow: "auto",
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        flexGrow: 1,
+        flexShrink: 0,
+        justifyContent: "flex-start",
+        children: [/*#__PURE__*/_jsx(Collapsible, {
+          collapsed: !start,
+          dangerouslyDisableOverflowHidden: dangerouslyDisableOverflowHidden,
+          direction: "horizontal",
+          children: /*#__PURE__*/_jsx(HStack, {
+            alignItems: "center",
+            paddingEnd: columnGap !== null && columnGap !== void 0 ? columnGap : {
+              base: 2,
+              phone: 1
+            },
+            children: startNode
+          })
+        }), /*#__PURE__*/_jsx(HStack, {
+          alignItems: "center",
+          flexGrow: 1,
+          gap: 1,
+          children: children
+        })]
+      }), end]
+    }), bottom]
+  });
+});
+NavigationBar.displayName = 'NavigationBar';

package/esm/navigation/NavigationTitle.js

@@ -0,0 +1,24 @@
+const _excluded = ["as", "font"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const navigationTitleDefaultElement = 'h1';
+export const NavigationTitle = /*#__PURE__*/memo(_ref => {
+  let {
+      as = navigationTitleDefaultElement,
+      font = 'title1'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Text, _objectSpread({
+    as: as,
+    font: font
+  }, props));
+});
+NavigationTitle.displayName = 'NavigationTitle';

package/esm/navigation/NavigationTitleSelect.js

@@ -0,0 +1,81 @@
+const _excluded = ["options", "value", "onChange", "accessibilityLabel", "color", "font", "as"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { SelectOption } from '../controls/SelectOption';
+import { Dropdown } from '../dropdown/Dropdown';
+import { useA11yControlledVisibility } from '../hooks/useA11yControlledVisibility';
+import { Icon } from '../icons';
+import { Pressable } from '../system';
+import { Text } from '../typography/Text';
+import { navigationTitleDefaultElement } from './NavigationTitle';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NavigationTitleSelect = /*#__PURE__*/memo(_ref => {
+  let {
+      options,
+      value,
+      onChange,
+      accessibilityLabel,
+      color = 'fg',
+      font = 'title1',
+      as = navigationTitleDefaultElement
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [visible, setVisible] = useState(false);
+  const dropdownRef = useRef(null);
+  const {
+    triggerAccessibilityProps,
+    controlledElementAccessibilityProps
+  } = useA11yControlledVisibility(visible, {
+    accessibilityLabel: accessibilityLabel,
+    hasPopupType: 'menu'
+  });
+  const handleCloseMenu = useCallback(() => {
+    setVisible(false);
+  }, []);
+  const handleOpenMenu = useCallback(() => {
+    setVisible(true);
+  }, []);
+  const dropdownContent = useMemo(() => {
+    return options.map(option => /*#__PURE__*/_jsx(SelectOption, {
+      title: option.label,
+      value: option.id
+    }, option.id));
+  }, [options]);
+  const label = useMemo(() => {
+    var _options$find;
+    return (_options$find = options.find(option => option.id === value)) === null || _options$find === void 0 ? void 0 : _options$find.label;
+  }, [options, value]);
+  return /*#__PURE__*/_jsx(Dropdown, {
+    ref: dropdownRef,
+    content: dropdownContent,
+    controlledElementAccessibilityProps: controlledElementAccessibilityProps,
+    onChange: onChange,
+    onCloseMenu: handleCloseMenu,
+    onOpenMenu: handleOpenMenu,
+    children: /*#__PURE__*/_jsxs(Pressable, _objectSpread(_objectSpread({
+      alignItems: "center",
+      "aria-label": accessibilityLabel,
+      background: "transparent",
+      gap: 1
+    }, triggerAccessibilityProps), {}, {
+      children: [typeof label === 'string' ? /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+        as: as,
+        color: color,
+        font: font
+      }, props), {}, {
+        children: label
+      })) : label, /*#__PURE__*/_jsx(Icon, {
+        color: color,
+        name: "caretDown",
+        size: "s"
+      })]
+    }))
+  });
+});
+NavigationTitleSelect.displayName = 'NavigationTitleSelect';

package/esm/navigation/Sidebar.css

@@ -0,0 +1,3 @@
+@layer cds{.breakpointObserverCss-b1iahaq0{width:100%;position:fixed;visibility:hidden;pointer-events:none;height:0;}
+.liCss-lyc8w2b{list-style:none;}
+.ulCss-uvqky7z{margin-top:0;margin-bottom:0;padding:0;}}

package/esm/navigation/Sidebar.js

@@ -0,0 +1,122 @@
+const _excluded = ["logo", "children", "collapsed", "autoCollapse", "testID", "renderEnd", "accessibilityLabel", "width", "variant"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { Children, memo, useMemo } from 'react';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { useDimensions } from '../hooks/useDimensions';
+import { Box, VStack } from '../layout';
+import { breakpoints } from '../styles/media';
+import { SidebarProvider } from './SidebarContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const sidebarDefaultElement = 'nav';
+// STYLES
+const breakpointObserverCss = "breakpointObserverCss-b1iahaq0";
+const liCss = "liCss-lyc8w2b";
+const ulCss = "ulCss-uvqky7z";
+const sidebarWidth = {
+  default: {
+    collapsed: 87,
+    expanded: 240
+  },
+  condensed: 88
+};
+const breakpointConfig = {
+  breakpoints: {
+    collapsed: 0,
+    expanded: breakpoints.tablet
+  },
+  updateOnBreakpointChange: true
+};
+export const Sidebar = /*#__PURE__*/memo(_ref => {
+  let {
+      logo,
+      children,
+      collapsed,
+      autoCollapse,
+      testID,
+      renderEnd,
+      accessibilityLabel = 'Sidebar',
+      width,
+      variant = 'default'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    ref,
+    currentBreakpoint
+  } = useDimensions(breakpointConfig);
+  /**
+   * Calculates collapsed state which will be passed to the Sidebar Context Provider
+   * Priority is as follows: First, respect what is set explicitly on SidebarItem,
+   * Next, do what is set explicitly on Sidebar. And finally if autoCollapse is
+   * set and we're within or outside the defined breakpoint, collapse or expand
+   * */
+  const computedCollapse = collapsed !== null && collapsed !== void 0 ? collapsed : autoCollapse ? currentBreakpoint === 'collapsed' : false;
+  const defaultWidth = computedCollapse ? sidebarWidth.default.collapsed : sidebarWidth.default.expanded;
+  const computedWidth = variant === 'default' ? defaultWidth : sidebarWidth.condensed;
+  const sidebarContext = useMemo(() => ({
+    collapsed: computedCollapse,
+    variant
+  }), [computedCollapse, variant]);
+  const liWrappedChildren = useMemo(() => Children.map(children, child => /*#__PURE__*/_jsx("li", {
+    className: liCss,
+    children: child
+  })), [children]);
+
+  // only center logo and end content on condensed sidebar
+  const logoContainerProps = useMemo(() => ({
+    paddingTop: 1,
+    paddingStart: variant === 'default' ? 1 : 0,
+    paddingBottom: 4,
+    alignSelf: variant === 'default' ? undefined : 'center',
+    alignItems: variant === 'default' ? undefined : 'center'
+  }), [variant]);
+  return /*#__PURE__*/_jsxs(SidebarProvider, {
+    value: sidebarContext,
+    children: [/*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+      borderedEnd: true,
+      accessibilityLabel: accessibilityLabel,
+      as: sidebarDefaultElement,
+      background: "bg",
+      bottom: "0",
+      height: "100%",
+      justifyContent: "space-between",
+      left: "0",
+      minWidth: computedWidth,
+      paddingX: variant === 'default' ? 2 : 1.5,
+      paddingY: 2,
+      position: "sticky",
+      testID: testID,
+      top: "0",
+      width: width !== null && width !== void 0 ? width : computedWidth,
+      zIndex: zIndex.navigation
+    }, props), {}, {
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        children: [logo && /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({}, logoContainerProps), {}, {
+          testID: "sidebar-logo",
+          children: typeof logo === 'function' ? logo(!!computedCollapse) : logo
+        })), /*#__PURE__*/_jsx(VStack, {
+          as: "ul",
+          className: ulCss,
+          gap: 0.5,
+          marginStart: variant === 'default' ? -0.5 : undefined,
+          children: liWrappedChildren
+        })]
+      }), !!renderEnd && /*#__PURE__*/_jsx(Box, {
+        alignSelf: variant === 'default' ? 'flex-start' : 'center',
+        paddingTop: 4,
+        testID: "sidebar-end",
+        children: renderEnd(!!computedCollapse)
+      })]
+    })), /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      className: breakpointObserverCss
+    })]
+  });
+});
+Sidebar.displayName = 'Sidebar';
+import "./Sidebar.css";

package/esm/navigation/SidebarContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const SidebarContext = /*#__PURE__*/createContext({
+  collapsed: false,
+  variant: 'default'
+});
+export const SidebarProvider = SidebarContext.Provider;
+export const useSidebarContext = () => {
+  const context = useContext(SidebarContext);
+  return context;
+};

package/esm/navigation/SidebarItem.css

@@ -0,0 +1 @@
+@layer cds{.pressableCss-p1t38snu{display:inline-block;padding:0;}}

package/esm/navigation/SidebarItem.js

@@ -0,0 +1,87 @@
+const _excluded = ["icon", "title", "collapsed", "active", "tooltipContent", "disablePortal", "borderRadius", "accessibilityLabel", "Component"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { Icon } from '../icons';
+import { Box } from '../layout';
+import { Tooltip } from '../overlays/tooltip/Tooltip';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography';
+import { useSidebarContext } from './SidebarContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pressableCss = "pressableCss-p1t38snu";
+export const SidebarItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      icon,
+      title,
+      collapsed,
+      active,
+      tooltipContent,
+      disablePortal,
+      borderRadius,
+      accessibilityLabel = title,
+      Component
+    } = _ref,
+    pressableProps = _objectWithoutProperties(_ref, _excluded);
+  const color = active ? 'fgPrimary' : 'fg';
+  const {
+    collapsed: computedCollapsed,
+    variant
+  } = useSidebarContext();
+  const isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : computedCollapsed;
+  const isDefaultVariant = variant === 'default';
+  const defaultComponent = useMemo(() => /*#__PURE__*/_jsxs(Box, {
+    alignItems: "center",
+    flexDirection: isDefaultVariant ? 'row' : 'column',
+    gap: isDefaultVariant ? 2 : 0.5,
+    paddingX: isDefaultVariant ? 2 : 0.5,
+    paddingY: isDefaultVariant ? 2 : 1,
+    testID: "sidebar-item-".concat(variant),
+    children: [/*#__PURE__*/_jsx(Icon, {
+      active: active,
+      color: color,
+      name: icon,
+      size: "m"
+    }), (variant === 'condensed' || !isCollapsed) && /*#__PURE__*/_jsx(Text, {
+      color: color,
+      font: isDefaultVariant ? 'headline' : 'label1',
+      fontSize: isDefaultVariant ? 'inherit' : 'legal',
+      numberOfLines: isDefaultVariant ? undefined : 1,
+      overflow: isDefaultVariant ? undefined : 'break',
+      textAlign: isDefaultVariant ? 'start' : 'center',
+      children: title
+    })]
+  }), [active, color, icon, isCollapsed, isDefaultVariant, title, variant]);
+  const content = useMemo(() => /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    className: pressableCss
+  }, pressableProps), {}, {
+    accessibilityLabel: isCollapsed ? accessibilityLabel : undefined,
+    "aria-current": active ? 'page' : undefined,
+    background: "bgPrimaryWash",
+    borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : isDefaultVariant ? 1000 : 400,
+    borderWidth: isDefaultVariant ? undefined : 0,
+    transparentWhileInactive: !active,
+    width: "100%",
+    children: Component ? /*#__PURE__*/_jsx(Component, {
+      active: active,
+      color: color,
+      icon: icon,
+      isCollapsed: isCollapsed,
+      title: title
+    }) : defaultComponent
+  })), [ref, pressableProps, isCollapsed, accessibilityLabel, active, borderRadius, isDefaultVariant, Component, color, icon, title, defaultComponent]);
+  return tooltipContent && isCollapsed ? /*#__PURE__*/_jsx(Tooltip, {
+    content: tooltipContent,
+    disablePortal: disablePortal,
+    placement: "right",
+    children: content
+  }) : content;
+}));
+SidebarItem.displayName = 'SidebarItem';
+import "./SidebarItem.css";

package/esm/navigation/SidebarMoreMenu.js

@@ -0,0 +1,85 @@
+const _excluded = ["children", "active", "onClick", "value", "tooltipContent", "disablePortal", "triggerTitle", "Component", "borderRadius"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { sidebarMenuMaxWidth, sidebarMenuMinWidth } from '@coinbase/cds-common/tokens/menu';
+import { Dropdown } from '../dropdown';
+import { useA11yControlledVisibility } from '../hooks/useA11yControlledVisibility';
+import { Tooltip } from '../overlays/tooltip/Tooltip';
+import { useSidebarContext } from './SidebarContext';
+import { SidebarItem } from './SidebarItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultContentPosition = {
+  gap: 3,
+  placement: 'right-start'
+};
+export const SidebarMoreMenu = /*#__PURE__*/memo(function SidebarMoreMenu(_ref) {
+  let {
+      children,
+      active,
+      onClick,
+      value,
+      tooltipContent,
+      disablePortal,
+      triggerTitle = 'More',
+      Component,
+      borderRadius
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [visible, setVisible] = useState(false);
+  const {
+    collapsed
+  } = useSidebarContext();
+  const triggerRef = useRef(null);
+  const {
+    triggerAccessibilityProps,
+    controlledElementAccessibilityProps
+  } = useA11yControlledVisibility(visible, {
+    accessibilityLabel: triggerTitle,
+    hasPopupType: 'menu'
+  });
+  const baseTrigger = useMemo(() => /*#__PURE__*/_jsx(SidebarItem, _objectSpread({
+    ref: triggerRef,
+    Component: Component,
+    active: active,
+    borderRadius: borderRadius,
+    icon: "moreVertical",
+    onClick: onClick,
+    testID: "sidebar-more-menu-trigger",
+    title: triggerTitle
+  }, triggerAccessibilityProps)), [onClick, active, triggerTitle, triggerAccessibilityProps, Component, borderRadius]);
+  const trigger = useMemo(() => {
+    return collapsed && tooltipContent ? /*#__PURE__*/_jsx(Tooltip, {
+      content: tooltipContent,
+      disablePortal: disablePortal,
+      placement: "right",
+      children: baseTrigger
+    }) : baseTrigger;
+  }, [collapsed, tooltipContent, disablePortal, baseTrigger]);
+  const handleCloseMenu = useCallback(() => {
+    var _triggerRef$current;
+    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+    setVisible(false);
+  }, []);
+  const handleOpenMenu = useCallback(() => {
+    setVisible(true);
+  }, []);
+  return /*#__PURE__*/_jsx(Dropdown, _objectSpread(_objectSpread({
+    content: children,
+    contentPosition: defaultContentPosition,
+    controlledElementAccessibilityProps: controlledElementAccessibilityProps,
+    disablePortal: disablePortal,
+    maxWidth: sidebarMenuMaxWidth,
+    minWidth: sidebarMenuMinWidth,
+    onCloseMenu: handleCloseMenu,
+    onOpenMenu: handleOpenMenu,
+    value: value
+  }, props), {}, {
+    children: trigger
+  }));
+});

package/esm/navigation/__figma__/NavLink.figma.js

@@ -0,0 +1,58 @@
+const _excluded = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { HStack } from '../../layout';
+import { NavLink } from '../NavLink';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(NavLink, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=240-16872&m=dev', {
+  imports: ["import { NavLink } from '@coinbase/cds-web/navigation/NavLink';"],
+  props: {
+    children: figma.string('navLink string'),
+    active: figma.enum('state', {
+      active: true
+    })
+    // state: figma.enum("state", {
+    //   active: "active",
+    //   default: "default",
+    //   focused: "focused",
+    //   hover: "hover",
+    //   pressed: "pressed",
+    // }),
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(NavLink, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
+  }
+});
+figma.connect(NavLink, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=283-19790&m=dev', {
+  imports: ["import { NavLink } from '@coinbase/cds-web/navigation/NavLink';", "import { HStack } from '@coinbase/cds-web/layout/HStack';"],
+  example: () => /*#__PURE__*/_jsxs(HStack, {
+    gap: 4,
+    children: [/*#__PURE__*/_jsx(NavLink, {
+      active: true,
+      children: "NavLink"
+    }), /*#__PURE__*/_jsx(NavLink, {
+      children: "NavLink"
+    }), /*#__PURE__*/_jsx(NavLink, {
+      children: "NavLink"
+    }), /*#__PURE__*/_jsx(NavLink, {
+      children: "NavLink"
+    }), /*#__PURE__*/_jsx(NavLink, {
+      children: "NavLink"
+    }), /*#__PURE__*/_jsx(NavLink, {
+      children: "NavLink"
+    })]
+  })
+});