@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/themes/defaultTheme.js

@@ -0,0 +1,568 @@
+export const defaultThemeId = 'cds-default';
+const lightSpectrum = {
+  blue0: '245,248,255',
+  blue5: '211,225,255',
+  blue10: '176,202,255',
+  blue15: '146,182,255',
+  blue20: '115,162,255',
+  blue30: '70,132,255',
+  blue40: '38,110,255',
+  blue50: '16,94,255',
+  blue60: '0,82,255',
+  blue70: '0,75,235',
+  blue80: '0,62,193',
+  blue90: '0,41,130',
+  blue100: '0,24,77',
+  green0: '245,255,251',
+  green5: '203,245,227',
+  green10: '163,235,205',
+  green15: '131,224,186',
+  green20: '101,214,167',
+  green30: '60,194,138',
+  green40: '34,173,115',
+  green50: '18,153,97',
+  green60: '9,133,81',
+  green70: '4,112,67',
+  green80: '2,83,50',
+  green90: '0,57,35',
+  green100: '0,31,18',
+  orange0: '255,250,245',
+  orange5: '254,232,210',
+  orange10: '253,213,176',
+  orange15: '251,194,147',
+  orange20: '249,174,118',
+  orange30: '244,140,76',
+  orange40: '237,112,47',
+  orange50: '225,89,27',
+  orange60: '207,71,14',
+  orange70: '181,54,6',
+  orange80: '145,39,2',
+  orange90: '100,26,0',
+  orange100: '51,13,0',
+  gray0: '255,255,255',
+  gray5: '247,248,249',
+  gray10: '238,240,243',
+  gray15: '222,225,231',
+  gray20: '206,210,219',
+  gray30: '177,183,195',
+  gray40: '137,144,158',
+  gray50: '113,120,134',
+  gray60: '91,97,110',
+  gray70: '70,75,85',
+  gray80: '50,53,61',
+  gray90: '30,32,37',
+  gray100: '10,11,13',
+  indigo0: '246,247,255',
+  indigo5: '230,232,255',
+  indigo10: '214,218,254',
+  indigo15: '198,204,253',
+  indigo20: '181,189,253',
+  indigo30: '148,161,251',
+  indigo40: '116,135,247',
+  indigo50: '89,111,242',
+  indigo60: '66,91,233',
+  indigo70: '47,74,215',
+  indigo80: '31,54,173',
+  indigo90: '17,32,107',
+  indigo100: '8,15,51',
+  pink0: '255,245,255',
+  pink5: '253,228,253',
+  pink10: '251,212,250',
+  pink15: '248,195,245',
+  pink20: '244,178,240',
+  pink30: '235,143,227',
+  pink40: '221,110,209',
+  pink50: '203,81,187',
+  pink60: '179,58,162',
+  pink70: '149,39,133',
+  pink80: '116,26,102',
+  pink90: '83,17,72',
+  pink100: '51,10,44',
+  purple0: '251,247,255',
+  purple5: '244,232,255',
+  purple10: '237,217,255',
+  purple15: '230,201,255',
+  purple20: '222,184,255',
+  purple30: '205,153,253',
+  purple40: '188,123,251',
+  purple50: '157,107,242',
+  purple60: '138,85,233',
+  purple70: '119,67,215',
+  purple80: '90,48,173',
+  purple90: '54,27,107',
+  purple100: '25,13,51',
+  red0: '255,245,246',
+  red5: '254,225,228',
+  red10: '253,206,210',
+  red15: '251,186,191',
+  red20: '249,166,173',
+  red30: '244,127,136',
+  red40: '237,89,102',
+  red50: '225,57,71',
+  red60: '207,32,47',
+  red70: '181,15,29',
+  red80: '145,5,16',
+  red90: '100,1,9',
+  red100: '51,0,4',
+  teal0: '240,254,255',
+  teal5: '188,246,253',
+  teal10: '136,237,251',
+  teal15: '93,226,248',
+  teal20: '51,213,244',
+  teal30: '0,188,235',
+  teal40: '0,169,221',
+  teal50: '0,147,203',
+  teal60: '0,123,179',
+  teal70: '0,97,149',
+  teal80: '0,71,116',
+  teal90: '0,47,83',
+  teal100: '0,27,51',
+  yellow0: '255,252,241',
+  yellow5: '255,244,192',
+  yellow10: '255,240,145',
+  yellow15: '255,234,100',
+  yellow20: '255,228,54',
+  yellow30: '247,210,26',
+  yellow40: '235,186,0',
+  yellow50: '207,151,0',
+  yellow60: '174,113,0',
+  yellow70: '136,76,0',
+  yellow80: '96,48,0',
+  yellow90: '58,20,0',
+  yellow100: '27,6,0',
+  chartreuse0: '245,255,250',
+  chartreuse5: '221,251,232',
+  chartreuse10: '198,247,209',
+  chartreuse15: '176,242,182',
+  chartreuse20: '159,238,155',
+  chartreuse30: '137,223,117',
+  chartreuse40: '127,208,87',
+  chartreuse50: '86,179,64',
+  chartreuse60: '53,151,48',
+  chartreuse70: '35,122,43',
+  chartreuse80: '25,93,41',
+  chartreuse90: '17,64,35',
+  chartreuse100: '7,26,17'
+};
+const darkSpectrum = {
+  blue0: '0,16,51',
+  blue5: '1,29,91',
+  blue10: '1,42,130',
+  blue15: '3,51,154',
+  blue20: '5,59,177',
+  blue30: '10,72,206',
+  blue40: '19,84,225',
+  blue50: '33,98,238',
+  blue60: '55,115,245',
+  blue70: '87,139,250',
+  blue80: '132,170,253',
+  blue90: '185,207,255',
+  blue100: '245,248,255',
+  green0: '0,31,18',
+  green5: '0,48,29',
+  green10: '1,70,42',
+  green15: '2,82,48',
+  green20: '2,92,55',
+  green30: '6,112,68',
+  green40: '11,133,82',
+  green50: '21,153,98',
+  green60: '39,173,117',
+  green70: '68,194,141',
+  green80: '111,214,171',
+  green90: '171,235,208',
+  green100: '245,255,251',
+  orange0: '51,13,0',
+  orange5: '79,20,0',
+  orange10: '107,28,1',
+  orange15: '131,36,2',
+  orange20: '155,44,4',
+  orange30: '189,59,9',
+  orange40: '213,76,18',
+  orange50: '230,96,32',
+  orange60: '240,120,54',
+  orange70: '248,150,86',
+  orange80: '252,185,131',
+  orange90: '254,219,185',
+  orange100: '255,250,245',
+  gray0: '10,11,13',
+  gray5: '20,21,25',
+  gray10: '30,32,37',
+  gray15: '40,43,49',
+  gray20: '50,53,61',
+  gray30: '70,75,85',
+  gray40: '91,97,110',
+  gray50: '114,120,134',
+  gray60: '138,145,158',
+  gray70: '165,170,182',
+  gray80: '193,198,207',
+  gray90: '224,226,231',
+  gray100: '255,255,255',
+  indigo0: '8,15,51',
+  indigo5: '14,27,91',
+  indigo10: '21,39,130',
+  indigo15: '27,47,154',
+  indigo20: '33,56,177',
+  indigo30: '48,73,206',
+  indigo40: '68,92,225',
+  indigo50: '92,113,238',
+  indigo60: '121,138,245',
+  indigo70: '153,165,250',
+  indigo80: '187,194,253',
+  indigo90: '219,223,255',
+  indigo100: '246,247,255',
+  pink0: '51,10,44',
+  pink5: '70,14,61',
+  pink10: '89,19,78',
+  pink15: '108,24,94',
+  pink20: '126,30,111',
+  pink30: '159,44,142',
+  pink40: '187,64,170',
+  pink50: '208,88,193',
+  pink60: '225,117,214',
+  pink70: '237,149,230',
+  pink80: '246,184,243',
+  pink90: '252,217,251',
+  pink100: '255,245,255',
+  purple0: '25,13,51',
+  purple5: '43,22,89',
+  purple10: '73,30,137',
+  purple15: '97,37,175',
+  purple20: '123,45,211',
+  purple30: '142,51,234',
+  purple40: '164,84,244',
+  purple50: '188,123,251',
+  purple60: '205,153,253',
+  purple70: '217,176,254',
+  purple80: '230,201,255',
+  purple90: '237,217,255',
+  purple100: '251,247,255',
+  red0: '51,0,4',
+  red5: '79,0,7',
+  red10: '107,1,10',
+  red15: '131,4,14',
+  red20: '155,7,19',
+  red30: '189,19,33',
+  red40: '213,38,52',
+  red50: '230,64,78',
+  red60: '240,97,109',
+  red70: '248,134,144',
+  red80: '252,174,181',
+  red90: '254,213,216',
+  red100: '255,245,246',
+  teal0: '0,20,38',
+  teal5: '0,32,59',
+  teal10: '0,45,79',
+  teal15: '0,58,99',
+  teal20: '0,72,118',
+  teal30: '0,99,153',
+  teal40: '0,125,182',
+  teal50: '0,149,205',
+  teal60: '0,170,223',
+  teal70: '6,190,236',
+  teal80: '69,217,245',
+  teal90: '149,239,251',
+  teal100: '240,254,255',
+  yellow0: '27,6,0',
+  yellow5: '49,17,0',
+  yellow10: '81,40,0',
+  yellow15: '96,48,0',
+  yellow20: '115,64,0',
+  yellow30: '147,96,0',
+  yellow40: '175,128,0',
+  yellow50: '199,158,0',
+  yellow60: '222,189,23',
+  yellow70: '229,205,48',
+  yellow80: '242,222,94',
+  yellow90: '255,240,145',
+  yellow100: '255,252,241',
+  chartreuse0: '5,22,14',
+  chartreuse5: '14,54,29',
+  chartreuse10: '21,79,34',
+  chartreuse15: '29,103,36',
+  chartreuse20: '45,128,40',
+  chartreuse30: '73,152,54',
+  chartreuse40: '107,176,73',
+  chartreuse50: '123,200,105',
+  chartreuse60: '140,209,136',
+  chartreuse70: '158,217,163',
+  chartreuse80: '178,222,188',
+  chartreuse90: '209,238,220',
+  chartreuse100: '245,255,250'
+};
+export const defaultTheme = {
+  id: defaultThemeId,
+  lightSpectrum,
+  darkSpectrum,
+  lightColor: {
+    // Foreground
+    fg: "rgb(" + lightSpectrum.gray100 + ")",
+    fgMuted: "rgb(" + lightSpectrum.gray60 + ")",
+    fgInverse: "rgb(" + lightSpectrum.gray0 + ")",
+    fgPrimary: "rgb(" + lightSpectrum.blue60 + ")",
+    fgWarning: "rgb(" + lightSpectrum.orange60 + ")",
+    fgPositive: "rgb(" + lightSpectrum.green60 + ")",
+    fgNegative: "rgb(" + lightSpectrum.red60 + ")",
+    // Background
+    bg: "rgb(" + lightSpectrum.gray0 + ")",
+    bgAlternate: "rgb(" + lightSpectrum.gray10 + ")",
+    bgInverse: "rgb(" + lightSpectrum.gray100 + ")",
+    bgOverlay: "rgba(" + lightSpectrum.gray80 + ",0.33)",
+    bgPrimary: "rgb(" + lightSpectrum.blue60 + ")",
+    bgPrimaryWash: "rgb(" + lightSpectrum.blue0 + ")",
+    bgSecondary: "rgb(" + lightSpectrum.gray10 + ")",
+    bgTertiary: "rgb(" + lightSpectrum.gray20 + ")",
+    bgSecondaryWash: "rgb(" + lightSpectrum.gray5 + ")",
+    bgNegative: "rgb(" + lightSpectrum.red60 + ")",
+    bgNegativeWash: "rgb(" + lightSpectrum.red0 + ")",
+    bgPositive: "rgb(" + lightSpectrum.green60 + ")",
+    bgPositiveWash: "rgb(" + lightSpectrum.green0 + ")",
+    bgWarning: "rgb(" + lightSpectrum.orange40 + ")",
+    bgWarningWash: "rgb(" + lightSpectrum.orange0 + ")",
+    currentColor: 'currentColor',
+    // Line
+    bgLine: "rgba(" + lightSpectrum.gray60 + ",0.2)",
+    bgLineHeavy: "rgba(" + lightSpectrum.gray60 + ",0.66)",
+    bgLineInverse: "rgb(" + lightSpectrum.gray0 + ")",
+    bgLinePrimary: "rgb(" + lightSpectrum.blue60 + ")",
+    bgLinePrimarySubtle: "rgb(" + lightSpectrum.blue20 + ")",
+    // Elevation
+    bgElevation1: "rgb(" + lightSpectrum.gray0 + ")",
+    bgElevation2: "rgb(" + lightSpectrum.gray0 + ")",
+    // Accent
+    accentSubtleGreen: "rgb(" + lightSpectrum.green0 + ")",
+    accentBoldGreen: "rgb(" + lightSpectrum.green60 + ")",
+    accentSubtleBlue: "rgb(" + lightSpectrum.blue0 + ")",
+    accentBoldBlue: "rgb(" + lightSpectrum.blue60 + ")",
+    accentSubtlePurple: "rgb(" + lightSpectrum.purple0 + ")",
+    accentBoldPurple: "rgb(" + lightSpectrum.purple80 + ")",
+    accentSubtleYellow: "rgb(" + lightSpectrum.yellow0 + ")",
+    accentBoldYellow: "rgb(" + lightSpectrum.yellow30 + ")",
+    accentSubtleRed: "rgb(" + lightSpectrum.red0 + ")",
+    accentBoldRed: "rgb(" + lightSpectrum.red60 + ")",
+    accentSubtleGray: "rgb(" + lightSpectrum.gray10 + ")",
+    accentBoldGray: "rgb(" + lightSpectrum.gray80 + ")",
+    // Transparent
+    transparent: "rgba(" + lightSpectrum.gray0 + ",0)"
+  },
+  darkColor: {
+    // Foreground
+    fg: "rgb(" + darkSpectrum.gray100 + ")",
+    fgInverse: "rgb(" + darkSpectrum.gray0 + ")",
+    fgMuted: "rgb(" + darkSpectrum.gray60 + ")",
+    fgPrimary: "rgb(" + darkSpectrum.blue70 + ")",
+    fgPositive: "rgb(" + darkSpectrum.green60 + ")",
+    fgNegative: "rgb(" + darkSpectrum.red60 + ")",
+    fgWarning: "rgb(" + darkSpectrum.orange70 + ")",
+    // Background
+    bg: "rgb(" + darkSpectrum.gray0 + ")",
+    bgAlternate: "rgb(" + darkSpectrum.gray5 + ")",
+    bgInverse: "rgb(" + darkSpectrum.gray100 + ")",
+    bgOverlay: "rgba(" + darkSpectrum.gray0 + ",0.33)",
+    bgPrimary: "rgb(" + darkSpectrum.blue70 + ")",
+    bgPrimaryWash: "rgb(" + darkSpectrum.blue0 + ")",
+    bgSecondary: "rgb(" + darkSpectrum.gray15 + ")",
+    bgTertiary: "rgb(" + darkSpectrum.gray20 + ")",
+    bgSecondaryWash: "rgb(" + darkSpectrum.gray5 + ")",
+    bgNegative: "rgb(" + darkSpectrum.red60 + ")",
+    bgNegativeWash: "rgb(" + darkSpectrum.red0 + ")",
+    bgPositive: "rgb(" + darkSpectrum.green60 + ")",
+    bgPositiveWash: "rgb(" + darkSpectrum.green0 + ")",
+    bgWarning: "rgb(" + darkSpectrum.yellow50 + ")",
+    bgWarningWash: "rgb(" + darkSpectrum.orange0 + ")",
+    currentColor: 'currentColor',
+    // Line
+    bgLine: "rgba(" + darkSpectrum.gray60 + ",0.2)",
+    bgLineInverse: "rgb(" + darkSpectrum.gray0 + ")",
+    bgLineHeavy: "rgba(" + darkSpectrum.gray60 + ",0.66)",
+    bgLinePrimary: "rgb(" + darkSpectrum.blue70 + ")",
+    bgLinePrimarySubtle: "rgb(" + darkSpectrum.blue20 + ")",
+    // Elevation
+    bgElevation1: "rgb(" + darkSpectrum.gray5 + ")",
+    bgElevation2: "rgb(" + darkSpectrum.gray10 + ")",
+    // Accent
+    accentSubtleGreen: "rgb(" + darkSpectrum.green0 + ")",
+    accentBoldGreen: "rgb(" + darkSpectrum.green60 + ")",
+    accentSubtleBlue: "rgb(" + darkSpectrum.blue0 + ")",
+    accentBoldBlue: "rgb(" + darkSpectrum.blue60 + ")",
+    accentSubtlePurple: "rgb(" + darkSpectrum.purple0 + ")",
+    accentBoldPurple: "rgb(" + darkSpectrum.purple80 + ")",
+    accentSubtleYellow: "rgb(" + darkSpectrum.yellow0 + ")",
+    accentBoldYellow: "rgb(" + darkSpectrum.yellow30 + ")",
+    accentSubtleRed: "rgb(" + darkSpectrum.red0 + ")",
+    accentBoldRed: "rgb(" + darkSpectrum.red60 + ")",
+    accentSubtleGray: "rgb(" + darkSpectrum.gray10 + ")",
+    accentBoldGray: "rgb(" + darkSpectrum.gray80 + ")",
+    // Transparent
+    transparent: "rgba(" + darkSpectrum.gray0 + ",0)"
+  },
+  space: {
+    '0': 0,
+    '0.25': 2,
+    '0.5': 4,
+    '0.75': 6,
+    '1': 8,
+    '1.5': 12,
+    '2': 16,
+    '3': 24,
+    '4': 32,
+    '5': 40,
+    '6': 48,
+    '7': 56,
+    '8': 64,
+    '9': 72,
+    '10': 80
+  },
+  borderWidth: {
+    '0': 0,
+    '100': 1,
+    '200': 2,
+    '300': 4,
+    '400': 6,
+    '500': 8
+  },
+  borderRadius: {
+    '0': 0,
+    '100': 4,
+    '200': 8,
+    '300': 12,
+    '400': 16,
+    '500': 24,
+    '600': 32,
+    '700': 40,
+    '800': 48,
+    '900': 56,
+    '1000': 1e5
+  },
+  iconSize: {
+    xs: 12,
+    s: 16,
+    m: 24,
+    l: 32
+  },
+  avatarSize: {
+    s: 16,
+    m: 24,
+    l: 32,
+    xl: 40,
+    xxl: 48,
+    xxxl: 56
+  },
+  controlSize: {
+    checkboxSize: 20,
+    radioSize: 20,
+    switchWidth: 52,
+    switchHeight: 32,
+    switchThumbSize: 30,
+    tileSize: 106
+  },
+  fontFamily: {
+    display1: 'Inter_400Regular',
+    display2: 'Inter_400Regular',
+    display3: 'Inter_400Regular',
+    title1: 'Inter_600SemiBold',
+    title2: 'Inter_400Regular',
+    title3: 'Inter_600SemiBold',
+    title4: 'Inter_400Regular',
+    headline: 'Inter_600SemiBold',
+    body: 'Inter_400Regular',
+    label1: 'Inter_600SemiBold',
+    label2: 'Inter_400Regular',
+    caption: 'Inter_600SemiBold',
+    legal: 'Inter_400Regular'
+  },
+  fontFamilyMono: {
+    display1: 'SourceCodePro_400Regular',
+    display2: 'SourceCodePro_400Regular',
+    display3: 'SourceCodePro_400Regular',
+    title1: 'SourceCodePro_600SemiBold',
+    title2: 'SourceCodePro_400Regular',
+    title3: 'SourceCodePro_600SemiBold',
+    title4: 'SourceCodePro_400Regular',
+    headline: 'SourceCodePro_600SemiBold',
+    body: 'SourceCodePro_400Regular',
+    label1: 'SourceCodePro_600SemiBold',
+    label2: 'SourceCodePro_400Regular',
+    caption: 'SourceCodePro_600SemiBold',
+    legal: 'SourceCodePro_400Regular'
+  },
+  fontSize: {
+    display1: 64,
+    display2: 48,
+    display3: 40,
+    title1: 28,
+    title2: 28,
+    title3: 20,
+    title4: 20,
+    headline: 16,
+    body: 16,
+    label1: 14,
+    label2: 14,
+    caption: 13,
+    legal: 13
+  },
+  fontWeight: {
+    display1: '400',
+    display2: '400',
+    display3: '400',
+    title1: '600',
+    title2: '400',
+    title3: '600',
+    title4: '400',
+    headline: '600',
+    body: '400',
+    label1: '600',
+    label2: '400',
+    caption: '600',
+    legal: '400'
+  },
+  lineHeight: {
+    display1: 72,
+    display2: 56,
+    display3: 48,
+    title1: 36,
+    title2: 36,
+    title3: 28,
+    title4: 28,
+    headline: 24,
+    body: 24,
+    label1: 20,
+    label2: 20,
+    caption: 16,
+    legal: 16
+  },
+  textTransform: {
+    display1: 'none',
+    display2: 'none',
+    display3: 'none',
+    title1: 'none',
+    title2: 'none',
+    title3: 'none',
+    title4: 'none',
+    headline: 'none',
+    body: 'none',
+    label1: 'none',
+    label2: 'none',
+    caption: 'uppercase',
+    legal: 'none'
+  },
+  shadow: {
+    elevation1: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 8
+      },
+      shadowOpacity: 0.12,
+      shadowRadius: 12
+    },
+    elevation2: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 8
+      },
+      shadowOpacity: 0.12,
+      shadowRadius: 24
+    }
+  }
+};

