@strapi/admin 5.17.0 → 5.18.1

package/dist/admin/admin/src/components/UnstableGuidedTour/Step.mjs

@@ -1,26 +1,72 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, Popover, Box, Typography, Button } from '@strapi/design-system';
+import { Flex, Popover, Typography, Box, Button, LinkButton } from '@strapi/design-system';
 import { FormattedMessage } from 'react-intl';
+import { NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { unstableUseGuidedTour } from './Context.mjs';
 
 const ActionsContainer = styled(Flex)`
   border-top: ${({ theme })=>`1px solid ${theme.colors.neutral150}`};
 `;
+/**
+ * TODO:
+ * We should probably move all arrow styles + svg to the DS
+ */ const PopoverArrow = styled(Popover.Arrow)`
+  fill: ${({ theme })=>theme.colors.neutral0};
+  transform: translateY(-16px) rotate(-90deg);
+`;
+const StepCount = ({ tourName })=>{
+    const state = unstableUseGuidedTour('GuidedTourPopover', (s)=>s.state);
+    const currentStep = state.tours[tourName].currentStep + 1;
+    // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
+    const displayedLength = state.tours[tourName].length - 1;
+    return /*#__PURE__*/ jsx(Typography, {
+        variant: "omega",
+        fontSize: "12px",
+        children: /*#__PURE__*/ jsx(FormattedMessage, {
+            id: "tours.stepCount",
+            defaultMessage: "Step {currentStep} of {tourLength}",
+            values: {
+                currentStep,
+                tourLength: displayedLength
+            }
+        })
+    });
+};
 const createStepComponents = (tourName)=>({
-        Root: /*#__PURE__*/ React.forwardRef((props, ref)=>/*#__PURE__*/ jsx(Popover.Content, {
+        Root: /*#__PURE__*/ React.forwardRef(({ withArrow = true, ...props }, ref)=>{
+            return /*#__PURE__*/ jsxs(Popover.Content, {
                 ref: ref,
                 side: "top",
                 align: "center",
+                style: {
+                    border: 'none'
+                },
                 ...props,
-                children: /*#__PURE__*/ jsx(Flex, {
-                    width: "360px",
-                    direction: "column",
-                    alignItems: "start",
-                    children: props.children
-                })
-            })),
+                children: [
+                    withArrow && /*#__PURE__*/ jsx(PopoverArrow, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx("svg", {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "23",
+                            height: "25",
+                            viewBox: "0 0 23 25",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: "M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Flex, {
+                        width: "360px",
+                        direction: "column",
+                        alignItems: "start",
+                        children: props.children
+                    })
+                ]
+            });
+        }),
         Title: (props)=>{
             return /*#__PURE__*/ jsx(Box, {
                 paddingTop: 5,
@@ -55,30 +101,18 @@ const createStepComponents = (tourName)=>({
                     })
                 })
             }),
-        Actions: ({ showStepCount = true, showSkip = false, ...props })=>{
+        Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps })=>{
             const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s)=>s.dispatch);
-            const state = unstableUseGuidedTour('GuidedTourPopover', (s)=>s.state);
-            const currentStep = state.tours[tourName].currentStep + 1;
-            const tourLength = state.tours[tourName].length;
             return /*#__PURE__*/ jsx(ActionsContainer, {
                 width: "100%",
                 padding: 3,
                 paddingLeft: 5,
-                children: 'children' in props ? props.children : /*#__PURE__*/ jsxs(Flex, {
-                    flex: 1,
-                    justifyContent: showStepCount ? 'space-between' : 'flex-end',
+                justifyContent: showStepCount ? 'space-between' : 'flex-end',
+                ...flexProps,
+                children: children ? children : /*#__PURE__*/ jsxs(Fragment, {
                     children: [
-                        showStepCount && /*#__PURE__*/ jsx(Typography, {
-                            variant: "omega",
-                            fontSize: "12px",
-                            children: /*#__PURE__*/ jsx(FormattedMessage, {
-                                id: "tours.stepCount",
-                                defaultMessage: "Step {currentStep} of {tourLength}",
-                                values: {
-                                    currentStep,
-                                    tourLength
-                                }
-                            })
+                        showStepCount && /*#__PURE__*/ jsx(StepCount, {
+                            tourName: tourName
                         }),
                         /*#__PURE__*/ jsxs(Flex, {
                             gap: 2,
@@ -94,7 +128,18 @@ const createStepComponents = (tourName)=>({
                                         defaultMessage: "Skip"
                                     })
                                 }),
-                                /*#__PURE__*/ jsx(Button, {
+                                to ? /*#__PURE__*/ jsx(LinkButton, {
+                                    tag: NavLink,
+                                    to: to,
+                                    onClick: ()=>dispatch({
+                                            type: 'next_step',
+                                            payload: tourName
+                                        }),
+                                    children: /*#__PURE__*/ jsx(FormattedMessage, {
+                                        id: "tours.next",
+                                        defaultMessage: "Next"
+                                    })
+                                }) : /*#__PURE__*/ jsx(Button, {
                                     onClick: ()=>dispatch({
                                             type: 'next_step',
                                             payload: tourName
@@ -112,5 +157,5 @@ const createStepComponents = (tourName)=>({
         }
     });
 
-export { createStepComponents };
+export { StepCount, createStepComponents };
 //# sourceMappingURL=Step.mjs.map

package/dist/admin/admin/src/components/UnstableGuidedTour/Step.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Step.mjs","sources":["../../../../../../admin/src/components/UnstableGuidedTour/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Popover, Box, Flex, Button, Typography } from '@strapi/design-system';\nimport { FormattedMessage, type MessageDescriptor } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { unstableUseGuidedTour, ValidTourName } from './Context';\n\n/* -------------------------------------------------------------------------------------------------\n * Step factory\n * -----------------------------------------------------------------------------------------------*/\n\ntype WithChildren = {\n  children: React.ReactNode;\n  id?: never;\n  defaultMessage?: never;\n};\n\ntype WithIntl = {\n  children?: undefined;\n  id: MessageDescriptor['id'];\n  defaultMessage: MessageDescriptor['defaultMessage'];\n};\n\ntype WithActionsChildren = {\n  children: React.ReactNode;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n};\n\ntype StepProps = WithChildren | WithIntl;\ntype ActionsProps = WithActionsChildren | WithActionsProps;\n\ntype Step = {\n  Root: React.ForwardRefExoticComponent<React.ComponentProps<typeof Popover.Content>>;\n  Title: (props: StepProps) => React.ReactNode;\n  Content: (props: StepProps) => React.ReactNode;\n  Actions: (props: ActionsProps) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n  border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef((props, ref) => (\n    <Popover.Content ref={ref} side=\"top\" align=\"center\" {...props}>\n      <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n        {props.children}\n      </Flex>\n    </Popover.Content>\n  )),\n\n  Title: (props) => {\n    return (\n      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Typography tag=\"div\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage tagName=\"h1\" id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => (\n    <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n      {'children' in props ? (\n        props.children\n      ) : (\n        <Typography tag=\"div\" variant=\"omega\">\n          <FormattedMessage tagName=\"p\" id={props.id} defaultMessage={props.defaultMessage} />\n        </Typography>\n      )}\n    </Box>\n  ),\n\n  Actions: ({ showStepCount = true, showSkip = false, ...props }) => {\n    const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n    const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);\n    const currentStep = state.tours[tourName].currentStep + 1;\n    const tourLength = state.tours[tourName].length;\n\n    return (\n      <ActionsContainer width=\"100%\" padding={3} paddingLeft={5}>\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Flex flex={1} justifyContent={showStepCount ? 'space-between' : 'flex-end'}>\n            {showStepCount && (\n              <Typography variant=\"omega\" fontSize=\"12px\">\n                <FormattedMessage\n                  id=\"tours.stepCount\"\n                  defaultMessage=\"Step {currentStep} of {tourLength}\"\n                  values={{ currentStep, tourLength }}\n                />\n              </Typography>\n            )}\n            <Flex gap={2}>\n              {showSkip && (\n                <Button\n                  variant=\"tertiary\"\n                  onClick={() => dispatch({ type: 'skip_tour', payload: tourName })}\n                >\n                  <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n                </Button>\n              )}\n              <Button onClick={() => dispatch({ type: 'next_step', payload: tourName })}>\n                <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n              </Button>\n            </Flex>\n          </Flex>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents };\n"],"names":["ActionsContainer","styled","Flex","theme","colors","neutral150","createStepComponents","tourName","Root","React","forwardRef","props","ref","_jsx","Popover","Content","side","align","width","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","Typography","tag","variant","fontWeight","FormattedMessage","tagName","id","defaultMessage","Actions","showStepCount","showSkip","dispatch","unstableUseGuidedTour","s","state","currentStep","tours","tourLength","length","padding","_jsxs","flex","justifyContent","fontSize","values","gap","Button","onClick","type","payload"],"mappings":"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"}
+{"version":3,"file":"Step.mjs","sources":["../../../../../../admin/src/components/UnstableGuidedTour/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Popover,\n  Box,\n  Flex,\n  Button,\n  Typography,\n  LinkButton,\n  FlexProps,\n} from '@strapi/design-system';\nimport { FormattedMessage, type MessageDescriptor } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { unstableUseGuidedTour, ValidTourName } from './Context';\n\n/* -------------------------------------------------------------------------------------------------\n * Step factory\n * -----------------------------------------------------------------------------------------------*/\n\ntype WithChildren = {\n  children: React.ReactNode;\n  id?: never;\n  defaultMessage?: never;\n};\n\ntype WithIntl = {\n  children?: undefined;\n  id: MessageDescriptor['id'];\n  defaultMessage: MessageDescriptor['defaultMessage'];\n  withArrow?: boolean;\n};\n\ntype WithActionsChildren = {\n  children: React.ReactNode;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n};\n\ntype StepProps = WithChildren | WithIntl;\ntype ActionsProps = WithActionsChildren | WithActionsProps;\n\ntype Step = {\n  Root: React.ForwardRefExoticComponent<\n    React.ComponentProps<typeof Popover.Content> & { withArrow?: boolean }\n  >;\n  Title: (props: StepProps) => React.ReactNode;\n  Content: (props: StepProps) => React.ReactNode;\n  Actions: (props: ActionsProps & { to?: string } & FlexProps) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n  border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\n/**\n * TODO:\n * We should probably move all arrow styles + svg to the DS\n */\nconst PopoverArrow = styled(Popover.Arrow)`\n  fill: ${({ theme }) => theme.colors.neutral0};\n  transform: translateY(-16px) rotate(-90deg);\n`;\n\nexport const StepCount = ({ tourName }: { tourName: ValidTourName }) => {\n  const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart\n  const displayedLength = state.tours[tourName].length - 1;\n\n  return (\n    <Typography variant=\"omega\" fontSize=\"12px\">\n      <FormattedMessage\n        id=\"tours.stepCount\"\n        defaultMessage=\"Step {currentStep} of {tourLength}\"\n        values={{ currentStep, tourLength: displayedLength }}\n      />\n    </Typography>\n  );\n};\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content ref={ref} side=\"top\" align=\"center\" style={{ border: 'none' }} {...props}>\n        {withArrow && (\n          <PopoverArrow asChild>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"23\"\n              height=\"25\"\n              viewBox=\"0 0 23 25\"\n              fill=\"none\"\n            >\n              <path d=\"M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z\" />\n            </svg>\n          </PopoverArrow>\n        )}\n        <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n          {props.children}\n        </Flex>\n      </Popover.Content>\n    );\n  }),\n\n  Title: (props) => {\n    return (\n      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Typography tag=\"div\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage tagName=\"h1\" id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => (\n    <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n      {'children' in props ? (\n        props.children\n      ) : (\n        <Typography tag=\"div\" variant=\"omega\">\n          <FormattedMessage tagName=\"p\" id={props.id} defaultMessage={props.defaultMessage} />\n        </Typography>\n      )}\n    </Box>\n  ),\n\n  Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps }) => {\n    const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n\n    return (\n      <ActionsContainer\n        width=\"100%\"\n        padding={3}\n        paddingLeft={5}\n        justifyContent={showStepCount ? 'space-between' : 'flex-end'}\n        {...flexProps}\n      >\n        {children ? (\n          children\n        ) : (\n          <>\n            {showStepCount && <StepCount tourName={tourName} />}\n            <Flex gap={2}>\n              {showSkip && (\n                <Button\n                  variant=\"tertiary\"\n                  onClick={() => dispatch({ type: 'skip_tour', payload: tourName })}\n                >\n                  <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n                </Button>\n              )}\n              {to ? (\n                <LinkButton\n                  tag={NavLink}\n                  to={to}\n                  onClick={() => dispatch({ type: 'next_step', payload: tourName })}\n                >\n                  <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n                </LinkButton>\n              ) : (\n                <Button onClick={() => dispatch({ type: 'next_step', payload: tourName })}>\n                  <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n                </Button>\n              )}\n            </Flex>\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents };\n"],"names":["ActionsContainer","styled","Flex","theme","colors","neutral150","PopoverArrow","Popover","Arrow","neutral0","StepCount","tourName","state","unstableUseGuidedTour","s","currentStep","tours","displayedLength","length","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","createStepComponents","Root","React","forwardRef","withArrow","props","ref","_jsxs","Content","side","align","style","border","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","tag","fontWeight","tagName","Actions","showStepCount","showSkip","to","flexProps","dispatch","padding","justifyContent","_Fragment","gap","Button","onClick","type","payload","LinkButton","NavLink"],"mappings":"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"}

package/dist/admin/admin/src/components/UnstableGuidedTour/Tours.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
 var styled = require('styled-components');
 var admin = require('../../services/admin.js');
 var Context = require('./Context.js');
@@ -29,12 +30,128 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 /* -------------------------------------------------------------------------------------------------
  * Tours
- * -----------------------------------------------------------------------------------------------*/ const tours = {
-    TEST: createTour('TEST', [
+ * -----------------------------------------------------------------------------------------------*/ const GotItAction = ({ onClick })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+        onClick: onClick,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
+            id: "tours.gotIt",
+            defaultMessage: "Got it"
+        })
+    });
+};
+const tours = {
+    contentTypeBuilder: createTour('contentTypeBuilder', [
         {
             name: 'Introduction',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
-                    sideOffset: -36,
+                    side: "bottom",
+                    withArrow: false,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.contentTypeBuilder.Introduction.title",
+                            defaultMessage: "Content-Type Builder"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.contentTypeBuilder.Introduction.content",
+                            defaultMessage: "Create and manage your content structure with collection types, single types and components."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            showSkip: true
+                        })
+                    ]
+                })
+        },
+        {
+            name: 'CollectionTypes',
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "right",
+                    sideOffset: 16,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.contentTypeBuilder.CollectionTypes.title",
+                            defaultMessage: "Collection Types"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.contentTypeBuilder.CollectionTypes.content",
+                            defaultMessage: "A content structure that can manage multiple entries, such as articles or products."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {})
+                    ]
+                })
+        },
+        {
+            name: 'SingleTypes',
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "right",
+                    sideOffset: 16,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.contentTypeBuilder.SingleTypes.title",
+                            defaultMessage: "Single Types"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.contentTypeBuilder.SingleTypes.content",
+                            defaultMessage: "A content structure that can manage a single entry, such as a homepage or a header."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {})
+                    ]
+                })
+        },
+        {
+            name: 'Components',
+            content: (Step, { dispatch })=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "right",
+                    sideOffset: 16,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.contentTypeBuilder.Components.title",
+                            defaultMessage: "Components"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.contentTypeBuilder.Components.content",
+                            defaultMessage: "A reusable content structure that can be used across multiple content types, such as buttons, sliders or cards."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            justifyContent: "flex-end",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(GotItAction, {
+                                onClick: ()=>dispatch({
+                                        type: 'next_step',
+                                        payload: 'contentTypeBuilder'
+                                    })
+                            })
+                        })
+                    ]
+                })
+        },
+        {
+            name: 'Finish',
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "right",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.contentTypeBuilder.Finish.title",
+                            defaultMessage: "It’s time to create content!"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.contentTypeBuilder.Finish.content",
+                            defaultMessage: "Now that you created content types, you’ll be able to create content in the content manager."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            showStepCount: false,
+                            to: "/content-manager"
+                        })
+                    ]
+                }),
+            when: (completedActions)=>completedActions.includes('didCreateContentTypeSchema')
+        }
+    ]),
+    contentManager: createTour('contentManager', [
+        {
+            name: 'Introduction',
+            when: (completedActions)=>completedActions.includes('didCreateContentTypeSchema') && !completedActions.includes('didCreateContent'),
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "top",
+                    withArrow: false,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
                             id: "tours.contentManager.Introduction.title",
@@ -51,47 +168,202 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
                 })
         },
         {
-            name: 'Done',
-            requiredActions: [
-                'didCreateApiToken'
-            ],
+            name: 'Fields',
             content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
-                    align: "start",
+                    sideOffset: -12,
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
-                            id: "tours.contentManager.CreateEntry.title",
-                            defaultMessage: "Create entry"
+                            id: "tours.contentManager.Fields.title",
+                            defaultMessage: "Fields"
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
-                            id: "tours.contentManager.CreateEntry.content",
-                            defaultMessage: "Click this button to create an entry"
+                            id: "tours.contentManager.Fields.content",
+                            defaultMessage: "Add content to the fields created in the Content-Type Builder."
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {})
                     ]
                 })
