@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/system/MediaQueryProvider.js

@@ -0,0 +1,164 @@
+import React, { createContext, useState } from 'react';
+import { breakpoints } from '../styles/media';
+import { addMediaQueryListener, removeMediaQueryListener } from '../utils/mediaQueryListener';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const cdsDefaultValues = {
+  width: breakpoints.desktop,
+  colorScheme: 'light'
+};
+export const MediaQueryContext = /*#__PURE__*/createContext(null);
+/**
+ * A context provider that manages media query subscriptions with server-side rendering support.
+ *
+ * This component creates a centralized store for media query subscriptions, preventing
+ * unnecessary re-renders and ensuring consistent behavior between server and client rendering.
+ *
+ * @example
+ * ```tsx
+ * <MediaQueryProvider defaultValues={{ width: 1200, colorScheme: 'light' }}>
+ *   <App />
+ * </MediaQueryProvider>
+ * ```
+ */
+export const MediaQueryProvider = _ref => {
+  let {
+    children,
+    defaultValues = cdsDefaultValues
+  } = _ref;
+  useState(() => store.init({
+    defaultValues
+  }));
+  return /*#__PURE__*/_jsx(MediaQueryContext.Provider, {
+    value: store,
+    children: children
+  });
+};
+const getMediaPixelValue = function (value) {
+  let fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
+  const numericValue = parseInt(value.slice(0, -2), 10);
+  const isPx = value.endsWith('px');
+  const isEm = value.endsWith('em');
+  if (isNaN(numericValue) || !isPx && !isEm) throw Error("getPixelValue failed to parse value: \"".concat(value));
+  if (isEm) return numericValue * fontSize;
+  return numericValue;
+};
+const mediaQueryDefaultSolutions = {
+  width: (width, defaultValues) => {
+    if (typeof defaultValues.width === 'undefined') return false;
+    return Boolean(defaultValues.width === getMediaPixelValue(width, defaultValues.fontSize));
+  },
+  'min-width': (minWidth, defaultValues) => {
+    if (typeof defaultValues.width === 'undefined') return false;
+    return Boolean(defaultValues.width >= getMediaPixelValue(minWidth, defaultValues.fontSize));
+  },
+  'max-width': (maxWidth, defaultValues) => {
+    if (typeof defaultValues.width === 'undefined') return false;
+    return Boolean(defaultValues.width <= getMediaPixelValue(maxWidth, defaultValues.fontSize));
+  },
+  height: (height, defaultValues) => {
+    if (typeof defaultValues.height === 'undefined') return false;
+    return Boolean(defaultValues.height === getMediaPixelValue(height, defaultValues.fontSize));
+  },
+  'min-height': (minHeight, defaultValues) => {
+    if (typeof defaultValues.height === 'undefined') return false;
+    return Boolean(defaultValues.height >= getMediaPixelValue(minHeight, defaultValues.fontSize));
+  },
+  'max-height': (maxHeight, defaultValues) => {
+    if (typeof defaultValues.height === 'undefined') return false;
+    return Boolean(defaultValues.height <= getMediaPixelValue(maxHeight, defaultValues.fontSize));
+  },
+  'prefers-color-scheme': (colorScheme, defaultValues) => {
+    // If defaultValues.colorScheme is undefined, mimic browser default behavior for prefers-color-scheme, e.g.
+    // window.matchMedia("(prefers-color-scheme: light)") is true when the user does not specify a preference
+    if (typeof defaultValues.colorScheme === 'undefined') return colorScheme === 'light';
+    return Boolean(defaultValues.colorScheme && defaultValues.colorScheme === colorScheme);
+  },
+  'prefers-contrast': (contrast, defaultValues) => {
+    // If defaultValues.contrast is undefined, mimic browser default behavior for prefers-contrast, e.g.
+    // window.matchMedia("(prefers-contrast: no-preference)") is true when the user does not specify a preference
+    if (typeof defaultValues.contrast === 'undefined') return contrast === 'no-preference';
+    return defaultValues.contrast === contrast;
+  }
+};
+const solveMediaQueryDefaults = (query, defaultValues) => {
+  const queryParts = query.split(' and ');
+  for (const queryPart of queryParts) {
+    var _splittedConditionVal, _splittedConditionVal2, _mediaQueryDefaultSol;
+    // Trim the part and handle optional inner parentheses correctly
+    const trimmedPart = queryPart.trim();
+    const conditionValueString = trimmedPart[0] === '(' && trimmedPart[trimmedPart.length - 1] === ')' ? trimmedPart.slice(1, -1).trim() : trimmedPart; // Assume valid if no outer parens on the part
+
+    if (!conditionValueString) return false; // e.g., `(()) and (cond:val)` -> `()` -> empty
+
+    // Split the actual condition/value string
+    const splittedConditionValueString = conditionValueString.split(':');
+    const condition = (_splittedConditionVal = splittedConditionValueString[0]) === null || _splittedConditionVal === void 0 ? void 0 : _splittedConditionVal.trim();
+    const value = (_splittedConditionVal2 = splittedConditionValueString[1]) === null || _splittedConditionVal2 === void 0 ? void 0 : _splittedConditionVal2.trim();
+    if (!condition || !value) return false; // e.g., `(cond:)` or `(cond)`
+
+    // Call handler with trimmed values
+    const result = (_mediaQueryDefaultSol = mediaQueryDefaultSolutions[condition]) === null || _mediaQueryDefaultSol === void 0 ? void 0 : _mediaQueryDefaultSol.call(mediaQueryDefaultSolutions, value, defaultValues);
+    if (!result) return false; // If any part is false, the whole query is false
+  }
+  return true; // If all parts evaluated to true
+};
+export const createMediaQueryStore = () => {
+  const mediaQueryLists = {};
+  const subscribers = {};
+  let defaultValues = {};
+  let initialized = false;
+
+  /** Sets the default values to be used for server renders. */
+  const init = options => {
+    if (initialized) return;
+    initialized = true;
+    if (options.defaultValues) defaultValues = options.defaultValues;
+  };
+
+  /** For client renders, returns the result of solving the media query with window.matchMedia. */
+  const getSnapshot = query => {
+    var _mediaQueryLists$quer, _mediaQueryLists$quer2;
+    return (_mediaQueryLists$quer = (_mediaQueryLists$quer2 = mediaQueryLists[query]) === null || _mediaQueryLists$quer2 === void 0 ? void 0 : _mediaQueryLists$quer2.matches) !== null && _mediaQueryLists$quer !== void 0 ? _mediaQueryLists$quer : solveMediaQueryDefaults(query, defaultValues);
+  };
+
+  /** For server renders, returns the result of solving the media query with the defaultValues. */
+  const getServerSnapshot = query => {
+    return solveMediaQueryDefaults(query, defaultValues);
+  };
+
+  /**
+   * Subscribes to a media query with a callback function that will be called when the media query
+   * match results change. Returns a function that can be called to unsubscribe.
+   */
+  const subscribe = (query, callback) => {
+    var _subscribers$query;
+    (_subscribers$query = subscribers[query]) !== null && _subscribers$query !== void 0 ? _subscribers$query : subscribers[query] = [];
+    subscribers[query].push(callback);
+    const handleChange = query => {
+      var _subscribers$query2;
+      (_subscribers$query2 = subscribers[query]) === null || _subscribers$query2 === void 0 || _subscribers$query2.forEach(callback => callback());
+    };
+    const listener = () => handleChange(query);
+    if (!mediaQueryLists[query]) {
+      mediaQueryLists[query] = window.matchMedia(query);
+      addMediaQueryListener(mediaQueryLists[query], listener);
+    }
+    const unsubscribe = () => {
+      var _subscribers$query3;
+      subscribers[query] = subscribers[query].filter(cb => cb !== callback);
+      if (((_subscribers$query3 = subscribers[query]) === null || _subscribers$query3 === void 0 ? void 0 : _subscribers$query3.length) === 0) {
+        delete subscribers[query];
+        removeMediaQueryListener(mediaQueryLists[query], listener);
+        delete mediaQueryLists[query];
+      }
+    };
+    return unsubscribe;
+  };
+  return {
+    init,
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  };
+};
+const store = createMediaQueryStore();

