@coinbase/cds-common 0.0.0 → 8.13.2

package/esm/animation/collapsible.js

@@ -0,0 +1,75 @@
+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 { durations } from '../motion/tokens';
+export const collapsibleHiddenOpacity = 0;
+export const collapsibleVisibleOpacity = 1;
+export const collapsibleHiddenMaxSize = 0;
+// for web, mobile will be determined by content height dynamically
+export const collapsibleVisibleMaxSize = 1000;
+export const easing = 'global';
+export const inDuration = 'slow1';
+export const outDuration = 'moderate3';
+export const animateInOpacityConfig = {
+  vertical: {
+    property: 'opacity',
+    easing,
+    duration: inDuration,
+    toValue: collapsibleVisibleOpacity,
+    fromValue: collapsibleHiddenOpacity,
+    useNativeDriver: false
+  },
+  horizontal: {
+    property: 'opacity',
+    easing: 'exitFunctional',
+    duration: 'fast1',
+    delay: durations.fast1,
+    toValue: collapsibleVisibleOpacity,
+    fromValue: collapsibleHiddenOpacity,
+    useNativeDriver: false
+  }
+};
+export const animateOutOpacityConfig = {
+  vertical: _objectSpread(_objectSpread({}, animateInOpacityConfig.vertical), {}, {
+    duration: outDuration,
+    toValue: collapsibleHiddenOpacity,
+    fromValue: collapsibleVisibleOpacity
+  }),
+  horizontal: _objectSpread(_objectSpread({}, animateInOpacityConfig.horizontal), {}, {
+    toValue: collapsibleHiddenOpacity,
+    fromValue: collapsibleVisibleOpacity,
+    delay: undefined
+  })
+};
+export const animateInMaxSizeConfig = {
+  vertical: {
+    property: 'height',
+    easing,
+    duration: inDuration,
+    toValue: collapsibleVisibleMaxSize,
+    fromValue: collapsibleHiddenMaxSize,
+    useNativeDriver: false
+  },
+  horizontal: {
+    property: 'width',
+    easing: 'global',
+    duration: 'fast1',
+    useNativeDriver: false,
+    toValue: collapsibleVisibleMaxSize,
+    fromValue: collapsibleHiddenMaxSize
+  }
+};
+export const animateOutMaxSizeConfig = {
+  vertical: _objectSpread(_objectSpread({}, animateInMaxSizeConfig.vertical), {}, {
+    duration: outDuration,
+    toValue: collapsibleHiddenMaxSize,
+    fromValue: collapsibleVisibleMaxSize
+  }),
+  horizontal: _objectSpread(_objectSpread({}, animateInMaxSizeConfig.horizontal), {}, {
+    delay: durations.fast1,
+    toValue: collapsibleHiddenMaxSize,
+    fromValue: collapsibleVisibleMaxSize
+  })
+};

package/esm/animation/dot.js

@@ -0,0 +1,15 @@
+import { durations } from '../motion/tokens';
+export const dotHidden = 0;
+export const dotVisible = 1;
+export const animateDotWidthConfig = {
+  property: 'width',
+  easing: 'global',
+  duration: 'fast1',
+  useNativeDriver: false
+};
+export const animateDotOpacityConfig = {
+  property: 'opacity',
+  easing: 'exitFunctional',
+  duration: 'fast1',
+  delay: durations.fast1
+};

package/esm/animation/drawer.js

@@ -0,0 +1,19 @@
+/** Upper limit for how much the drawer can be extended in length by panning */
+export const MAX_OVER_DRAG = 40;
+/** Dragging a Drawer by more than this percentage of the Drawer will dismiss it */
+export const DISMISSAL_DRAG_THRESHOLD = 150;
+/** Quick swipes will dismiss the Tray, especially useful for Trays that are very short */
+export const DISMISSAL_VELOCITY_THRESHOLD = 0.8;
+/** Minimum panning distance required to capture pan gesture */
+export const MIN_PAN_DISTANCE = 2;
+export const drawerAnimationDefaultDuration = 'moderate3';
+export const animateDrawerInConfig = {
+  toValue: 1,
+  easing: 'enterFunctional',
+  duration: drawerAnimationDefaultDuration
+};
+export const animateDrawerOutConfig = {
+  toValue: 0,
+  easing: 'exitFunctional',
+  duration: drawerAnimationDefaultDuration
+};

