@coinbase/cds-common 0.0.0 → 8.13.1

package/esm/core/theme.js

@@ -0,0 +1,26 @@
+/**
+ * These are the core CDS Theme variable types used across mobile and web.
+ */
+/* eslint-disable no-restricted-syntax, @typescript-eslint/no-empty-object-type */
+/**
+ * This utility type makes the final intellisense into human-redable literal values.
+ */
+/**
+ * This is the default set of Theme variables available to all CDS components.
+ * Only the interface keys are used to define the available Theme variables.
+ * The interface values are not used.
+ * @danger You probably don't want to use this namespace directly, unless you are
+ * referring explicitly to ONLY the default CDS variables. Otherwise, you probably
+ * want to use the ThemeVars namespace instead, which inherits from this namespace.
+ * @docs http://cds.coinbase.com/getting-started/theming/#themevars-namespace
+ */
+export let ThemeVarsDefault;
+/**
+ * This is the complete set of Theme variables available to all CDS components.
+ * Combines all variables from the ThemeVarsDefault and ThemeVarsExtended
+ * namespaces. You can use this namespace to read all available Theme variables.
+ * You can use the ThemeVarsExtended namespace to extend this namespace with new
+ * variables.
+ * @docs http://cds.coinbase.com/getting-started/theming/#themevars-namespace
+ */
+export let ThemeVars;

package/esm/dates/DateInputValidationError.js

@@ -0,0 +1,7 @@
+export class DateInputValidationError extends Error {
+  constructor(type, message) {
+    super(message);
+    this.name = 'DateInputValidationError';
+    this.type = type;
+  }
+}

package/esm/dates/IntlDateFormat.js

@@ -0,0 +1,66 @@
+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); }
+/**
+ * IntlDateFormat is a utility class that uses the Intl.DateTimeFormat API to determine the date format for a given locale.
+ * It can be used to parse and format date strings based on the locale's date format.
+ * @param locale A valid JavaScript Intl locale used to determine the date format.
+ * @param separator Character used to separate values in the date format, e.g. the forward slash in "MM/DD/YYYY".
+ * @example
+ * const intlDateFormat = new IntlDateFormat({ locale: 'en-US', separator: '/' });
+ * const date = intlDateFormat.date('12/31/2020');
+ * const dateString = intlDateFormat.format(new Date());
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+ */
+export class IntlDateFormat {
+  constructor(props) {
+    this.locale = props.locale;
+    this.separator = props.separator;
+    this.invalidDateFormatRegex = new RegExp("[^0-9".concat(this.separator, "]"));
+    this.duplicateSeparatorRegex = new RegExp("".concat(this.separator, "{2,}"), 'g');
+    this.dateTimeFormat = new Intl.DateTimeFormat(props.locale);
+    this.dateTimeFormatParts = this.dateTimeFormat.formatToParts(new Date());
+    this.dateStringFormat = this.dateTimeFormatParts.map(part => IntlDateFormat.datePartTypeMap[part.type]).filter(Boolean).join(this.separator);
+    this.separatorIndices = this.dateStringFormat.split('').map((char, index) => char === this.separator ? index : undefined).filter(Boolean);
+  }
+
+  /**
+   * Converts a valid date string to a Date object based on the locale's date format.
+   */
+  date(dateString) {
+    const dateValues = dateString.split(this.separator);
+    const {
+      year,
+      month,
+      day
+    } = this.dateTimeFormatParts.filter(part => part.type !== 'literal').reduce((acc, part, index) => {
+      acc[part.type] = parseInt(dateValues[index], 10);
+      return acc;
+    }, {});
+    const date = new Date(year, month - 1, day);
+
+    // Ignore technically valid date inputs like `30/30/2015` that would cause the month or year to roll over
+    if (date.getMonth() !== month - 1 || date.getFullYear() !== year) return null;
+    return date;
+  }
+
+  /**
+   * Converts a Date object to a date string based on the locale's date format.
+   */
+  format(date) {
+    return this.dateTimeFormat.formatToParts(date).map(part => part.type === 'literal' ? this.separator : part.type === 'year' ? date.getFullYear() : part.value.padStart(2, '0')).join('');
+  }
+}
+/** A valid JavaScript Intl locale used to determine the date format. */
+/** Character used to separate values in the date format, e.g. the forward slash in "MM/DD/YYYY". */
+/** The indices of the separator characters in the date format. */
+/** Matches any character except digits and the separator character. */
+/** Matches two or more consecutive separator characters. */
+/** Intl.DateTimeFormat class for the locale. */
+/** Array of Intl.DateTimeFormatParts - including day, month, year, and separators. */
+/** The date format, based on the locale and including separator characters, e.g. "MM/DD/YYYY". */
+_defineProperty(IntlDateFormat, "datePartTypeMap", {
+  day: 'dd',
+  month: 'mm',
+  year: 'yyyy'
+});

