@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/styles/styleProps.js

@@ -0,0 +1,187 @@
+/**
+ * Import order determines CSS cascade order, therefor affects specificity.
+ * Do not change the order of these imports or everything will break.
+ */
+
+/* eslint-disable simple-import-sort/imports, no-restricted-imports, @typescript-eslint/no-unused-expressions */
+
+import * as booleanStyles from './booleanStyles';
+import * as baseStyles from './responsive/base';
+import * as phoneStyles from './responsive/phone';
+import * as tabletStyles from './responsive/tablet';
+import * as desktopStyles from './responsive/desktop';
+import { globalCDSConfig } from './config';
+
+/**
+ * Prevents tree-shaking. Do not remove or everything will break.
+ */
+booleanStyles;
+
+/**
+ * Style props that set classnames but not inline style CSS Variables.
+ * @danger You probably don't want to use this type directly. To refer to any
+ * style prop, use the StyleProps type instead. Only use this type to reference
+ * specifically the static style props (style props that don't use inline styles).
+ */
+
+/**
+ * Maps the StaticStyleProps that are affected by Theme variables to the
+ * ThemeVars interface names that affect them.
+ */
+const stylePropThemeVarMap = {
+  color: 'Color',
+  background: 'Color',
+  borderColor: 'Color',
+  borderWidth: 'BorderWidth',
+  borderTopWidth: 'BorderWidth',
+  borderEndWidth: 'BorderWidth',
+  borderBottomWidth: 'BorderWidth',
+  borderStartWidth: 'BorderWidth',
+  borderRadius: 'BorderRadius',
+  borderTopLeftRadius: 'BorderRadius',
+  borderTopRightRadius: 'BorderRadius',
+  borderBottomLeftRadius: 'BorderRadius',
+  borderBottomRightRadius: 'BorderRadius',
+  fontFamily: 'FontFamily',
+  fontSize: 'FontSize',
+  fontWeight: 'FontWeight',
+  lineHeight: 'LineHeight',
+  gap: 'Space',
+  columnGap: 'Space',
+  rowGap: 'Space',
+  padding: 'Space',
+  paddingX: 'Space',
+  paddingY: 'Space',
+  paddingTop: 'Space',
+  paddingBottom: 'Space',
+  paddingStart: 'Space',
+  paddingEnd: 'Space',
+  margin: 'Space',
+  marginX: 'Space',
+  marginY: 'Space',
+  marginTop: 'Space',
+  marginBottom: 'Space',
+  marginEnd: 'Space',
+  marginStart: 'Space',
+  elevation: 'Elevation'
+};
+
+/**
+ * The subset of StaticStyleProps that are affected by theme variables.
+ * @danger You probably don't want to use this type directly. To refer to any
+ * style prop, use the StyleProps type instead. To refer only to static style
+ * props (style props that don't use inline styles), use the StaticStyleProps
+ * type instead. Only use this type to reference specifically the subset of
+ * StaticStyleProps that are affected by theme variables.
+ */
+
+/**
+ * The subset of StaticStyleProps that are not affected by theme variables.
+ * @danger You probably don't want to use this type directly. To refer to any
+ * style prop, use the StyleProps type instead. To refer only to static style
+ * props (style props that don't use inline styles), use the StaticStyleProps
+ * type instead. Only use this type to reference specifically the subset of
+ * StaticStyleProps that are not affected by theme variables.
+ */
+
+/**
+ * Style props that set inline style CSS Variables, and classnames that consume those CSS Variables.
+ * @danger You probably don't want to use this type directly. To refer to any
+ * style prop, use the StyleProps type instead. Only use this type to reference
+ * specifically the dynamic style props (style props that use inline styles).
+ */
+
+/**
+ * DynamicStyleProps that should have "px" concatenated if they are numbers and not equal to zero.
+ */
+export const dynamicPixelProps = {
+  width: 1,
+  height: 1,
+  minWidth: 1,
+  minHeight: 1,
+  maxWidth: 1,
+  maxHeight: 1,
+  top: 1,
+  bottom: 1,
+  left: 1,
+  right: 1,
+  flexBasis: 1
+};
+export const getStyles = (styleProps, inlineStyle) => {
+  const style = {};
+  let className = '';
+  for (const styleProp in styleProps) {
+    const value = styleProps[styleProp];
+    if (typeof value === 'undefined') continue;
+
+    // If it's a dynamic style prop...
+    if (typeof baseStyles.dynamic[styleProp] !== 'undefined') {
+      const isPixelProp = dynamicPixelProps[styleProp];
+      // Set the value as an inline style CSS variable, and add the corresponding classname that consumes it
+      if (typeof value !== 'object') {
+        style['--' + styleProp] = isPixelProp && typeof value === 'number' && value !== 0 ? value + 'px' : value;
+        className += ' ' + baseStyles.dynamic[styleProp];
+        continue;
+      }
+      // If it's an object, treat it as a responsive style:
+      if (typeof value.base !== 'undefined') {
+        style['--' + styleProp] = isPixelProp && typeof value.base === 'number' && value.base !== 0 ? value.base + 'px' : value.base;
+        className += ' ' + baseStyles.dynamic[styleProp];
+      }
+      if (typeof value.phone !== 'undefined') {
+        style['--phone-' + styleProp] = isPixelProp && typeof value.phone === 'number' && value.phone !== 0 ? value.phone + 'px' : value.phone;
+        className += ' ' + phoneStyles.dynamic[styleProp];
+      }
+      if (typeof value.tablet !== 'undefined') {
+        style['--tablet-' + styleProp] = isPixelProp && typeof value.tablet === 'number' && value.tablet !== 0 ? value.tablet + 'px' : value.tablet;
+        className += ' ' + tabletStyles.dynamic[styleProp];
+      }
+      if (typeof value.desktop !== 'undefined') {
+        style['--desktop-' + styleProp] = isPixelProp && typeof value.desktop === 'number' && value.desktop !== 0 ? value.desktop + 'px' : value.desktop;
+        className += ' ' + desktopStyles.dynamic[styleProp];
+      }
+      continue;
+    }
+
+    // Otherwise, if it's a static style prop...
+    if (typeof value !== 'object') {
+      var _baseStyles$styleProp, _globalCDSConfig$curr;
+      className += ' ' + (// @ts-expect-error - Key type
+      (_baseStyles$styleProp = baseStyles[styleProp][value]) !== null && _baseStyles$styleProp !== void 0 ? _baseStyles$styleProp : // @ts-expect-error - Key type
+      (_globalCDSConfig$curr = globalCDSConfig.current.extendStyleProps) === null || _globalCDSConfig$curr === void 0 || (_globalCDSConfig$curr = _globalCDSConfig$curr[stylePropThemeVarMap[styleProp]][value]) === null || _globalCDSConfig$curr === void 0 ? void 0 : _globalCDSConfig$curr[styleProp].base);
+    } else {
+      // If it's an object, treat it as a responsive style: add the corresponding classnames
+      if (typeof value.base !== 'undefined') {
+        var _baseStyles$styleProp2, _globalCDSConfig$curr2;
+        className += ' ' + (// @ts-expect-error - Key type
+        (_baseStyles$styleProp2 = baseStyles[styleProp][value.base]) !== null && _baseStyles$styleProp2 !== void 0 ? _baseStyles$styleProp2 : // @ts-expect-error - Key type
+        (_globalCDSConfig$curr2 = globalCDSConfig.current.extendStyleProps) === null || _globalCDSConfig$curr2 === void 0 || (_globalCDSConfig$curr2 = _globalCDSConfig$curr2[stylePropThemeVarMap[styleProp]][value.base]) === null || _globalCDSConfig$curr2 === void 0 ? void 0 : _globalCDSConfig$curr2[styleProp].base);
+      }
+      if (typeof value.phone !== 'undefined') {
+        var _phoneStyles$stylePro, _globalCDSConfig$curr3;
+        className += ' ' + (// @ts-expect-error - Key type
+        (_phoneStyles$stylePro = phoneStyles[styleProp][value.phone]) !== null && _phoneStyles$stylePro !== void 0 ? _phoneStyles$stylePro : // @ts-expect-error - Key type
+        (_globalCDSConfig$curr3 = globalCDSConfig.current.extendStyleProps) === null || _globalCDSConfig$curr3 === void 0 || (_globalCDSConfig$curr3 = _globalCDSConfig$curr3[stylePropThemeVarMap[styleProp]][value.phone]) === null || _globalCDSConfig$curr3 === void 0 ? void 0 : _globalCDSConfig$curr3[styleProp].phone);
+      }
+      if (typeof value.tablet !== 'undefined') {
+        var _tabletStyles$stylePr, _globalCDSConfig$curr4;
+        className += ' ' + (// @ts-expect-error - Key type
+        (_tabletStyles$stylePr = tabletStyles[styleProp][value.tablet]) !== null && _tabletStyles$stylePr !== void 0 ? _tabletStyles$stylePr : // @ts-expect-error - Key type
+        (_globalCDSConfig$curr4 = globalCDSConfig.current.extendStyleProps) === null || _globalCDSConfig$curr4 === void 0 || (_globalCDSConfig$curr4 = _globalCDSConfig$curr4[stylePropThemeVarMap[styleProp]][value.tablet]) === null || _globalCDSConfig$curr4 === void 0 ? void 0 : _globalCDSConfig$curr4[styleProp].tablet);
+      }
+      if (typeof value.desktop !== 'undefined') {
+        var _desktopStyles$styleP, _globalCDSConfig$curr5;
+        className += ' ' + (// @ts-expect-error - Key type
+        (_desktopStyles$styleP = desktopStyles[styleProp][value.desktop]) !== null && _desktopStyles$styleP !== void 0 ? _desktopStyles$styleP : // @ts-expect-error - Key type
+        (_globalCDSConfig$curr5 = globalCDSConfig.current.extendStyleProps) === null || _globalCDSConfig$curr5 === void 0 || (_globalCDSConfig$curr5 = _globalCDSConfig$curr5[stylePropThemeVarMap[styleProp]][value.desktop]) === null || _globalCDSConfig$curr5 === void 0 ? void 0 : _globalCDSConfig$curr5[styleProp].desktop);
+      }
+    }
+  }
+  for (const key in inlineStyle) {
+    style[key] = inlineStyle[key];
+  }
+  return {
+    style: style,
+    className
+  };
+};

