@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/hooks/useBreakpoints.js

@@ -0,0 +1,79 @@
+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); }
+import { useCallback, useContext, useRef, useSyncExternalStore } from 'react';
+import { media } from '../styles/media';
+import { MediaQueryContext } from '../system/MediaQueryProvider';
+const booleanDeviceNames = {
+  phone: 'isPhone',
+  phonePortrait: 'isPhonePortrait',
+  phoneLandscape: 'isPhoneLandscape',
+  tablet: 'isTablet',
+  tabletPortrait: 'isTabletPortrait',
+  tabletLandscape: 'isTabletLandscape',
+  desktop: 'isDesktop',
+  desktopSmall: 'isDesktopSmall',
+  desktopLarge: 'isDesktopLarge',
+  extraWide: 'isExtraWide'
+};
+const deviceKeys = Object.keys(media);
+
+// Initial snapshot with all breakpoint values set to false
+const initialSnapshot = {
+  isPhone: false,
+  isPhonePortrait: false,
+  isPhoneLandscape: false,
+  isTablet: false,
+  isTabletPortrait: false,
+  isTabletLandscape: false,
+  isDesktop: false,
+  isDesktopSmall: false,
+  isDesktopLarge: false,
+  isExtraWide: false
+};
+
+/**
+ * Only use this hook to conditionally render large component trees or logic
+ * @returns isPhone, isPhoneLandscape, isTablet, isTabletLandscape, isDesktop, isDesktopLarge, isExtraWide
+ */
+export const useBreakpoints = () => {
+  const context = useContext(MediaQueryContext);
+  if (!context) throw Error('useBreakpoints must be used within a MediaQueryProvider');
+  const matches = useRef(initialSnapshot);
+  const {
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  } = context;
+  const subscribeFn = useCallback(callback => {
+    //Subscribe to each breakpoint query and collect unsubscribe callbacks
+    const unsubscribers = deviceKeys.map(device => subscribe(media[device], callback));
+    // Return a function that unsubscribes from all
+    return () => unsubscribers.forEach(unsubscribe => unsubscribe());
+  }, [subscribe]);
+  const getSnapshotFn = useCallback(() => {
+    for (const deviceKey of deviceKeys) {
+      const snapshot = getSnapshot(media[deviceKey]);
+      if (matches.current[booleanDeviceNames[deviceKey]] !== snapshot) {
+        matches.current = _objectSpread(_objectSpread({}, matches.current), {}, {
+          [booleanDeviceNames[deviceKey]]: snapshot
+        });
+      }
+    }
+    return matches.current;
+  }, [getSnapshot]);
+  const getServerSnapshotFn = useCallback(() => {
+    for (const deviceKey of deviceKeys) {
+      const snapshot = getServerSnapshot(media[deviceKey]);
+      if (matches.current[booleanDeviceNames[deviceKey]] !== snapshot) {
+        matches.current = _objectSpread(_objectSpread({}, matches.current), {}, {
+          [booleanDeviceNames[deviceKey]]: snapshot
+        });
+      }
+    }
+    return matches.current;
+  }, [getServerSnapshot]);
+  return useSyncExternalStore(subscribeFn, getSnapshotFn, getServerSnapshotFn);
+};

package/esm/hooks/useCellSpacing.js