package/esm/dates/generateCalendarMonth.js

@@ -0,0 +1,22 @@
+/**
+ * Generates an array of Dates for a calendar month. Not localized with Intl. Assumes a Gregorian calendar with "en-US" DateTimeFormat. Treats Sunday as the first day of the week.
+ */
+export const generateCalendarMonth = seedDate => {
+  const firstOfMonth = new Date(seedDate.getFullYear(), seedDate.getMonth(), 1);
+  const firstOfCalendar = new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth(), 1 - firstOfMonth.getDay());
+  const daysInMonth = new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth() + 1, 0).getDate();
+  const daysFromNextMonth = 7 - (daysInMonth + firstOfMonth.getDay()) % 7;
+  const month = [];
+  for (let i = 0; i < firstOfMonth.getDay(); i++) {
+    month.push(new Date(firstOfCalendar.getFullYear(), firstOfCalendar.getMonth(), firstOfCalendar.getDate() + i));
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    month.push(new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth(), i));
+  }
+  if (daysFromNextMonth !== 7) {
+    for (let i = 1; i <= daysFromNextMonth; i++) {
+      month.push(new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth() + 1, i));
+    }
+  }
+  return month;
+};

package/esm/dates/getISOStringLocal.js

@@ -0,0 +1,8 @@
+/**
+ * Converts a Date to an ISO 8601 string (YYYY-MM-DD) in the local timezone (not UTC)
+ */
+export const getISOStringLocal = date => {
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  return "".concat(date.getFullYear(), "-").concat(month, "-").concat(day);
+};

package/esm/dates/getMidnightDate.js

@@ -0,0 +1,4 @@
+/**
+ * Clones a Date with the time set to midnight (00:00:00.000)
+ */
+export const getMidnightDate = date => new Date(date.getFullYear(), date.getMonth(), date.getDate());

package/esm/dates/getTimesFromDatesAndRanges.js

@@ -0,0 +1,16 @@
+import { getMidnightDate } from './getMidnightDate';
+
+/**
+ * Takes an array of Dates and Date tuples for date ranges, and generates a flattened array of corresponding Date.getTime() numbers, with the time set to midnight. A number will be generated for every individual date within a date range.
+ */
+export const getTimesFromDatesAndRanges = datesAndRanges => datesAndRanges.flatMap(value => {
+  if (value instanceof Date) return getMidnightDate(value).getTime();
+  const [startDate, endDate] = value;
+  const startDisabledDate = getMidnightDate(startDate);
+  const endDisabledDate = getMidnightDate(endDate);
+  const times = [];
+  for (let date = startDisabledDate; date <= endDisabledDate; date.setDate(date.getDate() + 1)) {
+    times.push(date.getTime());
+  }
+  return times;
+});

package/esm/dates/useDateInput.js

