@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/themes/defaultTheme.js

@@ -0,0 +1,576 @@
+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(".concat(lightSpectrum.gray100, ")"),
+    fgMuted: "rgb(".concat(lightSpectrum.gray60, ")"),
+    fgInverse: "rgb(".concat(lightSpectrum.gray0, ")"),
+    fgPrimary: "rgb(".concat(lightSpectrum.blue60, ")"),
+    fgWarning: "rgb(".concat(lightSpectrum.orange60, ")"),
+    fgPositive: "rgb(".concat(lightSpectrum.green60, ")"),
+    fgNegative: "rgb(".concat(lightSpectrum.red60, ")"),
+    // Background
+    bg: "rgb(".concat(lightSpectrum.gray0, ")"),
+    bgAlternate: "rgb(".concat(lightSpectrum.gray10, ")"),
+    bgInverse: "rgb(".concat(lightSpectrum.gray100, ")"),
+    bgOverlay: "rgba(".concat(lightSpectrum.gray80, ",0.33)"),
+    bgPrimary: "rgb(".concat(lightSpectrum.blue60, ")"),
+    bgPrimaryWash: "rgb(".concat(lightSpectrum.blue0, ")"),
+    bgSecondary: "rgb(".concat(lightSpectrum.gray10, ")"),
+    bgTertiary: "rgb(".concat(lightSpectrum.gray20, ")"),
+    bgSecondaryWash: "rgb(".concat(lightSpectrum.gray5, ")"),
+    bgNegative: "rgb(".concat(lightSpectrum.red60, ")"),
+    bgNegativeWash: "rgb(".concat(lightSpectrum.red0, ")"),
+    bgPositive: "rgb(".concat(lightSpectrum.green60, ")"),
+    bgPositiveWash: "rgb(".concat(lightSpectrum.green0, ")"),
+    bgWarning: "rgb(".concat(lightSpectrum.orange40, ")"),
+    bgWarningWash: "rgb(".concat(lightSpectrum.orange0, ")"),
+    currentColor: 'currentColor',
+    // Line
+    bgLine: "rgba(".concat(lightSpectrum.gray60, ",0.2)"),
+    bgLineHeavy: "rgba(".concat(lightSpectrum.gray60, ",0.66)"),
+    bgLineInverse: "rgb(".concat(lightSpectrum.gray0, ")"),
+    bgLinePrimary: "rgb(".concat(lightSpectrum.blue60, ")"),
+    bgLinePrimarySubtle: "rgb(".concat(lightSpectrum.blue20, ")"),
+    // Elevation
+    bgElevation1: "rgb(".concat(lightSpectrum.gray0, ")"),
+    bgElevation2: "rgb(".concat(lightSpectrum.gray0, ")"),
+    // Accent
+    accentSubtleGreen: "rgb(".concat(lightSpectrum.green0, ")"),
+    accentBoldGreen: "rgb(".concat(lightSpectrum.green60, ")"),
+    accentSubtleBlue: "rgb(".concat(lightSpectrum.blue0, ")"),
+    accentBoldBlue: "rgb(".concat(lightSpectrum.blue60, ")"),
+    accentSubtlePurple: "rgb(".concat(lightSpectrum.purple0, ")"),
+    accentBoldPurple: "rgb(".concat(lightSpectrum.purple80, ")"),
+    accentSubtleYellow: "rgb(".concat(lightSpectrum.yellow0, ")"),
+    accentBoldYellow: "rgb(".concat(lightSpectrum.yellow30, ")"),
+    accentSubtleRed: "rgb(".concat(lightSpectrum.red0, ")"),
+    accentBoldRed: "rgb(".concat(lightSpectrum.red60, ")"),
+    accentSubtleGray: "rgb(".concat(lightSpectrum.gray10, ")"),
+    accentBoldGray: "rgb(".concat(lightSpectrum.gray80, ")"),
+    // Transparent
+    transparent: "rgba(".concat(lightSpectrum.gray0, ",0)")
+  },
+  darkColor: {
+    // Foreground
+    fg: "rgb(".concat(darkSpectrum.gray100, ")"),
+    fgInverse: "rgb(".concat(darkSpectrum.gray0, ")"),
+    fgMuted: "rgb(".concat(darkSpectrum.gray60, ")"),
+    fgPrimary: "rgb(".concat(darkSpectrum.blue70, ")"),
+    fgPositive: "rgb(".concat(darkSpectrum.green60, ")"),
+    fgNegative: "rgb(".concat(darkSpectrum.red60, ")"),
+    fgWarning: "rgb(".concat(darkSpectrum.orange70, ")"),
+    // Background
+    bg: "rgb(".concat(darkSpectrum.gray0, ")"),
+    bgAlternate: "rgb(".concat(darkSpectrum.gray5, ")"),
+    bgInverse: "rgb(".concat(darkSpectrum.gray100, ")"),
+    bgOverlay: "rgba(".concat(darkSpectrum.gray0, ",0.33)"),
+    bgPrimary: "rgb(".concat(darkSpectrum.blue70, ")"),
+    bgPrimaryWash: "rgb(".concat(darkSpectrum.blue0, ")"),
+    bgSecondary: "rgb(".concat(darkSpectrum.gray15, ")"),
+    bgTertiary: "rgb(".concat(darkSpectrum.gray20, ")"),
+    bgSecondaryWash: "rgb(".concat(darkSpectrum.gray5, ")"),
+    bgNegative: "rgb(".concat(darkSpectrum.red60, ")"),
+    bgNegativeWash: "rgb(".concat(darkSpectrum.red0, ")"),
+    bgPositive: "rgb(".concat(darkSpectrum.green60, ")"),
+    bgPositiveWash: "rgb(".concat(darkSpectrum.green0, ")"),
+    bgWarning: "rgb(".concat(darkSpectrum.yellow50, ")"),
+    bgWarningWash: "rgb(".concat(darkSpectrum.orange0, ")"),
+    currentColor: 'currentColor',
+    // Line
+    bgLine: "rgba(".concat(darkSpectrum.gray60, ",0.2)"),
+    bgLineInverse: "rgb(".concat(darkSpectrum.gray0, ")"),
+    bgLineHeavy: "rgba(".concat(darkSpectrum.gray60, ",0.66)"),
+    bgLinePrimary: "rgb(".concat(darkSpectrum.blue70, ")"),
+    bgLinePrimarySubtle: "rgb(".concat(darkSpectrum.blue20, ")"),
+    // Elevation
+    bgElevation1: "rgb(".concat(darkSpectrum.gray5, ")"),
+    bgElevation2: "rgb(".concat(darkSpectrum.gray10, ")"),
+    // Accent
+    accentSubtleGreen: "rgb(".concat(darkSpectrum.green0, ")"),
+    accentBoldGreen: "rgb(".concat(darkSpectrum.green60, ")"),
+    accentSubtleBlue: "rgb(".concat(darkSpectrum.blue0, ")"),
+    accentBoldBlue: "rgb(".concat(darkSpectrum.blue60, ")"),
+    accentSubtlePurple: "rgb(".concat(darkSpectrum.purple0, ")"),
+    accentBoldPurple: "rgb(".concat(darkSpectrum.purple80, ")"),
+    accentSubtleYellow: "rgb(".concat(darkSpectrum.yellow0, ")"),
+    accentBoldYellow: "rgb(".concat(darkSpectrum.yellow30, ")"),
+    accentSubtleRed: "rgb(".concat(darkSpectrum.red0, ")"),
+    accentBoldRed: "rgb(".concat(darkSpectrum.red60, ")"),
+    accentSubtleGray: "rgb(".concat(darkSpectrum.gray10, ")"),
+    accentBoldGray: "rgb(".concat(darkSpectrum.gray80, ")"),
+    // Transparent
+    transparent: "rgba(".concat(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: 'var(--defaultFont-sans)',
+    display2: 'var(--defaultFont-sans)',
+    display3: 'var(--defaultFont-sans)',
+    title1: 'var(--defaultFont-sans)',
+    title2: 'var(--defaultFont-sans)',
+    title3: 'var(--defaultFont-sans)',
+    title4: 'var(--defaultFont-sans)',
+    headline: 'var(--defaultFont-sans)',
+    body: 'var(--defaultFont-sans)',
+    label1: 'var(--defaultFont-sans)',
+    label2: 'var(--defaultFont-sans)',
+    caption: 'var(--defaultFont-sans)',
+    legal: 'var(--defaultFont-sans)'
+  },
+  fontFamilyMono: {
+    display1: 'var(--defaultFont-mono)',
+    display2: 'var(--defaultFont-mono)',
+    display3: 'var(--defaultFont-mono)',
+    title1: 'var(--defaultFont-mono)',
+    title2: 'var(--defaultFont-mono)',
+    title3: 'var(--defaultFont-mono)',
+    title4: 'var(--defaultFont-mono)',
+    headline: 'var(--defaultFont-mono)',
+    body: 'var(--defaultFont-mono)',
+    label1: 'var(--defaultFont-mono)',
+    label2: 'var(--defaultFont-mono)',
+    caption: 'var(--defaultFont-mono)',
+    legal: 'var(--defaultFont-mono)'
+  },
+  fontSize: {
+    display1: '4rem',
+    // 64px
+    display2: '3rem',
+    // 48px
+    display3: '2.5rem',
+    // 40px
+    title1: '1.75rem',
+    // 28px
+    title2: '1.75rem',
+    // 28px
+    title3: '1.25rem',
+    // 20px
+    title4: '1.25rem',
+    // 20px
+    headline: '1rem',
+    // 16px
+    body: '1rem',
+    // 16px
+    label1: '0.875rem',
+    // 14px
+    label2: '0.875rem',
+    // 14px
+    caption: '0.8125rem',
+    // 13px
+    legal: '0.8125rem' // 13px
+  },
+  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: '4.5rem',
+    // 72px
+    display2: '3.5rem',
+    // 56px
+    display3: '3rem',
+    // 48px
+    title1: '2.25rem',
+    // 36px
+    title2: '2.25rem',
+    // 36px
+    title3: '1.75rem',
+    // 28px
+    title4: '1.75rem',
+    // 28px
+    headline: '1.5rem',
+    // 24px
+    body: '1.5rem',
+    // 24px
+    label1: '1.25rem',
+    // 20px
+    label2: '1.25rem',
+    // 20px
+    caption: '1rem',
+    // 16px
+    legal: '1rem' // 16px
+  },
+  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: '0px 8px 12px rgba(0, 0, 0, 0.12)',
+    elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'
+  }
+};