@@ -0,0 +1,31 @@
+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); }
+import { useMemo } from 'react';
+import { defaultSpacingConfig } from '@coinbase/cds-common/tokens/cell';
+export const innerDefaults = defaultSpacingConfig.innerSpacing;
+export const outerDefaults = defaultSpacingConfig.outerSpacing;
+/**
+ * Takes the inner and outerSpacing props from the Cell component and merges with their default values.
+ */
+export function useCellSpacing() {
+  let {
+    innerSpacing,
+    outerSpacing
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return useMemo(() => {
+    var _innerSpacing$padding, _innerSpacing$padding2, _outerSpacing$padding, _outerSpacing$padding2;
+    return {
+      inner: _objectSpread(_objectSpread({}, innerDefaults), {}, {
+        paddingX: (_innerSpacing$padding = innerSpacing === null || innerSpacing === void 0 ? void 0 : innerSpacing.padding) !== null && _innerSpacing$padding !== void 0 ? _innerSpacing$padding : innerDefaults.paddingX,
+        paddingY: (_innerSpacing$padding2 = innerSpacing === null || innerSpacing === void 0 ? void 0 : innerSpacing.padding) !== null && _innerSpacing$padding2 !== void 0 ? _innerSpacing$padding2 : innerDefaults.paddingY
+      }, innerSpacing),
+      outer: _objectSpread(_objectSpread({}, outerDefaults), {}, {
+        paddingX: (_outerSpacing$padding = outerSpacing === null || outerSpacing === void 0 ? void 0 : outerSpacing.padding) !== null && _outerSpacing$padding !== void 0 ? _outerSpacing$padding : outerDefaults.paddingX,
+        paddingY: (_outerSpacing$padding2 = outerSpacing === null || outerSpacing === void 0 ? void 0 : outerSpacing.padding) !== null && _outerSpacing$padding2 !== void 0 ? _outerSpacing$padding2 : outerDefaults.paddingY
+      }, outerSpacing)
+    };
+  }, [innerSpacing, outerSpacing]);
+}

package/esm/hooks/useCheckboxGroupState.js

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { useGroupToggler } from '@coinbase/cds-common/hooks/useGroupToggler';
+/**
+ *
+ * @param values - An array of all possible options. Make sure the array doesn't change if it's the same values so that the handlers will also stay the same.
+ * @param initialState - Initial checked option values.
+ * @deprecated Do not use this.
+ * @returns [
+ *  state,
+    {
+      select,
+      unselect,
+      toggle,
+      isAllSelected,
+    }
+  ]
+ */
+export const useCheckboxGroupState = (values, initialState) => {
+  const [state, {
+    select: doSelect,
+    unselect: doUnselect,
+    toggle: doToggle,
+    isAllSelected
+  }] = useGroupToggler(values, initialState);
+  const select = useCallback(event => {
+    var _event$target;
+    doSelect(event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+  }, [doSelect]);
+  const unselect = useCallback(event => {
+    var _event$target2;
+    doUnselect(event === null || event === void 0 || (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value);
+  }, [doUnselect]);
+  const toggle = useCallback(event => {
+    var _event$target3;
+    doToggle(event === null || event === void 0 || (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.value);
+  }, [doToggle]);
+  return [state, {
+    select,
+    unselect,
+    toggle,
+    isAllSelected
+  }];
+};

package/esm/hooks/useDimensions.js

@@ -0,0 +1,169 @@
+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); }
+import { useCallback, useEffect, useRef, useState } from 'react';
+export const observerErr = "💡 react-cool-dimensions: the browser doesn't support Resize Observer, please use polyfill: https://github.com/wellyshen/react-cool-dimensions#resizeobserver-polyfill";
+export const borderBoxWarn = "💡 react-cool-dimensions: the browser doesn't support border-box size, fallback to content-box size. Please see: https://github.com/wellyshen/react-cool-dimensions#border-box-size-measurement";
+const getCurrentBreakpoint = (bps, width) => {
+  let curBp = '';
+  let max = -1;
+  Object.keys(bps).forEach(key => {
+    const val = bps[key];
+    if (width >= val && val > max) {
+      curBp = key;
+      max = val;
+    }
+  });
+  return curBp;
+};
+
+/**
+ *
+ * Ported from react-cool-dimensions
+ * @link https://github.com/wellyshen/react-cool-dimensions
+ * Copyright (c) 2020 Welly Shen
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+ */
+export const useDimensions = function () {
+  let {
+    ref: refOpt,
+    useBorderBoxSize,
+    breakpoints,
+    updateOnBreakpointChange,
+    shouldUpdate,
+    onResize,
+    polyfill
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [state, setState] = useState({
+    currentBreakpoint: '',
+    width: 0,
+    x: 0,
+    y: 0,
+    height: 0
+  });
+  const prevSizeRef = useRef({});
+  const prevBreakpointRef = useRef();
+  const observerRef = useRef(null);
+  const onResizeRef = useRef(null);
+  const shouldUpdateRef = useRef(null);
+  const warnedRef = useRef(false);
+  const refVar = useRef(null);
+  let ref = useRef(refVar === null || refVar === void 0 ? void 0 : refVar.current);
+  ref = refOpt !== null && refOpt !== void 0 ? refOpt : ref;
+  useEffect(() => {
+    if (onResize) onResizeRef.current = onResize;
+  }, [onResize]);
+  useEffect(() => {
+    if (shouldUpdate) shouldUpdateRef.current = shouldUpdate;
+  }, [shouldUpdate]);
+  const observe = useCallback(element => {
+    if (element) ref.current = element;
+    if (observerRef.current && ref.current) {
+      observerRef.current.observe(ref.current);
+    }
+  }, [ref]);
+  const unobserve = useCallback(() => {
+    if (observerRef.current) observerRef.current.disconnect();
+  }, []);
+  useEffect(() => {
+    if (!ref.current) return () => null;
+    const window = typeof globalThis.window !== 'undefined' && globalThis.window;
+    if (!window || (!('ResizeObserver' in window) || !('ResizeObserverEntry' in window)) && !polyfill) {
+      console.error(observerErr);
+      return () => null;
+    }
+    const Observer = polyfill || window.ResizeObserver;
+    observerRef.current = new Observer(_ref => {
+      var _ref$current$getBound, _ref$current, _ref$current$getBound2, _ref$current2;
+      let [entry] = _ref;
+      const {
+        contentBoxSize,
+        borderBoxSize,
+        contentRect
+      } = entry;
+      let boxSize = contentBoxSize;
+      if (useBorderBoxSize) {
+        if (borderBoxSize) {
+          boxSize = borderBoxSize;
+        } else if (!warnedRef.current) {
+          console.warn(borderBoxWarn);
+          warnedRef.current = true;
+        }
+      }
+
+      // @juggle/resize-observer polyfill has different data structure
+      const entrySize = Array.isArray(boxSize) ? boxSize[0] : boxSize;
+      const width = entrySize ? entrySize.inlineSize : contentRect.width;
+      const height = entrySize ? entrySize.blockSize : contentRect.height;
+      if (width === prevSizeRef.current.width && height === prevSizeRef.current.height) return;
+      const x = (_ref$current$getBound = (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.getBoundingClientRect()) === null || _ref$current === void 0 ? void 0 : _ref$current.x) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : 0;
+      const y = (_ref$current$getBound2 = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || (_ref$current2 = _ref$current2.getBoundingClientRect()) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.y) !== null && _ref$current$getBound2 !== void 0 ? _ref$current$getBound2 : 0;
+      prevSizeRef.current = {
+        width,
+        height,
+        x,
+        y
+      };
+      const config = {
+        currentBreakpoint: '',
+        width,
+        height,
+        x,
+        y,
+        entry,
+        observe,
+        unobserve
+      };
+      if (breakpoints) {
+        config.currentBreakpoint = getCurrentBreakpoint(breakpoints, width);
+        if (config.currentBreakpoint !== prevBreakpointRef.current) {
+          if (onResizeRef.current) onResizeRef.current(config);
+          prevBreakpointRef.current = config.currentBreakpoint;
+        }
+      } else if (onResizeRef.current) {
+        onResizeRef.current(config);
+      }
+      const next = {
+        currentBreakpoint: config.currentBreakpoint,
+        width,
+        height,
+        x,
+        y,
+        entry
+      };
+      if (shouldUpdateRef.current && !shouldUpdateRef.current(next)) return;
+      if (!shouldUpdateRef.current && breakpoints && updateOnBreakpointChange) {
+        setState(prev => prev.currentBreakpoint !== next.currentBreakpoint ? next : prev);
+        return;
+      }
+      setState(next);
+    });
+    observe(null);
+    return () => unobserve();
+  }, [breakpoints, useBorderBoxSize, observe, unobserve, updateOnBreakpointChange, polyfill]);
+  return _objectSpread(_objectSpread({
+    ref
+  }, state), {}, {
+    observe,
+    unobserve
+  });
+};

package/esm/hooks/useEventHandler.js

@@ -0,0 +1,6 @@
+/**
+ * Avoid having to deal with transitive version issues.
+ * CDS common is dep of cds-mobile.
+ * This allows consumers to pull directly from cds-web.
+ */
+export { useEventHandler } from '@coinbase/cds-common/hooks/useEventHandler';

package/esm/hooks/useHasMounted.js

@@ -0,0 +1,8 @@
+import { useEffect, useMemo, useState } from 'react';
+import { isBrowser } from '../utils/browser';
+export const useHasMounted = () => {
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => setHasMounted(true), []);
+  const componentShouldMount = useMemo(() => hasMounted && isBrowser(), [hasMounted]);
+  return componentShouldMount;
+};

package/esm/hooks/useIsBrowser.js

@@ -0,0 +1,8 @@
+import { isBrowser } from '../utils/browser';
+import { useHasMounted } from './useHasMounted';
+
+/** Checks to see that there is a window and the DOM has mounted */
+export const useIsBrowser = () => {
+  const hasMounted = useHasMounted();
+  return isBrowser() && hasMounted;
+};

package/esm/hooks/useIsoEffect.js

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from 'react';
+import { isBrowser } from '../utils/browser';
+export const useIsoEffect = isBrowser() ? useLayoutEffect : useEffect;

package/esm/hooks/useMediaQuery.js

@@ -0,0 +1,20 @@
+import { useCallback, useContext, useSyncExternalStore } from 'react';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { MediaQueryContext } from '../system/MediaQueryProvider';
+const complexQueryCharacters = ['<', '>', '=', ',', ' or ', ' not ', '(((', ')))'];
+export const useMediaQuery = query => {
+  const context = useContext(MediaQueryContext);
+  if (!context) throw Error('useMediaQuery must be used within a MediaQueryProvider');
+  if (isDevelopment() && complexQueryCharacters.some(char => query.includes(char))) {
+    console.warn("useMediaQuery received a complex query which may return an incorrect result for server renders: \"".concat(query, "\". See the docs at https://cds.coinbase.com/hooks/useMediaQuery/#ssr-support"));
+  }
+  const {
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  } = context;
+  const subscribeFn = useCallback(callback => subscribe(query, callback), [subscribe, query]);
+  const getSnapshotFn = useCallback(() => getSnapshot(query), [getSnapshot, query]);
+  const getServerSnapshotFn = useCallback(() => getServerSnapshot(query), [getServerSnapshot, query]);
+  return useSyncExternalStore(subscribeFn, getSnapshotFn, getServerSnapshotFn);
+};

package/esm/hooks/useScrollBlocker.js

@@ -0,0 +1,32 @@
+import { useCallback, useRef } from 'react';
+import { isSSR } from '../utils/browser';
+export const useScrollBlocker = () => {
+  const scroll = useRef(false);
+  const blockScroll = useCallback(shouldBlock => {
+    if (isSSR()) return;
+    const html = document.documentElement;
+    const {
+      body
+    } = document;
+    if (!(body !== null && body !== void 0 && body.style)) return;
+
+    // block scroll
+    if (shouldBlock && !scroll.current) {
+      const scrollBarWidth = window.innerWidth - html.clientWidth;
+      const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue('padding-right')) || 0;
+      body.style.position = 'relative';
+      body.style.overflow = 'hidden';
+      body.style.paddingRight = "".concat(bodyPaddingRight + scrollBarWidth, "px");
+      scroll.current = true;
+    }
+
+    // allow scroll
+    if (!shouldBlock && scroll.current) {
+      body.style.position = '';
+      body.style.overflow = '';
+      body.style.paddingRight = '';
+      scroll.current = false;
+    }
+  }, []);
+  return blockScroll;
+};

package/esm/hooks/useTheme.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../system/ThemeProvider';
+
+/** Returns the currently active Theme, determined by the ThemeProvider's `activeColorScheme`. */
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) throw Error('useTheme must be used within a ThemeProvider');
+  return context;
+};