+        },
+        {
+            name: 'Publish',
+            content: (Step, { dispatch })=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "left",
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.contentManager.Publish.title",
+                            defaultMessage: "Publish"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.contentManager.Publish.content",
+                            defaultMessage: "Publish entries to make their content available through the Document Service API."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            justifyContent: "flex-end",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(GotItAction, {
+                                onClick: ()=>dispatch({
+                                        type: 'next_step',
+                                        payload: 'contentManager'
+                                    })
+                            })
+                        })
+                    ]
+                })
+        },
+        {
+            name: 'Finish',
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "right",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.contentManager.FinalStep.title",
+                            defaultMessage: "It’s time to create API Tokens!"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.contentManager.FinalStep.content",
+                            defaultMessage: "Now that you’ve created and published content, time to create API tokens and set up permissions."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            showStepCount: false,
+                            to: "/settings/api-tokens"
+                        })
+                    ]
+                }),
+            when: (completedActions)=>completedActions.includes('didCreateContent')
         }
-    ])
+    ]),
+    apiTokens: createTour('apiTokens', [
+        {
+            name: 'Introduction',
+            when: (completedActions)=>!completedActions.includes('didCreateApiToken'),
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    sideOffset: -36,
+                    withArrow: false,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.apiTokens.Introduction.title",
+                            defaultMessage: "API tokens"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.apiTokens.Introduction.content",
+                            defaultMessage: "Create and manage API tokens with highly customizable permissions."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            showSkip: true
+                        })
+                    ]
+                })
+        },
+        {
+            name: 'CreateAnAPIToken',
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "bottom",
+                    align: "end",
+                    sideOffset: -10,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.apiTokens.CreateAnAPIToken.title",
+                            defaultMessage: "Create an API token"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.apiTokens.CreateAnAPIToken.content",
+                            defaultMessage: "Create a new API token. Choose a name, duration and type."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {})
+                    ]
+                })
+        },
+        {
+            name: 'CopyAPIToken',
+            content: (Step$1, { dispatch })=>/*#__PURE__*/ jsxRuntime.jsxs(Step$1.Root, {
+                    side: "bottom",
+                    align: "start",
+                    sideOffset: -5,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step$1.Title, {
+                            id: "tours.apiTokens.CopyAPIToken.title",
+                            defaultMessage: "Copy your new API token"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step$1.Content, {
+                            id: "tours.apiTokens.CopyAPIToken.content",
+                            defaultMessage: "Make sure to do it now, you won’t be able to see it again. You’ll need to generate a new one if you lose it."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(Step$1.Actions, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Step.StepCount, {
+                                    tourName: "apiTokens"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(GotItAction, {
+                                    onClick: ()=>dispatch({
+                                            type: 'next_step',
+                                            payload: 'apiTokens'
+                                        })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+            when: (completedActions)=>completedActions.includes('didCreateApiToken')
+        },
+        {
+            name: 'Finish',
+            content: (Step)=>/*#__PURE__*/ jsxRuntime.jsxs(Step.Root, {
+                    side: "right",
+                    align: "start",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Title, {
+                            id: "tours.apiTokens.FinalStep.title",
+                            defaultMessage: "It’s time to deploy your application!"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Content, {
+                            id: "tours.apiTokens.FinalStep.content",
+                            defaultMessage: "Your application is ready to be deployed and its content to be shared with the world!"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(Step.Actions, {
+                            showStepCount: false,
+                            to: "/"
+                        })
+                    ]
+                }),
+            when: (completedActions)=>completedActions.includes('didCopyApiToken')
+        }
+    ]),
+    strapiCloud: createTour('strapiCloud', [])
+};
+const UnstableGuidedTourTooltip = ({ children, ...props })=>{
+    const state = Context.unstableUseGuidedTour('TooltipWrapper', (s)=>s.state);
+    const hasFutureFlag = window.strapi.future.isEnabled('unstableGuidedTour');
+    if (!state.enabled) {
+        return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: children
+        });
+    }
+    if (!hasFutureFlag) {
+        return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(GuidedTourTooltipImpl, {
+        ...props,
+        children: children
+    });
 };
 const GuidedTourOverlay = styled.styled(designSystem.Box)`
   position: fixed;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background-color: rgba(50, 50, 77, 0.2);
   z-index: 10;
 `;
-const UnstableGuidedTourTooltip = ({ children, content, tourName, step, requiredActions })=>{
+const GuidedTourTooltipImpl = ({ children, content, tourName, step, when })=>{
     const { data: guidedTourMeta } = admin.useGetGuidedTourMetaQuery();
     const state = Context.unstableUseGuidedTour('UnstableGuidedTourTooltip', (s)=>s.state);
     const dispatch = Context.unstableUseGuidedTour('UnstableGuidedTourTooltip', (s)=>s.dispatch);
-    const Step$1 = React__namespace.useMemo(()=>Step.createStepComponents(tourName), [
-        tourName
-    ]);
     const isCurrentStep = state.tours[tourName].currentStep === step;
-    const hasCompletedRequiredActions = requiredActions?.every((action)=>{
-        return guidedTourMeta?.data?.completedActions.includes(action);
-    }) ?? true;
-    const hasFutureFlag = window.strapi.future.isEnabled('unstableGuidedTour');
-    const isEnabled = guidedTourMeta?.data?.isFirstSuperAdminUser && !state.tours[tourName].isCompleted && hasFutureFlag;
-    const isPopoverOpen = isEnabled && isCurrentStep && hasCompletedRequiredActions;
+    const isStepConditionMet = when ? when(state.completedActions) : true;
+    const isPopoverOpen = guidedTourMeta?.data?.isFirstSuperAdminUser && !state.tours[tourName].isCompleted && isCurrentStep && isStepConditionMet;
     // Lock the scroll
     React__namespace.useEffect(()=>{
         if (!isPopoverOpen) return;
@@ -103,9 +375,24 @@ const UnstableGuidedTourTooltip = ({ children, content, tourName, step, required
     }, [
         isPopoverOpen
     ]);
+    // TODO: This isn't great but the only solution for syncing the completed actions
+    React__namespace.useEffect(()=>{
+        dispatch({
+            type: 'set_completed_actions',
+            payload: guidedTourMeta?.data?.completedActions ?? []
+        });
+    }, [
+        dispatch,
+        guidedTourMeta?.data?.completedActions
+    ]);
+    const Step$1 = React__namespace.useMemo(()=>Step.createStepComponents(tourName), [
+        tourName
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            isPopoverOpen && /*#__PURE__*/ jsxRuntime.jsx(GuidedTourOverlay, {}),
+            isPopoverOpen && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Portal, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(GuidedTourOverlay, {})
+            }),
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
                 open: isPopoverOpen,
                 children: [
@@ -126,18 +413,19 @@ function createTour(tourName, steps) {
         if (step.name in acc) {
             throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);
         }
-        acc[step.name] = ({ children })=>/*#__PURE__*/ jsxRuntime.jsx(UnstableGuidedTourTooltip, {
+        acc[step.name] = ({ children })=>{
+            return /*#__PURE__*/ jsxRuntime.jsx(UnstableGuidedTourTooltip, {
                 tourName: tourName,
                 step: index,
                 content: step.content,
-                requiredActions: step.requiredActions,
+                when: step.when,
                 children: children
             });
+        };
         return acc;
     }, {});
     return tour;
 }
 
-exports.GuidedTourOverlay = GuidedTourOverlay;
 exports.tours = tours;
 //# sourceMappingURL=Tours.js.map