package/esm/animation/dropdown.js

@@ -0,0 +1,31 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const baseDropdownAnimations = {
+  easing: 'global',
+  duration: 'moderate3'
+};
+const fromTransformValue = -16;
+const toTransformValue = 0;
+export const animateDropdownOpacityInConfig = _objectSpread({
+  property: 'opacity',
+  fromValue: 0,
+  toValue: 1
+}, baseDropdownAnimations);
+export const animateDropdownOpacityOutConfig = _objectSpread({
+  property: 'opacity',
+  fromValue: 1,
+  toValue: 0
+}, baseDropdownAnimations);
+
+// property based on placement
+export const animateDropdownTransformInConfig = _objectSpread({
+  fromValue: fromTransformValue,
+  toValue: toTransformValue
+}, baseDropdownAnimations);
+export const animateDropdownTransformOutConfig = _objectSpread({
+  fromValue: toTransformValue,
+  toValue: fromTransformValue
+}, baseDropdownAnimations);

package/esm/animation/fullscreenModal.js

@@ -0,0 +1,39 @@
+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); }
+export const modalHiddenOpacity = 0;
+export const modalHiddenTranslateY = 80;
+export const modalVisibleOpacity = 1;
+export const modalVisibleTranslateY = 0;
+export const animateInOpacityConfig = {
+  property: 'opacity',
+  easing: 'enterFunctional',
+  duration: 'moderate3',
+  toValue: modalVisibleOpacity
+};
+export const animateOutOpacityConfig = {
+  property: 'opacity',
+  easing: 'exitFunctional',
+  duration: 'moderate1',
+  toValue: modalHiddenOpacity
+};
+export const animateInTranslateYConfig = {
+  property: 'y',
+  easing: 'enterFunctional',
+  duration: 'moderate3',
+  toValue: modalVisibleTranslateY
+};
+export const animateOutTranslateYConfig = {
+  property: 'y',
+  easing: 'exitFunctional',
+  duration: 'moderate1',
+  toValue: modalHiddenTranslateY
+};
+export const animateInOverlayOpacityConfig = _objectSpread(_objectSpread({}, animateInOpacityConfig), {}, {
+  easing: 'global'
+});
+export const animateOutOverlayOpacityConfig = _objectSpread(_objectSpread({}, animateOutOpacityConfig), {}, {
+  easing: 'global'
+});

package/esm/animation/likeButton.js

@@ -0,0 +1,18 @@
+export const activeScale = 1.2;
+export const inactiveScale = 1;
+export const scaleInConfig = {
+  property: 'scale',
+  easing: 'exitFunctional',
+  duration: 'fast1',
+  fromValue: inactiveScale,
+  toValue: activeScale,
+  useNativeDriver: true
+};
+export const scaleOutConfig = {
+  property: 'scale',
+  easing: 'enterFunctional',
+  duration: 'slow3',
+  fromValue: activeScale,
+  toValue: inactiveScale,
+  useNativeDriver: true
+};

package/esm/animation/menu.js

@@ -0,0 +1,31 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const basePopoverMenuAnimations = {
+  easing: 'global',
+  duration: 'moderate3'
+};
+const yFromValue = -16;
+const yToValue = 0;
+export const animateMenuOpacityInConfig = _objectSpread({
+  property: 'opacity',
+  fromValue: 0,
+  toValue: 1
+}, basePopoverMenuAnimations);
+export const animateMenuOpacityOutConfig = _objectSpread({
+  property: 'opacity',
+  fromValue: 1,
+  toValue: 0
+}, basePopoverMenuAnimations);
+export const animateMenuTransformInConfig = _objectSpread({
+  property: 'transform',
+  fromValue: yFromValue,
+  toValue: yToValue
+}, basePopoverMenuAnimations);
+export const animateMenuTransformOutConfig = _objectSpread({
+  property: 'transform',
+  fromValue: yToValue,
+  toValue: yFromValue
+}, basePopoverMenuAnimations);

package/esm/animation/modal.js