package/esm/hooks/useThemeContext.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../system/ThemeProvider';
+
+/**
+ * Fetches the ThemeContextValue and verifies it is defined, so it must be used inside a ThemeProvider.
+ *
+ * If you instead need to fetch the ThemeContextValue without throwing an error when the context is undefined, you can use `useContext(ThemeContext)` instead.
+ */
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext);
+  if (!context) throw Error('useThemeContext must be used within a ThemeProvider');
+  return context;
+};

package/esm/icons/Icon.css

@@ -0,0 +1,5 @@
+@layer cds{.iconCss-ijgxn1p{color:currentColor;font-family:'CoinbaseIcons';font-weight:400;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:block;-webkit-text-decoration:none;text-decoration:none;}.iconCss-ijgxn1p > *{-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}
+.xs-x1o2vka7{width:var(--iconSize-xs);height:var(--iconSize-xs);font-size:var(--iconSize-xs);}
+.s-smpvpdm{width:var(--iconSize-s);height:var(--iconSize-s);font-size:var(--iconSize-s);}
+.m-m1j7b465{width:var(--iconSize-m);height:var(--iconSize-m);font-size:var(--iconSize-m);}
+.l-l1bri864{width:var(--iconSize-l);height:var(--iconSize-l);font-size:var(--iconSize-l);}}