@@ -0,0 +1,105 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useDateInputValidation } from './useDateInputValidation';
+/** Accepts DateInputOptions and returns a DateInputApi, which can be used to control a custom DateInput component. */
+export const useDateInput = _ref => {
+  let {
+    date,
+    onChangeDate,
+    error,
+    onErrorDate,
+    intlDateFormat,
+    required,
+    disabledDates,
+    minDate,
+    maxDate,
+    requiredError,
+    invalidDateError,
+    disabledDateError
+  } = _ref;
+  const [previousDateProp, setPreviousDateProp] = useState(date);
+  const [inputValue, setInputValue] = useState(date ? intlDateFormat.format(date) : '');
+  const hadCompleteDateString = useRef(Boolean(date));
+
+  // Sync internal inputValue state with external date prop state
+  if (previousDateProp !== date) {
+    hadCompleteDateString.current = Boolean(date);
+    setPreviousDateProp(date);
+    // Only resync the inputValue state if the new date prop is non-null.
+    // This allows the user to backspace a completed date input, without
+    // the inputValue being overridden by the date prop changing to null.
+    if (date) setInputValue(intlDateFormat.format(date));
+  }
+  const placeholder = "   ".concat(intlDateFormat.separator, "   ").concat(intlDateFormat.separator);
+  const {
+    validateDateInput,
+    disabledTimes,
+    minTime,
+    maxTime
+  } = useDateInputValidation({
+    intlDateFormat,
+    required,
+    disabledDates,
+    minDate,
+    maxDate,
+    requiredError,
+    invalidDateError,
+    disabledDateError
+  });
+
+  /**
+   * Be careful to preserve the correct event orders
+   *   1. Typing a date in a blank DateInput:                     onChange -> onChange -> ... -> onChangeDate -> onErrorDate
+   *   2. Typing a date in a DateInput that already had a date:   onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate
+   */
+  const onChangeDateInput = useCallback(newDateString => {
+    let dateString = newDateString;
+    const newStringLength = dateString.length;
+    const maxLength = intlDateFormat.dateStringFormat.length;
+    if (newStringLength > maxLength || intlDateFormat.invalidDateFormatRegex.test(dateString)) return;
+    const newLastChar = dateString.charAt(newStringLength - 1);
+    const isDeletion = newStringLength < inputValue.length;
+    if (!isDeletion) {
+      const expectSeparator = intlDateFormat.separatorIndices.includes(newStringLength - 1);
+
+      // Add a separator as the user is typing if they miss one
+      if (expectSeparator && newLastChar !== intlDateFormat.separator) {
+        dateString = "".concat(dateString.slice(0, -1)).concat(intlDateFormat.separator).concat(dateString.slice(-1));
+      }
+      const separatorCount = dateString.split(intlDateFormat.separator).length - 1;
+
+      // Don't allow the user to type a separator unless we expect one
+      if (!expectSeparator && newLastChar === intlDateFormat.separator) return;
+      // Don't allow the user to type a duplicate separator or more than 2 separators
+      if (intlDateFormat.duplicateSeparatorRegex.test(dateString) || separatorCount > intlDateFormat.separatorIndices.length) return;
+    }
+    const isCompleteDateString = dateString.length === maxLength;
+
+    // If we have a complete date string, generate a date and validate it
+    if (isCompleteDateString) {
+      const date = intlDateFormat.date(dateString);
+      const newError = validateDateInput(dateString);
+      onChangeDate(newError ? null : date);
+      if (newError) onErrorDate(newError);else if (error && error.type !== 'custom') onErrorDate(null);
+    } else {
+      // If it's not a complete date string, but it was on the previous render, we can clear the date
+      if (hadCompleteDateString.current) onChangeDate(null);
+      // If we had an error with the previous complete date string, we can clear it now
+      if (error && error.type !== 'custom') onErrorDate(null);
+    }
+    hadCompleteDateString.current = isCompleteDateString;
+
+    // Update the input value with the coerced date string
+    setInputValue(dateString);
+  }, [inputValue, intlDateFormat, error, validateDateInput, onChangeDate, onErrorDate]);
+  const api = useMemo(() => ({
+    inputValue,
+    onChangeDateInput,
+    intlDateFormat,
+    placeholder,
+    validateDateInput,
+    disabledTimes,
+    minTime,
+    maxTime
+  }), [inputValue, onChangeDateInput, intlDateFormat, placeholder, validateDateInput, disabledTimes, minTime, maxTime]);
+  return api;
+};

