@strapi/admin 5.25.0 → 5.27.0

package/dist/admin/admin/src/components/GuidedTour/Steps/Step.mjs

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, Popover, Box, Typography, Button, LinkButton } from '@strapi/design-system';
-import { FormattedMessage } from 'react-intl';
+import { Flex, Box, Popover, Typography, Button, LinkButton } from '@strapi/design-system';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { useTracking } from '../../../features/Tracking.mjs';
@@ -116,6 +116,15 @@ const DefaultActions = ({ showSkip, showPrevious, to, tourName, onNextStep, onPr
 const ActionsContainer = styled(Flex)`
   border-top: ${({ theme })=>`1px solid ${theme.colors.neutral150}`};
 `;
+const ContentContainer = styled(Box)`
+  p {
+    margin-top: ${({ theme })=>theme.spaces[5]};
+  }
+  ul {
+    list-style-type: disc;
+    padding-left: ${({ theme })=>theme.spaces[4]};
+  }
+`;
 /**
  * TODO:
  * We should probably move all arrow styles + svg to the DS
@@ -177,21 +186,31 @@ const createStepComponents = (tourName)=>({
                 })
             });
         },
-        Content: (props)=>/*#__PURE__*/ jsx(Box, {
+        Content: (props)=>{
+            const { formatMessage } = useIntl();
+            let content = '';
+            if (!('children' in props)) {
+                content = formatMessage({
+                    id: props.id,
+                    defaultMessage: props.defaultMessage
+                });
+            }
+            return /*#__PURE__*/ jsx(Box, {
                 paddingBottom: 5,
                 paddingLeft: 5,
                 paddingRight: 5,
                 width: "100%",
-                children: 'children' in props ? props.children : /*#__PURE__*/ jsx(Typography, {
-                    tag: "div",
-                    variant: "omega",
-                    children: /*#__PURE__*/ jsx(FormattedMessage, {
-                        id: props.id,
-                        defaultMessage: props.defaultMessage,
-                        values: props.values
+                children: 'children' in props ? props.children : /*#__PURE__*/ jsx(ContentContainer, {
+                    children: /*#__PURE__*/ jsx(Typography, {
+                        tag: "div",
+                        variant: "omega",
+                        dangerouslySetInnerHTML: {
+                            __html: content
+                        }
                     })
                 })
-            }),
+            });
+        },
         Actions: ({ showStepCount = true, showPrevious = true, showSkip = false, to, children, ...flexProps })=>{
             return /*#__PURE__*/ jsx(ActionsContainer, {
                 width: "100%",

package/dist/admin/admin/src/components/GuidedTour/Steps/Step.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Step.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/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 { To, NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { useGuidedTour, type ValidTourName } from '../Context';\nimport { tours } from '../Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * Common Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst StepCount = ({\n  tourName,\n  displayedCurrentStep,\n  displayedTourLength,\n}: {\n  tourName: ValidTourName;\n  displayedCurrentStep?: number;\n  displayedTourLength?: number;\n}) => {\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;\n  const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;\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: displayedStepCount }}\n      />\n    </Typography>\n  );\n};\n\nconst GotItAction = ({ onClick }: { onClick: () => void }) => {\n  return (\n    <Button onClick={onClick}>\n      <FormattedMessage id=\"tours.gotIt\" defaultMessage=\"Got it\" />\n    </Button>\n  );\n};\n\nexport type DefaultActionsProps = {\n  showSkip?: boolean;\n  showPrevious?: boolean;\n  to?: To;\n  onNextStep?: () => void;\n  onPreviousStep?: () => void;\n  tourName: ValidTourName;\n};\nconst DefaultActions = ({\n  showSkip,\n  showPrevious,\n  to,\n  tourName,\n  onNextStep,\n  onPreviousStep,\n}: DefaultActionsProps) => {\n  const { trackUsage } = useTracking();\n  const dispatch = useGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  const actualTourLength = tours[tourName]._meta.totalStepCount;\n\n  const handleSkip = () => {\n    trackUsage('didSkipGuidedTour', { name: tourName });\n    dispatch({ type: 'skip_tour', payload: tourName });\n  };\n\n  const handleNextStep = () => {\n    if (currentStep === actualTourLength) {\n      trackUsage('didCompleteGuidedTour', { name: tourName });\n    }\n\n    if (onNextStep) {\n      onNextStep();\n    } else {\n      dispatch({ type: 'next_step', payload: tourName });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    if (onPreviousStep) {\n      onPreviousStep();\n    } else {\n      dispatch({ type: 'previous_step', payload: tourName });\n    }\n  };\n\n  return (\n    <Flex gap={2}>\n      {showSkip && (\n        <Button variant=\"tertiary\" onClick={handleSkip}>\n          <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n        </Button>\n      )}\n      {!showSkip && showPrevious && (\n        <Button variant=\"tertiary\" onClick={handlePreviousStep}>\n          <FormattedMessage id=\"tours.previous\" defaultMessage=\"Previous\" />\n        </Button>\n      )}\n      {to ? (\n        <LinkButton tag={NavLink} to={to} onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </LinkButton>\n      ) : (\n        <Button onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </Button>\n      )}\n    </Flex>\n  );\n};\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  showPrevious?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: 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: (\n    props: StepProps & {\n      values?: Record<string, React.ReactNode | ((chunks: React.ReactNode) => React.ReactNode)>;\n    }\n  ) => 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\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content\n        ref={ref}\n        aria-labelledby=\"guided-tour-title\"\n        side=\"top\"\n        align=\"center\"\n        style={{ border: 'none' }}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\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=\"h1\" id=\"guided-tour-title\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage 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\n            id={props.id}\n            defaultMessage={props.defaultMessage}\n            values={props.values}\n          />\n        </Typography>\n      )}\n    </Box>\n  ),\n\n  Actions: ({\n    showStepCount = true,\n    showPrevious = true,\n    showSkip = false,\n    to,\n    children,\n    ...flexProps\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            <DefaultActions\n              tourName={tourName}\n              showSkip={showSkip}\n              showPrevious={!showSkip && showPrevious}\n              to={to}\n            />\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents, GotItAction, StepCount, DefaultActions };\n"],"names":["StepCount","tourName","displayedCurrentStep","displayedTourLength","state","useGuidedTour","s","currentStep","tours","displayedStepCount","_meta","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","GotItAction","onClick","Button","DefaultActions","showSkip","showPrevious","to","onNextStep","onPreviousStep","trackUsage","useTracking","dispatch","actualTourLength","totalStepCount","handleSkip","name","type","payload","handleNextStep","handlePreviousStep","_jsxs","Flex","gap","LinkButton","tag","NavLink","ActionsContainer","styled","theme","colors","neutral150","PopoverArrow","Popover","Arrow","neutral0","createStepComponents","Root","React","forwardRef","withArrow","props","ref","Content","aria-labelledby","side","align","style","border","e","stopPropagation","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","fontWeight","Actions","showStepCount","flexProps","padding","justifyContent","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Step.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/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, useIntl, type MessageDescriptor } from 'react-intl';\nimport { To, NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { useGuidedTour, type ValidTourName } from '../Context';\nimport { tours } from '../Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * Common Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst StepCount = ({\n  tourName,\n  displayedCurrentStep,\n  displayedTourLength,\n}: {\n  tourName: ValidTourName;\n  displayedCurrentStep?: number;\n  displayedTourLength?: number;\n}) => {\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;\n  const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;\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: displayedStepCount }}\n      />\n    </Typography>\n  );\n};\n\nconst GotItAction = ({ onClick }: { onClick: () => void }) => {\n  return (\n    <Button onClick={onClick}>\n      <FormattedMessage id=\"tours.gotIt\" defaultMessage=\"Got it\" />\n    </Button>\n  );\n};\n\nexport type DefaultActionsProps = {\n  showSkip?: boolean;\n  showPrevious?: boolean;\n  to?: To;\n  onNextStep?: () => void;\n  onPreviousStep?: () => void;\n  tourName: ValidTourName;\n};\nconst DefaultActions = ({\n  showSkip,\n  showPrevious,\n  to,\n  tourName,\n  onNextStep,\n  onPreviousStep,\n}: DefaultActionsProps) => {\n  const { trackUsage } = useTracking();\n  const dispatch = useGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  const actualTourLength = tours[tourName]._meta.totalStepCount;\n\n  const handleSkip = () => {\n    trackUsage('didSkipGuidedTour', { name: tourName });\n    dispatch({ type: 'skip_tour', payload: tourName });\n  };\n\n  const handleNextStep = () => {\n    if (currentStep === actualTourLength) {\n      trackUsage('didCompleteGuidedTour', { name: tourName });\n    }\n\n    if (onNextStep) {\n      onNextStep();\n    } else {\n      dispatch({ type: 'next_step', payload: tourName });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    if (onPreviousStep) {\n      onPreviousStep();\n    } else {\n      dispatch({ type: 'previous_step', payload: tourName });\n    }\n  };\n\n  return (\n    <Flex gap={2}>\n      {showSkip && (\n        <Button variant=\"tertiary\" onClick={handleSkip}>\n          <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n        </Button>\n      )}\n      {!showSkip && showPrevious && (\n        <Button variant=\"tertiary\" onClick={handlePreviousStep}>\n          <FormattedMessage id=\"tours.previous\" defaultMessage=\"Previous\" />\n        </Button>\n      )}\n      {to ? (\n        <LinkButton tag={NavLink} to={to} onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </LinkButton>\n      ) : (\n        <Button onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </Button>\n      )}\n    </Flex>\n  );\n};\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  showPrevious?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: 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: (\n    props: StepProps & {\n      values?: Record<string, React.ReactNode | ((chunks: React.ReactNode) => React.ReactNode)>;\n    }\n  ) => 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\nconst ContentContainer = styled(Box)`\n  p {\n    margin-top: ${({ theme }) => theme.spaces[5]};\n  }\n  ul {\n    list-style-type: disc;\n    padding-left: ${({ theme }) => theme.spaces[4]};\n  }\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\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content\n        ref={ref}\n        aria-labelledby=\"guided-tour-title\"\n        side=\"top\"\n        align=\"center\"\n        style={{ border: 'none' }}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\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=\"h1\" id=\"guided-tour-title\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => {\n    const { formatMessage } = useIntl();\n    let content = '';\n    if (!('children' in props)) {\n      content = formatMessage({\n        id: props.id,\n        defaultMessage: props.defaultMessage,\n      });\n    }\n    return (\n      <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <ContentContainer>\n            <Typography tag=\"div\" variant=\"omega\" dangerouslySetInnerHTML={{ __html: content }} />\n          </ContentContainer>\n        )}\n      </Box>\n    );\n  },\n\n  Actions: ({\n    showStepCount = true,\n    showPrevious = true,\n    showSkip = false,\n    to,\n    children,\n    ...flexProps\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            <DefaultActions\n              tourName={tourName}\n              showSkip={showSkip}\n              showPrevious={!showSkip && showPrevious}\n              to={to}\n            />\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents, GotItAction, StepCount, DefaultActions };\n"],"names":["StepCount","tourName","displayedCurrentStep","displayedTourLength","state","useGuidedTour","s","currentStep","tours","displayedStepCount","_meta","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","GotItAction","onClick","Button","DefaultActions","showSkip","showPrevious","to","onNextStep","onPreviousStep","trackUsage","useTracking","dispatch","actualTourLength","totalStepCount","handleSkip","name","type","payload","handleNextStep","handlePreviousStep","_jsxs","Flex","gap","LinkButton","tag","NavLink","ActionsContainer","styled","theme","colors","neutral150","ContentContainer","Box","spaces","PopoverArrow","Popover","Arrow","neutral0","createStepComponents","Root","React","forwardRef","withArrow","props","ref","Content","aria-labelledby","side","align","style","border","e","stopPropagation","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","paddingTop","paddingLeft","paddingRight","paddingBottom","fontWeight","formatMessage","useIntl","content","dangerouslySetInnerHTML","__html","Actions","showStepCount","flexProps","padding","justifyContent","_Fragment"],"mappings":"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"}

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

@@ -41,7 +41,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 };
 const GuidedTourTooltip = ({ children, ...props })=>{
     const state = Context.useGuidedTour('TooltipWrapper', (s)=>s.state);
-    if (!state.enabled) {
+    if (!state.enabled || state.hidden) {
         return children;
     }
     return /*#__PURE__*/ jsxRuntime.jsx(GuidedTourTooltipImpl, {

package/dist/admin/admin/src/components/GuidedTour/Tours.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tours.js","sources":["../../../../../../admin/src/components/GuidedTour/Tours.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Popover, Portal } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { useGetGuidedTourMetaQuery } from '../../services/admin';\n\nimport { type State, type Action, useGuidedTour, ValidTourName, CompletedActions } from './Context';\nimport { apiTokensSteps } from './Steps/ApiTokensSteps';\nimport { contentManagerSteps } from './Steps/ContentManagerSteps';\nimport { contentTypeBuilderSteps } from './Steps/ContentTypeBuilderSteps';\nimport { type Step, createStepComponents } from './Steps/Step';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants';\n\n/* -------------------------------------------------------------------------------------------------\n * Tours\n * -----------------------------------------------------------------------------------------------*/\n\nconst tours = {\n  contentTypeBuilder: createTour('contentTypeBuilder', contentTypeBuilderSteps),\n  contentManager: createTour('contentManager', contentManagerSteps),\n  apiTokens: createTour('apiTokens', apiTokensSteps),\n  strapiCloud: createTour('strapiCloud', []),\n} as const;\n\ntype Tours = typeof tours;\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourTooltip\n * -----------------------------------------------------------------------------------------------*/\n\nexport type StepContentProps = {\n  Step: Step;\n  state: State;\n  dispatch: React.Dispatch<Action>;\n};\ntype Content = (props: StepContentProps) => React.ReactNode;\n\ntype GuidedTourTooltipProps = {\n  children: React.ReactNode;\n  content: Content;\n  tourName: ValidTourName;\n  step: number;\n  when?: (completedActions: CompletedActions) => boolean;\n};\n\nconst GuidedTourTooltip = ({ children, ...props }: GuidedTourTooltipProps) => {\n  const state = useGuidedTour('TooltipWrapper', (s) => s.state);\n\n  if (!state.enabled) {\n    return children;\n  }\n\n  return <GuidedTourTooltipImpl {...props}>{children}</GuidedTourTooltipImpl>;\n};\n\nconst GuidedTourOverlay = styled(Box)`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(50, 50, 77, 0.2);\n  z-index: 10;\n`;\n\nconst GuidedTourTooltipImpl = ({\n  children,\n  content,\n  tourName,\n  step,\n  when,\n}: GuidedTourTooltipProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n\n  const state = useGuidedTour('GuidedTourTooltip', (s) => s.state);\n  const dispatch = useGuidedTour('GuidedTourTooltip', (s) => s.dispatch);\n\n  const isCurrentStep = state.tours[tourName].currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !state.tours[tourName].isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  // Lock the scroll\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isPopoverOpen]);\n\n  const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);\n\n  const hasApiSchema =\n    Object.keys(guidedTourMeta?.data?.schemas ?? {}).filter((key) => key.startsWith('api::'))\n      .length > 0;\n\n  React.useEffect(() => {\n    if (hasApiSchema) {\n      /**\n       * Fallback sync:\n       *\n       * When the user already has a schema (ie started project from template with seeded data),\n       * allow them to proceed to the content manager tour.\n       *\n       * When the CTB fails to restart after saving a schema (as it often does)\n       */\n      dispatch({\n        type: 'set_completed_actions',\n        payload: [GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema],\n      });\n    }\n  }, [dispatch, hasApiSchema, step, tourName]);\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor>{children}</Popover.Anchor>\n        {content({ Step, state, dispatch })}\n      </Popover.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tour factory\n * -----------------------------------------------------------------------------------------------*/\n\nexport type TourStep<P extends string> = {\n  name: P;\n  content: Content;\n  when?: (completedActions: CompletedActions) => boolean;\n  excludeFromStepCount?: boolean;\n};\n\nexport function createTour<const T extends ReadonlyArray<TourStep<string>>>(\n  tourName: string,\n  steps: T\n) {\n  type Components = {\n    [K in T[number]['name']]: React.ComponentType<{ children: React.ReactNode }>;\n  };\n\n  const tour = steps.reduce(\n    (acc, step, index) => {\n      const name = step.name as keyof Components;\n\n      if (name in acc) {\n        throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);\n      }\n\n      (acc as Components)[name] = ({ children }: { children: React.ReactNode }) => {\n        return (\n          <GuidedTourTooltip\n            tourName={tourName as ValidTourName}\n            step={index}\n            content={step.content}\n            when={step.when}\n          >\n            {children}\n          </GuidedTourTooltip>\n        );\n      };\n\n      if (step.excludeFromStepCount) {\n        // Subtract all steps registered to be excluded from the step count\n        acc._meta.displayedStepCount--;\n      }\n\n      return acc;\n    },\n    { _meta: { totalStepCount: steps.length, displayedStepCount: steps.length } } as Components & {\n      _meta: { totalStepCount: number; displayedStepCount: number };\n    }\n  );\n\n  return tour;\n}\n\nexport type { Content, Tours };\nexport { tours };\n"],"names":["tours","contentTypeBuilder","createTour","contentTypeBuilderSteps","contentManager","contentManagerSteps","apiTokens","apiTokensSteps","strapiCloud","GuidedTourTooltip","children","props","state","useGuidedTour","s","enabled","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","React","useEffect","originalStyle","window","getComputedStyle","document","body","overflow","style","Step","useMemo","createStepComponents","hasApiSchema","Object","keys","schemas","filter","key","startsWith","length","type","payload","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","_jsxs","_Fragment","Portal","Popover","Root","open","Anchor","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":"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"}
+{"version":3,"file":"Tours.js","sources":["../../../../../../admin/src/components/GuidedTour/Tours.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Popover, Portal } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { useGetGuidedTourMetaQuery } from '../../services/admin';\n\nimport { type State, type Action, useGuidedTour, ValidTourName, CompletedActions } from './Context';\nimport { apiTokensSteps } from './Steps/ApiTokensSteps';\nimport { contentManagerSteps } from './Steps/ContentManagerSteps';\nimport { contentTypeBuilderSteps } from './Steps/ContentTypeBuilderSteps';\nimport { type Step, createStepComponents } from './Steps/Step';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants';\n\n/* -------------------------------------------------------------------------------------------------\n * Tours\n * -----------------------------------------------------------------------------------------------*/\n\nconst tours = {\n  contentTypeBuilder: createTour('contentTypeBuilder', contentTypeBuilderSteps),\n  contentManager: createTour('contentManager', contentManagerSteps),\n  apiTokens: createTour('apiTokens', apiTokensSteps),\n  strapiCloud: createTour('strapiCloud', []),\n} as const;\n\ntype Tours = typeof tours;\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourTooltip\n * -----------------------------------------------------------------------------------------------*/\n\nexport type StepContentProps = {\n  Step: Step;\n  state: State;\n  dispatch: React.Dispatch<Action>;\n};\ntype Content = (props: StepContentProps) => React.ReactNode;\n\ntype GuidedTourTooltipProps = {\n  children: React.ReactNode;\n  content: Content;\n  tourName: ValidTourName;\n  step: number;\n  when?: (completedActions: CompletedActions) => boolean;\n};\n\nconst GuidedTourTooltip = ({ children, ...props }: GuidedTourTooltipProps) => {\n  const state = useGuidedTour('TooltipWrapper', (s) => s.state);\n\n  if (!state.enabled || state.hidden) {\n    return children;\n  }\n\n  return <GuidedTourTooltipImpl {...props}>{children}</GuidedTourTooltipImpl>;\n};\n\nconst GuidedTourOverlay = styled(Box)`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(50, 50, 77, 0.2);\n  z-index: 10;\n`;\n\nconst GuidedTourTooltipImpl = ({\n  children,\n  content,\n  tourName,\n  step,\n  when,\n}: GuidedTourTooltipProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n  const state = useGuidedTour('GuidedTourTooltip', (s) => s.state);\n  const dispatch = useGuidedTour('GuidedTourTooltip', (s) => s.dispatch);\n\n  const isCurrentStep = state.tours[tourName].currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !state.tours[tourName].isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  // Lock the scroll\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isPopoverOpen]);\n\n  const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);\n\n  const hasApiSchema =\n    Object.keys(guidedTourMeta?.data?.schemas ?? {}).filter((key) => key.startsWith('api::'))\n      .length > 0;\n\n  React.useEffect(() => {\n    if (hasApiSchema) {\n      /**\n       * Fallback sync:\n       *\n       * When the user already has a schema (ie started project from template with seeded data),\n       * allow them to proceed to the content manager tour.\n       *\n       * When the CTB fails to restart after saving a schema (as it often does)\n       */\n      dispatch({\n        type: 'set_completed_actions',\n        payload: [GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema],\n      });\n    }\n  }, [dispatch, hasApiSchema, step, tourName]);\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor>{children}</Popover.Anchor>\n        {content({ Step, state, dispatch })}\n      </Popover.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tour factory\n * -----------------------------------------------------------------------------------------------*/\n\nexport type TourStep<P extends string> = {\n  name: P;\n  content: Content;\n  when?: (completedActions: CompletedActions) => boolean;\n  excludeFromStepCount?: boolean;\n};\n\nexport function createTour<const T extends ReadonlyArray<TourStep<string>>>(\n  tourName: string,\n  steps: T\n) {\n  type Components = {\n    [K in T[number]['name']]: React.ComponentType<{ children: React.ReactNode }>;\n  };\n\n  const tour = steps.reduce(\n    (acc, step, index) => {\n      const name = step.name as keyof Components;\n\n      if (name in acc) {\n        throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);\n      }\n\n      (acc as Components)[name] = ({ children }: { children: React.ReactNode }) => {\n        return (\n          <GuidedTourTooltip\n            tourName={tourName as ValidTourName}\n            step={index}\n            content={step.content}\n            when={step.when}\n          >\n            {children}\n          </GuidedTourTooltip>\n        );\n      };\n\n      if (step.excludeFromStepCount) {\n        // Subtract all steps registered to be excluded from the step count\n        acc._meta.displayedStepCount--;\n      }\n\n      return acc;\n    },\n    { _meta: { totalStepCount: steps.length, displayedStepCount: steps.length } } as Components & {\n      _meta: { totalStepCount: number; displayedStepCount: number };\n    }\n  );\n\n  return tour;\n}\n\nexport type { Content, Tours };\nexport { tours };\n"],"names":["tours","contentTypeBuilder","createTour","contentTypeBuilderSteps","contentManager","contentManagerSteps","apiTokens","apiTokensSteps","strapiCloud","GuidedTourTooltip","children","props","state","useGuidedTour","s","enabled","hidden","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","React","useEffect","originalStyle","window","getComputedStyle","document","body","overflow","style","Step","useMemo","createStepComponents","hasApiSchema","Object","keys","schemas","filter","key","startsWith","length","type","payload","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","_jsxs","_Fragment","Portal","Popover","Root","open","Anchor","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":"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"}

package/dist/admin/admin/src/components/GuidedTour/Tours.mjs

@@ -20,7 +20,7 @@ import { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants.mjs';
 };
 const GuidedTourTooltip = ({ children, ...props })=>{
     const state = useGuidedTour('TooltipWrapper', (s)=>s.state);
-    if (!state.enabled) {
+    if (!state.enabled || state.hidden) {
         return children;
     }
     return /*#__PURE__*/ jsx(GuidedTourTooltipImpl, {

package/dist/admin/admin/src/components/GuidedTour/Tours.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tours.mjs","sources":["../../../../../../admin/src/components/GuidedTour/Tours.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Popover, Portal } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { useGetGuidedTourMetaQuery } from '../../services/admin';\n\nimport { type State, type Action, useGuidedTour, ValidTourName, CompletedActions } from './Context';\nimport { apiTokensSteps } from './Steps/ApiTokensSteps';\nimport { contentManagerSteps } from './Steps/ContentManagerSteps';\nimport { contentTypeBuilderSteps } from './Steps/ContentTypeBuilderSteps';\nimport { type Step, createStepComponents } from './Steps/Step';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants';\n\n/* -------------------------------------------------------------------------------------------------\n * Tours\n * -----------------------------------------------------------------------------------------------*/\n\nconst tours = {\n  contentTypeBuilder: createTour('contentTypeBuilder', contentTypeBuilderSteps),\n  contentManager: createTour('contentManager', contentManagerSteps),\n  apiTokens: createTour('apiTokens', apiTokensSteps),\n  strapiCloud: createTour('strapiCloud', []),\n} as const;\n\ntype Tours = typeof tours;\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourTooltip\n * -----------------------------------------------------------------------------------------------*/\n\nexport type StepContentProps = {\n  Step: Step;\n  state: State;\n  dispatch: React.Dispatch<Action>;\n};\ntype Content = (props: StepContentProps) => React.ReactNode;\n\ntype GuidedTourTooltipProps = {\n  children: React.ReactNode;\n  content: Content;\n  tourName: ValidTourName;\n  step: number;\n  when?: (completedActions: CompletedActions) => boolean;\n};\n\nconst GuidedTourTooltip = ({ children, ...props }: GuidedTourTooltipProps) => {\n  const state = useGuidedTour('TooltipWrapper', (s) => s.state);\n\n  if (!state.enabled) {\n    return children;\n  }\n\n  return <GuidedTourTooltipImpl {...props}>{children}</GuidedTourTooltipImpl>;\n};\n\nconst GuidedTourOverlay = styled(Box)`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(50, 50, 77, 0.2);\n  z-index: 10;\n`;\n\nconst GuidedTourTooltipImpl = ({\n  children,\n  content,\n  tourName,\n  step,\n  when,\n}: GuidedTourTooltipProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n\n  const state = useGuidedTour('GuidedTourTooltip', (s) => s.state);\n  const dispatch = useGuidedTour('GuidedTourTooltip', (s) => s.dispatch);\n\n  const isCurrentStep = state.tours[tourName].currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !state.tours[tourName].isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  // Lock the scroll\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isPopoverOpen]);\n\n  const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);\n\n  const hasApiSchema =\n    Object.keys(guidedTourMeta?.data?.schemas ?? {}).filter((key) => key.startsWith('api::'))\n      .length > 0;\n\n  React.useEffect(() => {\n    if (hasApiSchema) {\n      /**\n       * Fallback sync:\n       *\n       * When the user already has a schema (ie started project from template with seeded data),\n       * allow them to proceed to the content manager tour.\n       *\n       * When the CTB fails to restart after saving a schema (as it often does)\n       */\n      dispatch({\n        type: 'set_completed_actions',\n        payload: [GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema],\n      });\n    }\n  }, [dispatch, hasApiSchema, step, tourName]);\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor>{children}</Popover.Anchor>\n        {content({ Step, state, dispatch })}\n      </Popover.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tour factory\n * -----------------------------------------------------------------------------------------------*/\n\nexport type TourStep<P extends string> = {\n  name: P;\n  content: Content;\n  when?: (completedActions: CompletedActions) => boolean;\n  excludeFromStepCount?: boolean;\n};\n\nexport function createTour<const T extends ReadonlyArray<TourStep<string>>>(\n  tourName: string,\n  steps: T\n) {\n  type Components = {\n    [K in T[number]['name']]: React.ComponentType<{ children: React.ReactNode }>;\n  };\n\n  const tour = steps.reduce(\n    (acc, step, index) => {\n      const name = step.name as keyof Components;\n\n      if (name in acc) {\n        throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);\n      }\n\n      (acc as Components)[name] = ({ children }: { children: React.ReactNode }) => {\n        return (\n          <GuidedTourTooltip\n            tourName={tourName as ValidTourName}\n            step={index}\n            content={step.content}\n            when={step.when}\n          >\n            {children}\n          </GuidedTourTooltip>\n        );\n      };\n\n      if (step.excludeFromStepCount) {\n        // Subtract all steps registered to be excluded from the step count\n        acc._meta.displayedStepCount--;\n      }\n\n      return acc;\n    },\n    { _meta: { totalStepCount: steps.length, displayedStepCount: steps.length } } as Components & {\n      _meta: { totalStepCount: number; displayedStepCount: number };\n    }\n  );\n\n  return tour;\n}\n\nexport type { Content, Tours };\nexport { tours };\n"],"names":["tours","contentTypeBuilder","createTour","contentTypeBuilderSteps","contentManager","contentManagerSteps","apiTokens","apiTokensSteps","strapiCloud","GuidedTourTooltip","children","props","state","useGuidedTour","s","enabled","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","React","useEffect","originalStyle","window","getComputedStyle","document","body","overflow","style","Step","useMemo","createStepComponents","hasApiSchema","Object","keys","schemas","filter","key","startsWith","length","type","payload","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","_jsxs","_Fragment","Portal","Popover","Root","open","Anchor","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":"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"}
+{"version":3,"file":"Tours.mjs","sources":["../../../../../../admin/src/components/GuidedTour/Tours.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Popover, Portal } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { useGetGuidedTourMetaQuery } from '../../services/admin';\n\nimport { type State, type Action, useGuidedTour, ValidTourName, CompletedActions } from './Context';\nimport { apiTokensSteps } from './Steps/ApiTokensSteps';\nimport { contentManagerSteps } from './Steps/ContentManagerSteps';\nimport { contentTypeBuilderSteps } from './Steps/ContentTypeBuilderSteps';\nimport { type Step, createStepComponents } from './Steps/Step';\nimport { GUIDED_TOUR_REQUIRED_ACTIONS } from './utils/constants';\n\n/* -------------------------------------------------------------------------------------------------\n * Tours\n * -----------------------------------------------------------------------------------------------*/\n\nconst tours = {\n  contentTypeBuilder: createTour('contentTypeBuilder', contentTypeBuilderSteps),\n  contentManager: createTour('contentManager', contentManagerSteps),\n  apiTokens: createTour('apiTokens', apiTokensSteps),\n  strapiCloud: createTour('strapiCloud', []),\n} as const;\n\ntype Tours = typeof tours;\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourTooltip\n * -----------------------------------------------------------------------------------------------*/\n\nexport type StepContentProps = {\n  Step: Step;\n  state: State;\n  dispatch: React.Dispatch<Action>;\n};\ntype Content = (props: StepContentProps) => React.ReactNode;\n\ntype GuidedTourTooltipProps = {\n  children: React.ReactNode;\n  content: Content;\n  tourName: ValidTourName;\n  step: number;\n  when?: (completedActions: CompletedActions) => boolean;\n};\n\nconst GuidedTourTooltip = ({ children, ...props }: GuidedTourTooltipProps) => {\n  const state = useGuidedTour('TooltipWrapper', (s) => s.state);\n\n  if (!state.enabled || state.hidden) {\n    return children;\n  }\n\n  return <GuidedTourTooltipImpl {...props}>{children}</GuidedTourTooltipImpl>;\n};\n\nconst GuidedTourOverlay = styled(Box)`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(50, 50, 77, 0.2);\n  z-index: 10;\n`;\n\nconst GuidedTourTooltipImpl = ({\n  children,\n  content,\n  tourName,\n  step,\n  when,\n}: GuidedTourTooltipProps) => {\n  const { data: guidedTourMeta } = useGetGuidedTourMetaQuery();\n  const state = useGuidedTour('GuidedTourTooltip', (s) => s.state);\n  const dispatch = useGuidedTour('GuidedTourTooltip', (s) => s.dispatch);\n\n  const isCurrentStep = state.tours[tourName].currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !state.tours[tourName].isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  // Lock the scroll\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = 'hidden';\n\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, [isPopoverOpen]);\n\n  const Step = React.useMemo(() => createStepComponents(tourName), [tourName]);\n\n  const hasApiSchema =\n    Object.keys(guidedTourMeta?.data?.schemas ?? {}).filter((key) => key.startsWith('api::'))\n      .length > 0;\n\n  React.useEffect(() => {\n    if (hasApiSchema) {\n      /**\n       * Fallback sync:\n       *\n       * When the user already has a schema (ie started project from template with seeded data),\n       * allow them to proceed to the content manager tour.\n       *\n       * When the CTB fails to restart after saving a schema (as it often does)\n       */\n      dispatch({\n        type: 'set_completed_actions',\n        payload: [GUIDED_TOUR_REQUIRED_ACTIONS.contentTypeBuilder.createSchema],\n      });\n    }\n  }, [dispatch, hasApiSchema, step, tourName]);\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor>{children}</Popover.Anchor>\n        {content({ Step, state, dispatch })}\n      </Popover.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tour factory\n * -----------------------------------------------------------------------------------------------*/\n\nexport type TourStep<P extends string> = {\n  name: P;\n  content: Content;\n  when?: (completedActions: CompletedActions) => boolean;\n  excludeFromStepCount?: boolean;\n};\n\nexport function createTour<const T extends ReadonlyArray<TourStep<string>>>(\n  tourName: string,\n  steps: T\n) {\n  type Components = {\n    [K in T[number]['name']]: React.ComponentType<{ children: React.ReactNode }>;\n  };\n\n  const tour = steps.reduce(\n    (acc, step, index) => {\n      const name = step.name as keyof Components;\n\n      if (name in acc) {\n        throw Error(`The tour: ${tourName} with step: ${step.name} has already been registered`);\n      }\n\n      (acc as Components)[name] = ({ children }: { children: React.ReactNode }) => {\n        return (\n          <GuidedTourTooltip\n            tourName={tourName as ValidTourName}\n            step={index}\n            content={step.content}\n            when={step.when}\n          >\n            {children}\n          </GuidedTourTooltip>\n        );\n      };\n\n      if (step.excludeFromStepCount) {\n        // Subtract all steps registered to be excluded from the step count\n        acc._meta.displayedStepCount--;\n      }\n\n      return acc;\n    },\n    { _meta: { totalStepCount: steps.length, displayedStepCount: steps.length } } as Components & {\n      _meta: { totalStepCount: number; displayedStepCount: number };\n    }\n  );\n\n  return tour;\n}\n\nexport type { Content, Tours };\nexport { tours };\n"],"names":["tours","contentTypeBuilder","createTour","contentTypeBuilderSteps","contentManager","contentManagerSteps","apiTokens","apiTokensSteps","strapiCloud","GuidedTourTooltip","children","props","state","useGuidedTour","s","enabled","hidden","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","React","useEffect","originalStyle","window","getComputedStyle","document","body","overflow","style","Step","useMemo","createStepComponents","hasApiSchema","Object","keys","schemas","filter","key","startsWith","length","type","payload","GUIDED_TOUR_REQUIRED_ACTIONS","createSchema","_jsxs","_Fragment","Portal","Popover","Root","open","Anchor","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":";;;;;;;;;;;;AAcA;;AAEkG,2GAE5FA,KAAQ,GAAA;AACZC,IAAAA,kBAAAA,EAAoBC,WAAW,oBAAsBC,EAAAA,uBAAAA,CAAAA;AACrDC,IAAAA,cAAAA,EAAgBF,WAAW,gBAAkBG,EAAAA,mBAAAA,CAAAA;AAC7CC,IAAAA,SAAAA,EAAWJ,WAAW,WAAaK,EAAAA,cAAAA,CAAAA;IACnCC,WAAaN,EAAAA,UAAAA,CAAW,eAAe,EAAE;AAC3C;AAuBA,MAAMO,oBAAoB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAA+B,EAAA,GAAA;AACvE,IAAA,MAAMC,QAAQC,aAAc,CAAA,gBAAA,EAAkB,CAACC,CAAAA,GAAMA,EAAEF,KAAK,CAAA;AAE5D,IAAA,IAAI,CAACA,KAAMG,CAAAA,OAAO,IAAIH,KAAAA,CAAMI,MAAM,EAAE;QAClC,OAAON,QAAAA;AACT;AAEA,IAAA,qBAAOO,GAACC,CAAAA,qBAAAA,EAAAA;AAAuB,QAAA,GAAGP,KAAK;AAAGD,QAAAA,QAAAA,EAAAA;;AAC5C,CAAA;AAEA,MAAMS,iBAAAA,GAAoBC,MAAOC,CAAAA,GAAAA,CAAI;;;;;;;;AAQrC,CAAC;AAED,MAAMH,qBAAwB,GAAA,CAAC,EAC7BR,QAAQ,EACRY,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,IAAI,EACmB,GAAA;AACvB,IAAA,MAAM,EAAEC,IAAAA,EAAMC,cAAc,EAAE,GAAGC,yBAAAA,EAAAA;AACjC,IAAA,MAAMhB,QAAQC,aAAc,CAAA,mBAAA,EAAqB,CAACC,CAAAA,GAAMA,EAAEF,KAAK,CAAA;AAC/D,IAAA,MAAMiB,WAAWhB,aAAc,CAAA,mBAAA,EAAqB,CAACC,CAAAA,GAAMA,EAAEe,QAAQ,CAAA;AAErE,IAAA,MAAMC,gBAAgBlB,KAAMZ,CAAAA,KAAK,CAACuB,QAAS,CAAA,CAACQ,WAAW,KAAKP,IAAAA;AAC5D,IAAA,MAAMQ,kBAAqBP,GAAAA,IAAAA,GAAOA,IAAKb,CAAAA,KAAAA,CAAMqB,gBAAgB,CAAI,GAAA,IAAA;AACjE,IAAA,MAAMC,aACJP,GAAAA,cAAAA,EAAgBD,IAAMS,EAAAA,qBAAAA,IACtB,CAACvB,KAAAA,CAAMZ,KAAK,CAACuB,QAAS,CAAA,CAACa,WAAW,IAClCN,aACAE,IAAAA,kBAAAA;;AAGFK,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACJ,aAAe,EAAA;AAEpB,QAAA,MAAMK,gBAAgBC,MAAOC,CAAAA,gBAAgB,CAACC,QAASC,CAAAA,IAAI,EAAEC,QAAQ;AACrEF,QAAAA,QAAAA,CAASC,IAAI,CAACE,KAAK,CAACD,QAAQ,GAAG,QAAA;QAE/B,OAAO,IAAA;AACLF,YAAAA,QAAAA,CAASC,IAAI,CAACE,KAAK,CAACD,QAAQ,GAAGL,aAAAA;AACjC,SAAA;KACC,EAAA;AAACL,QAAAA;AAAc,KAAA,CAAA;AAElB,IAAA,MAAMY,OAAOT,KAAMU,CAAAA,OAAO,CAAC,IAAMC,qBAAqBzB,QAAW,CAAA,EAAA;AAACA,QAAAA;AAAS,KAAA,CAAA;AAE3E,IAAA,MAAM0B,eACJC,MAAOC,CAAAA,IAAI,CAACxB,cAAgBD,EAAAA,IAAAA,EAAM0B,WAAW,EAAC,CAAA,CAAGC,MAAM,CAAC,CAACC,GAAQA,GAAAA,GAAAA,CAAIC,UAAU,CAAC,OAAA,CAAA,CAAA,CAC7EC,MAAM,GAAG,CAAA;AAEdnB,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;AACd,QAAA,IAAIW,YAAc,EAAA;AAChB;;;;;;;AAOC,UACDpB,QAAS,CAAA;gBACP4B,IAAM,EAAA,uBAAA;gBACNC,OAAS,EAAA;oBAACC,4BAA6B1D,CAAAA,kBAAkB,CAAC2D;AAAa;AACzE,aAAA,CAAA;AACF;KACC,EAAA;AAAC/B,QAAAA,QAAAA;AAAUoB,QAAAA,YAAAA;AAAczB,QAAAA,IAAAA;AAAMD,QAAAA;AAAS,KAAA,CAAA;IAE3C,qBACEsC,IAAA,CAAAC,QAAA,EAAA;;AACG5B,YAAAA,aAAAA,kBACCjB,GAAC8C,CAAAA,MAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAA9C,GAACE,CAAAA,iBAAAA,EAAAA,EAAAA;;AAGL,0BAAA0C,IAAA,CAACG,QAAQC,IAAI,EAAA;gBAACC,IAAMhC,EAAAA,aAAAA;;AAClB,kCAAAjB,GAAA,CAAC+C,QAAQG,MAAM,EAAA;AAAEzD,wBAAAA,QAAAA,EAAAA;;oBAChBY,OAAQ,CAAA;AAAEwB,wBAAAA,IAAAA;AAAMlC,wBAAAA,KAAAA;AAAOiB,wBAAAA;AAAS,qBAAA;;;;;AAIzC,CAAA;AAaO,SAAS3B,UAAAA,CACdqB,QAAgB,EAChB6C,KAAQ,EAAA;AAMR,IAAA,MAAMC,OAAOD,KAAME,CAAAA,MAAM,CACvB,CAACC,KAAK/C,IAAMgD,EAAAA,KAAAA,GAAAA;QACV,MAAMC,IAAAA,GAAOjD,KAAKiD,IAAI;AAEtB,QAAA,IAAIA,QAAQF,GAAK,EAAA;YACf,MAAMG,KAAAA,CAAM,CAAC,UAAU,EAAEnD,QAAAA,CAAS,YAAY,EAAEC,IAAKiD,CAAAA,IAAI,CAAC,4BAA4B,CAAC,CAAA;AACzF;AAECF,QAAAA,GAAkB,CAACE,IAAK,CAAA,GAAG,CAAC,EAAE/D,QAAQ,EAAiC,GAAA;AACtE,YAAA,qBACEO,GAACR,CAAAA,iBAAAA,EAAAA;gBACCc,QAAUA,EAAAA,QAAAA;gBACVC,IAAMgD,EAAAA,KAAAA;AACNlD,gBAAAA,OAAAA,EAASE,KAAKF,OAAO;AACrBG,gBAAAA,IAAAA,EAAMD,KAAKC,IAAI;AAEdf,gBAAAA,QAAAA,EAAAA;;AAGP,SAAA;QAEA,IAAIc,IAAAA,CAAKmD,oBAAoB,EAAE;;YAE7BJ,GAAIK,CAAAA,KAAK,CAACC,kBAAkB,EAAA;AAC9B;QAEA,OAAON,GAAAA;KAET,EAAA;QAAEK,KAAO,EAAA;AAAEE,YAAAA,cAAAA,EAAgBV,MAAMZ,MAAM;AAAEqB,YAAAA,kBAAAA,EAAoBT,MAAMZ;AAAO;AAAE,KAAA,CAAA;IAK9E,OAAOa,IAAAA;AACT;;;;"}

package/dist/admin/admin/src/components/GuidedTour/utils/migrations.js

@@ -14,7 +14,8 @@ var Tours = require('../Tours.js');
             if (!storedTourNames.includes(tourName)) {
                 draft.tours[tourName] = {
                     currentStep: 0,
-                    isCompleted: false
+                    isCompleted: false,
+                    tourType: undefined
                 };
             }
         });

package/dist/admin/admin/src/components/GuidedTour/utils/migrations.js.map

@@ -1 +1 @@
-{"version":3,"file":"migrations.js","sources":["../../../../../../../admin/src/components/GuidedTour/utils/migrations.ts"],"sourcesContent":["import { produce } from 'immer';\n\nimport { tours } from '../Tours';\n\nimport type { State, ValidTourName } from '../Context';\n\n/**\n * Migrates tours added or removed from the tours object\n */\nconst migrateTours = (storedTourState: State) => {\n  const storedTourNames = Object.keys(storedTourState.tours) as ValidTourName[];\n  const currentTourNames = Object.keys(tours) as ValidTourName[];\n\n  return produce(storedTourState, (draft) => {\n    // Add new tours that don't exist in stored state\n    currentTourNames.forEach((tourName) => {\n      if (!storedTourNames.includes(tourName)) {\n        draft.tours[tourName] = {\n          currentStep: 0,\n          isCompleted: false,\n        };\n      }\n    });\n\n    // Remove tours that no longer exist in current tours\n    storedTourNames.forEach((tourName) => {\n      if (!currentTourNames.includes(tourName)) {\n        delete draft.tours[tourName];\n      }\n    });\n  });\n};\n\nexport { migrateTours };\n"],"names":["migrateTours","storedTourState","storedTourNames","Object","keys","tours","currentTourNames","produce","draft","forEach","tourName","includes","currentStep","isCompleted"],"mappings":";;;;;AAMA;;IAGA,MAAMA,eAAe,CAACC,eAAAA,GAAAA;AACpB,IAAA,MAAMC,eAAkBC,GAAAA,MAAAA,CAAOC,IAAI,CAACH,gBAAgBI,KAAK,CAAA;IACzD,MAAMC,gBAAAA,GAAmBH,MAAOC,CAAAA,IAAI,CAACC,WAAAA,CAAAA;IAErC,OAAOE,aAAAA,CAAQN,iBAAiB,CAACO,KAAAA,GAAAA;;QAE/BF,gBAAiBG,CAAAA,OAAO,CAAC,CAACC,QAAAA,GAAAA;AACxB,YAAA,IAAI,CAACR,eAAAA,CAAgBS,QAAQ,CAACD,QAAW,CAAA,EAAA;gBACvCF,KAAMH,CAAAA,KAAK,CAACK,QAAAA,CAAS,GAAG;oBACtBE,WAAa,EAAA,CAAA;oBACbC,WAAa,EAAA;AACf,iBAAA;AACF;AACF,SAAA,CAAA;;QAGAX,eAAgBO,CAAAA,OAAO,CAAC,CAACC,QAAAA,GAAAA;AACvB,YAAA,IAAI,CAACJ,gBAAAA,CAAiBK,QAAQ,CAACD,QAAW,CAAA,EAAA;gBACxC,OAAOF,KAAAA,CAAMH,KAAK,CAACK,QAAS,CAAA;AAC9B;AACF,SAAA,CAAA;AACF,KAAA,CAAA;AACF;;;;"}
+{"version":3,"file":"migrations.js","sources":["../../../../../../../admin/src/components/GuidedTour/utils/migrations.ts"],"sourcesContent":["import { produce } from 'immer';\n\nimport { tours } from '../Tours';\n\nimport type { State, ValidTourName } from '../Context';\n\n/**\n * Migrates tours added or removed from the tours object\n */\nconst migrateTours = (storedTourState: State) => {\n  const storedTourNames = Object.keys(storedTourState.tours) as ValidTourName[];\n  const currentTourNames = Object.keys(tours) as ValidTourName[];\n\n  return produce(storedTourState, (draft) => {\n    // Add new tours that don't exist in stored state\n    currentTourNames.forEach((tourName) => {\n      if (!storedTourNames.includes(tourName)) {\n        draft.tours[tourName] = {\n          currentStep: 0,\n          isCompleted: false,\n          tourType: undefined,\n        };\n      }\n    });\n\n    // Remove tours that no longer exist in current tours\n    storedTourNames.forEach((tourName) => {\n      if (!currentTourNames.includes(tourName)) {\n        delete draft.tours[tourName];\n      }\n    });\n  });\n};\n\nexport { migrateTours };\n"],"names":["migrateTours","storedTourState","storedTourNames","Object","keys","tours","currentTourNames","produce","draft","forEach","tourName","includes","currentStep","isCompleted","tourType","undefined"],"mappings":";;;;;AAMA;;IAGA,MAAMA,eAAe,CAACC,eAAAA,GAAAA;AACpB,IAAA,MAAMC,eAAkBC,GAAAA,MAAAA,CAAOC,IAAI,CAACH,gBAAgBI,KAAK,CAAA;IACzD,MAAMC,gBAAAA,GAAmBH,MAAOC,CAAAA,IAAI,CAACC,WAAAA,CAAAA;IAErC,OAAOE,aAAAA,CAAQN,iBAAiB,CAACO,KAAAA,GAAAA;;QAE/BF,gBAAiBG,CAAAA,OAAO,CAAC,CAACC,QAAAA,GAAAA;AACxB,YAAA,IAAI,CAACR,eAAAA,CAAgBS,QAAQ,CAACD,QAAW,CAAA,EAAA;gBACvCF,KAAMH,CAAAA,KAAK,CAACK,QAAAA,CAAS,GAAG;oBACtBE,WAAa,EAAA,CAAA;oBACbC,WAAa,EAAA,KAAA;oBACbC,QAAUC,EAAAA;AACZ,iBAAA;AACF;AACF,SAAA,CAAA;;QAGAb,eAAgBO,CAAAA,OAAO,CAAC,CAACC,QAAAA,GAAAA;AACvB,YAAA,IAAI,CAACJ,gBAAAA,CAAiBK,QAAQ,CAACD,QAAW,CAAA,EAAA;gBACxC,OAAOF,KAAAA,CAAMH,KAAK,CAACK,QAAS,CAAA;AAC9B;AACF,SAAA,CAAA;AACF,KAAA,CAAA;AACF;;;;"}

package/dist/admin/admin/src/components/GuidedTour/utils/migrations.mjs

@@ -12,7 +12,8 @@ import { tours } from '../Tours.mjs';
             if (!storedTourNames.includes(tourName)) {
                 draft.tours[tourName] = {
                     currentStep: 0,
-                    isCompleted: false
+                    isCompleted: false,
+                    tourType: undefined
                 };
             }
         });

package/dist/admin/admin/src/components/GuidedTour/utils/migrations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"migrations.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/utils/migrations.ts"],"sourcesContent":["import { produce } from 'immer';\n\nimport { tours } from '../Tours';\n\nimport type { State, ValidTourName } from '../Context';\n\n/**\n * Migrates tours added or removed from the tours object\n */\nconst migrateTours = (storedTourState: State) => {\n  const storedTourNames = Object.keys(storedTourState.tours) as ValidTourName[];\n  const currentTourNames = Object.keys(tours) as ValidTourName[];\n\n  return produce(storedTourState, (draft) => {\n    // Add new tours that don't exist in stored state\n    currentTourNames.forEach((tourName) => {\n      if (!storedTourNames.includes(tourName)) {\n        draft.tours[tourName] = {\n          currentStep: 0,\n          isCompleted: false,\n        };\n      }\n    });\n\n    // Remove tours that no longer exist in current tours\n    storedTourNames.forEach((tourName) => {\n      if (!currentTourNames.includes(tourName)) {\n        delete draft.tours[tourName];\n      }\n    });\n  });\n};\n\nexport { migrateTours };\n"],"names":["migrateTours","storedTourState","storedTourNames","Object","keys","tours","currentTourNames","produce","draft","forEach","tourName","includes","currentStep","isCompleted"],"mappings":";;;AAMA;;IAGA,MAAMA,eAAe,CAACC,eAAAA,GAAAA;AACpB,IAAA,MAAMC,eAAkBC,GAAAA,MAAAA,CAAOC,IAAI,CAACH,gBAAgBI,KAAK,CAAA;IACzD,MAAMC,gBAAAA,GAAmBH,MAAOC,CAAAA,IAAI,CAACC,KAAAA,CAAAA;IAErC,OAAOE,OAAAA,CAAQN,iBAAiB,CAACO,KAAAA,GAAAA;;QAE/BF,gBAAiBG,CAAAA,OAAO,CAAC,CAACC,QAAAA,GAAAA;AACxB,YAAA,IAAI,CAACR,eAAAA,CAAgBS,QAAQ,CAACD,QAAW,CAAA,EAAA;gBACvCF,KAAMH,CAAAA,KAAK,CAACK,QAAAA,CAAS,GAAG;oBACtBE,WAAa,EAAA,CAAA;oBACbC,WAAa,EAAA;AACf,iBAAA;AACF;AACF,SAAA,CAAA;;QAGAX,eAAgBO,CAAAA,OAAO,CAAC,CAACC,QAAAA,GAAAA;AACvB,YAAA,IAAI,CAACJ,gBAAAA,CAAiBK,QAAQ,CAACD,QAAW,CAAA,EAAA;gBACxC,OAAOF,KAAAA,CAAMH,KAAK,CAACK,QAAS,CAAA;AAC9B;AACF,SAAA,CAAA;AACF,KAAA,CAAA;AACF;;;;"}
+{"version":3,"file":"migrations.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/utils/migrations.ts"],"sourcesContent":["import { produce } from 'immer';\n\nimport { tours } from '../Tours';\n\nimport type { State, ValidTourName } from '../Context';\n\n/**\n * Migrates tours added or removed from the tours object\n */\nconst migrateTours = (storedTourState: State) => {\n  const storedTourNames = Object.keys(storedTourState.tours) as ValidTourName[];\n  const currentTourNames = Object.keys(tours) as ValidTourName[];\n\n  return produce(storedTourState, (draft) => {\n    // Add new tours that don't exist in stored state\n    currentTourNames.forEach((tourName) => {\n      if (!storedTourNames.includes(tourName)) {\n        draft.tours[tourName] = {\n          currentStep: 0,\n          isCompleted: false,\n          tourType: undefined,\n        };\n      }\n    });\n\n    // Remove tours that no longer exist in current tours\n    storedTourNames.forEach((tourName) => {\n      if (!currentTourNames.includes(tourName)) {\n        delete draft.tours[tourName];\n      }\n    });\n  });\n};\n\nexport { migrateTours };\n"],"names":["migrateTours","storedTourState","storedTourNames","Object","keys","tours","currentTourNames","produce","draft","forEach","tourName","includes","currentStep","isCompleted","tourType","undefined"],"mappings":";;;AAMA;;IAGA,MAAMA,eAAe,CAACC,eAAAA,GAAAA;AACpB,IAAA,MAAMC,eAAkBC,GAAAA,MAAAA,CAAOC,IAAI,CAACH,gBAAgBI,KAAK,CAAA;IACzD,MAAMC,gBAAAA,GAAmBH,MAAOC,CAAAA,IAAI,CAACC,KAAAA,CAAAA;IAErC,OAAOE,OAAAA,CAAQN,iBAAiB,CAACO,KAAAA,GAAAA;;QAE/BF,gBAAiBG,CAAAA,OAAO,CAAC,CAACC,QAAAA,GAAAA;AACxB,YAAA,IAAI,CAACR,eAAAA,CAAgBS,QAAQ,CAACD,QAAW,CAAA,EAAA;gBACvCF,KAAMH,CAAAA,KAAK,CAACK,QAAAA,CAAS,GAAG;oBACtBE,WAAa,EAAA,CAAA;oBACbC,WAAa,EAAA,KAAA;oBACbC,QAAUC,EAAAA;AACZ,iBAAA;AACF;AACF,SAAA,CAAA;;QAGAb,eAAgBO,CAAAA,OAAO,CAAC,CAACC,QAAAA,GAAAA;AACvB,YAAA,IAAI,CAACJ,gBAAAA,CAAiBK,QAAQ,CAACD,QAAW,CAAA,EAAA;gBACxC,OAAOF,KAAAA,CAAMH,KAAK,CAACK,QAAS,CAAA;AAC9B;AACF,SAAA,CAAA;AACF,KAAA,CAAA;AACF;;;;"}

package/dist/admin/admin/src/components/Layouts/ActionLayout.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
+var theme = require('../../constants/theme.js');
 
 const ActionLayout = ({ startActions, endActions })=>{
     if (!startActions && !endActions) {
@@ -12,8 +13,8 @@ const ActionLayout = ({ startActions, endActions })=>{
         justifyContent: "space-between",
         alignItems: "flex-start",
         paddingBottom: 4,
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                 gap: 2,

package/dist/admin/admin/src/components/Layouts/ActionLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionLayout.js","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={10}\n      paddingRight={10}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;;AASA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAa,EAAA,EAAA;QACbC,YAAc,EAAA,EAAA;;0BAEdC,cAACN,CAAAA,iBAAAA,EAAAA;gBAAKO,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBX,gBAAAA,QAAAA,EAAAA;;0BAGHS,cAACN,CAAAA,iBAAAA,EAAAA;gBAAKO,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BV,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}
+{"version":3,"file":"ActionLayout.js","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAaC,EAAAA,gCAAAA;QACbC,YAAcD,EAAAA,gCAAAA;;0BAEdE,cAACP,CAAAA,iBAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBZ,gBAAAA,QAAAA,EAAAA;;0BAGHU,cAACP,CAAAA,iBAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BX,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}

package/dist/admin/admin/src/components/Layouts/ActionLayout.mjs

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { Flex } from '@strapi/design-system';
+import { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 
 const ActionLayout = ({ startActions, endActions })=>{
     if (!startActions && !endActions) {
@@ -10,8 +11,8 @@ const ActionLayout = ({ startActions, endActions })=>{
         justifyContent: "space-between",
         alignItems: "flex-start",
         paddingBottom: 4,
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: RESPONSIVE_DEFAULT_SPACING,
         children: [
             /*#__PURE__*/ jsx(Flex, {
                 gap: 2,

package/dist/admin/admin/src/components/Layouts/ActionLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={10}\n      paddingRight={10}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;AASA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAa,EAAA,EAAA;QACbC,YAAc,EAAA,EAAA;;0BAEdC,GAACN,CAAAA,IAAAA,EAAAA;gBAAKO,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBX,gBAAAA,QAAAA,EAAAA;;0BAGHS,GAACN,CAAAA,IAAAA,EAAAA;gBAAKO,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BV,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}
+{"version":3,"file":"ActionLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ActionLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      justifyContent=\"space-between\"\n      alignItems=\"flex-start\"\n      paddingBottom={4}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n    >\n      <Flex gap={2} wrap=\"wrap\">\n        {startActions}\n      </Flex>\n\n      <Flex gap={2} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["ActionLayout","startActions","endActions","_jsxs","Flex","justifyContent","alignItems","paddingBottom","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsx","gap","wrap","shrink"],"mappings":";;;;;AAWA,MAAMA,eAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAqB,GAAA;IACnE,IAAI,CAACD,YAAgB,IAAA,CAACC,UAAY,EAAA;QAChC,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QACCC,cAAe,EAAA,eAAA;QACfC,UAAW,EAAA,YAAA;QACXC,aAAe,EAAA,CAAA;QACfC,WAAaC,EAAAA,0BAAAA;QACbC,YAAcD,EAAAA,0BAAAA;;0BAEdE,GAACP,CAAAA,IAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGC,IAAK,EAAA,MAAA;AAChBZ,gBAAAA,QAAAA,EAAAA;;0BAGHU,GAACP,CAAAA,IAAAA,EAAAA;gBAAKQ,GAAK,EAAA,CAAA;gBAAGE,MAAQ,EAAA,CAAA;gBAAGD,IAAK,EAAA,MAAA;AAC3BX,gBAAAA,QAAAA,EAAAA;;;;AAIT;;;;"}

package/dist/admin/admin/src/components/Layouts/ContentLayout.js

@@ -3,11 +3,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
+var theme = require('../../constants/theme.js');
 
 const ContentLayout = ({ children })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
         children: children
     });
 };

package/dist/admin/admin/src/components/Layouts/ContentLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.js","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={10} paddingRight={10}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","paddingRight"],"mappings":";;;;;;AAQA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,WAAa,EAAA,EAAA;QAAIC,YAAc,EAAA,EAAA;AACjCJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"ContentLayout.js","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={RESPONSIVE_DEFAULT_SPACING} paddingRight={RESPONSIVE_DEFAULT_SPACING}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight"],"mappings":";;;;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,WAAaC,EAAAA,gCAAAA;QAA4BC,YAAcD,EAAAA,gCAAAA;AACzDJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/Layouts/ContentLayout.mjs

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { Box } from '@strapi/design-system';
+import { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme.mjs';
 
 const ContentLayout = ({ children })=>{
     return /*#__PURE__*/ jsx(Box, {
-        paddingLeft: 10,
-        paddingRight: 10,
+        paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: RESPONSIVE_DEFAULT_SPACING,
         children: children
     });
 };

package/dist/admin/admin/src/components/Layouts/ContentLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={10} paddingRight={10}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","paddingRight"],"mappings":";;;;AAQA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,WAAa,EAAA,EAAA;QAAIC,YAAc,EAAA,EAAA;AACjCJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"ContentLayout.mjs","sources":["../../../../../../admin/src/components/Layouts/ContentLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\ninterface ContentLayoutProps {\n  children: React.ReactNode;\n}\n\nconst ContentLayout = ({ children }: ContentLayoutProps) => {\n  return (\n    <Box paddingLeft={RESPONSIVE_DEFAULT_SPACING} paddingRight={RESPONSIVE_DEFAULT_SPACING}>\n      {children}\n    </Box>\n  );\n};\n\nexport { ContentLayout, type ContentLayoutProps };\n"],"names":["ContentLayout","children","_jsx","Box","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight"],"mappings":";;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,QAAQ,EAAsB,GAAA;AACrD,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,WAAaC,EAAAA,0BAAAA;QAA4BC,YAAcD,EAAAA,0BAAAA;AACzDJ,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/Layouts/HeaderLayout.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
+var theme = require('../../constants/theme.js');
 var useElementOnScreen = require('../../hooks/useElementOnScreen.js');
 
 function _interopNamespaceDefault(e) {
@@ -28,20 +29,27 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
     const isSubtitleString = typeof subtitle === 'string';
     if (sticky) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            display: {
+                initial: 'none',
+                large: 'flex'
+            },
             paddingLeft: 6,
             paddingRight: 6,
-            paddingTop: 3,
-            paddingBottom: 3,
+            paddingTop: 2,
+            paddingBottom: 2,
             position: "fixed",
             top: 0,
-            right: 0,
             background: "neutral0",
             shadow: "tableShadow",
             width: `${width}px`,
-            zIndex: 3,
+            zIndex: 2,
+            minHeight: theme.HEIGHT_TOP_NAVIGATION,
             "data-strapi-header-sticky": true,
             children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                alignItems: "center",
                 justifyContent: "space-between",
+                wrap: "wrap",
+                width: "100%",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                         children: [
@@ -82,42 +90,58 @@ const BaseHeaderLayout = /*#__PURE__*/ React__namespace.forwardRef(({ navigation
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
         ref: ref,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingBottom: 8,
-        paddingTop: navigationAction ? 6 : 8,
+        paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
+        paddingBottom: {
+            initial: 4,
+            large: 8
+        },
+        paddingTop: {
+            initial: 4,
+            large: navigationAction ? 6 : 8
+        },
         background: "neutral100",
         "data-strapi-header": true,
         children: [
-            navigationAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                paddingBottom: 2,
-                children: navigationAction
-            }) : null,
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                justifyContent: "space-between",
+                direction: "column",
+                alignItems: "initial",
+                gap: 2,
                 children: [
+                    navigationAction,
                     /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                        minWidth: 0,
+                        justifyContent: "space-between",
+                        wrap: "wrap",
+                        gap: 4,
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                tag: "h1",
-                                variant: "alpha",
-                                ...props,
-                                children: title
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                minWidth: 0,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        tag: "h1",
+                                        variant: "alpha",
+                                        ...props,
+                                        children: title
+                                    }),
+                                    secondaryAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        paddingLeft: 4,
+                                        children: secondaryAction
+                                    }) : null
+                                ]
                             }),
-                            secondaryAction ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                paddingLeft: 4,
-                                children: secondaryAction
-                            }) : null
+                            primaryAction
                         ]
-                    }),
-                    primaryAction
+                    })
                 ]
             }),
             isSubtitleString ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                 variant: "epsilon",
                 textColor: "neutral600",
                 tag: "p",
+                paddingTop: {
+                    initial: 4,
+                    large: 0
+                },
                 children: subtitle
             }) : subtitle
         ]
@@ -132,25 +156,34 @@ const HeaderLayout = (props)=>{
         rootMargin: '0px',
         threshold: 0
     });
-    useResizeObserver(containerRef, ()=>{
+    useResizeObserver([
+        containerRef
+    ], ()=>{
         if (containerRef.current) {
-            setHeaderSize(containerRef.current.getBoundingClientRect());
+            const newSize = containerRef.current.getBoundingClientRect();
+            setHeaderSize((prevSize)=>{
+                // Only update if size actually changed
+                if (!prevSize || prevSize.height !== newSize.height || prevSize.width !== newSize.width) {
+                    return newSize;
+                }
+                return prevSize;
+            });
         }
     });
     React__namespace.useEffect(()=>{
-        if (baseHeaderLayoutRef.current) {
-            setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+        if (containerRef.current) {
+            setHeaderSize(containerRef.current.getBoundingClientRect());
         }
     }, [
-        baseHeaderLayoutRef
+        containerRef
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ref: containerRef,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: {
                     height: headerSize?.height
                 },
-                ref: containerRef,
                 children: isVisible && /*#__PURE__*/ jsxRuntime.jsx(BaseHeaderLayout, {
                     ref: baseHeaderLayoutRef,
                     ...props