package/esm/icons/Icon.js

@@ -0,0 +1,83 @@
+const _excluded = ["accessibilityLabel", "color", "dangerouslySetColor", "fallback", "name", "size", "testID", "className", "classNames", "style", "styles", "active"];
+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 { glyphMap } from '@coinbase/cds-icons/glyphMap';
+import { isDevelopment } from '@coinbase/cds-utils/env';
+import { cx } from '../cx';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const iconCss = "iconCss-ijgxn1p";
+const sizeCss = {
+  xs: "xs-x1o2vka7",
+  s: "s-smpvpdm",
+  m: "m-m1j7b465",
+  l: "l-l1bri864"
+};
+const getIconSourceSize = iconSize => {
+  if (iconSize <= 12) return 12;
+  if (iconSize <= 16) return 16;
+  return 24;
+};
+export const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      accessibilityLabel,
+      color = 'fgPrimary',
+      dangerouslySetColor,
+      fallback = null,
+      name,
+      size = 'm',
+      testID,
+      className,
+      classNames,
+      style,
+      styles,
+      active
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const theme = useTheme();
+  const iconSize = theme.iconSize[size];
+  const sourceSize = getIconSourceSize(iconSize);
+  const rootStyle = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, dangerouslySetColor ? {
+    color: dangerouslySetColor
+  } : {}), style), styles === null || styles === void 0 ? void 0 : styles.root), [dangerouslySetColor, style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  const iconName = "".concat(name, "-").concat(sourceSize, "-").concat(active ? 'active' : 'inactive');
+  const glyph = glyphMap[iconName];
+  if (glyph === undefined) {
+    if (isDevelopment()) {
+      console.error("Unable to find glyph for icon name \"".concat(name, "\" with glyph key \"").concat(iconName, "\""));
+    }
+    return fallback;
+  }
+  const glyphTestId = testID ? "".concat(testID, "-glyph") : 'icon-base-glyph';
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    color: color,
+    position: "relative",
+    style: rootStyle,
+    testID: testID
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      "aria-hidden": !accessibilityLabel,
+      "aria-label": accessibilityLabel,
+      className: cx(iconCss, sizeCss[size], classNames === null || classNames === void 0 ? void 0 : classNames.icon),
+      "data-icon-name": name,
+      "data-testid": glyphTestId,
+      role: "img",
+      style: styles === null || styles === void 0 ? void 0 : styles.icon,
+      title: accessibilityLabel,
+      translate: "no",
+      children: glyph
+    })
+  }));
+}));
+Icon.displayName = 'Icon';
+export { getIconSourceSize };
+import "./Icon.css";