package/esm/tour/DefaultTourMask.js

@@ -0,0 +1,39 @@
+import React, { memo, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DefaultTourMask = /*#__PURE__*/memo(_ref => {
+  let {
+    activeTourStepTargetRect,
+    padding = 'var(--spacing-2)',
+    borderRadius = 0
+  } = _ref;
+  const paddingValue = typeof padding === 'number' ? "".concat(padding, "px") : padding;
+  const maskStyle = useMemo(() => ({
+    width: "calc(".concat(activeTourStepTargetRect.width, "px + ").concat(paddingValue, ")"),
+    height: "calc(".concat(activeTourStepTargetRect.height, "px + ").concat(paddingValue, ")"),
+    x: "calc(".concat(activeTourStepTargetRect.x, "px - (0.5 * ").concat(paddingValue, "))"),
+    y: "calc(".concat(activeTourStepTargetRect.y, "px - (0.5 * ").concat(paddingValue, "))")
+  }), [activeTourStepTargetRect, paddingValue]);
+  return /*#__PURE__*/_jsxs("svg", {
+    height: "100vh",
+    width: "100vw",
+    children: [/*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsxs("mask", {
+        id: "tourOverlayMask",
+        children: [/*#__PURE__*/_jsx("rect", {
+          fill: "#fff",
+          height: "100vh",
+          width: "100vw"
+        }), /*#__PURE__*/_jsx("rect", {
+          rx: borderRadius,
+          ry: borderRadius,
+          style: maskStyle
+        })]
+      })
+    }), /*#__PURE__*/_jsx("rect", {
+      fill: "rgb(50, 53, 61, 0.33)",
+      height: "100%",
+      mask: "url(#tourOverlayMask)",
+      width: "100%"
+    })]
+  });
+});

package/esm/tour/DefaultTourStepArrow.js

@@ -0,0 +1,42 @@
+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 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 || arrow === void 0 ? void 0 : arrow.centerOffset) !== null && _arrow$centerOffset !== void 0 ? _arrow$centerOffset : 0) > 0;
+  const arrowStyles = useMemo(() => {
+    const arrowStyle = {
+      position: 'absolute',
+      transform: 'rotate(45deg)',
+      opacity: hideArrow ? 0 : undefined
+    };
+    if (arrow !== null && arrow !== void 0 && arrow.x) arrowStyle.left = arrow.x;
+    if (arrow !== null && arrow !== void 0 && 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 _objectSpread(_objectSpread({}, arrowStyle), style);
+  }, [arrow, placement, style, width, height, hideArrow]);
+  return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
+    background: "bgInverse",
+    height: height,
+    style: arrowStyles,
+    testID: "tour-step-arrow",
+    width: width,
+    zIndex: -1
+  });
+}));

package/esm/tour/Tour.css

@@ -0,0 +1 @@
+@layer cds{.containerCss-c1gsy0il{position:fixed;top:0;bottom:0;left:0;right:0;width:100vw;height:100vh;}}