package/esm/dates/useDateInputValidation.js

@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from 'react';
+import { DateInputValidationError } from './DateInputValidationError';
+import { getMidnightDate } from './getMidnightDate';
+import { getTimesFromDatesAndRanges } from './getTimesFromDatesAndRanges';
+const oneHundredYearsInMs = 3.156e12;
+export const useDateInputValidation = _ref => {
+  let {
+    intlDateFormat,
+    required,
+    disabledDates,
+    minDate,
+    maxDate,
+    requiredError = 'This field is required',
+    invalidDateError = 'Please enter a valid date',
+    disabledDateError = 'Date unavailable'
+  } = _ref;
+  const disabledTimes = useMemo(() => getTimesFromDatesAndRanges(disabledDates || []), [disabledDates]);
+  const minTime = useMemo(() => minDate && getMidnightDate(minDate).getTime(), [minDate]);
+  const maxTime = useMemo(() => maxDate && getMidnightDate(maxDate).getTime(), [maxDate]);
+  const validateDateInput = useCallback(dateString => {
+    // First evaluate the date string for any errors
+    const date = intlDateFormat.date(dateString);
+    const time = date === null || date === void 0 ? void 0 : date.getTime();
+    let errorType;
+
+    // Check if date string is fully formed if it's required
+    if (required && dateString.length !== intlDateFormat.dateStringFormat.length) errorType = 'required';
+    // Check if date is valid
+    else if (!date || Number.isNaN(date)) errorType = 'invalid';else if (time && (minTime && time < minTime - oneHundredYearsInMs || maxTime && time > maxTime + oneHundredYearsInMs)) errorType = 'invalid';
+    // Check if date is disabled
+    else if (time && (minTime && time < minTime || maxTime && time > maxTime || disabledTimes.includes(time))) errorType = 'disabled';
+
+    // Now assign the error message based on the error type and create the DateInputValidationError
+    const defaultError = intlDateFormat.dateStringFormat;
+    const errorMessages = {
+      required: requiredError,
+      invalid: invalidDateError,
+      disabled: disabledDateError
+    };
+    const error = errorType ? new DateInputValidationError(errorType, errorMessages[errorType] || defaultError) : null;
+    return error;
+  }, [intlDateFormat, required, disabledTimes, minTime, maxTime, requiredError, invalidDateError, disabledDateError]);
+  const api = useMemo(() => ({
+    validateDateInput,
+    disabledTimes,
+    minTime,
+    maxTime
+  }), [validateDateInput, disabledTimes, minTime, maxTime]);
+  return api;
+};

package/esm/hooks/useEventHandler.js