package/esm/icons/LogoMark.css

@@ -0,0 +1,2 @@
+@layer cds{.iconCss-ieyvqkk{color:currentColor;font-family:'CoinbaseIcons';font-weight:400;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:block;-webkit-text-decoration:none;text-decoration:none;}
+.transitionCss-t1w4vtyz{-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}}

package/esm/icons/LogoMark.js

@@ -0,0 +1,43 @@
+import React, { memo } from 'react';
+import { useLogoMark } from '@coinbase/cds-common/hooks/useLogo';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconCss = "iconCss-ieyvqkk";
+const transitionCss = "transitionCss-t1w4vtyz";
+export const LogoMark = /*#__PURE__*/memo(_ref => {
+  let {
+    size,
+    foreground
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    viewBox,
+    width,
+    height,
+    path,
+    color
+  } = useLogoMark({
+    size,
+    foreground,
+    colorScheme: activeColorScheme
+  });
+  return /*#__PURE__*/_jsxs("svg", {
+    "aria-label": "Coinbase logo",
+    className: iconCss,
+    height: height,
+    role: "img",
+    viewBox: viewBox,
+    width: width,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "Coinbase logo"
+    }), /*#__PURE__*/_jsx("path", {
+      className: transitionCss,
+      d: path,
+      fill: color
+    })]
+  });
+});
+import "./LogoMark.css";