@@ -0,0 +1,32 @@
+export const modalHiddenOpacity = 0;
+export const modalHiddenScale = 0.98;
+export const modalVisibleOpacity = 1;
+export const modalVisibleScale = 1;
+export const animateInOpacityConfig = {
+  property: 'opacity',
+  easing: 'enterFunctional',
+  duration: 'fast1',
+  toValue: modalVisibleOpacity,
+  fromValue: modalHiddenOpacity
+};
+export const animateOutOpacityConfig = {
+  property: 'opacity',
+  easing: 'global',
+  duration: 'fast1',
+  toValue: modalHiddenOpacity,
+  fromValue: modalVisibleOpacity
+};
+export const animateInScaleConfig = {
+  property: 'scale',
+  easing: 'enterFunctional',
+  duration: 'moderate3',
+  toValue: modalVisibleScale,
+  fromValue: modalHiddenScale
+};
+export const animateOutScaleConfig = {
+  property: 'scale',
+  easing: 'global',
+  duration: 'fast1',
+  toValue: modalHiddenScale,
+  fromValue: modalVisibleScale
+};

package/esm/animation/overlay.js

@@ -0,0 +1,16 @@
+export const overlayHiddenOpacity = 0;
+export const overlayVisibleOpacity = 1;
+export const animateInOpacityConfig = {
+  property: 'opacity',
+  easing: 'enterFunctional',
+  duration: 'moderate1',
+  toValue: overlayVisibleOpacity,
+  fromValue: overlayHiddenOpacity
+};
+export const animateOutOpacityConfig = {
+  property: 'opacity',
+  easing: 'global',
+  duration: 'fast1',
+  toValue: overlayHiddenOpacity,
+  fromValue: overlayVisibleOpacity
+};

package/esm/animation/paddle.js

@@ -0,0 +1,17 @@
+export const paddleHidden = 0;
+export const paddleVisible = 1;
+export const animateGradientScaleConfig = {
+  property: 'scale',
+  easing: 'global',
+  duration: 'fast1'
+};
+export const animatePaddleOpacityConfig = {
+  property: 'opacity',
+  easing: 'enterFunctional',
+  duration: 'moderate1'
+};
+export const animatePaddleScaleConfig = {
+  property: 'scale',
+  easing: 'global',
+  duration: 'moderate1'
+};

package/esm/animation/progress.js

@@ -0,0 +1,4 @@
+export const animateProgressBaseSpec = {
+  easing: 'global',
+  duration: 'slow3'
+};

package/esm/animation/rotate.js

@@ -0,0 +1,5 @@
+export const baseConfig = {
+  property: 'transform',
+  easing: 'enterFunctional',
+  duration: 'moderate1'
+};

package/esm/animation/select.js

@@ -0,0 +1,16 @@
+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); }
+const baseConfig = {
+  property: 'transform',
+  easing: 'enterFunctional',
+  duration: 'moderate1'
+};
+export const animateCaretInConfig = _objectSpread(_objectSpread({}, baseConfig), {}, {
+  toValue: 1
+});
+export const animateCaretOutConfig = _objectSpread(_objectSpread({}, baseConfig), {}, {
+  toValue: 0
+});

package/esm/animation/sparkline.js

@@ -0,0 +1,8 @@
+const CHART_ANIMATED_PATH_DURATION = 450;
+function easeOutQuint(x) {
+  return 1 - (1 - x) ** 5;
+}
+export const animatedPathConfig = {
+  easing: easeOutQuint,
+  duration: CHART_ANIMATED_PATH_DURATION
+};

package/esm/animation/tabs.js

@@ -0,0 +1,5 @@
+export const animateTabIndicatorBaseSpec = {
+  property: 'x',
+  easing: 'global',
+  duration: 'moderate1'
+};

package/esm/animation/toast.js

@@ -0,0 +1,36 @@
+export const toastHiddenOpacity = 0;
+export const toastHiddenBottom = 25;
+export const toastVisibleOpacity = 1;
+export const toastVisibleBottom = 0;
+export const animateInOpacityConfig = {
+  property: 'opacity',
+  easing: 'enterFunctional',
+  duration: 'moderate3',
+  toValue: toastVisibleOpacity,
+  fromValue: toastHiddenOpacity
+};
+export const animateOutOpacityConfig = {
+  property: 'opacity',
+  easing: 'exitFunctional',
+  duration: 'moderate3',
+  toValue: toastHiddenOpacity,
+  fromValue: toastVisibleOpacity
+};
+export const animateInBottomConfig = {
+  property: 'y',
+  easing: 'enterFunctional',
+  duration: 'moderate3',
+  toValue: toastVisibleBottom,
+  fromValue: toastHiddenBottom
+};
+export const animateOutBottomConfig = {
+  property: 'y',
+  easing: 'exitFunctional',
+  duration: 'moderate3',
+  toValue: toastHiddenBottom,
+  fromValue: toastVisibleBottom
+};
+
+// pan responder configs
+export const horizontalPanThreshold = 50;
+export const bottomPanThreshold = 10;