@@ -0,0 +1,54 @@
+import { useCallback, useContext } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { EventHandlerContext } from '../system/EventHandlerProvider';
+const noOp = () => {};
+export const useEventHandler = (component, action, eventConfig, analyticsId) => {
+  const config = useContext(EventHandlerContext);
+  return useCallback(() => {
+    var _actionMapping$action, _handler$convertedAct;
+    if (!config.handlers || !(eventConfig !== null && eventConfig !== void 0 && eventConfig.actions.length) && !analyticsId) {
+      return noOp();
+    }
+    const handler = config === null || config === void 0 ? void 0 : config.handlers[component];
+    if (!handler) {
+      return noOp();
+    }
+    const {
+      actionMapping
+    } = config;
+
+    /**
+     * Handler can provide an actionMapping object that maps
+     * CDS events (onClick, onHover) to its event names.
+     * If actionMapping is provided we convert CDS action into the handler one
+     * if the mapping between the two values exists
+     */
+    const convertedAction = (_actionMapping$action = actionMapping === null || actionMapping === void 0 ? void 0 : actionMapping[action]) !== null && _actionMapping$action !== void 0 ? _actionMapping$action : action;
+    const callback = (_handler$convertedAct = handler[convertedAction]) !== null && _handler$convertedAct !== void 0 ? _handler$convertedAct : noOp;
+    const params = {};
+
+    /**
+     * AnalyticsId is a generic way of autologging events without any meta
+     * information besides the ID, giving a way to log events without having
+     * engineers to manually include any contextual information. AnalyticsId
+     * would be used to identify the component that fires the event.
+     * Providing an analyticsId would take precendence over eventConfig
+     */
+    if (analyticsId) {
+      params.analyticsId = analyticsId;
+    }
+
+    /**
+     * the component event config provides a list of actions to track.
+     * If the current action is not listed we return a noOp
+     */
+    if (eventConfig !== null && eventConfig !== void 0 && eventConfig.actions.includes(convertedAction)) {
+      params.componentName = eventConfig.componentName;
+      params.data = eventConfig.data;
+    }
+    if (isEmpty(params)) {
+      return noOp();
+    }
+    return callback(params);
+  }, [action, component, config, eventConfig, analyticsId]);
+};

package/esm/hooks/useFallbackShape.js

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { shapeBorderRadius } from '../tokens/borderRadius';
+const WIDTH_MODIFIERS = [0.5, 0, 0.6, 0.8, 0.1, 0.9, 0.4, 0.2, 0.7, 0.3];
+export function useFallbackShape(shape, baseWidth, options) {
+  const width = useMemo(() => {
+    // When rectangle, lets vary the width a bit so things are
+    // a little less... uniform. Variety is nice.
+    if (shape === 'rectangle' && typeof baseWidth === 'number' && (!(options !== null && options !== void 0 && options.disableRandomRectWidth) || (options === null || options === void 0 ? void 0 : options.rectWidthVariant) !== undefined)) {
+      const modifier = (options === null || options === void 0 ? void 0 : options.rectWidthVariant) !== undefined ? WIDTH_MODIFIERS[options.rectWidthVariant % WIDTH_MODIFIERS.length] : Math.random();
+      const quarter = Math.round(baseWidth / 4);
+      const min = Math.max(baseWidth - quarter, 1);
+      const max = baseWidth + quarter;
+      return Math.floor(modifier * (max - min + 1)) + min;
+    }
+
+    // All other shapes need a fixed aspect ratio
+    return baseWidth;
+  }, [baseWidth, options, shape]);
+  const borderRadius = useMemo(() => {
+    if (shape === 'circle' && Number.isInteger(width)) {
+      return Number(width) / 2;
+    }
+    return shape === 'squircle' ? shapeBorderRadius.squircle : 0;
+  }, [shape, width]);
+  return useMemo(() => ({
+    borderRadius,
+    width
+  }), [borderRadius, width]);
+}

package/esm/hooks/useGroupToggler.js