package/esm/system/Pressable.css

@@ -0,0 +1,3 @@
+@layer cds{.scaledDownCss-s1o6alxd{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.scaledDownCss-s1o6alxd:active,.scaledDownCss-s1o6alxd[data-active='true']{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}
+.baseCss-b1nrmodp[data-active='true']{background-color:var(--interactable-pressed-background);}.baseCss-b1nrmodp[data-active='true'] > *{opacity:var(--interactable-pressed-opacity);}.baseCss-b1nrmodp[data-loading='true']{opacity:1;background-color:var(--interactable-pressed-background);}.baseCss-b1nrmodp[data-loading='true'] > *{opacity:var(--interactable-pressed-opacity);}
+.transparentActiveCss-t14zsnbw[data-active='true']{background-color:var(--color-transparent);}}

package/esm/system/Pressable.js

@@ -0,0 +1,148 @@
+const _excluded = ["as", "className", "disabled", "loading", "onClickCapture", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseDownCapture", "noScaleOnPress", "tabIndex", "eventConfig", "analyticsId", "focusable", "type", "transparentWhilePressed", "padding"];
+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, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useEventHandler } from '@coinbase/cds-common/hooks/useEventHandler';
+import { cx } from '../cx';
+import { useIsoEffect } from '../hooks/useIsoEffect';
+import { Interactable } from './Interactable';
+import { interactablePressedBackground, interactablePressedOpacity } from './interactableCSSProperties';
+import { getTabIndex, handleButtonFocusOnSafariOrFirefoxOnMac, isNativeClick, isNativeTabbable, supportsDisabledAttribute } from './reakit-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const scaledDownCss = "scaledDownCss-s1o6alxd";
+const baseCss = "baseCss-b1nrmodp";
+const transparentActiveCss = "transparentActiveCss-t14zsnbw";
+export const pressableDefaultElement = 'button';
+export const Pressable = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      className,
+      disabled,
+      loading,
+      onClickCapture,
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      onMouseDown,
+      onMouseDownCapture,
+      noScaleOnPress,
+      tabIndex,
+      eventConfig,
+      analyticsId,
+      focusable,
+      type,
+      transparentWhilePressed,
+      padding = 0
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : pressableDefaultElement;
+  const elementRef = useRef(null);
+  useImperativeHandle(ref, () => elementRef.current, []); // Merges forwarded ref with internal elementRef
+  const defaultButtonType = Component === 'button' ? 'button' : undefined;
+  const [nativeTabbable, setNativeTabbable] = useState(true);
+  const [supportsDisabled, setSupportsDisabled] = useState(true);
+  const [active, setActive] = useState(false);
+  const isActiveRef = useRef(false);
+  // Evaluate rendered element for computing appropriate accessibility attributes
+  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]);
+
+  // 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 onEventHandler = useEventHandler('Button', 'onClick', eventConfig, analyticsId);
+  const handleClick = useCallback(event => {
+    onClick === null || onClick === void 0 || onClick(event);
+    onEventHandler();
+  }, [onClick, onEventHandler]);
+  const accessibilityProps = useMemo(() => ({
+    disabled: (disabled || loading) && supportsDisabled && !focusable ? true : undefined,
+    'aria-disabled': (disabled || loading) && (!supportsDisabled || focusable) ? true : undefined,
+    tabIndex: getTabIndex({
+      disabled,
+      focusable,
+      supportsDisabled,
+      nativeTabbable,
+      tabIndex
+    })
+  }), [disabled, loading, focusable, supportsDisabled, nativeTabbable, tabIndex]);
+  return /*#__PURE__*/_jsx(Interactable, _objectSpread(_objectSpread({
+    ref: elementRef,
+    as: Component,
+    className: cx(baseCss, !noScaleOnPress && scaledDownCss, transparentWhilePressed && transparentActiveCss, className),
+    "data-active": active || undefined,
+    "data-loading": loading || undefined,
+    loading: loading,
+    onClick: handleClick,
+    onClickCapture: handleOnClickCapture,
+    onKeyDown: handleOnKeyDown,
+    onKeyUp: handleOnKeyUp,
+    onMouseDown: handleOnMouseDown,
+    onMouseDownCapture: handleOnMouseDownCapture,
+    padding: padding,
+    rel: !props.rel && props.target === '_blank' ? 'noopener noreferrer' : props.rel,
+    transparentWhilePressed: transparentWhilePressed,
+    type: type !== null && type !== void 0 ? type : defaultButtonType
+  }, accessibilityProps), props));
+});
+import "./Pressable.css";