package/esm/icons/LogoWordmark.css

@@ -0,0 +1,2 @@
+@layer cds{.iconCss-i1dykwc6{color:currentColor;font-family:'CoinbaseIcons';font-weight:400;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:block;-webkit-text-decoration:none;text-decoration:none;}
+.transitionCss-tcwr7al{-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}}

package/esm/icons/LogoWordmark.js

@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+import { useLogoWordmark } from '@coinbase/cds-common/hooks/useLogo';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconCss = "iconCss-i1dykwc6";
+const transitionCss = "transitionCss-tcwr7al";
+export const LogoWordmark = /*#__PURE__*/memo(_ref => {
+  let {
+    foreground
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    viewBox,
+    path,
+    color
+  } = useLogoWordmark({
+    foreground,
+    colorScheme: activeColorScheme
+  });
+  return /*#__PURE__*/_jsxs("svg", {
+    "aria-labelledby": "logo-wordmark-title",
+    className: iconCss,
+    role: "img",
+    viewBox: viewBox,
+    width: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("title", {
+      id: "logo-wordmark-title",
+      children: "Coinbase logo"
+    }), /*#__PURE__*/_jsx("path", {
+      className: transitionCss,
+      d: path,
+      fill: color
+    })]
+  });
+});
+import "./LogoWordmark.css";

package/esm/icons/SubBrandLogoMark.css

@@ -0,0 +1,2 @@
+@layer cds{.iconCss-i1q3gb5z{color:currentColor;font-family:'CoinbaseIcons';font-weight:400;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:block;-webkit-text-decoration:none;text-decoration:none;}
+.transitionCss-t164v6ap{-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}}