package/esm/animation/tooltip.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); }
+export const tooltipHiddenOpacity = 0;
+export const tooltipVisibleOpacity = 1;
+export const tooltipHiddenY = 16;
+export const tooltipVisibleY = 0;
+const baseTiming = {
+  duration: 'fast1',
+  delay: 25
+};
+export const animateInOpacityConfig = _objectSpread(_objectSpread({
+  property: 'opacity'
+}, baseTiming), {}, {
+  easing: 'enterFunctional',
+  toValue: tooltipVisibleOpacity,
+  fromValue: tooltipHiddenOpacity
+});
+export const animateOutOpacityConfig = _objectSpread(_objectSpread({
+  property: 'opacity'
+}, baseTiming), {}, {
+  easing: 'exitFunctional',
+  toValue: tooltipHiddenOpacity,
+  fromValue: tooltipVisibleOpacity
+});
+
+/**
+ * Build tooltip translation config base on placement
+ * @param placement Tooltip placement
+ * @param transitionType animation type
+ * @returns Motion config
+ */
+export const getTranslateConfigByPlacement = _ref => {
+  let {
+    placement,
+    isExiting = false
+  } = _ref;
+  let config;
+  switch (placement) {
+    case 'top':
+      config = {
+        property: 'translateY',
+        fromValue: 16,
+        toValue: 0
+      };
+      break;
+    case 'bottom':
+      config = {
+        property: 'translateY',
+        fromValue: -16,
+        toValue: 0
+      };
+      break;
+    case 'left':
+      config = {
+        property: 'translateX',
+        fromValue: 16,
+        toValue: 0
+      };
+      break;
+    case 'right':
+      config = {
+        property: 'translateX',
+        fromValue: -16,
+        toValue: 0
+      };
+      break;
+    default:
+      config = {
+        property: 'translateY',
+        fromValue: 16,
+        toValue: 0
+      };
+  }
+
+  // swap from and to value for exit config
+  if (isExiting) {
+    const tempValue = config.fromValue;
+    config.fromValue = config.toValue;
+    config.toValue = tempValue;
+  }
+  return _objectSpread(_objectSpread(_objectSpread({}, baseTiming), config), {}, {
+    easing: isExiting ? 'exitFunctional' : 'enterFunctional'
+  });
+};

package/esm/cards/getCardBodySpacingProps.js