@@ -0,0 +1,105 @@
+// internal to CDS, each platform customizes on top of this hook.
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/**
+ *
+ * @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.
+ * @returns [
+ *  selectedValues,
+    {
+      select,
+      unselect,
+      toggle,
+      isAllSelected,
+    }
+  ]
+ */
+
+/** @deprecated Do not use this. */
+export const useGroupToggler = (values, initialState) => {
+  // The function inside useState will still run on every render.
+  // This makes sure that we are not creating new Sets on every render
+  // and just throwing it away immediately.
+  const initialStateSet = useMemo(() => new Set(initialState), [initialState]);
+  const [state, setState] = useState(initialStateSet);
+  const lastMixedStateRef = useRef();
+  useEffect(() => {
+    const isStateMixed = state.size !== 0 && state.size !== values.length;
+    if (isStateMixed) {
+      lastMixedStateRef.current = state;
+    }
+  }, [state, values.length, lastMixedStateRef]);
+  const select = useCallback(value => {
+    setState(prevState => {
+      if (!value) {
+        // select all
+        return new Set(values);
+      }
+      const nextState = new Set(prevState).add(value);
+      if (nextState.size === values.length) {
+        lastMixedStateRef.current = undefined;
+      }
+      return nextState;
+    });
+  }, [setState, values]);
+  const unselect = useCallback(value => {
+    setState(prevState => {
+      if (!value) {
+        // unselect all
+        return new Set();
+      }
+      const nextState = new Set(prevState);
+      if (nextState.size === 0) {
+        lastMixedStateRef.current = undefined;
+      }
+      return nextState;
+    });
+  }, [setState]);
+  const toggle = useCallback(value => {
+    setState(prevState => {
+      // group
+      if (!value) {
+        const isAllSelected = prevState.size === values.length;
+        const isAllUnSelected = prevState.size === 0;
+        if (isAllSelected) {
+          return new Set();
+        }
+        if (isAllUnSelected) {
+          // last mixed values if any
+          return lastMixedStateRef.current ? lastMixedStateRef.current : new Set(values);
+        }
+        // mixed
+        return new Set(values);
+      }
+
+      // individual value
+      const nextState = new Set(prevState);
+      if (nextState.delete(value)) {
+        if (nextState.size === 0) {
+          lastMixedStateRef.current = undefined;
+        }
+        return nextState;
+      }
+      nextState.add(value);
+      if (nextState.size === values.length) {
+        lastMixedStateRef.current = undefined;
+      }
+      return nextState;
+    });
+  }, [setState, values]);
+  const isAllSelected = useMemo(() => {
+    if (state.size === 0) {
+      return false;
+    }
+    if (state.size === values.length) {
+      return true;
+    }
+    return 'mixed';
+  }, [state, values.length]);
+  return [state, {
+    select,
+    unselect,
+    toggle,
+    isAllSelected
+  }];
+};

package/esm/hooks/useHasMounted.js

@@ -0,0 +1,6 @@
+import { useEffect, useState } from 'react';
+export const useHasMounted = () => {
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => setHasMounted(true), []);
+  return hasMounted;
+};

package/esm/hooks/useIndexCounter.js

@@ -0,0 +1,47 @@
+import { useCallback, useMemo, useState } from 'react';
+import { noop } from '@coinbase/cds-utils';
+export function useIndexCounter(_ref) {
+  let {
+    length,
+    startIndex = 0,
+    onDecrement = noop,
+    onIncrement = noop,
+    onMinDecrement = noop,
+    onMaxIncrement = noop
+  } = _ref;
+  const [activeIndex, setActiveIndex] = useState(startIndex);
+  const isAtMin = activeIndex === 0;
+  const isAtMax = activeIndex === length - 1;
+  const handleDecrement = useCallback(() => {
+    if (isAtMin) {
+      onMinDecrement();
+    } else {
+      setActiveIndex(curr => {
+        const newactiveIndex = curr - 1;
+        onDecrement(newactiveIndex);
+        return newactiveIndex;
+      });
+    }
+  }, [isAtMin, onDecrement, onMinDecrement]);
+  const handleIncrement = useCallback(() => {
+    if (isAtMax) {
+      onMaxIncrement();
+    } else {
+      setActiveIndex(curr => {
+        const newactiveIndex = curr + 1;
+        onIncrement(newactiveIndex);
+        return newactiveIndex;
+      });
+    }
+  }, [isAtMax, onMaxIncrement, onIncrement]);
+  return useMemo(() => {
+    return {
+      activeIndex,
+      setActiveIndex,
+      isAtMin,
+      isAtMax,
+      handleDecrement,
+      handleIncrement
+    };
+  }, [activeIndex, handleDecrement, handleIncrement, isAtMin, isAtMax]);
+}