package/esm/tour/DefaultTourMask.js

@@ -0,0 +1,63 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Defs, Mask, Rect as NativeRect, Svg } from 'react-native-svg';
+import { defaultRect } from '@coinbase/cds-common/types/Rect';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DefaultTourMask = /*#__PURE__*/memo(_ref => {
+  let {
+    activeTourStepTarget,
+    padding,
+    borderRadius = 12
+  } = _ref;
+  const [rect, setRect] = useState(defaultRect);
+  const theme = useTheme();
+  const overlayFillRgba = theme.color.bgOverlay;
+  const defaultPadding = theme.space[2];
+
+  // Convert string padding to number and fallback to default padding value
+  const paddingValue = Number.isNaN(Number(padding)) ? defaultPadding : Number(padding);
+  const maskStyle = useMemo(() => ({
+    width: rect.width + paddingValue,
+    height: rect.height + paddingValue,
+    x: rect.x - 0.5 * paddingValue,
+    y: rect.y - 0.5 * paddingValue
+  }), [rect, paddingValue]);
+  useEffect(() => {
+    activeTourStepTarget == null || activeTourStepTarget.measureInWindow((x, y, width, height) => setRect({
+      x,
+      y,
+      width,
+      height
+    }));
+  }, [activeTourStepTarget]);
+  return /*#__PURE__*/_jsx(Box, {
+    height: "100%",
+    width: "100%",
+    children: /*#__PURE__*/_jsxs(Svg, {
+      renderToHardwareTextureAndroid: true,
+      shouldRasterizeIOS: true,
+      height: "100%",
+      width: "100%",
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsxs(Mask, {
+          id: "tourOverlayMask",
+          children: [/*#__PURE__*/_jsx(NativeRect, {
+            fill: "#fff",
+            height: "100%",
+            width: "100%"
+          }), /*#__PURE__*/_jsx(NativeRect, _extends({
+            rx: borderRadius,
+            ry: borderRadius
+          }, maskStyle))]
+        })
+      }), /*#__PURE__*/_jsx(NativeRect, {
+        fill: overlayFillRgba,
+        height: "100%",
+        mask: "url(#tourOverlayMask)",
+        width: "100%"
+      })]
+    })
+  });
+});