package/esm/system/PressableOpacity.js

@@ -0,0 +1,33 @@
+const _excluded = ["children", "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, { forwardRef } from 'react';
+import { Pressable } from './Pressable';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const pressableOpacityDefaultElement = 'button';
+
+/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+
+/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+
+/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+export const PressableOpacity = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      as
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : pressableOpacityDefaultElement;
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    as: Component
+  }, props), {}, {
+    background: "transparent",
+    children: children
+  }));
+});

package/esm/system/ThemeProvider.js

@@ -0,0 +1,87 @@
+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); }
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import React, { createContext, useContext, useMemo } from 'react';
+import { createThemeCssVars } from '../core/createThemeCssVars';
+import { cx } from '../cx';
+import { FramerMotionProvider } from './FramerMotionProvider';
+
+/* Augments csstype's Properties by adding all our theme CSS variable names. Effectively adds all theme CSS variable names as valid keys to React.CSSProperties. */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ThemeContext = /*#__PURE__*/createContext(undefined);
+export const useThemeProviderStyles = theme => {
+  const style = useMemo(() => createThemeCssVars(theme), [theme]);
+  return style;
+};
+const ThemeManager = _ref => {
+  let {
+    display,
+    children,
+    theme
+  } = _ref;
+  const style = useThemeProviderStyles(theme);
+  const styles = useMemo(() => _objectSpread(_objectSpread({}, style), {}, {
+    display
+  }), [style, display]);
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(theme.id, theme.activeColorScheme),
+    style: styles,
+    children: children
+  });
+};
+export const ThemeProvider = _ref2 => {
+  let {
+    theme,
+    activeColorScheme,
+    children,
+    display,
+    motionFeatures
+  } = _ref2;
+  const themeApi = useMemo(() => {
+    const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
+    const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
+    const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
+    const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
+
+    // TO DO: Link to color / theme docs in these error messages
+    if (!theme[activeColorKey]) throw Error("ThemeProvider activeColorScheme is ".concat(activeColorScheme, " but no ").concat(activeColorScheme, " colors are defined for the theme"));
+    if (!theme[activeSpectrumKey]) throw Error("ThemeProvider activeColorScheme is ".concat(activeColorScheme, " but no ").concat(activeSpectrumKey, " values are defined for the theme"));
+    if (theme[inverseSpectrumKey] && !theme[inverseColorKey]) throw Error("ThemeProvider theme has ".concat(inverseSpectrumKey, " values defined but no ").concat(inverseColorKey, " colors are defined for the theme"));
+    if (theme[inverseColorKey] && !theme[inverseSpectrumKey]) throw Error("ThemeProvider theme has ".concat(inverseColorKey, " colors defined but no ").concat(inverseSpectrumKey, " values are defined for the theme"));
+    return _objectSpread(_objectSpread({}, theme), {}, {
+      activeColorScheme: activeColorScheme,
+      spectrum: theme[activeSpectrumKey],
+      color: theme[activeColorKey]
+    });
+  }, [theme, activeColorScheme]);
+  return /*#__PURE__*/_jsx(FramerMotionProvider, {
+    motionFeatures: motionFeatures,
+    children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
+      value: themeApi,
+      children: /*#__PURE__*/_jsx(ThemeManager, {
+        display: display,
+        theme: themeApi,
+        children: children
+      })
+    })
+  });
+};
+/** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
+export const InvertedThemeProvider = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  const context = useContext(ThemeContext);
+  if (!context) throw Error('InvertedThemeProvider must be used within a ThemeProvider');
+  const inverseColorScheme = context.activeColorScheme === 'dark' ? 'light' : 'dark';
+  const inverseColorKey = context.activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
+  const newColorScheme = context[inverseColorKey] ? inverseColorScheme : context.activeColorScheme;
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: newColorScheme,
+    theme: context,
+    children: children
+  });
+};

package/esm/system/index.js

@@ -0,0 +1,6 @@
+export * from './EventHandlerProvider';
+export * from './Interactable';
+export * from './MediaQueryProvider';
+export * from './Pressable';
+export * from './PressableOpacity';
+export * from './ThemeProvider';

package/esm/system/interactableCSSProperties.js

@@ -0,0 +1,14 @@
+export const interactableBorderRadius = '--interactable-border-radius';
+export const interactableBackground = '--interactable-background';
+export const interactableBorderColor = '--interactable-border-color';
+// Pressed:
+export const interactablePressedBackground = '--interactable-pressed-background';
+export const interactablePressedBorderColor = '--interactable-pressed-border-color';
+export const interactablePressedOpacity = '--interactable-pressed-opacity';
+// Hovered:
+export const interactableHoveredBackground = '--interactable-hovered-background';
+export const interactableHoveredBorderColor = '--interactable-hovered-border-color';
+export const interactableHoveredOpacity = '--interactable-hovered-opacity';
+// Disabled:
+export const interactableDisabledBackground = '--interactable-disabled-background';
+export const interactableDisabledBorderColor = '--interactable-disabled-border-color';

package/esm/system/reakit-utils.js

@@ -0,0 +1,151 @@
+/**
+ * These utils are adapted from the reakit-utils source code and are not safe to run in an SSR environment
+ * - https://github.com/ariakit/ariakit/tree/reakit/packages/reakit-utils
+ */
+
+/**
+ * Checks whether `element` is visible or not.
+ *
+ * @example
+ * isVisible(document.querySelector("button"));
+ */
+function isVisible(element) {
+  const htmlElement = element;
+  return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0;
+}
+const focusableSelectors = "input:not([type='hidden']):not([disabled]), select:not([disabled]),\n  textarea:not([disabled]), a[href], button:not([disabled]), [tabindex],\n  iframe, object, embed, area[href], audio[controls], video[controls],\n  [contenteditable]:not([contenteditable='false'])";
+
+/**
+ * Checks whether `element` is focusable or not.
+ *
+ * @example
+ * isFocusable(document.querySelector("input")); // true
+ * isFocusable(document.querySelector("input[tabindex='-1']")); // true
+ * isFocusable(document.querySelector("input[hidden]")); // false
+ * isFocusable(document.querySelector("input:disabled")); // false
+ */
+function isFocusable(element) {
+  return element.matches(focusableSelectors) && isVisible(element);
+}
+
+/**
+ * Checks if `element` has focus within. Elements that are referenced by
+ * `aria-activedescendant` are also considered.
+ *
+ * @example
+ * hasFocusWithin(document.getElementById("id"));
+ */
+function hasFocusWithin(element) {
+  const {
+    activeElement
+  } = document;
+  if (!activeElement) return false;
+  if (element.contains(activeElement)) return true;
+  const activeDescendant = activeElement.getAttribute('aria-activedescendant');
+  if (!activeDescendant) return false;
+  if (activeDescendant === element.id) return true;
+  return Boolean(element.querySelector("#".concat(activeDescendant)));
+}
+function focusIfNeeded(element) {
+  if (!hasFocusWithin(element) && isFocusable(element)) element.focus();
+}
+const buttonInputTypes = ['button', 'color', 'file', 'image', 'reset', 'submit'];
+
+/**
+ * Checks whether `element` is a native HTML button element.
+ *
+ * @example
+ * isButton(document.querySelector("button")); // true
+ * isButton(document.querySelector("input[type='button']")); // true
+ * isButton(document.querySelector("div")); // false
+ * isButton(document.querySelector("input[type='text']")); // false
+ * isButton(document.querySelector("div[role='button']")); // false
+ *
+ * @returns {boolean}
+ */
+function isButton(element) {
+  if (element.tagName === 'BUTTON') return true;
+  if (element.tagName === 'INPUT') return buttonInputTypes.includes(element.type);
+  return false;
+}
+
+/**
+ * Returns `true` if `event` has been fired within a React Portal element.
+ */
+function isPortalEvent(event) {
+  return !event.currentTarget.contains(event.target);
+}
+function isSafariOrFirefoxOnMac() {
+  const {
+    userAgent
+  } = window.navigator;
+  return userAgent.includes('Mac') && !userAgent.includes('Chrome') && (userAgent.includes('Safari') || userAgent.includes('Firefox'));
+}
+export function isNativeClick(event) {
+  if (!event.isTrusted) return false;
+  return isButton(event.currentTarget) || event.currentTarget.tagName === 'INPUT' || event.currentTarget.tagName === 'TEXTAREA' || event.currentTarget.tagName === 'A' || event.currentTarget.tagName === 'SELECT';
+}
+export function handleButtonFocusOnSafariOrFirefoxOnMac(event) {
+  const element = event.currentTarget;
+  // Safari and Firefox on MacOS don't focus on buttons on mouse down
+  // like other browsers/platforms. Instead, they focus on the closest
+  // focusable ancestor element, which is ultimately the body element. So
+  // we make sure to give focus to the tabbable element on mouse down so
+  // it works consistently across browsers.
+  if (!isSafariOrFirefoxOnMac()) return;
+  if (isPortalEvent(event)) return;
+  if (!isButton(element)) return;
+  let focusImmediately = () => {};
+  // We can't focus right away after on mouse down, otherwise it would
+  // prevent drag events from happening. So we schedule the focus to the
+  // next animation frame.
+  const raf = requestAnimationFrame(() => {
+    element.removeEventListener('mouseup', focusImmediately, true);
+    focusIfNeeded(element);
+  });
+  // If mouseUp happens before the next animation frame (which is common
+  // on touch screens or by just tapping the trackpad on MacBook's), we
+  // cancel the animation frame and immediately focus on the element.
+  focusImmediately = () => {
+    cancelAnimationFrame(raf);
+    focusIfNeeded(element);
+  };
+  // By listening to the event in the capture phase, we make sure the
+  // focus event is fired before the onMouseUp and onMouseUpCapture React
+  // events, which is aligned with the default browser behavior.
+  element.addEventListener('mouseup', focusImmediately, {
+    once: true,
+    capture: true
+  });
+}
+export function isNativeTabbable(element) {
+  return ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'A'].includes(element.tagName);
+}
+export function supportsDisabledAttribute(element) {
+  return ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
+}
+export function getTabIndex(_ref) {
+  let {
+    disabled,
+    focusable,
+    supportsDisabled,
+    nativeTabbable,
+    tabIndex
+  } = _ref;
+  if (disabled && !focusable) {
+    // Anchor, audio and video tags don't support the `disabled` attribute. We
+    // must pass tabIndex={-1} so they don't receive focus on tab.
+    if (nativeTabbable && !supportsDisabled) return -1;
+
+    // Elements that support the `disabled` attribute don't need tabIndex.
+    return;
+  }
+
+  // If the element is enabled and it's natively tabbable, we don't need to
+  // specify a tabIndex attribute unless it's explicitly set by the user.
+  if (nativeTabbable) return tabIndex;
+
+  // If the element is enabled and is not natively tabbable, we have to fallback
+  // tabIndex={0}.
+  return tabIndex || 0;
+}