package/esm/system/BrowserOnly.js

@@ -0,0 +1,13 @@
+import { useIsBrowser } from '../hooks/useIsBrowser';
+/**
+ * Checks if component has mounted and triggers a rerender so SSR UI's can hydrate properly
+ * @link https://www.joshwcomeau.com/react/the-perils-of-rehydration/#abstractions
+ * Does not render component on the server
+ */
+export const BrowserOnly = _ref => {
+  let {
+    children
+  } = _ref;
+  const componentShouldMount = useIsBrowser();
+  return componentShouldMount ? children : null;
+};

package/esm/system/ButtonOrLink.css

@@ -0,0 +1 @@
+@layer cds{.accessibilityCss-akx0ly6{pointer-events:none;}}

package/esm/system/ButtonOrLink.js

@@ -0,0 +1,167 @@
+const _excluded = ["children", "to", "href", "rel", "target", "type", "disabled", "focusable", "tabIndex", "onKeyDown", "onKeyUp", "onKeyPressCapture", "onClickCapture", "onMouseDown", "onMouseDownCapture", "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; }
+/**
+ * ButtonOrLink is adapted from the reakit Button, Clickable, and Tabbable source code:
+ * - https://github.com/ariakit/ariakit/blob/reakit/packages/reakit/src/Button/Button.ts
+ * - https://github.com/ariakit/ariakit/blob/reakit/packages/reakit/src/Clickable/Clickable.ts
+ * - https://github.com/ariakit/ariakit/blob/reakit/packages/reakit/src/Tabbable/Tabbable.ts
+ */
+import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cx } from '../cx';
+import { useIsoEffect } from '../hooks/useIsoEffect';
+import { getTabIndex, handleButtonFocusOnSafariOrFirefoxOnMac, isNativeClick, isNativeTabbable, supportsDisabledAttribute } from './reakit-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const accessibilityCss = "accessibilityCss-akx0ly6";
+
+/** @deprecated This component will be removed in a future version. Use Pressable instead. */
+export const ButtonOrLink = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      to,
+      href,
+      rel,
+      target,
+      type = 'button',
+      disabled,
+      focusable,
+      tabIndex,
+      onKeyDown,
+      onKeyUp,
+      onKeyPressCapture,
+      onClickCapture,
+      onMouseDown,
+      onMouseDownCapture,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const elementRef = useRef(null);
+  useImperativeHandle(ref, () => elementRef.current, []); // Merges forwarded ref with internal elementRef
+
+  const isLink = to || href;
+  const [nativeTabbable, setNativeTabbable] = useState(true);
+  const [supportsDisabled, setSupportsDisabled] = useState(true);
+  const [active, setActive] = useState(false);
+  const isActiveRef = useRef(false);
+
+  // Evaluate element to set state values used to compute appropriate tabIndex
+  useIsoEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    if (!isNativeTabbable(element)) setNativeTabbable(false);
+    if (!supportsDisabledAttribute(element)) setSupportsDisabled(false);
+  }, []);
+
+  // Handle Enter and Spacebar keydown events
+  const handleOnKeyDown = useCallback(event => {
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+    if (event.defaultPrevented || disabled || event.metaKey || event.target !== event.currentTarget) return;
+    const isEnter = event.key === 'Enter';
+    const isSpace = event.key === ' ';
+    if (isEnter || isSpace) {
+      if (isNativeClick(event)) return;
+      event.preventDefault();
+      // Trigger a click on Enter keydown
+      if (isEnter) event.currentTarget.click();
+      // Set data-active attribute on Spacebar keydown, and prepare to trigger click on Spacebar keyup
+      else if (isSpace && !isActiveRef.current) {
+        isActiveRef.current = true;
+        setActive(true);
+      }
+    }
+  }, [disabled, onKeyDown]);
+
+  // Handle Spacebar keyup event
+  const handleOnKeyUp = useCallback(event => {
+    onKeyUp === null || onKeyUp === void 0 || onKeyUp(event);
+    if (event.defaultPrevented || disabled || event.metaKey) return;
+
+    // Remove data-active attribute on Spacebar keyup and trigger a click
+    if (isActiveRef.current && event.key === ' ') {
+      isActiveRef.current = false;
+      setActive(false);
+      event.currentTarget.click();
+    }
+  }, [disabled, onKeyUp]);
+  const handleOnClickCapture = useCallback(event => {
+    onClickCapture === null || onClickCapture === void 0 || onClickCapture(event);
+    if (event.defaultPrevented) return;
+    if (disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [disabled, onClickCapture]);
+  const handleOnMouseDownCapture = useCallback(event => {
+    onMouseDownCapture === null || onMouseDownCapture === void 0 || onMouseDownCapture(event);
+    if (event.defaultPrevented) return;
+    if (disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [disabled, onMouseDownCapture]);
+  const handleOnKeyPressCapture = useCallback(event => {
+    onKeyPressCapture === null || onKeyPressCapture === void 0 || onKeyPressCapture(event);
+    if (event.defaultPrevented) return;
+    if (disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [disabled, onKeyPressCapture]);
+
+  // Handle Button focus on mousedown in Safari or Firefox on Mac browsers
+  const handleOnMouseDown = useCallback(event => {
+    onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
+    if (event.defaultPrevented) return;
+    handleButtonFocusOnSafariOrFirefoxOnMac(event);
+  }, [onMouseDown]);
+  const accessibilityProps = useMemo(() => ({
+    disabled: disabled && supportsDisabled && !focusable ? true : undefined,
+    'aria-disabled': disabled && (!supportsDisabled || focusable) ? true : undefined,
+    tabIndex: getTabIndex({
+      disabled,
+      focusable,
+      supportsDisabled,
+      nativeTabbable,
+      tabIndex
+    })
+  }), [disabled, focusable, supportsDisabled, nativeTabbable, tabIndex]);
+  if (isLink) {
+    return /*#__PURE__*/_jsx("a", _objectSpread(_objectSpread(_objectSpread({
+      ref: elementRef,
+      className: cx(disabled && accessibilityCss, className),
+      "data-active": active || undefined,
+      href: to !== null && to !== void 0 ? to : href,
+      onClickCapture: handleOnClickCapture,
+      onKeyDown: handleOnKeyDown,
+      onKeyPressCapture: handleOnKeyPressCapture,
+      onKeyUp: handleOnKeyUp,
+      onMouseDown: handleOnMouseDown,
+      onMouseDownCapture: handleOnMouseDownCapture,
+      rel: !rel && target === '_blank' ? 'noopener noreferrer' : rel,
+      target: target
+    }, accessibilityProps), props), {}, {
+      children: children
+    }));
+  }
+  return /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread(_objectSpread({
+    ref: elementRef,
+    className: cx(disabled && accessibilityCss, className),
+    "data-active": active || undefined,
+    onClickCapture: handleOnClickCapture,
+    onKeyDown: handleOnKeyDown,
+    onKeyPressCapture: handleOnKeyPressCapture,
+    onKeyUp: handleOnKeyUp,
+    onMouseDown: handleOnMouseDown,
+    onMouseDownCapture: handleOnMouseDownCapture,
+    type: type
+  }, accessibilityProps), props), {}, {
+    children: children
+  }));
+}));
+ButtonOrLink.displayName = 'ButtonOrLink';
+import "./ButtonOrLink.css";

package/esm/system/EventHandlerProvider.js

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

package/esm/system/FramerMotionProvider.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { domAnimation, LazyMotion } from 'framer-motion';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FramerMotionProvider = _ref => {
+  let {
+    children,
+    motionFeatures = domAnimation
+  } = _ref;
+  return /*#__PURE__*/_jsx(LazyMotion, {
+    strict: true,
+    features: motionFeatures,
+    children: children
+  });
+};

package/esm/system/Interactable.css

@@ -0,0 +1,4 @@
+@layer cds{.baseCss-b17wmk8f{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;background-color:var(--interactable-background);border-color:var(--interactable-border-color);}.baseCss-b17wmk8f::-moz-focus-inner{border:0;padding:0;margin:0;}.baseCss-b17wmk8f:hover{background-color:var(--interactable-hovered-background);border-color:var(--interactable-hovered-border-color);}.baseCss-b17wmk8f:hover > *{opacity:var(--interactable-hovered-opacity);}.baseCss-b17wmk8f:active,.baseCss-b17wmk8f[aria-pressed='true']{background-color:var(--interactable-pressed-background);border-color:var(--interactable-pressed-border-color);}.baseCss-b17wmk8f:active > *,.baseCss-b17wmk8f[aria-pressed='true'] > *{opacity:var(--interactable-pressed-opacity);}.baseCss-b17wmk8f:disabled,.baseCss-b17wmk8f[aria-disabled='true']{opacity:0.5;cursor:default;pointer-events:none;touch-action:none;background-color:var(--interactable-disabled-background);border-color:var(--interactable-disabled-border-color);}.baseCss-b17wmk8f:focus{outline:none;}.baseCss-b17wmk8f:focus-visible{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:var(--color-bgPrimary);}
+.blockCss-b1ytinjt{display:block;width:100%;}
+.transparentActiveCss-t10ei5ro:active{background-color:var(--color-transparent);border-color:var(--color-transparent);}
+.transparentWhileInactiveCss-te5q23s{background-color:var(--color-transparent);border-color:var(--color-transparent);}.transparentWhileInactiveCss-te5q23s:disabled,.transparentWhileInactiveCss-te5q23s[aria-disabled='true']{background-color:var(--color-transparent);border-color:var(--color-transparent);}}

package/esm/system/Interactable.js

@@ -0,0 +1,114 @@
+const _excluded = ["as", "background", "borderColor", "borderWidth", "block", "className", "disabled", "loading", "pressed", "style", "blendStyles", "transparentWhileInactive", "transparentWhilePressed"];
+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, useMemo } from 'react';
+import { getBlendedColor } from '@coinbase/cds-common/color/getBlendedColor';
+import { accessibleOpacityDisabled, opacityDisabled, opacityHovered, opacityPressed } from '@coinbase/cds-common/tokens/interactable';
+import { cx } from '../cx';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { interactableBackground, interactableBorderColor, interactableDisabledBackground, interactableDisabledBorderColor, interactableHoveredBackground, interactableHoveredBorderColor, interactableHoveredOpacity, interactablePressedBackground, interactablePressedBorderColor, interactablePressedOpacity } from './interactableCSSProperties';
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseCss = "baseCss-b17wmk8f";
+const blockCss = "blockCss-b1ytinjt";
+const transparentActiveCss = "transparentActiveCss-t10ei5ro";
+const transparentWhileInactiveCss = "transparentWhileInactiveCss-te5q23s";
+export const interactableDefaultElement = 'button';
+export const Interactable = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      background = 'transparent',
+      borderColor = background,
+      borderWidth = 100,
+      block,
+      className,
+      disabled,
+      loading,
+      pressed,
+      style,
+      blendStyles,
+      transparentWhileInactive,
+      transparentWhilePressed
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : interactableDefaultElement;
+  const theme = useTheme();
+  const interactableStyle = useMemo(() => _objectSpread(_objectSpread({}, getInteractableStyles({
+    theme,
+    background,
+    blendStyles,
+    borderColor
+  })), style), [style, background, theme, blendStyles, borderColor]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    ref: ref,
+    "aria-busy": loading,
+    "aria-disabled": loading || disabled || undefined,
+    "aria-pressed": pressed,
+    as: Component,
+    borderWidth: borderWidth,
+    className: cx(baseCss, block && blockCss, transparentWhileInactive && transparentWhileInactiveCss, transparentWhilePressed && transparentActiveCss, className),
+    disabled: disabled,
+    style: interactableStyle
+  }, props));
+});
+export const getInteractableStyles = _ref2 => {
+  var _blendStyles$backgrou, _blendStyles$borderCo, _blendStyles$backgrou2, _blendStyles$borderCo2, _blendStyles$hoveredB, _blendStyles$hoveredB2, _blendStyles$pressedB, _blendStyles$pressedB2, _blendStyles$disabled, _blendStyles$disabled2;
+  let {
+    theme,
+    background = 'transparent',
+    borderColor = background,
+    blendStyles
+  } = _ref2;
+  const backgroundColor = (_blendStyles$backgrou = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.background) !== null && _blendStyles$backgrou !== void 0 ? _blendStyles$backgrou : theme.color[background];
+  const borderColorValue = (_blendStyles$borderCo = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.borderColor) !== null && _blendStyles$borderCo !== void 0 ? _blendStyles$borderCo : theme.color[borderColor];
+  return {
+    [interactableBackground]: (_blendStyles$backgrou2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.background) !== null && _blendStyles$backgrou2 !== void 0 ? _blendStyles$backgrou2 : "var(--color-".concat(background, ")"),
+    [interactableBorderColor]: (_blendStyles$borderCo2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.borderColor) !== null && _blendStyles$borderCo2 !== void 0 ? _blendStyles$borderCo2 : "var(--color-".concat(borderColor, ")"),
+    /**
+     * Apply an interactive background style. Blend the color with the background or backgroundInverse values
+     */
+    // Hover:
+    [interactableHoveredBackground]: getBlendedColor({
+      overlayColor: (_blendStyles$hoveredB = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.hoveredBackground) !== null && _blendStyles$hoveredB !== void 0 ? _blendStyles$hoveredB : backgroundColor,
+      blendOpacity: opacityHovered,
+      colorScheme: theme.activeColorScheme
+    }),
+    [interactableHoveredBorderColor]: getBlendedColor({
+      overlayColor: (_blendStyles$hoveredB2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.hoveredBorderColor) !== null && _blendStyles$hoveredB2 !== void 0 ? _blendStyles$hoveredB2 : borderColorValue,
+      blendOpacity: opacityHovered,
+      colorScheme: theme.activeColorScheme
+    }),
+    [interactableHoveredOpacity]: opacityHovered,
+    // Pressed:
+    [interactablePressedBackground]: getBlendedColor({
+      overlayColor: (_blendStyles$pressedB = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.pressedBackground) !== null && _blendStyles$pressedB !== void 0 ? _blendStyles$pressedB : backgroundColor,
+      blendOpacity: opacityPressed,
+      colorScheme: theme.activeColorScheme
+    }),
+    [interactablePressedBorderColor]: getBlendedColor({
+      overlayColor: (_blendStyles$pressedB2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.pressedBorderColor) !== null && _blendStyles$pressedB2 !== void 0 ? _blendStyles$pressedB2 : borderColorValue,
+      blendOpacity: opacityPressed,
+      colorScheme: theme.activeColorScheme
+    }),
+    [interactablePressedOpacity]: opacityPressed,
+    // Disabled:
+    [interactableDisabledBackground]: getBlendedColor({
+      overlayColor: (_blendStyles$disabled = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.disabledBackground) !== null && _blendStyles$disabled !== void 0 ? _blendStyles$disabled : backgroundColor,
+      blendOpacity: opacityDisabled,
+      colorScheme: theme.activeColorScheme,
+      skipContrastOptimization: true
+    }),
+    [interactableDisabledBorderColor]: getBlendedColor({
+      overlayColor: (_blendStyles$disabled2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.disabledBorderColor) !== null && _blendStyles$disabled2 !== void 0 ? _blendStyles$disabled2 : borderColorValue,
+      blendOpacity: opacityDisabled,
+      colorScheme: theme.activeColorScheme,
+      skipContrastOptimization: true
+    })
+  };
+};
+import "./Interactable.css";