package/esm/tour/DefaultTourStepArrow.js

@@ -0,0 +1,38 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultTourStepArrow = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  var _arrow$centerOffset;
+  let {
+    placement,
+    arrow,
+    style
+  } = _ref;
+  const width = 24;
+  const height = 24;
+  const hideArrow = ((_arrow$centerOffset = arrow == null ? void 0 : arrow.centerOffset) != null ? _arrow$centerOffset : 0) > 0;
+  const arrowStyles = useMemo(() => {
+    const arrowStyle = {
+      position: 'absolute',
+      transform: 'rotate(45deg)',
+      opacity: hideArrow ? 0 : undefined,
+      zIndex: -1
+    };
+    if (arrow != null && arrow.x) arrowStyle.left = arrow.x;
+    if (arrow != null && arrow.y) arrowStyle.top = arrow.y;
+    if (placement.includes('top')) arrowStyle.bottom = 0.5 * -height;
+    if (placement.includes('bottom')) arrowStyle.top = 0.5 * -height;
+    if (placement.includes('left')) arrowStyle.right = 0.5 * -width;
+    if (placement.includes('right')) arrowStyle.left = 0.5 * -width;
+    return _extends({}, arrowStyle, style);
+  }, [arrow, placement, style, width, height, hideArrow]);
+  return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
+    background: "bgInverse",
+    height: 24,
+    style: arrowStyles,
+    testID: "tour-step-arrow",
+    width: 24
+  });
+}));