@coinbase/cds-web 0.0.0 → 8.13.1

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 @@
+.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 @@
+.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 @@
+.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 @@
+.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;}

package/esm/icons/SubBrandLogoMark.js

@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+import { useSubBrandLogoMark } from '@coinbase/cds-common/hooks/useSubBrandLogo';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconCss = "iconCss-i1q3gb5z";
+const transitionCss = "transitionCss-t164v6ap";
+export const SubBrandLogoMark = /*#__PURE__*/memo(_ref => {
+  let {
+    type,
+    foreground
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    logoColor,
+    typeColor,
+    viewBox,
+    logoPath,
+    typePath
+  } = useSubBrandLogoMark({
+    type,
+    foreground,
+    colorScheme: activeColorScheme
+  });
+  const title = "Coinbase ".concat(type, " logo");
+  return /*#__PURE__*/_jsxs("svg", {
+    "aria-label": title,
+    className: iconCss,
+    role: "img",
+    viewBox: viewBox,
+    width: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("title", {
+      children: title
+    }), /*#__PURE__*/_jsxs("g", {
+      children: [/*#__PURE__*/_jsx("path", {
+        className: transitionCss,
+        d: logoPath,
+        fill: logoColor
+      }), /*#__PURE__*/_jsx("path", {
+        className: transitionCss,
+        d: typePath,
+        fill: typeColor
+      })]
+    })]
+  });
+});
+import "./SubBrandLogoMark.css";

package/esm/icons/SubBrandLogoWordmark.css

@@ -0,0 +1,2 @@
+.iconCss-i12648lj{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-t18olg08{-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}

package/esm/icons/SubBrandLogoWordmark.js

@@ -0,0 +1,52 @@
+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 React, { memo } from 'react';
+import { useSubBrandLogoWordmark } from '@coinbase/cds-common/hooks/useSubBrandLogo';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconCss = "iconCss-i12648lj";
+const transitionCss = "transitionCss-t18olg08";
+export const SubBrandLogoWordmark = /*#__PURE__*/memo(props => {
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    logoColor,
+    typeColor,
+    viewBox,
+    logoPath,
+    typePath
+  } = useSubBrandLogoWordmark(_objectSpread(_objectSpread({}, props), {}, {
+    colorScheme: activeColorScheme
+  }));
+  const {
+    type
+  } = props;
+  const title = "Coinbase ".concat(type, " logo");
+  return /*#__PURE__*/_jsxs("svg", {
+    "aria-labelledby": "sub-brand-logo-wordmark-title",
+    className: iconCss,
+    role: "img",
+    viewBox: viewBox,
+    width: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("title", {
+      id: "sub-brand-logo-wordmark-title",
+      children: title
+    }), /*#__PURE__*/_jsxs("g", {
+      children: [/*#__PURE__*/_jsx("path", {
+        className: transitionCss,
+        d: logoPath,
+        fill: logoColor
+      }), /*#__PURE__*/_jsx("path", {
+        className: transitionCss,
+        d: typePath,
+        fill: typeColor
+      })]
+    })]
+  });
+});
+import "./SubBrandLogoWordmark.css";