package/esm/hooks/useInputVariant.js

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+export const useInputVariant = (focused, variant) => {
+  return useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
+};

package/esm/hooks/useLogo.js

@@ -0,0 +1,60 @@
+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';
+export const blue = '#0052FF';
+export const black = '#0A0B0D';
+export const white = '#FFFFFF';
+const logoMarkData = {
+  16: {
+    viewBox: '0 0 16 16',
+    path: 'M8,12c-2.21,0-4-1.79-4-4c0-2.21,1.79-4,4-4c1.86,0,3.41,1.28,3.86,3h4.07C15.44,3.05,12.08,0,8,0 C3.58,0,0,3.58,0,8c0,4.42,3.58,8,8,8c4.08,0,7.44-3.05,7.93-7h-4.07C11.41,10.72,9.86,12,8,12z'
+  },
+  24: {
+    viewBox: '0 0 24 24',
+    path: 'M12.0225 18C8.70131 18 6.01127 15.315 6.01127 12C6.01127 8.685 8.70131 6 12.0225 6C14.9981 6 17.4678 8.165 17.9436 11H24C23.489 4.84 18.3244 0 12.0225 0C5.3851 0 0 5.375 0 12C0 18.625 5.3851 24 12.0225 24C18.3244 24 23.489 19.16 24 13H17.9436C17.4678 15.835 14.9981 18 12.0225 18Z'
+  },
+  32: {
+    viewBox: '0 0 48 48',
+    path: 'M24,36c-6.63,0-12-5.37-12-12s5.37-12,12-12c5.94,0,10.87,4.33,11.82,10h12.09C46.89,9.68,36.58,0,24,0 C10.75,0,0,10.75,0,24s10.75,24,24,24c12.58,0,22.89-9.68,23.91-22H35.82C34.87,31.67,29.94,36,24,36z'
+  }
+};
+const wordmarkData = {
+  viewBox: '0 0 688 123',
+  path: 'M138.857 34.3392C113.863 34.3392 94.3343 53.3277 94.3343 78.7477C94.3343 104.168 113.37 122.994 138.857 122.994C164.343 122.994 183.71 103.843 183.71 78.5852C183.71 53.4902 164.674 34.3392 138.857 34.3392ZM139.025 104.674C124.792 104.674 114.363 93.611 114.363 78.754C114.363 63.7282 124.624 52.6714 138.857 52.6714C153.258 52.6714 163.681 63.897 163.681 78.754C163.681 93.611 153.258 104.674 139.025 104.674ZM189.168 53.659H201.584V121.35H221.443V35.9893H189.168V53.659ZM44.3536 52.6652C54.7832 52.6652 63.0581 59.103 66.1995 68.6785H87.2209C83.4113 48.2087 66.5305 34.3392 44.5223 34.3392C19.5288 34.3392 0 53.3277 0 78.754C0 104.18 19.0355 123 44.5223 123C66.0371 123 83.249 109.131 87.0586 88.492H66.1995C63.2205 98.0675 54.9456 104.674 44.516 104.674C30.1145 104.674 20.0222 93.611 20.0222 78.754C20.0285 63.7282 29.9584 52.6652 44.3536 52.6652ZM566.518 70.4973L551.954 68.3535C545.003 67.3659 540.038 65.0533 540.038 59.603C540.038 53.659 546.495 50.6901 555.264 50.6901C564.863 50.6901 570.989 54.8153 572.313 61.5844H591.511C589.357 44.4148 576.117 34.3455 555.763 34.3455C534.742 34.3455 520.84 45.0773 520.84 60.2656C520.84 74.7913 529.946 83.2167 548.313 85.8544L562.877 87.9982C569.996 88.9858 573.968 91.7984 573.968 97.0799C573.968 103.849 567.017 106.655 557.418 106.655C545.665 106.655 539.045 101.868 538.052 94.6048H518.523C520.347 111.281 533.418 123 557.25 123C578.933 123 593.328 113.093 593.328 96.0861C593.328 80.8979 582.905 72.9725 566.518 70.4973ZM211.514 0.825042C204.232 0.825042 198.767 6.10656 198.767 13.3694C198.767 20.6323 204.225 25.9138 211.514 25.9138C218.796 25.9138 224.26 20.6323 224.26 13.3694C224.26 6.10656 218.796 0.825042 211.514 0.825042ZM502.966 65.2158C502.966 46.7274 491.712 34.3455 467.88 34.3455C445.373 34.3455 432.795 45.7398 430.309 63.2407H450.007C451 56.4716 456.296 50.8588 467.549 50.8588C477.648 50.8588 482.613 55.3153 482.613 60.7656C482.613 67.866 473.507 69.6785 462.253 70.8349C447.028 72.4849 428.161 77.7664 428.161 97.58C428.161 112.937 439.583 122.837 457.788 122.837C472.021 122.837 480.958 116.893 485.43 107.48C486.092 115.9 492.38 121.35 501.155 121.35H512.74V103.687H502.972V65.2158H502.966ZM483.437 86.6794C483.437 98.0737 473.507 106.493 461.423 106.493C453.972 106.493 447.683 103.355 447.683 96.7549C447.683 88.3357 457.782 86.0231 467.05 85.0356C475.987 84.2105 480.952 82.2292 483.437 78.429V86.6794ZM378.012 34.3392C366.92 34.3392 357.652 38.9645 351.032 46.7211V0H331.172V121.35H350.701V110.124C357.321 118.212 366.758 123 378.012 123C401.843 123 419.886 104.18 419.886 78.754C419.886 53.3277 401.512 34.3392 378.012 34.3392ZM375.033 104.674C360.8 104.674 350.37 93.611 350.37 78.754C350.37 63.897 360.962 52.6714 375.195 52.6714C389.596 52.6714 399.689 63.7345 399.689 78.754C399.689 93.611 389.265 104.674 375.033 104.674ZM283.671 34.3392C270.762 34.3392 262.319 39.6208 257.354 47.0524V35.9893H237.656V121.344H257.516V74.9538C257.516 61.9094 265.791 52.6652 278.038 52.6652C289.46 52.6652 296.574 60.7531 296.574 72.4787V121.35H316.434V70.9974C316.44 49.5275 305.354 34.3392 283.671 34.3392ZM688 75.9476C688 51.5151 670.126 34.3455 646.126 34.3455C620.639 34.3455 601.934 53.4965 601.934 78.754C601.934 105.337 621.963 123 646.457 123C667.147 123 683.366 110.781 687.5 93.4485H666.81C663.831 101.043 656.549 105.337 646.781 105.337C634.035 105.337 624.436 97.4112 622.288 83.5417H687.994V75.9476H688ZM623.449 69.341C626.597 57.4529 635.534 51.6776 645.795 51.6776C657.049 51.6776 665.655 58.1155 667.641 69.341H623.449Z'
+};
+export const useLogoWordmark = _ref => {
+  let {
+    foreground,
+    colorScheme
+  } = _ref;
+  const color = colorScheme === 'dark' ? white : foreground ? black : blue;
+  return useMemo(() => {
+    return _objectSpread(_objectSpread({}, wordmarkData), {}, {
+      color
+    });
+  }, [color]);
+};
+export const useLogoMark = _ref2 => {
+  let {
+    size = 32,
+    foreground,
+    colorScheme
+  } = _ref2;
+  const {
+    viewBox,
+    path
+  } = logoMarkData[size];
+  const color = colorScheme === 'dark' ? white : foreground ? black : blue;
+  return useMemo(() => {
+    return {
+      color,
+      path,
+      viewBox,
+      width: size,
+      height: size
+    };
+  }, [color, path, size, viewBox]);
+};

package/esm/hooks/useMergeRefs.js

@@ -0,0 +1,14 @@
+export const useMergeRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+};