@@ -0,0 +1,25 @@
+export const getCardBodySpacingProps = _ref => {
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15;
+  let {
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingEnd,
+    paddingBottom,
+    paddingStart,
+    compact
+  } = _ref;
+  if (compact) return {
+    paddingBottom: (_ref2 = (_ref3 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref3 !== void 0 ? _ref3 : padding) !== null && _ref2 !== void 0 ? _ref2 : 1,
+    paddingTop: (_ref4 = (_ref5 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref5 !== void 0 ? _ref5 : padding) !== null && _ref4 !== void 0 ? _ref4 : 2,
+    paddingStart: (_ref6 = (_ref7 = paddingStart !== null && paddingStart !== void 0 ? paddingStart : paddingX) !== null && _ref7 !== void 0 ? _ref7 : padding) !== null && _ref6 !== void 0 ? _ref6 : 2,
+    paddingEnd: (_ref8 = (_ref9 = paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : paddingX) !== null && _ref9 !== void 0 ? _ref9 : padding) !== null && _ref8 !== void 0 ? _ref8 : 2
+  };
+  return {
+    paddingBottom: (_ref0 = (_ref1 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref1 !== void 0 ? _ref1 : padding) !== null && _ref0 !== void 0 ? _ref0 : 3,
+    paddingTop: (_ref10 = (_ref11 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref11 !== void 0 ? _ref11 : padding) !== null && _ref10 !== void 0 ? _ref10 : 3,
+    paddingStart: (_ref12 = (_ref13 = paddingStart !== null && paddingStart !== void 0 ? paddingStart : paddingX) !== null && _ref13 !== void 0 ? _ref13 : padding) !== null && _ref12 !== void 0 ? _ref12 : 3,
+    paddingEnd: (_ref14 = (_ref15 = paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : paddingX) !== null && _ref15 !== void 0 ? _ref15 : padding) !== null && _ref14 !== void 0 ? _ref14 : 3
+  };
+};

package/esm/color/blendColors.js

@@ -0,0 +1,44 @@
+import { rgb } from 'd3-color';
+export const getRGBColor = color => {
+  if (typeof color === 'string') {
+    return rgb(color);
+  }
+  if ('r' in color && 'g' in color && 'b' in color) {
+    return rgb(color.r, color.g, color.b, color.opacity);
+  }
+  return rgb(color);
+};
+
+/**
+ * The overlayColor value must have an alpha less than 1 in order to output a different color.
+ * @param underlayColor ColorValue
+ * @param overlayColor  ColorValue
+ * @returns rbgString
+ */
+export const blendColors = _ref => {
+  let {
+    underlayColor,
+    overlayColor
+  } = _ref;
+  const {
+    r: underlayR,
+    g: underlayG,
+    b: underlayB,
+    opacity: underlayOpacity
+  } = getRGBColor(underlayColor);
+  const {
+    r: OverlayR,
+    g: OverlayG,
+    b: OverlayB,
+    opacity: overlayOpacity
+  } = getRGBColor(overlayColor);
+  const mix = [];
+  mix[3] = 1 - (1 - overlayOpacity) * (1 - underlayOpacity); // alpha
+  // red
+  mix[0] = Math.round(OverlayR * overlayOpacity / mix[3] + underlayR * underlayOpacity * (1 - overlayOpacity) / mix[3]);
+  // green
+  mix[1] = Math.round(OverlayG * overlayOpacity / mix[3] + underlayG * underlayOpacity * (1 - overlayOpacity) / mix[3]);
+  // blue
+  mix[2] = Math.round(OverlayB * overlayOpacity / mix[3] + underlayB * underlayOpacity * (1 - overlayOpacity) / mix[3]);
+  return rgb(mix[0], mix[1], mix[2]);
+};

package/esm/color/colorToHex.js

@@ -0,0 +1,11 @@
+import { color } from 'd3-color';
+
+/**
+ * @param color - any valid color value, i.e. `rgba(255, 255, 255, 1)`
+ * @returns hex - `#ffffff`
+ * @website https://github.com/d3/d3-color#color
+ */
+export const colorToHex = value => {
+  var _color$formatHex, _color;
+  return (_color$formatHex = (_color = color(value)) === null || _color === void 0 ? void 0 : _color.formatHex()) !== null && _color$formatHex !== void 0 ? _color$formatHex : value;
+};

package/esm/color/darkenColor.js

@@ -0,0 +1,5 @@
+import { color } from 'd3-color';
+export const darkenColor = value => {
+  const d3Color = color(value);
+  return d3Color === null || d3Color === void 0 ? void 0 : d3Color.darker().formatHex();
+};

package/esm/color/getAccessibleForegroundGradient.js

@@ -0,0 +1,32 @@
+import { getAccessibleColor } from '../utils/getAccessibleColor';
+import { darkenColor } from './darkenColor';
+export const getAccessibleForegroundGradient = _ref => {
+  let {
+    background,
+    color,
+    colorScheme,
+    usage
+  } = _ref;
+  let color1 = color;
+  let color2 = color;
+  // Disable gradients in dark mode
+  if (colorScheme === 'dark' || color === 'auto') {
+    color1 = color !== 'auto' ? color : getAccessibleColor({
+      background,
+      foreground: 'auto',
+      usage
+    });
+    color2 = color1;
+  } else {
+    var _darkenColor;
+    color1 = color;
+    color2 = (_darkenColor = darkenColor(color)) !== null && _darkenColor !== void 0 ? _darkenColor : color;
+  }
+  return [{
+    offset: '0%',
+    color: color1
+  }, {
+    offset: '100%',
+    color: color2
+  }];
+};