impact-ui 4.0.17-alpha.2 → 4.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/index5.js +2 -2
- package/dist/_virtual/index6.js +2 -2
- package/dist/_virtual/index7.js +2 -2
- package/dist/_virtual/index8.js +2 -2
- package/dist/components/Chatbot/Chatbot.types.d.ts +0 -1
- package/dist/components/Chatbot/Chatbot.types.d.ts.map +1 -1
- package/dist/components/Chatbot/chatBotFooter.js +1 -1
- package/dist/components/Chatbot/chatbotModuleMenu.d.ts.map +1 -1
- package/dist/components/Chatbot/chatbotModuleMenu.js +12 -2
- package/dist/components/Chatbot/index.d.ts.map +1 -1
- package/dist/components/Chatbot/index.js +4 -10
- package/dist/components/Chatbot/newChatComponent.d.ts +1 -1
- package/dist/components/Chatbot/newChatComponent.d.ts.map +1 -1
- package/dist/components/Chatbot/newChatComponent.js +41 -71
- package/dist/components/CommentsPanel/CommentsPanel.impl.d.ts +6 -2
- package/dist/components/CommentsPanel/CommentsPanel.impl.d.ts.map +1 -1
- package/dist/components/CommentsPanel/CommentsPanel.impl.js +1 -6
- package/dist/components/CommentsPanel/CommentsPanel.types.d.ts +2 -2
- package/dist/components/CommentsPanel/CommentsPanel.types.d.ts.map +1 -1
- package/dist/components/DatePicker/index.js +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.types.d.ts +0 -1
- package/dist/components/DateRangePicker/DateRangePicker.types.d.ts.map +1 -1
- package/dist/components/DateRangePicker/dateRangePickerDropdown.d.ts +1 -1
- package/dist/components/DateRangePicker/dateRangePickerDropdown.d.ts.map +1 -1
- package/dist/components/DateRangePicker/dateRangePickerDropdown.js +49 -67
- package/dist/components/DateRangePicker/index.d.ts.map +1 -1
- package/dist/components/DateRangePicker/index.js +1 -3
- package/dist/components/DateRangePicker/utils.d.ts +0 -1
- package/dist/components/DateRangePicker/utils.d.ts.map +1 -1
- package/dist/components/DateRangePicker/utils.js +1 -11
- package/dist/components/Input/HelperText.d.ts.map +1 -1
- package/dist/components/Input/HelperText.js +22 -2
- package/dist/components/Input/index.js +1 -1
- package/dist/components/KeyboardShortCuts/ShortcutLandingPage.js +1 -1
- package/dist/components/KeyboardShortCuts/ShortcutModal.js +1 -1
- package/dist/components/KeyboardShortCuts/allSetBox.js +1 -1
- package/dist/components/KeyboardShortCuts/index.d.ts.map +1 -1
- package/dist/components/KeyboardShortCuts/index.js +112 -38
- package/dist/components/KeyboardShortCuts/tutorial.js +1 -1
- package/dist/components/Menu/IconMenuItem.d.ts.map +1 -1
- package/dist/components/Menu/IconMenuItem.js +1 -2
- package/dist/components/Menu/MenuHeaderInfo.js +1 -1
- package/dist/components/Menu/NestedMenuItem.js +2 -2
- package/dist/components/Menu/index.js +1 -1
- package/dist/components/Menu/nestedMenuItemsFromObject.js +1 -1
- package/dist/components/RadioButtonGroup/index.js +1 -1
- package/dist/components/TableOld/index.d.ts.map +1 -1
- package/dist/components/TableOld/index.js +9 -13
- package/dist/components/index.d.ts +0 -2
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +0 -2
- package/dist/mcp-component-registry.json +2 -82
- package/dist/node_modules/@emotion/react/dist/emotion-react.browser.esm.js +1 -1
- package/dist/node_modules/@impactsmartsuite/impact-icons/dist/index.js +1 -3
- package/dist/node_modules/@mui/utils/node_modules/react-is/index.js +1 -1
- package/dist/node_modules/call-bind/index.js +1 -1
- package/dist/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js +18 -90
- package/dist/node_modules/is-symbol/index.js +1 -1
- package/dist/node_modules/prop-types/index.js +1 -2
- package/dist/node_modules/react-with-styles-interface-css/dist/index.js +1 -1
- package/dist/node_modules/react-with-styles-interface-css/dist/utils/constants.js +1 -1
- package/package.json +2 -7
- package/dist/_virtual/CalendarDay.js +0 -4
- package/dist/_virtual/ModifiersShape.js +0 -4
- package/dist/_virtual/WithStylesContext.js +0 -4
- package/dist/_virtual/and.js +0 -4
- package/dist/_virtual/between.js +0 -4
- package/dist/_virtual/booleanSome.js +0 -4
- package/dist/_virtual/brcast.js +0 -4
- package/dist/_virtual/childrenHavePropXorChildren.js +0 -4
- package/dist/_virtual/childrenOf.js +0 -4
- package/dist/_virtual/childrenOfType.js +0 -4
- package/dist/_virtual/childrenSequenceOf.js +0 -4
- package/dist/_virtual/componentWithName.js +0 -4
- package/dist/_virtual/constants2.js +0 -4
- package/dist/_virtual/constants3.js +0 -4
- package/dist/_virtual/defaultPhrases.js +0 -4
- package/dist/_virtual/direction.js +0 -4
- package/dist/_virtual/disallowedIf.js +0 -4
- package/dist/_virtual/elementType.js +0 -4
- package/dist/_virtual/empty.js +0 -4
- package/dist/_virtual/emptyStylesFn.js +0 -4
- package/dist/_virtual/explicitNull.js +0 -4
- package/dist/_virtual/getCalendarDaySettings.js +0 -4
- package/dist/_virtual/getComponentName.js +0 -4
- package/dist/_virtual/getComponentName2.js +0 -4
- package/dist/_virtual/getPhrase.js +0 -4
- package/dist/_virtual/getPhrasePropTypes.js +0 -4
- package/dist/_virtual/hoist-non-react-statics.cjs.js +0 -2
- package/dist/_virtual/implementation.browser.js +0 -4
- package/dist/_virtual/index10.js +0 -4
- package/dist/_virtual/index11.js +0 -4
- package/dist/_virtual/index9.js +0 -4
- package/dist/_virtual/integer.js +0 -4
- package/dist/_virtual/isInteger.js +0 -4
- package/dist/_virtual/isPlainObject.js +0 -4
- package/dist/_virtual/isPlainObject2.js +0 -4
- package/dist/_virtual/isPrimitive.js +0 -4
- package/dist/_virtual/keysOf.js +0 -4
- package/dist/_virtual/mutuallyExclusiveProps.js +0 -4
- package/dist/_virtual/mutuallyExclusiveTrueProps.js +0 -4
- package/dist/_virtual/nChildren.js +0 -4
- package/dist/_virtual/nonNegativeInteger.js +0 -4
- package/dist/_virtual/nonNegativeNumber.js +0 -4
- package/dist/_virtual/numericString.js +0 -4
- package/dist/_virtual/object.js +0 -4
- package/dist/_virtual/or.js +0 -4
- package/dist/_virtual/perf.js +0 -4
- package/dist/_virtual/performance-now.js +0 -4
- package/dist/_virtual/predicate.js +0 -4
- package/dist/_virtual/range.js +0 -4
- package/dist/_virtual/ref.js +0 -4
- package/dist/_virtual/ref2.js +0 -4
- package/dist/_virtual/renderableChildren.js +0 -4
- package/dist/_virtual/requiredBy.js +0 -4
- package/dist/_virtual/restrictedProp.js +0 -4
- package/dist/_virtual/sequenceOf.js +0 -4
- package/dist/_virtual/shape.js +0 -4
- package/dist/_virtual/stringEndsWith.js +0 -4
- package/dist/_virtual/stringStartsWith.js +0 -4
- package/dist/_virtual/typeOf.js +0 -4
- package/dist/_virtual/uniqueArray.js +0 -4
- package/dist/_virtual/uniqueArrayOf.js +0 -4
- package/dist/_virtual/valuesOf.js +0 -4
- package/dist/_virtual/withDirection.js +0 -4
- package/dist/_virtual/withShape.js +0 -4
- package/dist/_virtual/withStyles.js +0 -4
- package/dist/_virtual/withStylesPropTypes.js +0 -4
- package/dist/_virtual/wrapValidator.js +0 -4
- package/dist/_virtual/wrapValidator2.js +0 -4
- package/dist/components/OnboardingTour/index.d.ts +0 -61
- package/dist/components/OnboardingTour/index.d.ts.map +0 -1
- package/dist/components/OnboardingTour/index.js +0 -232
- package/dist/components/OnboardingTour/productTourList.d.ts +0 -39
- package/dist/components/OnboardingTour/productTourList.d.ts.map +0 -1
- package/dist/components/OnboardingTour/productTourList.js +0 -86
- package/dist/components/OnboardingTour/tooltipCard.d.ts +0 -45
- package/dist/components/OnboardingTour/tooltipCard.d.ts.map +0 -1
- package/dist/components/OnboardingTour/tooltipCard.js +0 -96
- package/dist/components/OnboardingTour/useTooltipCardPosition.d.ts +0 -29
- package/dist/components/OnboardingTour/useTooltipCardPosition.d.ts.map +0 -1
- package/dist/components/OnboardingTour/useTooltipCardPosition.js +0 -221
- package/dist/node_modules/array.prototype.find/implementation.js +0 -37
- package/dist/node_modules/array.prototype.find/index.js +0 -35
- package/dist/node_modules/array.prototype.find/polyfill.js +0 -17
- package/dist/node_modules/array.prototype.find/shim.js +0 -30
- package/dist/node_modules/call-bind/callBound.js +0 -22
- package/dist/node_modules/enzyme-shallow-equal/build/index.js +0 -53
- package/dist/node_modules/es-abstract/2023/CreateMethodProperty.js +0 -46
- package/dist/node_modules/es-abstract/2023/FromPropertyDescriptor.js +0 -22
- package/dist/node_modules/es-abstract/2023/IsDataDescriptor.js +0 -28
- package/dist/node_modules/es-abstract/2023/SameValue.js +0 -21
- package/dist/node_modules/es-abstract/helpers/OwnPropertyKeys.js +0 -12
- package/dist/node_modules/es-set-tostringtag/index.js +0 -39
- package/dist/node_modules/function.prototype.name/implementation.js +0 -59
- package/dist/node_modules/function.prototype.name/index.js +0 -23
- package/dist/node_modules/function.prototype.name/polyfill.js +0 -15
- package/dist/node_modules/function.prototype.name/shim.js +0 -47
- package/dist/node_modules/functions-have-names/index.js +0 -36
- package/dist/node_modules/globalthis/implementation.browser.js +0 -17
- package/dist/node_modules/globalthis/index.js +0 -28
- package/dist/node_modules/globalthis/polyfill.js +0 -18
- package/dist/node_modules/globalthis/shim.js +0 -33
- package/dist/node_modules/is-document.all/index.js +0 -40
- package/dist/node_modules/object-is/implementation.js +0 -25
- package/dist/node_modules/object-is/index.js +0 -27
- package/dist/node_modules/object-is/polyfill.js +0 -15
- package/dist/node_modules/object-is/shim.js +0 -23
- package/dist/node_modules/object.assign/implementation.js +0 -52
- package/dist/node_modules/object.assign/index.js +0 -30
- package/dist/node_modules/object.assign/polyfill.js +0 -53
- package/dist/node_modules/object.assign/shim.js +0 -25
- package/dist/node_modules/object.entries/implementation.js +0 -26
- package/dist/node_modules/object.entries/index.js +0 -27
- package/dist/node_modules/object.entries/polyfill.js +0 -15
- package/dist/node_modules/object.entries/shim.js +0 -23
- package/dist/node_modules/object.values/implementation.js +0 -25
- package/dist/node_modules/object.values/index.js +0 -27
- package/dist/node_modules/object.values/polyfill.js +0 -15
- package/dist/node_modules/object.values/shim.js +0 -23
- package/dist/node_modules/own-keys/index.js +0 -26
- package/dist/node_modules/performance-now/lib/performance-now.js +0 -42
- package/dist/node_modules/prop-types-exact/build/helpers/isPlainObject.js +0 -15
- package/dist/node_modules/prop-types-exact/node_modules/isarray/index.js +0 -14
- package/dist/node_modules/prop-types-exact/src/index.js +0 -52
- package/dist/node_modules/raf/index.js +0 -66
- package/dist/node_modules/react-dates/lib/components/CalendarDay.js +0 -355
- package/dist/node_modules/react-dates/lib/constants.js +0 -68
- package/dist/node_modules/react-dates/lib/defaultPhrases.js +0 -250
- package/dist/node_modules/react-dates/lib/shapes/ModifiersShape.js +0 -41
- package/dist/node_modules/react-dates/lib/utils/getCalendarDaySettings.js +0 -64
- package/dist/node_modules/react-dates/lib/utils/getPhrase.js +0 -23
- package/dist/node_modules/react-dates/lib/utils/getPhrasePropTypes.js +0 -55
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/and.js +0 -53
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/between.js +0 -276
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/booleanSome.js +0 -64
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/childrenHavePropXorChildren.js +0 -65
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/childrenOf.js +0 -105
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/childrenOfType.js +0 -63
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/childrenSequenceOf.js +0 -100
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/componentWithName.js +0 -109
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/disallowedIf.js +0 -64
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/elementType.js +0 -77
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/empty.js +0 -46
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/explicitNull.js +0 -50
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/helpers/getComponentName.js +0 -41
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/helpers/isInteger.js +0 -23
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/helpers/isPlainObject.js +0 -23
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/helpers/isPrimitive.js +0 -32
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/helpers/renderableChildren.js +0 -26
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/helpers/typeOf.js +0 -49
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/helpers/wrapValidator.js +0 -33
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/index.js +0 -123
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/integer.js +0 -45
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/keysOf.js +0 -63
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/mocks/index.js +0 -55
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/mutuallyExclusiveProps.js +0 -100
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/mutuallyExclusiveTrueProps.js +0 -64
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/nChildren.js +0 -47
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/nonNegativeInteger.js +0 -27
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/nonNegativeNumber.js +0 -45
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/numericString.js +0 -55
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/object.js +0 -56
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/or.js +0 -96
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/predicate.js +0 -48
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/range.js +0 -49
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/ref.js +0 -58
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/requiredBy.js +0 -49
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/restrictedProp.js +0 -42
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/sequenceOf.js +0 -211
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/shape.js +0 -58
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/stringEndsWith.js +0 -53
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/stringStartsWith.js +0 -53
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/uniqueArray.js +0 -69
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/uniqueArrayOf.js +0 -116
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/valuesOf.js +0 -54
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/build/withShape.js +0 -30
- package/dist/node_modules/react-dates/node_modules/airbnb-prop-types/index.js +0 -13
- package/dist/node_modules/react-moment-proptypes/src/core.js +0 -96
- package/dist/node_modules/react-moment-proptypes/src/index.js +0 -48
- package/dist/node_modules/react-moment-proptypes/src/moment-validation-wrapper.js +0 -24
- package/dist/node_modules/react-with-styles/lib/WithStylesContext.js +0 -57
- package/dist/node_modules/react-with-styles/lib/utils/emptyStylesFn.js +0 -22
- package/dist/node_modules/react-with-styles/lib/utils/perf.js +0 -49
- package/dist/node_modules/react-with-styles/lib/withStyles.js +0 -252
- package/dist/node_modules/react-with-styles/lib/withStylesPropTypes.js +0 -28
- package/dist/node_modules/react-with-styles/node_modules/airbnb-prop-types/build/helpers/getComponentName.js +0 -41
- package/dist/node_modules/react-with-styles/node_modules/airbnb-prop-types/build/helpers/isPlainObject.js +0 -23
- package/dist/node_modules/react-with-styles/node_modules/airbnb-prop-types/build/helpers/wrapValidator.js +0 -33
- package/dist/node_modules/react-with-styles/node_modules/airbnb-prop-types/build/ref.js +0 -58
- package/dist/node_modules/react-with-styles/node_modules/deepmerge/dist/cjs.js +0 -85
- package/dist/node_modules/react-with-styles/node_modules/react-with-direction/dist/constants.js +0 -18
- package/dist/node_modules/react-with-styles/node_modules/react-with-direction/dist/proptypes/brcast.js +0 -26
- package/dist/node_modules/react-with-styles/node_modules/react-with-direction/dist/proptypes/direction.js +0 -27
- package/dist/node_modules/react-with-styles/node_modules/react-with-direction/dist/withDirection.js +0 -160
- package/dist/node_modules/reflect.ownkeys/implementation.js +0 -15
- package/dist/node_modules/reflect.ownkeys/index.js +0 -27
- package/dist/node_modules/reflect.ownkeys/polyfill.js +0 -18
- package/dist/node_modules/reflect.ownkeys/shim.js +0 -30
- package/dist/node_modules/safe-push-apply/index.js +0 -22
- package/dist/node_modules/safe-push-apply/node_modules/isarray/index.js +0 -14
- package/dist/stories/generated/cdnGetAssetUrlManifest.d.ts +0 -6
- package/dist/stories/generated/cdnGetAssetUrlManifest.d.ts.map +0 -1
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900";@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}@keyframes onboarding-tour-section-enter{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.onboarding-tour-overlay{background-color:#0d152ccc;bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;-webkit-tap-highlight-color:transparent;opacity:1;pointer-events:auto;transition:opacity .5s ease-in-out}.onboarding-tour-overlay.overlay--hidden{opacity:0;pointer-events:none}.onboarding-tour-close-button{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.onboarding-tour-close-button:focus-visible{box-shadow:0 0 4px #0000001f,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.onboarding-tour-close-button:focus:not(:focus-visible){box-shadow:0 0 4px #0000001f;outline:none}.onboarding-tour-close-button svg{height:18px;width:18px}.onboarding-tour-wrapper{background-color:#fff;background-image:radial-gradient(circle,#f7f7f799 2px,#0000 0),radial-gradient(circle,#f7f7f799 2px,#0000 0);background-size:18px 18px;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;left:50%;padding:40px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:999999}.onboarding-tour-wrapper .onboarding-tour-container{align-items:center;display:flex;flex-direction:column;gap:32px;height:100%;justify-content:space-between}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header{align-items:center;display:flex;flex-direction:column;gap:8px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content{align-items:center;display:flex;flex-direction:column;gap:4px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-title{color:#0d152c;font-size:32px;font-weight:800;line-height:48px;text-transform:capitalize;white-space:nowrap}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-description{color:#7a8294;font-size:16px;font-weight:600;line-height:24px;text-align:center;width:302px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-footer .onboarding-tour-actions{align-items:center;display:flex;gap:12px}.onboarding-tour-wrapper .onboarding-tour-close-button{right:12px;top:12px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header.onboarding-tour-header--entrance{animation:onboarding-tour-section-enter .4s cubic-bezier(.22,1,.36,1) 0s both;will-change:opacity,transform}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-footer.onboarding-tour-footer--entrance{animation:onboarding-tour-section-enter .4s cubic-bezier(.22,1,.36,1) .6s both;will-change:opacity,transform}@media (prefers-reduced-motion:reduce){.onboarding-tour-wrapper .onboarding-tour-container :is(.onboarding-tour-footer.onboarding-tour-footer--entrance,.onboarding-tour-header.onboarding-tour-header--entrance){animation:none!important;opacity:1;transform:none}}@media screen and (max-width:1512px){.onboarding-tour-wrapper{padding:30px}.onboarding-tour-wrapper .onboarding-tour-close-button svg{height:14px;width:14px}.onboarding-tour-wrapper .onboarding-tour-container{gap:24px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header{gap:4px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content{gap:2px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-title{font-size:24px;line-height:36px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-description{font-size:12px;line-height:18px}}@keyframes slide-in-from-right{0%{opacity:0;transform:translate(48px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-from-left{0%{opacity:0;transform:translate(-48px)}to{opacity:1;transform:translate(0)}}@keyframes dot-fill{0%{width:0}to{width:100%}}.onboarding-tour-middle-section{align-items:center;display:flex;flex-direction:column;gap:8px;overflow:hidden;width:100%}.onboarding-tour-middle-section .screen-slide{display:flex;justify-content:center;width:100%}.onboarding-tour-middle-section .screen-slide--forward{animation:slide-in-from-right .38s cubic-bezier(.22,1,.36,1) both}.onboarding-tour-middle-section .screen-slide--backward{animation:slide-in-from-left .38s cubic-bezier(.22,1,.36,1) both}.onboarding-tour-middle-section .screen-slide img{max-height:100%;max-width:100%;object-fit:contain}.onboarding-tour-image{height:295px;object-fit:contain;width:520px}.button-carousel-wrapper{align-items:center;display:flex;gap:10px;justify-content:center}.button-carousel-wrapper .button{background-color:#d9dde7;border-radius:5px;cursor:pointer;flex-shrink:0;height:10px;overflow:hidden;position:relative;transition:width .3s cubic-bezier(.22,1,.36,1),background-color .2s;width:10px}.button-carousel-wrapper .button.active{background-color:#d9dde7;width:32px}.button-carousel-wrapper .button.active:after{animation:dot-fill var(--dot-duration,2s) linear forwards;background-color:#4259ee;border-radius:5px;content:"";height:100%;inset-block:0;left:0;position:absolute}@media (prefers-reduced-motion:reduce){.onboarding-tour-middle-section .screen-slide{animation:none!important;opacity:1;transform:none}.onboarding-tour-middle-section .button.active:after{animation:none!important;width:100%}}@media screen and (max-width:1512px){.onboarding-tour-middle-section{gap:6px}.onboarding-tour-image{height:222px;width:390px}}@keyframes tooltip-slide-in-right{0%{opacity:0;transform:translate(32px)}to{opacity:1;transform:translate(0)}}@keyframes tooltip-slide-in-left{0%{opacity:0;transform:translate(-32px)}to{opacity:1;transform:translate(0)}}.tooltip-card-wrapper{background-color:#fff;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:40px;position:relative;width:428px}.tooltip-card-wrapper--anchored{position:absolute;z-index:999999}.tooltip-card-arrow{background-color:#b3bdf8;position:absolute}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--bottom-right,.tooltip-card-arrow--top-left,.tooltip-card-arrow--top-right{height:12px;width:18px}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--left-top,.tooltip-card-arrow--right-bottom,.tooltip-card-arrow--right-top{height:18px;width:12px}.tooltip-card-arrow--top-left,.tooltip-card-arrow--top-right{clip-path:polygon(50% 0,0 100%,100% 100%);top:-12px}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--bottom-right{bottom:-12px;clip-path:polygon(0 0,100% 0,50% 100%)}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--left-top{clip-path:polygon(0 50%,100% 0,100% 100%);left:-12px}.tooltip-card-arrow--right-bottom,.tooltip-card-arrow--right-top{clip-path:polygon(100% 50%,0 0,0 100%);right:-12px}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--top-left{left:32px}.tooltip-card-arrow--bottom-right,.tooltip-card-arrow--top-right{right:32px}.tooltip-card-arrow--left-top,.tooltip-card-arrow--right-top{top:32px}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--right-bottom{bottom:32px}.tooltip-card-body,.tooltip-card-content{display:flex;flex-direction:column;gap:8px}.tooltip-card-content{will-change:opacity,transform}.tooltip-card-content--forward{animation:tooltip-slide-in-right .32s cubic-bezier(.22,1,.36,1) both}.tooltip-card-content--backward{animation:tooltip-slide-in-left .32s cubic-bezier(.22,1,.36,1) both}.tooltip-card-content .tooltip-card-image{margin-top:24px}.tooltip-card-header{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.tooltip-card-description{color:#7a8294;font-size:14px;font-weight:500;line-height:21px}.tooltip-card-image{border-radius:12px}.tooltip-card-footer{align-items:center;display:flex;justify-content:space-between}.tooltip-card-footer-right{align-items:center;display:flex;gap:14px}.tooltip-card-skip-btn:hover{text-decoration:none!important}@media (prefers-reduced-motion:reduce){.tooltip-card-content{animation:none!important;opacity:1;transform:none}}.product-tour-list{bottom:24px;position:fixed;right:12px;z-index:999999}.product-tour-list-minimized-chip{align-items:center;background-color:#4259ee;border:none;border-bottom:4px solid #687af1;border-radius:4px;box-shadow:0 10px 15px #00000026;cursor:pointer;display:flex;gap:10px;justify-content:center;padding:16px 32px;position:relative}.product-tour-list-minimized-chip:focus-visible{box-shadow:0 10px 15px #00000026,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.product-tour-list-minimized-chip:focus:not(:focus-visible){box-shadow:0 10px 15px #00000026;outline:none}.product-tour-list-minimized-chip .product-tour-list-minimized-label{color:#fff;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;white-space:nowrap}.product-tour-list-minimized-badge{border-radius:100px;box-shadow:0 0 4px #0000001f;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:16px;font-weight:600;height:30px;justify-content:center;line-height:24px;min-width:30px;padding:6px;position:absolute;right:-11px;text-transform:capitalize;top:-10px}.product-tour-list--expanded,.product-tour-list-minimized-badge{align-items:center;background-color:#fff;box-sizing:border-box;display:flex}.product-tour-list--expanded{border-radius:12px;box-shadow:0 0 15px #0000001a;flex-direction:column;gap:32px;padding:40px;width:435px}.product-tour-list-close{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.product-tour-list-close:focus-visible{box-shadow:0 0 4px #0000001f,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.product-tour-list-close:focus:not(:focus-visible){box-shadow:0 0 4px #0000001f;outline:none}.product-tour-list-close svg{height:18px;width:18px}.product-tour-list-title{color:#0d152c;font-family:Manrope,sans-serif;font-size:24px;font-weight:800;line-height:36px;padding:8px 12px;text-align:center;text-transform:capitalize;width:100%}.product-tour-list-steps{display:flex;flex-direction:column;gap:8px;width:100%}.product-tour-list-step{align-items:center;background-color:#f5f6fa;border-radius:12px;box-sizing:border-box;display:flex;gap:6px;min-width:130px;padding:12px 16px;width:100%}.product-tour-list-step .product-tour-list-step-index{color:#31416e;flex-shrink:0;font-family:Manrope,sans-serif;font-size:16px;font-weight:500;line-height:1.25;text-transform:capitalize}.product-tour-list-step .product-tour-list-step-label{color:#1f2b4d;flex:1;font-family:Manrope,sans-serif;font-size:16px;font-weight:500;line-height:1.25;min-width:0;text-transform:capitalize}.product-tour-list-step--completed .product-tour-list-step-index{color:#7a8294}.product-tour-list-step--completed .product-tour-list-step-label{color:#b4bac7}.product-tour-list-step-btn{flex-shrink:0;height:32px!important;max-height:32px;min-width:56px!important}.product-tour-list-step-btn.product-tour-list-step-btn--completed{background-color:#c3c8d4!important;border-color:#c3c8d4!important;color:#fff!important}.product-tour-list-step-btn.product-tour-list-step-btn--completed:hover{background-color:#c3c8d4!important;border-color:#c3c8d4!important}.product-tour-list-dismiss{height:32px!important;justify-content:center;width:100%}.product-tour-list-dismiss:hover{text-decoration:none!important}@media screen and (max-width:1512px){.product-tour-list--expanded{gap:24px;padding:30px;width:380px}.product-tour-list-close svg{height:14px;width:14px}.product-tour-list-title{font-size:20px;line-height:30px;padding:4px 8px}.product-tour-list-step{padding:10px 12px}.product-tour-list-step :is(.product-tour-list-step-index,.product-tour-list-step-label){font-size:14px}.product-tour-list-step-btn{height:28px!important;max-height:28px}.product-tour-list-minimized-chip{padding:12px 24px}.product-tour-list-minimized-chip .product-tour-list-minimized-label{font-size:13px;line-height:18px}.product-tour-list-minimized-badge{font-size:14px;height:26px;line-height:20px;min-width:26px}}@media screen and (max-width:1280px){.product-tour-list--expanded{gap:20px;padding:24px;width:360px}.product-tour-list-title{font-size:18px;line-height:28px}.product-tour-list-steps{gap:6px}.product-tour-list-step{padding:8px 12px}.product-tour-list-step :is(.product-tour-list-step-index,.product-tour-list-step-label){font-size:13px}.product-tour-list-dismiss{font-size:13px!important;height:auto!important;line-height:18px!important;min-height:28px;text-align:center;white-space:normal}}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|
|
2
|
-
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useRef, useCallback, useEffect } from "react";
|
|
4
|
-
import default_1 from "../../node_modules/@mui/icons-material/CloseRounded.js";
|
|
5
|
-
import { Badge } from "../Badge/index.js";
|
|
6
|
-
import { Button } from "../Button/index.js";
|
|
7
|
-
import { ProductTourList } from "./productTourList.js";
|
|
8
|
-
import { TooltipCard } from "./tooltipCard.js";
|
|
9
|
-
|
|
10
|
-
const OnboardingTour = ({
|
|
11
|
-
badgeLabel = "New feature",
|
|
12
|
-
carouselDurations,
|
|
13
|
-
carouselOnActiveIndexChange,
|
|
14
|
-
carouselScreens,
|
|
15
|
-
carouselClassName,
|
|
16
|
-
images,
|
|
17
|
-
description = "Explore the latest updates and improve your workflow.",
|
|
18
|
-
isSmallScreen,
|
|
19
|
-
onClose,
|
|
20
|
-
playEntrance = false,
|
|
21
|
-
primaryAction,
|
|
22
|
-
secondaryAction,
|
|
23
|
-
title = "Welcome to the new feature",
|
|
24
|
-
tooltip,
|
|
25
|
-
productTour,
|
|
26
|
-
anchorRef
|
|
27
|
-
}) => {
|
|
28
|
-
const [stage, setStage] = useState("modal");
|
|
29
|
-
const [productTourExpanded, setProductTourExpanded] = useState(false);
|
|
30
|
-
const [dismissed, setDismissed] = useState(false);
|
|
31
|
-
const [activeIndex, setActiveIndex] = useState(0);
|
|
32
|
-
const [direction, setDirection] = useState("forward");
|
|
33
|
-
const [animKey, setAnimKey] = useState(0);
|
|
34
|
-
const timerRef = useRef(null);
|
|
35
|
-
const imageList = typeof images === "string" ? [images] : images;
|
|
36
|
-
const screens = carouselScreens ?? (imageList == null ? void 0 : imageList.map((src, i) => /* @__PURE__ */ jsx(
|
|
37
|
-
"img",
|
|
38
|
-
{
|
|
39
|
-
alt: `${title ?? "slide"} ${i + 1}`,
|
|
40
|
-
className: "onboarding-tour-image",
|
|
41
|
-
src
|
|
42
|
-
},
|
|
43
|
-
`onboarding-image-${i}`
|
|
44
|
-
)));
|
|
45
|
-
const totalSlides = (screens == null ? void 0 : screens.length) ?? 0;
|
|
46
|
-
const hasScreens = screens && screens.length > 0;
|
|
47
|
-
const hasCarousel = screens && screens.length > 1;
|
|
48
|
-
const goToSlide = useCallback(
|
|
49
|
-
// eslint-disable-next-line @typescript-eslint/no-inferrable-types
|
|
50
|
-
(index, dir = "forward") => {
|
|
51
|
-
setDirection(dir);
|
|
52
|
-
setActiveIndex(index);
|
|
53
|
-
setAnimKey((k) => k + 1);
|
|
54
|
-
carouselOnActiveIndexChange == null ? void 0 : carouselOnActiveIndexChange(index);
|
|
55
|
-
},
|
|
56
|
-
[carouselOnActiveIndexChange]
|
|
57
|
-
);
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
if (!hasCarousel || totalSlides === 0) return;
|
|
60
|
-
if (timerRef.current) {
|
|
61
|
-
clearTimeout(timerRef.current);
|
|
62
|
-
}
|
|
63
|
-
timerRef.current = setTimeout(() => {
|
|
64
|
-
goToSlide((activeIndex + 1) % totalSlides, "forward");
|
|
65
|
-
}, (carouselDurations == null ? void 0 : carouselDurations[activeIndex]) ?? 2e3);
|
|
66
|
-
return () => {
|
|
67
|
-
if (timerRef.current) {
|
|
68
|
-
clearTimeout(timerRef.current);
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
}, [activeIndex, carouselDurations, goToSlide, hasCarousel, totalSlides]);
|
|
72
|
-
const handlePrimaryClick = () => {
|
|
73
|
-
primaryAction == null ? void 0 : primaryAction.onClick();
|
|
74
|
-
if (tooltip) {
|
|
75
|
-
setStage("tooltip");
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
const handleTooltipSkip = () => {
|
|
79
|
-
tooltip == null ? void 0 : tooltip.onSkip();
|
|
80
|
-
if (productTour) {
|
|
81
|
-
setProductTourExpanded(false);
|
|
82
|
-
setStage("productTour");
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
const handleTooltipNext = () => {
|
|
86
|
-
tooltip == null ? void 0 : tooltip.onNext();
|
|
87
|
-
};
|
|
88
|
-
const handleTooltipClose = () => {
|
|
89
|
-
tooltip == null ? void 0 : tooltip.onClose();
|
|
90
|
-
};
|
|
91
|
-
const handleProductTourDismiss = () => {
|
|
92
|
-
productTour == null ? void 0 : productTour.onDismiss();
|
|
93
|
-
setDismissed(true);
|
|
94
|
-
};
|
|
95
|
-
const handleProductTourExpand = () => {
|
|
96
|
-
var _a;
|
|
97
|
-
(_a = productTour == null ? void 0 : productTour.onExpand) == null ? void 0 : _a.call(productTour);
|
|
98
|
-
setProductTourExpanded(true);
|
|
99
|
-
};
|
|
100
|
-
const handleProductTourMinimize = () => {
|
|
101
|
-
var _a;
|
|
102
|
-
(_a = productTour == null ? void 0 : productTour.onMinimize) == null ? void 0 : _a.call(productTour);
|
|
103
|
-
setProductTourExpanded(false);
|
|
104
|
-
};
|
|
105
|
-
if (dismissed) {
|
|
106
|
-
return null;
|
|
107
|
-
}
|
|
108
|
-
if (stage === "productTour" && productTour) {
|
|
109
|
-
return /* @__PURE__ */ jsx(
|
|
110
|
-
ProductTourList,
|
|
111
|
-
{
|
|
112
|
-
dismissLabel: productTour.dismissLabel,
|
|
113
|
-
expanded: productTourExpanded,
|
|
114
|
-
minimizedLabel: productTour.minimizedLabel,
|
|
115
|
-
remainingCount: productTour.remainingCount,
|
|
116
|
-
steps: productTour.steps,
|
|
117
|
-
title: productTour.title,
|
|
118
|
-
onDismiss: handleProductTourDismiss,
|
|
119
|
-
onExpandedChange: (next) => {
|
|
120
|
-
if (next) {
|
|
121
|
-
handleProductTourExpand();
|
|
122
|
-
} else {
|
|
123
|
-
handleProductTourMinimize();
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
if (stage === "tooltip" && tooltip) {
|
|
130
|
-
return /* @__PURE__ */ jsx(
|
|
131
|
-
TooltipCard,
|
|
132
|
-
{
|
|
133
|
-
anchorRef,
|
|
134
|
-
arrowPosition: tooltip.arrowPosition,
|
|
135
|
-
footerProps: {
|
|
136
|
-
showClose: tooltip.showClose ?? true,
|
|
137
|
-
closeLabel: tooltip.closeLabel ?? "Close",
|
|
138
|
-
onClose: handleTooltipClose,
|
|
139
|
-
showSkip: tooltip.showSkip ?? true,
|
|
140
|
-
skipLabel: tooltip.skipLabel ?? "Skip",
|
|
141
|
-
onSkip: handleTooltipSkip,
|
|
142
|
-
showNext: tooltip.showNext ?? true,
|
|
143
|
-
nextLabel: tooltip.nextLabel ?? "Next",
|
|
144
|
-
onNext: handleTooltipNext
|
|
145
|
-
},
|
|
146
|
-
slides: tooltip.slides
|
|
147
|
-
}
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
151
|
-
/* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "onboarding-tour-overlay" }),
|
|
152
|
-
/* @__PURE__ */ jsxs("div", { className: "onboarding-tour-wrapper", children: [
|
|
153
|
-
/* @__PURE__ */ jsx("div", { className: "onboarding-tour-close-button", onClick: onClose, children: /* @__PURE__ */ jsx(default_1, { fontSize: "small", sx: { color: "#60697D" } }) }),
|
|
154
|
-
/* @__PURE__ */ jsxs("div", { className: "onboarding-tour-container", children: [
|
|
155
|
-
/* @__PURE__ */ jsxs(
|
|
156
|
-
"div",
|
|
157
|
-
{
|
|
158
|
-
className: `onboarding-tour-header${playEntrance ? " onboarding-tour-header--entrance" : ""}`,
|
|
159
|
-
children: [
|
|
160
|
-
badgeLabel && /* @__PURE__ */ jsx(
|
|
161
|
-
Badge,
|
|
162
|
-
{
|
|
163
|
-
color: "info",
|
|
164
|
-
label: badgeLabel,
|
|
165
|
-
size: isSmallScreen ? "small" : "medium",
|
|
166
|
-
variant: "subtle"
|
|
167
|
-
}
|
|
168
|
-
),
|
|
169
|
-
/* @__PURE__ */ jsxs("div", { className: "onboarding-tour-header-content", children: [
|
|
170
|
-
/* @__PURE__ */ jsx("span", { className: "onboarding-tour-title", children: title }),
|
|
171
|
-
description && /* @__PURE__ */ jsx("span", { className: "onboarding-tour-description", children: description })
|
|
172
|
-
] })
|
|
173
|
-
]
|
|
174
|
-
}
|
|
175
|
-
),
|
|
176
|
-
hasScreens && /* @__PURE__ */ jsxs(
|
|
177
|
-
"div",
|
|
178
|
-
{
|
|
179
|
-
className: `onboarding-tour-middle-section${carouselClassName ? ` ${carouselClassName}` : ""}`,
|
|
180
|
-
children: [
|
|
181
|
-
/* @__PURE__ */ jsx("div", { className: `screen-slide screen-slide--${direction}`, children: screens[activeIndex] }, animKey),
|
|
182
|
-
hasCarousel && /* @__PURE__ */ jsx("div", { className: "button-carousel-wrapper", children: screens.map((_, i) => {
|
|
183
|
-
const duration = carouselDurations == null ? void 0 : carouselDurations[i];
|
|
184
|
-
return /* @__PURE__ */ jsx(
|
|
185
|
-
"div",
|
|
186
|
-
{
|
|
187
|
-
className: `button ${activeIndex === i ? "active" : ""}`,
|
|
188
|
-
style: activeIndex === i && duration ? { "--dot-duration": `${duration}ms` } : {},
|
|
189
|
-
onClick: () => {
|
|
190
|
-
const dir = i > activeIndex ? "forward" : "backward";
|
|
191
|
-
goToSlide(i, dir);
|
|
192
|
-
}
|
|
193
|
-
},
|
|
194
|
-
i
|
|
195
|
-
);
|
|
196
|
-
}) })
|
|
197
|
-
]
|
|
198
|
-
}
|
|
199
|
-
),
|
|
200
|
-
/* @__PURE__ */ jsx(
|
|
201
|
-
"div",
|
|
202
|
-
{
|
|
203
|
-
className: `onboarding-tour-footer${playEntrance ? " onboarding-tour-footer--entrance" : ""}`,
|
|
204
|
-
children: /* @__PURE__ */ jsxs("div", { className: "onboarding-tour-actions", children: [
|
|
205
|
-
secondaryAction && /* @__PURE__ */ jsx(
|
|
206
|
-
Button,
|
|
207
|
-
{
|
|
208
|
-
size: isSmallScreen ? "small" : "large",
|
|
209
|
-
variant: secondaryAction.variant ?? "tertiary",
|
|
210
|
-
onClick: secondaryAction.onClick,
|
|
211
|
-
children: secondaryAction.label
|
|
212
|
-
}
|
|
213
|
-
),
|
|
214
|
-
primaryAction && /* @__PURE__ */ jsx(
|
|
215
|
-
Button,
|
|
216
|
-
{
|
|
217
|
-
size: isSmallScreen ? "small" : "large",
|
|
218
|
-
variant: primaryAction.variant ?? "primary",
|
|
219
|
-
onClick: handlePrimaryClick,
|
|
220
|
-
children: primaryAction.label
|
|
221
|
-
}
|
|
222
|
-
)
|
|
223
|
-
] })
|
|
224
|
-
}
|
|
225
|
-
)
|
|
226
|
-
] })
|
|
227
|
-
] })
|
|
228
|
-
] });
|
|
229
|
-
};
|
|
230
|
-
export {
|
|
231
|
-
OnboardingTour
|
|
232
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
export interface ProductTourStep {
|
|
3
|
-
/** Step label shown in the list */
|
|
4
|
-
label: string;
|
|
5
|
-
/** Action button label (e.g. Open, Start, Retry) */
|
|
6
|
-
actionLabel: string;
|
|
7
|
-
/** Called when the step action is clicked */
|
|
8
|
-
onAction?: () => void;
|
|
9
|
-
/**
|
|
10
|
-
* When true, step uses muted completed styling (lighter text + gray action button).
|
|
11
|
-
* Defaults to false.
|
|
12
|
-
*/
|
|
13
|
-
completed?: boolean;
|
|
14
|
-
}
|
|
15
|
-
export interface ProductTourListProps {
|
|
16
|
-
/** Title shown in the opened card. Defaults to "How it works?" */
|
|
17
|
-
title?: string;
|
|
18
|
-
/** Label shown on the minimized chip. Defaults to "Complete your learning" */
|
|
19
|
-
minimizedLabel?: string;
|
|
20
|
-
/** Steps rendered in the opened list */
|
|
21
|
-
steps: ProductTourStep[];
|
|
22
|
-
/**
|
|
23
|
-
* Badge count on the minimized chip.
|
|
24
|
-
* Defaults to the number of incomplete steps.
|
|
25
|
-
*/
|
|
26
|
-
remainingCount?: number;
|
|
27
|
-
/** Footer dismiss link label */
|
|
28
|
-
dismissLabel?: string;
|
|
29
|
-
/** Called when the user dismisses the tour entirely */
|
|
30
|
-
onDismiss?: () => void;
|
|
31
|
-
/** Controlled expanded state. When omitted, component manages its own state. */
|
|
32
|
-
expanded?: boolean;
|
|
33
|
-
/** Initial expanded state when uncontrolled. Defaults to false (minimized). */
|
|
34
|
-
defaultExpanded?: boolean;
|
|
35
|
-
/** Called when expanded/minimized state changes */
|
|
36
|
-
onExpandedChange?: (expanded: boolean) => void;
|
|
37
|
-
}
|
|
38
|
-
export declare const ProductTourList: ({ title, minimizedLabel, steps, remainingCount, dismissLabel, onDismiss, expanded: expandedProp, defaultExpanded, onExpandedChange, }: ProductTourListProps) => import("react").JSX.Element;
|
|
39
|
-
//# sourceMappingURL=productTourList.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"productTourList.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/productTourList.tsx"],"names":[],"mappings":"AAMA,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,eAAe,GAAI,uIAU7B,oBAAoB,gCA8EtB,CAAC"}
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900";@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}@keyframes onboarding-tour-section-enter{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.onboarding-tour-overlay{background-color:#0d152ccc;bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;-webkit-tap-highlight-color:transparent;opacity:1;pointer-events:auto;transition:opacity .5s ease-in-out}.onboarding-tour-overlay.overlay--hidden{opacity:0;pointer-events:none}.onboarding-tour-close-button{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.onboarding-tour-close-button:focus-visible{box-shadow:0 0 4px #0000001f,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.onboarding-tour-close-button:focus:not(:focus-visible){box-shadow:0 0 4px #0000001f;outline:none}.onboarding-tour-close-button svg{height:18px;width:18px}.onboarding-tour-wrapper{background-color:#fff;background-image:radial-gradient(circle,#f7f7f799 2px,#0000 0),radial-gradient(circle,#f7f7f799 2px,#0000 0);background-size:18px 18px;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;left:50%;padding:40px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:999999}.onboarding-tour-wrapper .onboarding-tour-container{align-items:center;display:flex;flex-direction:column;gap:32px;height:100%;justify-content:space-between}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header{align-items:center;display:flex;flex-direction:column;gap:8px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content{align-items:center;display:flex;flex-direction:column;gap:4px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-title{color:#0d152c;font-size:32px;font-weight:800;line-height:48px;text-transform:capitalize;white-space:nowrap}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-description{color:#7a8294;font-size:16px;font-weight:600;line-height:24px;text-align:center;width:302px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-footer .onboarding-tour-actions{align-items:center;display:flex;gap:12px}.onboarding-tour-wrapper .onboarding-tour-close-button{right:12px;top:12px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header.onboarding-tour-header--entrance{animation:onboarding-tour-section-enter .4s cubic-bezier(.22,1,.36,1) 0s both;will-change:opacity,transform}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-footer.onboarding-tour-footer--entrance{animation:onboarding-tour-section-enter .4s cubic-bezier(.22,1,.36,1) .6s both;will-change:opacity,transform}@media (prefers-reduced-motion:reduce){.onboarding-tour-wrapper .onboarding-tour-container :is(.onboarding-tour-footer.onboarding-tour-footer--entrance,.onboarding-tour-header.onboarding-tour-header--entrance){animation:none!important;opacity:1;transform:none}}@media screen and (max-width:1512px){.onboarding-tour-wrapper{padding:30px}.onboarding-tour-wrapper .onboarding-tour-close-button svg{height:14px;width:14px}.onboarding-tour-wrapper .onboarding-tour-container{gap:24px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header{gap:4px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content{gap:2px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-title{font-size:24px;line-height:36px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-description{font-size:12px;line-height:18px}}@keyframes slide-in-from-right{0%{opacity:0;transform:translate(48px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-from-left{0%{opacity:0;transform:translate(-48px)}to{opacity:1;transform:translate(0)}}@keyframes dot-fill{0%{width:0}to{width:100%}}.onboarding-tour-middle-section{align-items:center;display:flex;flex-direction:column;gap:8px;overflow:hidden;width:100%}.onboarding-tour-middle-section .screen-slide{display:flex;justify-content:center;width:100%}.onboarding-tour-middle-section .screen-slide--forward{animation:slide-in-from-right .38s cubic-bezier(.22,1,.36,1) both}.onboarding-tour-middle-section .screen-slide--backward{animation:slide-in-from-left .38s cubic-bezier(.22,1,.36,1) both}.onboarding-tour-middle-section .screen-slide img{max-height:100%;max-width:100%;object-fit:contain}.onboarding-tour-image{height:295px;object-fit:contain;width:520px}.button-carousel-wrapper{align-items:center;display:flex;gap:10px;justify-content:center}.button-carousel-wrapper .button{background-color:#d9dde7;border-radius:5px;cursor:pointer;flex-shrink:0;height:10px;overflow:hidden;position:relative;transition:width .3s cubic-bezier(.22,1,.36,1),background-color .2s;width:10px}.button-carousel-wrapper .button.active{background-color:#d9dde7;width:32px}.button-carousel-wrapper .button.active:after{animation:dot-fill var(--dot-duration,2s) linear forwards;background-color:#4259ee;border-radius:5px;content:"";height:100%;inset-block:0;left:0;position:absolute}@media (prefers-reduced-motion:reduce){.onboarding-tour-middle-section .screen-slide{animation:none!important;opacity:1;transform:none}.onboarding-tour-middle-section .button.active:after{animation:none!important;width:100%}}@media screen and (max-width:1512px){.onboarding-tour-middle-section{gap:6px}.onboarding-tour-image{height:222px;width:390px}}@keyframes tooltip-slide-in-right{0%{opacity:0;transform:translate(32px)}to{opacity:1;transform:translate(0)}}@keyframes tooltip-slide-in-left{0%{opacity:0;transform:translate(-32px)}to{opacity:1;transform:translate(0)}}.tooltip-card-wrapper{background-color:#fff;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:40px;position:relative;width:428px}.tooltip-card-wrapper--anchored{position:absolute;z-index:999999}.tooltip-card-arrow{background-color:#b3bdf8;position:absolute}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--bottom-right,.tooltip-card-arrow--top-left,.tooltip-card-arrow--top-right{height:12px;width:18px}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--left-top,.tooltip-card-arrow--right-bottom,.tooltip-card-arrow--right-top{height:18px;width:12px}.tooltip-card-arrow--top-left,.tooltip-card-arrow--top-right{clip-path:polygon(50% 0,0 100%,100% 100%);top:-12px}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--bottom-right{bottom:-12px;clip-path:polygon(0 0,100% 0,50% 100%)}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--left-top{clip-path:polygon(0 50%,100% 0,100% 100%);left:-12px}.tooltip-card-arrow--right-bottom,.tooltip-card-arrow--right-top{clip-path:polygon(100% 50%,0 0,0 100%);right:-12px}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--top-left{left:32px}.tooltip-card-arrow--bottom-right,.tooltip-card-arrow--top-right{right:32px}.tooltip-card-arrow--left-top,.tooltip-card-arrow--right-top{top:32px}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--right-bottom{bottom:32px}.tooltip-card-body,.tooltip-card-content{display:flex;flex-direction:column;gap:8px}.tooltip-card-content{will-change:opacity,transform}.tooltip-card-content--forward{animation:tooltip-slide-in-right .32s cubic-bezier(.22,1,.36,1) both}.tooltip-card-content--backward{animation:tooltip-slide-in-left .32s cubic-bezier(.22,1,.36,1) both}.tooltip-card-content .tooltip-card-image{margin-top:24px}.tooltip-card-header{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.tooltip-card-description{color:#7a8294;font-size:14px;font-weight:500;line-height:21px}.tooltip-card-image{border-radius:12px}.tooltip-card-footer{align-items:center;display:flex;justify-content:space-between}.tooltip-card-footer-right{align-items:center;display:flex;gap:14px}.tooltip-card-skip-btn:hover{text-decoration:none!important}@media (prefers-reduced-motion:reduce){.tooltip-card-content{animation:none!important;opacity:1;transform:none}}.product-tour-list{bottom:24px;position:fixed;right:12px;z-index:999999}.product-tour-list-minimized-chip{align-items:center;background-color:#4259ee;border:none;border-bottom:4px solid #687af1;border-radius:4px;box-shadow:0 10px 15px #00000026;cursor:pointer;display:flex;gap:10px;justify-content:center;padding:16px 32px;position:relative}.product-tour-list-minimized-chip:focus-visible{box-shadow:0 10px 15px #00000026,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.product-tour-list-minimized-chip:focus:not(:focus-visible){box-shadow:0 10px 15px #00000026;outline:none}.product-tour-list-minimized-chip .product-tour-list-minimized-label{color:#fff;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;white-space:nowrap}.product-tour-list-minimized-badge{border-radius:100px;box-shadow:0 0 4px #0000001f;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:16px;font-weight:600;height:30px;justify-content:center;line-height:24px;min-width:30px;padding:6px;position:absolute;right:-11px;text-transform:capitalize;top:-10px}.product-tour-list--expanded,.product-tour-list-minimized-badge{align-items:center;background-color:#fff;box-sizing:border-box;display:flex}.product-tour-list--expanded{border-radius:12px;box-shadow:0 0 15px #0000001a;flex-direction:column;gap:32px;padding:40px;width:435px}.product-tour-list-close{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.product-tour-list-close:focus-visible{box-shadow:0 0 4px #0000001f,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.product-tour-list-close:focus:not(:focus-visible){box-shadow:0 0 4px #0000001f;outline:none}.product-tour-list-close svg{height:18px;width:18px}.product-tour-list-title{color:#0d152c;font-family:Manrope,sans-serif;font-size:24px;font-weight:800;line-height:36px;padding:8px 12px;text-align:center;text-transform:capitalize;width:100%}.product-tour-list-steps{display:flex;flex-direction:column;gap:8px;width:100%}.product-tour-list-step{align-items:center;background-color:#f5f6fa;border-radius:12px;box-sizing:border-box;display:flex;gap:6px;min-width:130px;padding:12px 16px;width:100%}.product-tour-list-step .product-tour-list-step-index{color:#31416e;flex-shrink:0;font-family:Manrope,sans-serif;font-size:16px;font-weight:500;line-height:1.25;text-transform:capitalize}.product-tour-list-step .product-tour-list-step-label{color:#1f2b4d;flex:1;font-family:Manrope,sans-serif;font-size:16px;font-weight:500;line-height:1.25;min-width:0;text-transform:capitalize}.product-tour-list-step--completed .product-tour-list-step-index{color:#7a8294}.product-tour-list-step--completed .product-tour-list-step-label{color:#b4bac7}.product-tour-list-step-btn{flex-shrink:0;height:32px!important;max-height:32px;min-width:56px!important}.product-tour-list-step-btn.product-tour-list-step-btn--completed{background-color:#c3c8d4!important;border-color:#c3c8d4!important;color:#fff!important}.product-tour-list-step-btn.product-tour-list-step-btn--completed:hover{background-color:#c3c8d4!important;border-color:#c3c8d4!important}.product-tour-list-dismiss{height:32px!important;justify-content:center;width:100%}.product-tour-list-dismiss:hover{text-decoration:none!important}@media screen and (max-width:1512px){.product-tour-list--expanded{gap:24px;padding:30px;width:380px}.product-tour-list-close svg{height:14px;width:14px}.product-tour-list-title{font-size:20px;line-height:30px;padding:4px 8px}.product-tour-list-step{padding:10px 12px}.product-tour-list-step :is(.product-tour-list-step-index,.product-tour-list-step-label){font-size:14px}.product-tour-list-step-btn{height:28px!important;max-height:28px}.product-tour-list-minimized-chip{padding:12px 24px}.product-tour-list-minimized-chip .product-tour-list-minimized-label{font-size:13px;line-height:18px}.product-tour-list-minimized-badge{font-size:14px;height:26px;line-height:20px;min-width:26px}}@media screen and (max-width:1280px){.product-tour-list--expanded{gap:20px;padding:24px;width:360px}.product-tour-list-title{font-size:18px;line-height:28px}.product-tour-list-steps{gap:6px}.product-tour-list-step{padding:8px 12px}.product-tour-list-step :is(.product-tour-list-step-index,.product-tour-list-step-label){font-size:13px}.product-tour-list-dismiss{font-size:13px!important;height:auto!important;line-height:18px!important;min-height:28px;text-align:center;white-space:normal}}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
import default_1 from "../../node_modules/@mui/icons-material/CloseRounded.js";
|
|
5
|
-
import { Button } from "../Button/index.js";
|
|
6
|
-
|
|
7
|
-
const ProductTourList = ({
|
|
8
|
-
title = "How it works?",
|
|
9
|
-
minimizedLabel = "Complete your learning",
|
|
10
|
-
steps,
|
|
11
|
-
remainingCount,
|
|
12
|
-
dismissLabel = "I don't need help, don't show the tour",
|
|
13
|
-
onDismiss,
|
|
14
|
-
expanded: expandedProp,
|
|
15
|
-
defaultExpanded = false,
|
|
16
|
-
onExpandedChange
|
|
17
|
-
}) => {
|
|
18
|
-
const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
|
|
19
|
-
const isControlled = expandedProp !== void 0;
|
|
20
|
-
const expanded = isControlled ? expandedProp : internalExpanded;
|
|
21
|
-
const badgeCount = remainingCount ?? steps.filter((step) => !step.completed).length;
|
|
22
|
-
const setExpanded = (next) => {
|
|
23
|
-
if (!isControlled) {
|
|
24
|
-
setInternalExpanded(next);
|
|
25
|
-
}
|
|
26
|
-
onExpandedChange == null ? void 0 : onExpandedChange(next);
|
|
27
|
-
};
|
|
28
|
-
if (!expanded) {
|
|
29
|
-
return /* @__PURE__ */ jsx("div", { className: "product-tour-list product-tour-list--minimized", children: /* @__PURE__ */ jsxs(
|
|
30
|
-
"button",
|
|
31
|
-
{
|
|
32
|
-
"aria-label": `${minimizedLabel}. ${badgeCount} remaining`,
|
|
33
|
-
className: "product-tour-list-minimized-chip",
|
|
34
|
-
type: "button",
|
|
35
|
-
onClick: () => {
|
|
36
|
-
setExpanded(true);
|
|
37
|
-
},
|
|
38
|
-
children: [
|
|
39
|
-
/* @__PURE__ */ jsx("span", { className: "product-tour-list-minimized-label", children: minimizedLabel }),
|
|
40
|
-
badgeCount > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "product-tour-list-minimized-badge", children: badgeCount })
|
|
41
|
-
]
|
|
42
|
-
}
|
|
43
|
-
) });
|
|
44
|
-
}
|
|
45
|
-
return /* @__PURE__ */ jsxs("div", { className: "product-tour-list product-tour-list--expanded", children: [
|
|
46
|
-
/* @__PURE__ */ jsx(
|
|
47
|
-
"div",
|
|
48
|
-
{
|
|
49
|
-
className: "product-tour-list-close",
|
|
50
|
-
onClick: () => {
|
|
51
|
-
setExpanded(false);
|
|
52
|
-
},
|
|
53
|
-
children: /* @__PURE__ */ jsx(default_1, { fontSize: "small", sx: { color: "#60697D" } })
|
|
54
|
-
}
|
|
55
|
-
),
|
|
56
|
-
/* @__PURE__ */ jsx("div", { className: "product-tour-list-title", children: title }),
|
|
57
|
-
/* @__PURE__ */ jsx("div", { className: "product-tour-list-steps", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
|
|
58
|
-
"div",
|
|
59
|
-
{
|
|
60
|
-
className: `product-tour-list-step${step.completed ? " product-tour-list-step--completed" : ""}`,
|
|
61
|
-
children: [
|
|
62
|
-
/* @__PURE__ */ jsxs("span", { className: "product-tour-list-step-index", children: [
|
|
63
|
-
index + 1,
|
|
64
|
-
"."
|
|
65
|
-
] }),
|
|
66
|
-
/* @__PURE__ */ jsx("span", { className: "product-tour-list-step-label", children: step.label }),
|
|
67
|
-
/* @__PURE__ */ jsx(
|
|
68
|
-
Button,
|
|
69
|
-
{
|
|
70
|
-
className: `product-tour-list-step-btn${step.completed ? " product-tour-list-step-btn--completed" : ""}`,
|
|
71
|
-
size: "large",
|
|
72
|
-
variant: "primary",
|
|
73
|
-
onClick: step.onAction,
|
|
74
|
-
children: step.actionLabel
|
|
75
|
-
}
|
|
76
|
-
)
|
|
77
|
-
]
|
|
78
|
-
},
|
|
79
|
-
`${step.label}-${index}`
|
|
80
|
-
)) }),
|
|
81
|
-
/* @__PURE__ */ jsx(Button, { className: "product-tour-list-dismiss", size: "large", variant: "url", onClick: onDismiss, children: dismissLabel })
|
|
82
|
-
] });
|
|
83
|
-
};
|
|
84
|
-
export {
|
|
85
|
-
ProductTourList
|
|
86
|
-
};
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
|
|
3
|
-
export interface TooltipCardSlide {
|
|
4
|
-
/** Slide heading */
|
|
5
|
-
header: string;
|
|
6
|
-
/** Slide body text */
|
|
7
|
-
description: string;
|
|
8
|
-
/** Optional image URL shown between description and footer */
|
|
9
|
-
image?: string;
|
|
10
|
-
}
|
|
11
|
-
export interface TooltipCardFooterProps {
|
|
12
|
-
/** Show the close / left-most action */
|
|
13
|
-
showClose?: boolean;
|
|
14
|
-
closeLabel?: string;
|
|
15
|
-
onClose?: () => void;
|
|
16
|
-
/** Show the skip / middle text action */
|
|
17
|
-
showSkip?: boolean;
|
|
18
|
-
skipLabel?: string;
|
|
19
|
-
onSkip?: () => void;
|
|
20
|
-
/** Show the next / primary action */
|
|
21
|
-
showNext?: boolean;
|
|
22
|
-
nextLabel?: string;
|
|
23
|
-
onNext?: () => void;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Position of the arrow on the card edge.
|
|
27
|
-
* - top-left / top-right → arrow on the top edge, near left or right
|
|
28
|
-
* - bottom-left / bottom-right → arrow on the bottom edge, near left or right
|
|
29
|
-
* - left-top / left-bottom → arrow on the left edge, near top or bottom
|
|
30
|
-
* - right-top / right-bottom → arrow on the right edge, near top or bottom
|
|
31
|
-
*/
|
|
32
|
-
export type TooltipCardArrowPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
|
|
33
|
-
export interface TooltipCardProps {
|
|
34
|
-
/** One or more slides. If > 1, a dot carousel is rendered. */
|
|
35
|
-
slides: TooltipCardSlide[];
|
|
36
|
-
footerProps?: TooltipCardFooterProps;
|
|
37
|
-
/** Position of the directional arrow on the card. If omitted, placement is auto-detected from the anchor's viewport position. */
|
|
38
|
-
arrowPosition?: TooltipCardArrowPosition;
|
|
39
|
-
/** Ref attached to the DOM element the tooltip card should anchor to. When provided, the card is portaled to document.body and positioned absolutely next to the anchor. */
|
|
40
|
-
anchorRef?: RefObject<HTMLElement>;
|
|
41
|
-
/** Auto-advance duration in milliseconds when there are multiple slides. Defaults to 2000ms. */
|
|
42
|
-
duration?: number;
|
|
43
|
-
}
|
|
44
|
-
export declare const TooltipCard: ({ slides, footerProps, arrowPosition, anchorRef, duration, }: TooltipCardProps) => import("react").JSX.Element;
|
|
45
|
-
//# sourceMappingURL=tooltipCard.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltipCard.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/tooltipCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB;IACrC,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,wBAAwB,GAChC,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,UAAU,GACV,aAAa,GACb,WAAW,GACX,cAAc,CAAC;AAEnB,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,iIAAiI;IACjI,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,4KAA4K;IAC5K,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,gGAAgG;IAChG,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,GAAI,8DAMzB,gBAAgB,gCAiHlB,CAAC"}
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900";@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}@keyframes onboarding-tour-section-enter{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.onboarding-tour-overlay{background-color:#0d152ccc;bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;-webkit-tap-highlight-color:transparent;opacity:1;pointer-events:auto;transition:opacity .5s ease-in-out}.onboarding-tour-overlay.overlay--hidden{opacity:0;pointer-events:none}.onboarding-tour-close-button{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.onboarding-tour-close-button:focus-visible{box-shadow:0 0 4px #0000001f,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.onboarding-tour-close-button:focus:not(:focus-visible){box-shadow:0 0 4px #0000001f;outline:none}.onboarding-tour-close-button svg{height:18px;width:18px}.onboarding-tour-wrapper{background-color:#fff;background-image:radial-gradient(circle,#f7f7f799 2px,#0000 0),radial-gradient(circle,#f7f7f799 2px,#0000 0);background-size:18px 18px;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;left:50%;padding:40px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:999999}.onboarding-tour-wrapper .onboarding-tour-container{align-items:center;display:flex;flex-direction:column;gap:32px;height:100%;justify-content:space-between}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header{align-items:center;display:flex;flex-direction:column;gap:8px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content{align-items:center;display:flex;flex-direction:column;gap:4px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-title{color:#0d152c;font-size:32px;font-weight:800;line-height:48px;text-transform:capitalize;white-space:nowrap}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-description{color:#7a8294;font-size:16px;font-weight:600;line-height:24px;text-align:center;width:302px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-footer .onboarding-tour-actions{align-items:center;display:flex;gap:12px}.onboarding-tour-wrapper .onboarding-tour-close-button{right:12px;top:12px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header.onboarding-tour-header--entrance{animation:onboarding-tour-section-enter .4s cubic-bezier(.22,1,.36,1) 0s both;will-change:opacity,transform}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-footer.onboarding-tour-footer--entrance{animation:onboarding-tour-section-enter .4s cubic-bezier(.22,1,.36,1) .6s both;will-change:opacity,transform}@media (prefers-reduced-motion:reduce){.onboarding-tour-wrapper .onboarding-tour-container :is(.onboarding-tour-footer.onboarding-tour-footer--entrance,.onboarding-tour-header.onboarding-tour-header--entrance){animation:none!important;opacity:1;transform:none}}@media screen and (max-width:1512px){.onboarding-tour-wrapper{padding:30px}.onboarding-tour-wrapper .onboarding-tour-close-button svg{height:14px;width:14px}.onboarding-tour-wrapper .onboarding-tour-container{gap:24px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header{gap:4px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content{gap:2px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-title{font-size:24px;line-height:36px}.onboarding-tour-wrapper .onboarding-tour-container .onboarding-tour-header .onboarding-tour-header-content .onboarding-tour-description{font-size:12px;line-height:18px}}@keyframes slide-in-from-right{0%{opacity:0;transform:translate(48px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-from-left{0%{opacity:0;transform:translate(-48px)}to{opacity:1;transform:translate(0)}}@keyframes dot-fill{0%{width:0}to{width:100%}}.onboarding-tour-middle-section{align-items:center;display:flex;flex-direction:column;gap:8px;overflow:hidden;width:100%}.onboarding-tour-middle-section .screen-slide{display:flex;justify-content:center;width:100%}.onboarding-tour-middle-section .screen-slide--forward{animation:slide-in-from-right .38s cubic-bezier(.22,1,.36,1) both}.onboarding-tour-middle-section .screen-slide--backward{animation:slide-in-from-left .38s cubic-bezier(.22,1,.36,1) both}.onboarding-tour-middle-section .screen-slide img{max-height:100%;max-width:100%;object-fit:contain}.onboarding-tour-image{height:295px;object-fit:contain;width:520px}.button-carousel-wrapper{align-items:center;display:flex;gap:10px;justify-content:center}.button-carousel-wrapper .button{background-color:#d9dde7;border-radius:5px;cursor:pointer;flex-shrink:0;height:10px;overflow:hidden;position:relative;transition:width .3s cubic-bezier(.22,1,.36,1),background-color .2s;width:10px}.button-carousel-wrapper .button.active{background-color:#d9dde7;width:32px}.button-carousel-wrapper .button.active:after{animation:dot-fill var(--dot-duration,2s) linear forwards;background-color:#4259ee;border-radius:5px;content:"";height:100%;inset-block:0;left:0;position:absolute}@media (prefers-reduced-motion:reduce){.onboarding-tour-middle-section .screen-slide{animation:none!important;opacity:1;transform:none}.onboarding-tour-middle-section .button.active:after{animation:none!important;width:100%}}@media screen and (max-width:1512px){.onboarding-tour-middle-section{gap:6px}.onboarding-tour-image{height:222px;width:390px}}@keyframes tooltip-slide-in-right{0%{opacity:0;transform:translate(32px)}to{opacity:1;transform:translate(0)}}@keyframes tooltip-slide-in-left{0%{opacity:0;transform:translate(-32px)}to{opacity:1;transform:translate(0)}}.tooltip-card-wrapper{background-color:#fff;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;padding:40px;position:relative;width:428px}.tooltip-card-wrapper--anchored{position:absolute;z-index:999999}.tooltip-card-arrow{background-color:#b3bdf8;position:absolute}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--bottom-right,.tooltip-card-arrow--top-left,.tooltip-card-arrow--top-right{height:12px;width:18px}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--left-top,.tooltip-card-arrow--right-bottom,.tooltip-card-arrow--right-top{height:18px;width:12px}.tooltip-card-arrow--top-left,.tooltip-card-arrow--top-right{clip-path:polygon(50% 0,0 100%,100% 100%);top:-12px}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--bottom-right{bottom:-12px;clip-path:polygon(0 0,100% 0,50% 100%)}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--left-top{clip-path:polygon(0 50%,100% 0,100% 100%);left:-12px}.tooltip-card-arrow--right-bottom,.tooltip-card-arrow--right-top{clip-path:polygon(100% 50%,0 0,0 100%);right:-12px}.tooltip-card-arrow--bottom-left,.tooltip-card-arrow--top-left{left:32px}.tooltip-card-arrow--bottom-right,.tooltip-card-arrow--top-right{right:32px}.tooltip-card-arrow--left-top,.tooltip-card-arrow--right-top{top:32px}.tooltip-card-arrow--left-bottom,.tooltip-card-arrow--right-bottom{bottom:32px}.tooltip-card-body,.tooltip-card-content{display:flex;flex-direction:column;gap:8px}.tooltip-card-content{will-change:opacity,transform}.tooltip-card-content--forward{animation:tooltip-slide-in-right .32s cubic-bezier(.22,1,.36,1) both}.tooltip-card-content--backward{animation:tooltip-slide-in-left .32s cubic-bezier(.22,1,.36,1) both}.tooltip-card-content .tooltip-card-image{margin-top:24px}.tooltip-card-header{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.tooltip-card-description{color:#7a8294;font-size:14px;font-weight:500;line-height:21px}.tooltip-card-image{border-radius:12px}.tooltip-card-footer{align-items:center;display:flex;justify-content:space-between}.tooltip-card-footer-right{align-items:center;display:flex;gap:14px}.tooltip-card-skip-btn:hover{text-decoration:none!important}@media (prefers-reduced-motion:reduce){.tooltip-card-content{animation:none!important;opacity:1;transform:none}}.product-tour-list{bottom:24px;position:fixed;right:12px;z-index:999999}.product-tour-list-minimized-chip{align-items:center;background-color:#4259ee;border:none;border-bottom:4px solid #687af1;border-radius:4px;box-shadow:0 10px 15px #00000026;cursor:pointer;display:flex;gap:10px;justify-content:center;padding:16px 32px;position:relative}.product-tour-list-minimized-chip:focus-visible{box-shadow:0 10px 15px #00000026,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.product-tour-list-minimized-chip:focus:not(:focus-visible){box-shadow:0 10px 15px #00000026;outline:none}.product-tour-list-minimized-chip .product-tour-list-minimized-label{color:#fff;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;white-space:nowrap}.product-tour-list-minimized-badge{border-radius:100px;box-shadow:0 0 4px #0000001f;color:#1f2b4d;font-family:Manrope,sans-serif;font-size:16px;font-weight:600;height:30px;justify-content:center;line-height:24px;min-width:30px;padding:6px;position:absolute;right:-11px;text-transform:capitalize;top:-10px}.product-tour-list--expanded,.product-tour-list-minimized-badge{align-items:center;background-color:#fff;box-sizing:border-box;display:flex}.product-tour-list--expanded{border-radius:12px;box-shadow:0 0 15px #0000001a;flex-direction:column;gap:32px;padding:40px;width:435px}.product-tour-list-close{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.product-tour-list-close:focus-visible{box-shadow:0 0 4px #0000001f,0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,#fff),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,#4259ee);outline:none;transition:box-shadow .15s ease-in-out}.product-tour-list-close:focus:not(:focus-visible){box-shadow:0 0 4px #0000001f;outline:none}.product-tour-list-close svg{height:18px;width:18px}.product-tour-list-title{color:#0d152c;font-family:Manrope,sans-serif;font-size:24px;font-weight:800;line-height:36px;padding:8px 12px;text-align:center;text-transform:capitalize;width:100%}.product-tour-list-steps{display:flex;flex-direction:column;gap:8px;width:100%}.product-tour-list-step{align-items:center;background-color:#f5f6fa;border-radius:12px;box-sizing:border-box;display:flex;gap:6px;min-width:130px;padding:12px 16px;width:100%}.product-tour-list-step .product-tour-list-step-index{color:#31416e;flex-shrink:0;font-family:Manrope,sans-serif;font-size:16px;font-weight:500;line-height:1.25;text-transform:capitalize}.product-tour-list-step .product-tour-list-step-label{color:#1f2b4d;flex:1;font-family:Manrope,sans-serif;font-size:16px;font-weight:500;line-height:1.25;min-width:0;text-transform:capitalize}.product-tour-list-step--completed .product-tour-list-step-index{color:#7a8294}.product-tour-list-step--completed .product-tour-list-step-label{color:#b4bac7}.product-tour-list-step-btn{flex-shrink:0;height:32px!important;max-height:32px;min-width:56px!important}.product-tour-list-step-btn.product-tour-list-step-btn--completed{background-color:#c3c8d4!important;border-color:#c3c8d4!important;color:#fff!important}.product-tour-list-step-btn.product-tour-list-step-btn--completed:hover{background-color:#c3c8d4!important;border-color:#c3c8d4!important}.product-tour-list-dismiss{height:32px!important;justify-content:center;width:100%}.product-tour-list-dismiss:hover{text-decoration:none!important}@media screen and (max-width:1512px){.product-tour-list--expanded{gap:24px;padding:30px;width:380px}.product-tour-list-close svg{height:14px;width:14px}.product-tour-list-title{font-size:20px;line-height:30px;padding:4px 8px}.product-tour-list-step{padding:10px 12px}.product-tour-list-step :is(.product-tour-list-step-index,.product-tour-list-step-label){font-size:14px}.product-tour-list-step-btn{height:28px!important;max-height:28px}.product-tour-list-minimized-chip{padding:12px 24px}.product-tour-list-minimized-chip .product-tour-list-minimized-label{font-size:13px;line-height:18px}.product-tour-list-minimized-badge{font-size:14px;height:26px;line-height:20px;min-width:26px}}@media screen and (max-width:1280px){.product-tour-list--expanded{gap:20px;padding:24px;width:360px}.product-tour-list-title{font-size:18px;line-height:28px}.product-tour-list-steps{gap:6px}.product-tour-list-step{padding:8px 12px}.product-tour-list-step :is(.product-tour-list-step-index,.product-tour-list-step-label){font-size:13px}.product-tour-list-dismiss{font-size:13px!important;height:auto!important;line-height:18px!important;min-height:28px;text-align:center;white-space:normal}}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|
|
2
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useCallback, useRef, useEffect } from "react";
|
|
4
|
-
import { Button } from "../Button/index.js";
|
|
5
|
-
import { Portal } from "../Portal/index.js";
|
|
6
|
-
import { useTooltipCardPosition } from "./useTooltipCardPosition.js";
|
|
7
|
-
|
|
8
|
-
const TooltipCard = ({
|
|
9
|
-
slides,
|
|
10
|
-
footerProps,
|
|
11
|
-
arrowPosition,
|
|
12
|
-
anchorRef,
|
|
13
|
-
duration = 2e3
|
|
14
|
-
}) => {
|
|
15
|
-
const [activeIndex, setActiveIndex] = useState(0);
|
|
16
|
-
const [direction, setDirection] = useState("forward");
|
|
17
|
-
const [animKey, setAnimKey] = useState(0);
|
|
18
|
-
const {
|
|
19
|
-
wrapperRef,
|
|
20
|
-
wrapperStyle,
|
|
21
|
-
arrowPosition: resolvedArrowPosition
|
|
22
|
-
} = useTooltipCardPosition(anchorRef, arrowPosition, { contentKey: activeIndex });
|
|
23
|
-
const hasCarousel = slides.length > 1;
|
|
24
|
-
const current = slides[activeIndex];
|
|
25
|
-
const goToSlide = useCallback((index, dir = "forward") => {
|
|
26
|
-
setDirection(dir);
|
|
27
|
-
setActiveIndex(index);
|
|
28
|
-
setAnimKey((k) => k + 1);
|
|
29
|
-
}, []);
|
|
30
|
-
const slideTimerRef = useRef(null);
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
if (!hasCarousel) return;
|
|
33
|
-
if (slideTimerRef.current) {
|
|
34
|
-
clearTimeout(slideTimerRef.current);
|
|
35
|
-
}
|
|
36
|
-
slideTimerRef.current = setTimeout(() => {
|
|
37
|
-
goToSlide((activeIndex + 1) % slides.length, "forward");
|
|
38
|
-
}, duration);
|
|
39
|
-
return () => {
|
|
40
|
-
if (slideTimerRef.current) {
|
|
41
|
-
clearTimeout(slideTimerRef.current);
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
}, [activeIndex, duration, goToSlide, hasCarousel, slides.length]);
|
|
45
|
-
const {
|
|
46
|
-
showClose = true,
|
|
47
|
-
closeLabel = "Close",
|
|
48
|
-
onClose,
|
|
49
|
-
showSkip = true,
|
|
50
|
-
skipLabel = "Skip",
|
|
51
|
-
onSkip,
|
|
52
|
-
showNext = true,
|
|
53
|
-
nextLabel = "Next",
|
|
54
|
-
onNext
|
|
55
|
-
} = footerProps ?? {};
|
|
56
|
-
const card = /* @__PURE__ */ jsxs(
|
|
57
|
-
"div",
|
|
58
|
-
{
|
|
59
|
-
ref: wrapperRef,
|
|
60
|
-
className: `tooltip-card-wrapper${anchorRef ? " tooltip-card-wrapper--anchored" : ""}`,
|
|
61
|
-
style: anchorRef ? wrapperStyle : void 0,
|
|
62
|
-
children: [
|
|
63
|
-
/* @__PURE__ */ jsx("div", { className: `tooltip-card-arrow tooltip-card-arrow--${resolvedArrowPosition}` }),
|
|
64
|
-
/* @__PURE__ */ jsxs("div", { className: "tooltip-card-body", children: [
|
|
65
|
-
/* @__PURE__ */ jsxs("div", { className: `tooltip-card-content tooltip-card-content--${direction}`, children: [
|
|
66
|
-
/* @__PURE__ */ jsx("h3", { className: "tooltip-card-header", children: current.header }),
|
|
67
|
-
/* @__PURE__ */ jsx("p", { className: "tooltip-card-description", children: current.description }),
|
|
68
|
-
current.image && /* @__PURE__ */ jsx("img", { alt: current.header, className: "tooltip-card-image", src: current.image })
|
|
69
|
-
] }, animKey),
|
|
70
|
-
hasCarousel && /* @__PURE__ */ jsx("div", { className: "button-carousel-wrapper", children: slides.map((_, i) => /* @__PURE__ */ jsx(
|
|
71
|
-
"div",
|
|
72
|
-
{
|
|
73
|
-
"aria-label": `Go to slide ${i + 1}`,
|
|
74
|
-
className: `button${activeIndex === i ? " active" : ""}`,
|
|
75
|
-
onClick: () => {
|
|
76
|
-
goToSlide(i, i > activeIndex ? "forward" : "backward");
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
i
|
|
80
|
-
)) })
|
|
81
|
-
] }),
|
|
82
|
-
/* @__PURE__ */ jsxs("div", { className: "tooltip-card-footer", children: [
|
|
83
|
-
/* @__PURE__ */ jsx("div", { className: "tooltip-card-footer-left", children: showClose && /* @__PURE__ */ jsx(Button, { size: "large", variant: "tertiary", onClick: onClose, children: closeLabel }) }),
|
|
84
|
-
/* @__PURE__ */ jsxs("div", { className: "tooltip-card-footer-right", children: [
|
|
85
|
-
showSkip && /* @__PURE__ */ jsx(Button, { className: "tooltip-card-skip-btn", size: "large", variant: "url", onClick: onSkip, children: skipLabel }),
|
|
86
|
-
showNext && /* @__PURE__ */ jsx(Button, { size: "large", variant: "primary", onClick: onNext, children: nextLabel })
|
|
87
|
-
] })
|
|
88
|
-
] })
|
|
89
|
-
]
|
|
90
|
-
}
|
|
91
|
-
);
|
|
92
|
-
return anchorRef ? /* @__PURE__ */ jsx(Portal, { container: document.body, children: card }) : card;
|
|
93
|
-
};
|
|
94
|
-
export {
|
|
95
|
-
TooltipCard
|
|
96
|
-
};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { CSSProperties, RefObject } from 'react';
|
|
2
|
-
|
|
3
|
-
type TooltipCardArrowPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
|
|
4
|
-
export interface UseTooltipCardPositionOptions {
|
|
5
|
-
/** Distance between the anchor edge and the tooltip card edge in pixels. */
|
|
6
|
-
offset?: number;
|
|
7
|
-
/** Optional key that changes when tooltip content changes, forcing a recalculation. */
|
|
8
|
-
contentKey?: number | string;
|
|
9
|
-
}
|
|
10
|
-
export interface UseTooltipCardPositionResult {
|
|
11
|
-
/** Ref to attach to the tooltip card wrapper element. */
|
|
12
|
-
wrapperRef: RefObject<HTMLDivElement>;
|
|
13
|
-
/** Positioning styles to apply to the wrapper element. */
|
|
14
|
-
wrapperStyle: CSSProperties;
|
|
15
|
-
/** Whether the position has been computed at least once. */
|
|
16
|
-
isPositioned: boolean;
|
|
17
|
-
/** The resolved arrow placement (requested or auto-detected). */
|
|
18
|
-
arrowPosition: TooltipCardArrowPosition;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* Positions a TooltipCard relative to a consumer-provided anchor element.
|
|
22
|
-
*
|
|
23
|
-
* The card is portaled to document.body, so this hook returns absolute coordinates
|
|
24
|
-
* including scroll offsets. It recalculates on scroll, resize, and when either the
|
|
25
|
-
* anchor or the tooltip wrapper changes size.
|
|
26
|
-
*/
|
|
27
|
-
export declare const useTooltipCardPosition: (anchorRef: RefObject<HTMLElement> | undefined, arrowPosition: TooltipCardArrowPosition | undefined, { offset, contentKey }?: UseTooltipCardPositionOptions) => UseTooltipCardPositionResult;
|
|
28
|
-
export default useTooltipCardPosition;
|
|
29
|
-
//# sourceMappingURL=useTooltipCardPosition.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltipCardPosition.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/useTooltipCardPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,KAAK,wBAAwB,GACzB,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,UAAU,GACV,aAAa,GACb,WAAW,GACX,cAAc,CAAC;AA6JnB,MAAM,WAAW,6BAA6B;IAC5C,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,4BAA4B;IAC3C,yDAAyD;IACzD,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,0DAA0D;IAC1D,YAAY,EAAE,aAAa,CAAC;IAC5B,4DAA4D;IAC5D,YAAY,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,aAAa,EAAE,wBAAwB,CAAC;CACzC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GACjC,WAAW,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,EAC7C,eAAe,wBAAwB,GAAG,SAAS,EACnD,yBAA6B,6BAAkC,KAC9D,4BA6HF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
|