package/esm/tables/Table.css

@@ -0,0 +1,7 @@
+@layer cds{.tableCss-tcfnqih{display:table;width:100%;margin:0;padding:0;border-collapse:collapse;border:none;}.tableCss-tcfnqih thead,.tableCss-tcfnqih tbody,.tableCss-tcfnqih tfoot{padding:0;margin:0;border:none;}
+.tableFixedCss-t10y7b8a{table-layout:fixed;}
+.tableContainerCss-tdwtctb{overflow:auto;width:100%;height:var(--table-height);max-height:var(--table-maxHeight);}.tableContainerCss-tdwtctb table{background-color:var(--color-bg);color:var(--color-fg);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;}
+.tableContainerBorderCss-t1c2n4w4{border:var(--borderWidth-100) solid var(--color-bgLine);border-radius:var(--borderRadius-200);}
+
+.tableVariantGraphCss-t1wr3951 table > caption{border-bottom:var(--borderWidth-100) solid var(--color-bgLine);}.tableVariantGraphCss-t1wr3951 table > tfoot{border-top:var(--borderWidth-100) solid var(--color-bgLine);}.tableVariantGraphCss-t1wr3951 table > tr > td,.tableVariantGraphCss-t1wr3951 table > tbody > tr > td,.tableVariantGraphCss-t1wr3951 table > tbody > tr > th,.tableVariantGraphCss-t1wr3951 table > thead > .table-row,.tableVariantGraphCss-t1wr3951 table > tfoot > tr > td{border-bottom:var(--borderWidth-100) solid var(--color-bgLine);border-right:var(--borderWidth-100) solid var(--color-bgLine);}.tableVariantGraphCss-t1wr3951 table > tbody > tr > th,.tableVariantGraphCss-t1wr3951 table > thead > tr > th{box-shadow:inset 0px -1px 0px 0px var(--color-bgLine);border-right:var(--borderWidth-100) solid var(--color-bgLine);}.tableVariantGraphCss-t1wr3951 table > tbody > tr:last-child > th,.tableVariantGraphCss-t1wr3951 table > tbody > tr:last-child > td,.tableVariantGraphCss-t1wr3951 table > tfoot > tr:last-child > td{border-bottom:none;}.tableVariantGraphCss-t1wr3951 table > thead > tr > th:last-child,.tableVariantGraphCss-t1wr3951 table > tbody > tr > th:last-child,.tableVariantGraphCss-t1wr3951 table > tbody > tr > td:last-child,.tableVariantGraphCss-t1wr3951 table > thead > .table-row:last-child,.tableVariantGraphCss-t1wr3951 table > tfoot > tr > td:last-child{border-right:none;}
+.tableVariantRuledCss-t2pqtmt table > caption{border-bottom:var(--borderWidth-100) solid var(--color-bgLine);}.tableVariantRuledCss-t2pqtmt table > tfoot{border-top:var(--borderWidth-100) solid var(--color-bgLine);}.tableVariantRuledCss-t2pqtmt table > tr > td,.tableVariantRuledCss-t2pqtmt table > tbody > tr > th,.tableVariantRuledCss-t2pqtmt table > tbody > tr > td,.tableVariantRuledCss-t2pqtmt table > tfoot > tr > td{border-bottom:var(--borderWidth-100) solid var(--color-bgLine);}.tableVariantRuledCss-t2pqtmt table > thead > tr > th{box-shadow:inset 0px -1px 0px 0px var(--color-bgLine);}.tableVariantRuledCss-t2pqtmt table > tbody > tr:last-child > th,.tableVariantRuledCss-t2pqtmt table > tbody > tr:last-child > td,.tableVariantRuledCss-t2pqtmt table > tfoot > tr:last-child > td{border:none;}}