@strapi/admin 5.49.0 → 5.50.1

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, 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\n  // Safety check: if tours state is missing, return null\n  if (!state.tours || !state.tours[tourName]) {\n    return null;\n  }\n\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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"}
+{"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\n  // Safety check: if tours state is missing, return null\n  if (!state.tours || !state.tours[tourName]) {\n    return null;\n  }\n\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

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var admin = require('../../services/admin.js');
 var Context = require('./Context.js');
 var ApiTokensSteps = require('./Steps/ApiTokensSteps.js');
@@ -50,7 +50,7 @@ const GuidedTourTooltip = ({ children, ...props })=>{
         children: children
     });
 };
-const GuidedTourOverlay = styled.styled(designSystem.Box)`
+const GuidedTourOverlay = styledComponents.styled(designSystem.Box)`
   position: fixed;
   top: 0;
   left: 0;

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, setOpacity } 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 || process.env.NODE_ENV !== 'development') {\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: ${({ theme }) => setOpacity(theme.colors.neutral800, 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 tourState = state.tours?.[tourName];\n  const isCurrentStep = tourState?.currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !tourState?.isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  const anchorRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    anchorRef.current?.scrollIntoView({ behavior: 'instant', block: 'center' });\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  // Safety check: if tours state is corrupted or missing, render without tooltip (after all hooks)\n  if (!state.tours || !state.tours[tourName]) {\n    return <>{children}</>;\n  }\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor ref={anchorRef}>{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","process","env","NODE_ENV","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","theme","setOpacity","colors","neutral800","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","tourState","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","anchorRef","React","useRef","useEffect","current","scrollIntoView","behavior","block","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","_Fragment","_jsxs","Portal","Popover","Root","open","Anchor","ref","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, setOpacity } 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 || process.env.NODE_ENV !== 'development') {\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: ${({ theme }) => setOpacity(theme.colors.neutral800, 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 tourState = state.tours?.[tourName];\n  const isCurrentStep = tourState?.currentStep === step;\n  const isStepConditionMet = when ? when(state.completedActions) : true;\n  const isPopoverOpen =\n    guidedTourMeta?.data?.isFirstSuperAdminUser &&\n    !tourState?.isCompleted &&\n    isCurrentStep &&\n    isStepConditionMet;\n\n  const anchorRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!isPopoverOpen) return;\n\n    anchorRef.current?.scrollIntoView({ behavior: 'instant', block: 'center' });\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  // Safety check: if tours state is corrupted or missing, render without tooltip (after all hooks)\n  if (!state.tours || !state.tours[tourName]) {\n    return <>{children}</>;\n  }\n\n  return (\n    <>\n      {isPopoverOpen && (\n        <Portal>\n          <GuidedTourOverlay />\n        </Portal>\n      )}\n      <Popover.Root open={isPopoverOpen}>\n        <Popover.Anchor ref={anchorRef}>{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","process","env","NODE_ENV","_jsx","GuidedTourTooltipImpl","GuidedTourOverlay","styled","Box","theme","setOpacity","colors","neutral800","content","tourName","step","when","data","guidedTourMeta","useGetGuidedTourMetaQuery","dispatch","tourState","isCurrentStep","currentStep","isStepConditionMet","completedActions","isPopoverOpen","isFirstSuperAdminUser","isCompleted","anchorRef","React","useRef","useEffect","current","scrollIntoView","behavior","block","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","_Fragment","_jsxs","Portal","Popover","Root","open","Anchor","ref","steps","tour","reduce","acc","index","name","Error","excludeFromStepCount","_meta","displayedStepCount","totalStepCount"],"mappings":"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"}

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

@@ -3,10 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../../constants/theme.js');
 
-/** On mobile: first item stays left, rest stick to the right (margin-right: auto on first child). */ const EndActionsFlex = styled.styled(designSystem.Flex)`
+/** On mobile: first item stays left, rest stick to the right (margin-right: auto on first child). */ const EndActionsFlex = styledComponents.styled(designSystem.Flex)`
   width: 100%;
   & > *:first-child {
     margin-right: auto;

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';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\n/** On mobile: first item stays left, rest stick to the right (margin-right: auto on first child). */\nconst EndActionsFlex = styled(Flex)`\n  width: 100%;\n  & > *:first-child {\n    margin-right: auto;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    width: auto;\n    & > *:first-child {\n      margin-right: 0;\n    }\n  }\n`;\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n  bottomActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions, bottomActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      direction={{ initial: 'column', medium: 'row' }}\n      gap={{ initial: 4, medium: 3 }}\n      alignItems=\"flex-start\"\n      paddingBottom={{ initial: 2, medium: 4 }}\n      paddingTop={0}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n      wrap={{ initial: 'nowrap', medium: 'wrap' }}\n    >\n      <Flex gap={2} wrap=\"wrap\" flex={1} width=\"100%\">\n        {startActions}\n      </Flex>\n      <EndActionsFlex gap={{ initial: 3, medium: 2 }} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </EndActionsFlex>\n      {bottomActions && (\n        <Flex gap={2} wrap=\"wrap\" width=\"100%\">\n          {bottomActions}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["EndActionsFlex","styled","Flex","theme","breakpoints","medium","ActionLayout","startActions","endActions","bottomActions","_jsxs","direction","initial","gap","alignItems","paddingBottom","paddingTop","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","wrap","_jsx","flex","width","shrink"],"mappings":";;;;;;;;AAOA,sGACA,MAAMA,cAAAA,GAAiBC,aAAAA,CAAOC,kBAAK;;;;;;EAMjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;;;AAM5C,CAAC;AAQD,MAAMC,YAAAA,GAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAEC,aAAa,EAAqB,GAAA;IAClF,IAAI,CAACF,YAAAA,IAAgB,CAACC,UAAAA,EAAY;QAChC,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEE,eAAA,CAACR,iBAAAA,EAAAA;QACCS,SAAAA,EAAW;YAAEC,OAAAA,EAAS,QAAA;YAAUP,MAAAA,EAAQ;AAAM,SAAA;QAC9CQ,GAAAA,EAAK;YAAED,OAAAA,EAAS,CAAA;YAAGP,MAAAA,EAAQ;AAAE,SAAA;QAC7BS,UAAAA,EAAW,YAAA;QACXC,aAAAA,EAAe;YAAEH,OAAAA,EAAS,CAAA;YAAGP,MAAAA,EAAQ;AAAE,SAAA;QACvCW,UAAAA,EAAY,CAAA;QACZC,WAAAA,EAAaC,gCAAAA;QACbC,YAAAA,EAAcD,gCAAAA;QACdE,IAAAA,EAAM;YAAER,OAAAA,EAAS,QAAA;YAAUP,MAAAA,EAAQ;AAAO,SAAA;;0BAE1CgB,cAAA,CAACnB,iBAAAA,EAAAA;gBAAKW,GAAAA,EAAK,CAAA;gBAAGO,IAAAA,EAAK,MAAA;gBAAOE,IAAAA,EAAM,CAAA;gBAAGC,KAAAA,EAAM,MAAA;AACtChB,gBAAAA,QAAAA,EAAAA;;0BAEHc,cAAA,CAACrB,cAAAA,EAAAA;gBAAea,GAAAA,EAAK;oBAAED,OAAAA,EAAS,CAAA;oBAAGP,MAAAA,EAAQ;AAAE,iBAAA;gBAAGmB,MAAAA,EAAQ,CAAA;gBAAGJ,IAAAA,EAAK,MAAA;AAC7DZ,gBAAAA,QAAAA,EAAAA;;AAEFC,YAAAA,aAAAA,kBACCY,cAAA,CAACnB,iBAAAA,EAAAA;gBAAKW,GAAAA,EAAK,CAAA;gBAAGO,IAAAA,EAAK,MAAA;gBAAOG,KAAAA,EAAM,MAAA;AAC7Bd,gBAAAA,QAAAA,EAAAA;;;;AAKX;;;;"}
+{"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';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\n/** On mobile: first item stays left, rest stick to the right (margin-right: auto on first child). */\nconst EndActionsFlex = styled(Flex)`\n  width: 100%;\n  & > *:first-child {\n    margin-right: auto;\n  }\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    width: auto;\n    & > *:first-child {\n      margin-right: 0;\n    }\n  }\n`;\n\ninterface ActionLayoutProps {\n  endActions?: React.ReactNode;\n  startActions?: React.ReactNode;\n  bottomActions?: React.ReactNode;\n}\n\nconst ActionLayout = ({ startActions, endActions, bottomActions }: ActionLayoutProps) => {\n  if (!startActions && !endActions) {\n    return null;\n  }\n\n  return (\n    <Flex\n      direction={{ initial: 'column', medium: 'row' }}\n      gap={{ initial: 4, medium: 3 }}\n      alignItems=\"flex-start\"\n      paddingBottom={{ initial: 2, medium: 4 }}\n      paddingTop={0}\n      paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n      paddingRight={RESPONSIVE_DEFAULT_SPACING}\n      wrap={{ initial: 'nowrap', medium: 'wrap' }}\n    >\n      <Flex gap={2} wrap=\"wrap\" flex={1} width=\"100%\">\n        {startActions}\n      </Flex>\n      <EndActionsFlex gap={{ initial: 3, medium: 2 }} shrink={0} wrap=\"wrap\">\n        {endActions}\n      </EndActionsFlex>\n      {bottomActions && (\n        <Flex gap={2} wrap=\"wrap\" width=\"100%\">\n          {bottomActions}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport { ActionLayout, type ActionLayoutProps };\n"],"names":["EndActionsFlex","styled","Flex","theme","breakpoints","medium","ActionLayout","startActions","endActions","bottomActions","_jsxs","direction","initial","gap","alignItems","paddingBottom","paddingTop","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","wrap","_jsx","flex","width","shrink"],"mappings":";;;;;;;;AAOA,sGACA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,kBAAK;;;;;;EAMjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;;;AAM5C,CAAC;AAQD,MAAMC,YAAAA,GAAe,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAEC,aAAa,EAAqB,GAAA;IAClF,IAAI,CAACF,YAAAA,IAAgB,CAACC,UAAAA,EAAY;QAChC,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEE,eAAA,CAACR,iBAAAA,EAAAA;QACCS,SAAAA,EAAW;YAAEC,OAAAA,EAAS,QAAA;YAAUP,MAAAA,EAAQ;AAAM,SAAA;QAC9CQ,GAAAA,EAAK;YAAED,OAAAA,EAAS,CAAA;YAAGP,MAAAA,EAAQ;AAAE,SAAA;QAC7BS,UAAAA,EAAW,YAAA;QACXC,aAAAA,EAAe;YAAEH,OAAAA,EAAS,CAAA;YAAGP,MAAAA,EAAQ;AAAE,SAAA;QACvCW,UAAAA,EAAY,CAAA;QACZC,WAAAA,EAAaC,gCAAAA;QACbC,YAAAA,EAAcD,gCAAAA;QACdE,IAAAA,EAAM;YAAER,OAAAA,EAAS,QAAA;YAAUP,MAAAA,EAAQ;AAAO,SAAA;;0BAE1CgB,cAAA,CAACnB,iBAAAA,EAAAA;gBAAKW,GAAAA,EAAK,CAAA;gBAAGO,IAAAA,EAAK,MAAA;gBAAOE,IAAAA,EAAM,CAAA;gBAAGC,KAAAA,EAAM,MAAA;AACtChB,gBAAAA,QAAAA,EAAAA;;0BAEHc,cAAA,CAACrB,cAAAA,EAAAA;gBAAea,GAAAA,EAAK;oBAAED,OAAAA,EAAS,CAAA;oBAAGP,MAAAA,EAAQ;AAAE,iBAAA;gBAAGmB,MAAAA,EAAQ,CAAA;gBAAGJ,IAAAA,EAAK,MAAA;AAC7DZ,gBAAAA,QAAAA,EAAAA;;AAEFC,YAAAA,aAAAA,kBACCY,cAAA,CAACnB,iBAAAA,EAAAA;gBAAKW,GAAAA,EAAK,CAAA;gBAAGO,IAAAA,EAAK,MAAA;gBAAOG,KAAAA,EAAM,MAAA;AAC7Bd,gBAAAA,QAAAA,EAAAA;;;;AAKX;;;;"}

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

@@ -3,13 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 
 const GridColSize = {
     S: 180,
     M: 250
 };
-const StyledGrid = styled.styled(designSystem.Box)`
+const StyledGrid = styledComponents.styled(designSystem.Box)`
   display: grid;
   grid-template-columns: repeat(
     auto-fit,

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","sources":["../../../../../../admin/src/components/Layouts/GridLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface GridColSize {\n  S: number;\n  M: number;\n}\n\nconst GridColSize = {\n  S: 180,\n  M: 250,\n};\n\ntype Size = keyof GridColSize;\n\nconst StyledGrid = styled(Box)<{ $size: Size }>`\n  display: grid;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(${({ $size }: { $size: Size }) => `${GridColSize[$size]}px`}, 1fr)\n  );\n  grid-gap: ${({ theme }) => theme.spaces[4]};\n`;\n\ninterface GridLayoutProps {\n  size: Size;\n  children: React.ReactNode;\n}\n\nconst GridLayout = ({ size, children }: GridLayoutProps) => {\n  return <StyledGrid $size={size}>{children}</StyledGrid>;\n};\n\nexport { GridLayout };\nexport type { GridLayoutProps, GridColSize };\n"],"names":["GridColSize","S","M","StyledGrid","styled","Box","$size","theme","spaces","GridLayout","size","children","_jsx"],"mappings":";;;;;;;AAUA,MAAMA,WAAAA,GAAc;IAClBC,CAAAA,EAAG,GAAA;IACHC,CAAAA,EAAG;AACL,CAAA;AAIA,MAAMC,UAAAA,GAAaC,aAAAA,CAAOC,gBAAAA,CAAqB;;;;AAIpC,WAAA,EAAE,CAAC,EAAEC,KAAK,EAAmB,GAAK,CAAA,EAAGN,WAAW,CAACM,KAAAA,CAAM,CAAC,EAAE,CAAC,CAAC;;YAE3D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7C,CAAC;AAOD,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;AACrD,IAAA,qBAAOC,cAAA,CAACT,UAAAA,EAAAA;QAAWG,KAAAA,EAAOI,IAAAA;AAAOC,QAAAA,QAAAA,EAAAA;;AACnC;;;;"}
+{"version":3,"file":"GridLayout.js","sources":["../../../../../../admin/src/components/Layouts/GridLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\ninterface GridColSize {\n  S: number;\n  M: number;\n}\n\nconst GridColSize = {\n  S: 180,\n  M: 250,\n};\n\ntype Size = keyof GridColSize;\n\nconst StyledGrid = styled(Box)<{ $size: Size }>`\n  display: grid;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(${({ $size }: { $size: Size }) => `${GridColSize[$size]}px`}, 1fr)\n  );\n  grid-gap: ${({ theme }) => theme.spaces[4]};\n`;\n\ninterface GridLayoutProps {\n  size: Size;\n  children: React.ReactNode;\n}\n\nconst GridLayout = ({ size, children }: GridLayoutProps) => {\n  return <StyledGrid $size={size}>{children}</StyledGrid>;\n};\n\nexport { GridLayout };\nexport type { GridLayoutProps, GridColSize };\n"],"names":["GridColSize","S","M","StyledGrid","styled","Box","$size","theme","spaces","GridLayout","size","children","_jsx"],"mappings":";;;;;;;AAUA,MAAMA,WAAAA,GAAc;IAClBC,CAAAA,EAAG,GAAA;IACHC,CAAAA,EAAG;AACL,CAAA;AAIA,MAAMC,UAAAA,GAAaC,uBAAAA,CAAOC,gBAAAA,CAAqB;;;;AAIpC,WAAA,EAAE,CAAC,EAAEC,KAAK,EAAmB,GAAK,CAAA,EAAGN,WAAW,CAACM,KAAAA,CAAM,CAAC,EAAE,CAAC,CAAC;;YAE3D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;AAC7C,CAAC;AAOD,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAA;AACrD,IAAA,qBAAOC,cAAA,CAACT,UAAAA,EAAAA;QAAWG,KAAAA,EAAOI,IAAAA;AAAOC,QAAAA,QAAAA,EAAAA;;AACnC;;;;"}

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

@@ -3,14 +3,14 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var theme = require('../../constants/theme.js');
 var ActionLayout = require('./ActionLayout.js');
 var ContentLayout = require('./ContentLayout.js');
 var GridLayout = require('./GridLayout.js');
 var HeaderLayout = require('./HeaderLayout.js');
 
-const GridContainer = styled.styled(designSystem.Box)`
+const GridContainer = styledComponents.styled(designSystem.Box)`
   width: 100%;
   flex: 1;
   display: grid;
@@ -22,7 +22,7 @@ const GridContainer = styled.styled(designSystem.Box)`
     grid-template-columns: ${({ $hasSideNav })=>$hasSideNav ? `auto 1fr` : '1fr'};
   }
 `;
-const SideNavContainer = styled.styled(designSystem.Flex)`
+const SideNavContainer = styledComponents.styled(designSystem.Flex)`
   overflow: hidden;
   display: none;
   background: ${({ theme })=>theme.colors.neutral0};
@@ -33,7 +33,7 @@ const SideNavContainer = styled.styled(designSystem.Flex)`
     transform: none;
   }
 `;
-const OverflowingItem = styled.styled(designSystem.Box)`
+const OverflowingItem = styledComponents.styled(designSystem.Box)`
   position: relative;
   overflow-x: hidden;
 

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../../../../../../admin/src/components/Layouts/Layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, BoxProps, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\nimport { ActionLayout } from './ActionLayout';\nimport { ContentLayout } from './ContentLayout';\nimport { GridLayout, GridLayoutProps } from './GridLayout';\nimport { HeaderLayout, BaseHeaderLayout } from './HeaderLayout';\n\ninterface LayoutProps extends BoxProps {\n  children: React.ReactNode;\n  sideNav?: React.ReactNode;\n}\n\nconst GridContainer = styled(Box)<{ $hasSideNav: boolean }>`\n  width: 100%;\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr;\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    overflow: hidden;\n    grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};\n  }\n`;\n\nconst SideNavContainer = styled(Flex)`\n  overflow: hidden;\n  display: none;\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    display: block;\n    box-shadow: none;\n    transform: none;\n  }\n`;\n\nconst OverflowingItem = styled(Box)`\n  position: relative;\n  overflow-x: hidden;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    transform: none;\n    width: auto;\n  }\n`;\n\nconst RootLayout = ({ sideNav, children, ...restProps }: LayoutProps) => (\n  <GridContainer $hasSideNav={Boolean(sideNav)} {...restProps}>\n    {sideNav && <SideNavContainer>{sideNav}</SideNavContainer>}\n    <OverflowingItem paddingBottom={RESPONSIVE_DEFAULT_SPACING} data-strapi-main-content>\n      {children}\n    </OverflowingItem>\n  </GridContainer>\n);\n\nconst Layouts = {\n  Root: RootLayout,\n  Header: HeaderLayout,\n  BaseHeader: BaseHeaderLayout,\n  Grid: GridLayout,\n  Action: ActionLayout,\n  Content: ContentLayout,\n};\n\nexport { Layouts, type LayoutProps, type GridLayoutProps };\n"],"names":["GridContainer","styled","Box","theme","breakpoints","medium","$hasSideNav","SideNavContainer","Flex","colors","neutral0","OverflowingItem","RootLayout","sideNav","children","restProps","_jsxs","Boolean","_jsx","paddingBottom","RESPONSIVE_DEFAULT_SPACING","data-strapi-main-content","Layouts","Root","Header","HeaderLayout","BaseHeader","BaseHeaderLayout","Grid","GridLayout","Action","ActionLayout","Content","ContentLayout"],"mappings":";;;;;;;;;;;;AAiBA,MAAMA,aAAAA,GAAgBC,aAAAA,CAAOC,gBAAAA,CAA8B;;;;;;;EAOzD,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;2BAEjB,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,cAAc,CAAC,QAAQ,CAAC,GAAG,KAAA,CAAO;;AAErF,CAAC;AAED,MAAMC,gBAAAA,GAAmBN,aAAAA,CAAOO,iBAAAA,CAAK;;;cAGvB,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMM,MAAM,CAACC,QAAQ,CAAC;;EAEnD,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;;AAK5C,CAAC;AAED,MAAMM,eAAAA,GAAkBV,aAAAA,CAAOC,gBAAAA,CAAI;;;;EAIjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;AAI5C,CAAC;AAED,MAAMO,UAAAA,GAAa,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,SAAAA,EAAwB,iBAClEC,eAAA,CAAChB,aAAAA,EAAAA;AAAcM,QAAAA,WAAAA,EAAaW,OAAAA,CAAQJ,OAAAA,CAAAA;AAAW,QAAA,GAAGE,SAAS;;AACxDF,YAAAA,OAAAA,kBAAWK,cAAA,CAACX,gBAAAA,EAAAA;AAAkBM,gBAAAA,QAAAA,EAAAA;;0BAC/BK,cAAA,CAACP,eAAAA,EAAAA;gBAAgBQ,aAAAA,EAAeC,gCAAAA;gBAA4BC,0BAAwB,EAAA,IAAA;AACjFP,gBAAAA,QAAAA,EAAAA;;;;AAKP,MAAMQ,OAAAA,GAAU;IACdC,IAAAA,EAAMX,UAAAA;IACNY,MAAAA,EAAQC,yBAAAA;IACRC,UAAAA,EAAYC,6BAAAA;IACZC,IAAAA,EAAMC,qBAAAA;IACNC,MAAAA,EAAQC,yBAAAA;IACRC,OAAAA,EAASC;AACX;;;;"}
+{"version":3,"file":"Layout.js","sources":["../../../../../../admin/src/components/Layouts/Layout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, BoxProps, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../../constants/theme';\n\nimport { ActionLayout } from './ActionLayout';\nimport { ContentLayout } from './ContentLayout';\nimport { GridLayout, GridLayoutProps } from './GridLayout';\nimport { HeaderLayout, BaseHeaderLayout } from './HeaderLayout';\n\ninterface LayoutProps extends BoxProps {\n  children: React.ReactNode;\n  sideNav?: React.ReactNode;\n}\n\nconst GridContainer = styled(Box)<{ $hasSideNav: boolean }>`\n  width: 100%;\n  flex: 1;\n  display: grid;\n  grid-template-columns: 1fr;\n  padding: 0;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    overflow: hidden;\n    grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};\n  }\n`;\n\nconst SideNavContainer = styled(Flex)`\n  overflow: hidden;\n  display: none;\n  background: ${({ theme }) => theme.colors.neutral0};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    display: block;\n    box-shadow: none;\n    transform: none;\n  }\n`;\n\nconst OverflowingItem = styled(Box)`\n  position: relative;\n  overflow-x: hidden;\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    transform: none;\n    width: auto;\n  }\n`;\n\nconst RootLayout = ({ sideNav, children, ...restProps }: LayoutProps) => (\n  <GridContainer $hasSideNav={Boolean(sideNav)} {...restProps}>\n    {sideNav && <SideNavContainer>{sideNav}</SideNavContainer>}\n    <OverflowingItem paddingBottom={RESPONSIVE_DEFAULT_SPACING} data-strapi-main-content>\n      {children}\n    </OverflowingItem>\n  </GridContainer>\n);\n\nconst Layouts = {\n  Root: RootLayout,\n  Header: HeaderLayout,\n  BaseHeader: BaseHeaderLayout,\n  Grid: GridLayout,\n  Action: ActionLayout,\n  Content: ContentLayout,\n};\n\nexport { Layouts, type LayoutProps, type GridLayoutProps };\n"],"names":["GridContainer","styled","Box","theme","breakpoints","medium","$hasSideNav","SideNavContainer","Flex","colors","neutral0","OverflowingItem","RootLayout","sideNav","children","restProps","_jsxs","Boolean","_jsx","paddingBottom","RESPONSIVE_DEFAULT_SPACING","data-strapi-main-content","Layouts","Root","Header","HeaderLayout","BaseHeader","BaseHeaderLayout","Grid","GridLayout","Action","ActionLayout","Content","ContentLayout"],"mappings":";;;;;;;;;;;;AAiBA,MAAMA,aAAAA,GAAgBC,uBAAAA,CAAOC,gBAAAA,CAA8B;;;;;;;EAOzD,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;2BAEjB,EAAE,CAAC,EAAEC,WAAW,EAAE,GAAMA,cAAc,CAAC,QAAQ,CAAC,GAAG,KAAA,CAAO;;AAErF,CAAC;AAED,MAAMC,gBAAAA,GAAmBN,uBAAAA,CAAOO,iBAAAA,CAAK;;;cAGvB,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMM,MAAM,CAACC,QAAQ,CAAC;;EAEnD,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;;AAK5C,CAAC;AAED,MAAMM,eAAAA,GAAkBV,uBAAAA,CAAOC,gBAAAA,CAAI;;;;EAIjC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;AAI5C,CAAC;AAED,MAAMO,UAAAA,GAAa,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,SAAAA,EAAwB,iBAClEC,eAAA,CAAChB,aAAAA,EAAAA;AAAcM,QAAAA,WAAAA,EAAaW,OAAAA,CAAQJ,OAAAA,CAAAA;AAAW,QAAA,GAAGE,SAAS;;AACxDF,YAAAA,OAAAA,kBAAWK,cAAA,CAACX,gBAAAA,EAAAA;AAAkBM,gBAAAA,QAAAA,EAAAA;;0BAC/BK,cAAA,CAACP,eAAAA,EAAAA;gBAAgBQ,aAAAA,EAAeC,gCAAAA;gBAA4BC,0BAAwB,EAAA,IAAA;AACjFP,gBAAAA,QAAAA,EAAAA;;;;AAKP,MAAMQ,OAAAA,GAAU;IACdC,IAAAA,EAAMX,UAAAA;IACNY,MAAAA,EAAQC,yBAAAA;IACRC,UAAAA,EAAYC,6BAAAA;IACZC,IAAAA,EAAMC,qBAAAA;IACNC,MAAAA,EAAQC,yBAAAA;IACRC,OAAAA,EAASC;AACX;;;;"}

package/dist/admin/admin/src/components/LazyOutlet.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactRouterDom = require('react-router-dom');
+var PageHelpers = require('./PageHelpers.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const NestedLoading = ()=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "50vh",
+        padding: 8,
+        "aria-busy": true,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+            children: "Loading content."
+        })
+    });
+/**
+ * Renders child routes with a visible loading state while lazy chunks load.
+ * Suspense fallbacks are suppressed during React Router transitions, so we also
+ * check `useNavigation().state` to replace stale outlet content while navigating.
+ */ const LazyOutlet = ({ nested = false, suspenseOnly = false })=>{
+    const navigation = reactRouterDom.useNavigation();
+    const isNavigating = !suspenseOnly && navigation.state === 'loading';
+    const fallback = nested ? /*#__PURE__*/ jsxRuntime.jsx(NestedLoading, {}) : /*#__PURE__*/ jsxRuntime.jsx(PageHelpers.Page.Loading, {});
+    if (isNavigating) {
+        return fallback;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(React__namespace.Suspense, {
+        fallback: fallback,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+    });
+};
+
+exports.LazyOutlet = LazyOutlet;
+//# sourceMappingURL=LazyOutlet.js.map

package/dist/admin/admin/src/components/LazyOutlet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyOutlet.js","sources":["../../../../../admin/src/components/LazyOutlet.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Loader } from '@strapi/design-system';\nimport { Outlet, useNavigation } from 'react-router-dom';\n\nimport { Page } from './PageHelpers';\n\ninterface LazyOutletProps {\n  /**\n   * Compact loader for nested layout content columns (e.g. Settings, Content Manager)\n   * where the parent shell should stay visible.\n   */\n  nested?: boolean;\n  /**\n   * Parent outlets only use Suspense so nested layouts can own navigation loading UX\n   * (side nav stays visible while a child chunk loads).\n   */\n  suspenseOnly?: boolean;\n}\n\nconst NestedLoading = () => (\n  <Flex alignItems=\"center\" justifyContent=\"center\" minHeight=\"50vh\" padding={8} aria-busy>\n    <Loader>Loading content.</Loader>\n  </Flex>\n);\n\n/**\n * Renders child routes with a visible loading state while lazy chunks load.\n * Suspense fallbacks are suppressed during React Router transitions, so we also\n * check `useNavigation().state` to replace stale outlet content while navigating.\n */\nconst LazyOutlet = ({ nested = false, suspenseOnly = false }: LazyOutletProps) => {\n  const navigation = useNavigation();\n  const isNavigating = !suspenseOnly && navigation.state === 'loading';\n  const fallback = nested ? <NestedLoading /> : <Page.Loading />;\n\n  if (isNavigating) {\n    return fallback;\n  }\n\n  return (\n    <React.Suspense fallback={fallback}>\n      <Outlet />\n    </React.Suspense>\n  );\n};\n\nexport { LazyOutlet };\nexport type { LazyOutletProps };\n"],"names":["NestedLoading","_jsx","Flex","alignItems","justifyContent","minHeight","padding","aria-busy","Loader","LazyOutlet","nested","suspenseOnly","navigation","useNavigation","isNavigating","state","fallback","Page","Loading","React","Suspense","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,aAAAA,GAAgB,kBACpBC,cAAA,CAACC,iBAAAA,EAAAA;QAAKC,UAAAA,EAAW,QAAA;QAASC,cAAAA,EAAe,QAAA;QAASC,SAAAA,EAAU,MAAA;QAAOC,OAAAA,EAAS,CAAA;QAAGC,WAAS,EAAA,IAAA;AACtF,QAAA,QAAA,gBAAAN,cAAA,CAACO,mBAAAA,EAAAA;AAAO,YAAA,QAAA,EAAA;;;AAIZ;;;;IAKA,MAAMC,aAAa,CAAC,EAAEC,SAAS,KAAK,EAAEC,YAAAA,GAAe,KAAK,EAAmB,GAAA;AAC3E,IAAA,MAAMC,UAAAA,GAAaC,4BAAAA,EAAAA;AACnB,IAAA,MAAMC,YAAAA,GAAe,CAACH,YAAAA,IAAgBC,UAAAA,CAAWG,KAAK,KAAK,SAAA;AAC3D,IAAA,MAAMC,WAAWN,MAAAA,iBAAST,cAAA,CAACD,aAAAA,EAAAA,EAAAA,CAAAA,iBAAmBC,cAAA,CAACgB,iBAAKC,OAAO,EAAA,EAAA,CAAA;AAE3D,IAAA,IAAIJ,YAAAA,EAAc;QAChB,OAAOE,QAAAA;AACT,IAAA;IAEA,qBACEf,cAAA,CAACkB,iBAAMC,QAAQ,EAAA;QAACJ,QAAAA,EAAUA,QAAAA;AACxB,QAAA,QAAA,gBAAAf,cAAA,CAACoB,qBAAAA,EAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/LazyOutlet.mjs

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, Loader } from '@strapi/design-system';
+import { useNavigation, Outlet } from 'react-router-dom';
+import { Page } from './PageHelpers.mjs';
+
+const NestedLoading = ()=>/*#__PURE__*/ jsx(Flex, {
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "50vh",
+        padding: 8,
+        "aria-busy": true,
+        children: /*#__PURE__*/ jsx(Loader, {
+            children: "Loading content."
+        })
+    });
+/**
+ * Renders child routes with a visible loading state while lazy chunks load.
+ * Suspense fallbacks are suppressed during React Router transitions, so we also
+ * check `useNavigation().state` to replace stale outlet content while navigating.
+ */ const LazyOutlet = ({ nested = false, suspenseOnly = false })=>{
+    const navigation = useNavigation();
+    const isNavigating = !suspenseOnly && navigation.state === 'loading';
+    const fallback = nested ? /*#__PURE__*/ jsx(NestedLoading, {}) : /*#__PURE__*/ jsx(Page.Loading, {});
+    if (isNavigating) {
+        return fallback;
+    }
+    return /*#__PURE__*/ jsx(React.Suspense, {
+        fallback: fallback,
+        children: /*#__PURE__*/ jsx(Outlet, {})
+    });
+};
+
+export { LazyOutlet };
+//# sourceMappingURL=LazyOutlet.mjs.map

package/dist/admin/admin/src/components/LazyOutlet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyOutlet.mjs","sources":["../../../../../admin/src/components/LazyOutlet.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Loader } from '@strapi/design-system';\nimport { Outlet, useNavigation } from 'react-router-dom';\n\nimport { Page } from './PageHelpers';\n\ninterface LazyOutletProps {\n  /**\n   * Compact loader for nested layout content columns (e.g. Settings, Content Manager)\n   * where the parent shell should stay visible.\n   */\n  nested?: boolean;\n  /**\n   * Parent outlets only use Suspense so nested layouts can own navigation loading UX\n   * (side nav stays visible while a child chunk loads).\n   */\n  suspenseOnly?: boolean;\n}\n\nconst NestedLoading = () => (\n  <Flex alignItems=\"center\" justifyContent=\"center\" minHeight=\"50vh\" padding={8} aria-busy>\n    <Loader>Loading content.</Loader>\n  </Flex>\n);\n\n/**\n * Renders child routes with a visible loading state while lazy chunks load.\n * Suspense fallbacks are suppressed during React Router transitions, so we also\n * check `useNavigation().state` to replace stale outlet content while navigating.\n */\nconst LazyOutlet = ({ nested = false, suspenseOnly = false }: LazyOutletProps) => {\n  const navigation = useNavigation();\n  const isNavigating = !suspenseOnly && navigation.state === 'loading';\n  const fallback = nested ? <NestedLoading /> : <Page.Loading />;\n\n  if (isNavigating) {\n    return fallback;\n  }\n\n  return (\n    <React.Suspense fallback={fallback}>\n      <Outlet />\n    </React.Suspense>\n  );\n};\n\nexport { LazyOutlet };\nexport type { LazyOutletProps };\n"],"names":["NestedLoading","_jsx","Flex","alignItems","justifyContent","minHeight","padding","aria-busy","Loader","LazyOutlet","nested","suspenseOnly","navigation","useNavigation","isNavigating","state","fallback","Page","Loading","React","Suspense","Outlet"],"mappings":";;;;;;AAoBA,MAAMA,aAAAA,GAAgB,kBACpBC,GAAA,CAACC,IAAAA,EAAAA;QAAKC,UAAAA,EAAW,QAAA;QAASC,cAAAA,EAAe,QAAA;QAASC,SAAAA,EAAU,MAAA;QAAOC,OAAAA,EAAS,CAAA;QAAGC,WAAS,EAAA,IAAA;AACtF,QAAA,QAAA,gBAAAN,GAAA,CAACO,MAAAA,EAAAA;AAAO,YAAA,QAAA,EAAA;;;AAIZ;;;;IAKA,MAAMC,aAAa,CAAC,EAAEC,SAAS,KAAK,EAAEC,YAAAA,GAAe,KAAK,EAAmB,GAAA;AAC3E,IAAA,MAAMC,UAAAA,GAAaC,aAAAA,EAAAA;AACnB,IAAA,MAAMC,YAAAA,GAAe,CAACH,YAAAA,IAAgBC,UAAAA,CAAWG,KAAK,KAAK,SAAA;AAC3D,IAAA,MAAMC,WAAWN,MAAAA,iBAAST,GAAA,CAACD,aAAAA,EAAAA,EAAAA,CAAAA,iBAAmBC,GAAA,CAACgB,KAAKC,OAAO,EAAA,EAAA,CAAA;AAE3D,IAAA,IAAIJ,YAAAA,EAAc;QAChB,OAAOE,QAAAA;AACT,IAAA;IAEA,qBACEf,GAAA,CAACkB,MAAMC,QAAQ,EAAA;QAACJ,QAAAA,EAAUA,QAAAA;AACxB,QAAA,QAAA,gBAAAf,GAAA,CAACoB,MAAAA,EAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/admin/src/components/LeftMenu.js

@@ -6,7 +6,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var Tracking = require('../features/Tracking.js');
 var useMediaQuery = require('../hooks/useMediaQuery.js');
 var MainNav = require('./MainNav/MainNav.js');
@@ -48,7 +48,7 @@ const sortLinks = (links)=>{
         }
     });
 };
-const NavListWrapper = styled.styled(designSystem.Flex)`
+const NavListWrapper = styledComponents.styled(designSystem.Flex)`
   width: 100%;
   overflow-y: auto;
   scrollbar-width: none;
@@ -58,7 +58,7 @@ const NavListWrapper = styled.styled(designSystem.Flex)`
     display: none;
   }
 `;
-const MenuDetails = styled.styled(designSystem.Flex)`
+const MenuDetails = styledComponents.styled(designSystem.Flex)`
   flex: 1;
   flex-direction: row;
   justify-content: space-between;

package/dist/admin/admin/src/components/LeftMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftMenu.js","sources":["../../../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Divider, Flex, FlexComponent, IconButton, useCollator } from '@strapi/design-system';\nimport { Cross, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../features/Tracking';\nimport { useIsDesktop } from '../hooks/useMediaQuery';\nimport { Menu, MenuItem, MobileMenuItem } from '../hooks/useMenu';\n\nimport { MainNav } from './MainNav/MainNav';\nimport { MainNavIcons } from './MainNav/MainNavLinks';\nimport { NavBrand } from './MainNav/NavBrand';\nimport { NavBurgerMenu } from './MainNav/NavBurgerMenu';\nimport { NavUser } from './MainNav/NavUser';\nimport { TrialCountdown } from './MainNav/TrialCountdown';\n\nconst sortLinks = (links: MenuItem[]) => {\n  return links.sort((a, b) => {\n    // if no position is defined, we put the link in the position of the external plugins, before the plugins list\n    const positionA = a.position ?? 6;\n    const positionB = b.position ?? 6;\n\n    if (positionA < positionB) {\n      return -1;\n    } else {\n      return 1;\n    }\n  });\n};\n\nconst NavListWrapper = styled<FlexComponent<'ul'>>(Flex)`\n  width: 100%;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\ninterface LeftMenuProps\n  extends Pick<\n    Menu,\n    'generalSectionLinks' | 'pluginsSectionLinks' | 'topMobileNavigation' | 'burgerMobileNavigation'\n  > {}\n\nconst MenuDetails = styled(Flex)`\n  flex: 1;\n  flex-direction: row;\n  justify-content: space-between;\n  overflow-x: auto;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n`;\n\nconst LeftMenu = ({\n  generalSectionLinks = [],\n  pluginsSectionLinks = [],\n  topMobileNavigation = [],\n  burgerMobileNavigation = [],\n}: LeftMenuProps) => {\n  const [isBurgerMenuShown, setIsBurgerMenuShown] = React.useState(false);\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const { formatMessage, locale } = useIntl();\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n  const isDesktop = useIsDesktop();\n\n  const handleClickOnLink = (destination: string) => {\n    trackUsage('willNavigate', { from: pathname, to: destination });\n  };\n\n  // Close burger menu when route changes\n  React.useEffect(() => {\n    setIsBurgerMenuShown(false);\n  }, [pathname]);\n\n  const listLinksAlphabeticallySorted = [...pluginsSectionLinks, ...generalSectionLinks].sort(\n    (a, b) => formatter.compare(formatMessage(a.intlLabel), formatMessage(b.intlLabel))\n  );\n  const listLinks = sortLinks(listLinksAlphabeticallySorted);\n\n  /**\n   * Return filtered mobile navigation links (used for both top and burger menu)\n   */\n  const mapMobileNavigationLinks = (mobileNavLinks: MobileMenuItem[]): MenuItem[] =>\n    mobileNavLinks.reduce<MenuItem[]>((acc, mobileLink) => {\n      const linkFound = listLinks.find((link) => link.to === mobileLink.to);\n      if (linkFound) {\n        acc.push(mobileLink.link ? { ...linkFound, navigationLink: mobileLink.link } : linkFound);\n      }\n      return acc;\n    }, []);\n\n  /**\n   * Mobile top navigation\n   */\n  const topMobileNavigationLinks = mapMobileNavigationLinks(topMobileNavigation);\n\n  /**\n   * Mobile burger menu\n   */\n  const excludedPluginsFromBurgerMenu = [\n    'content-manager',\n    'content-type-builder',\n    'upload',\n    'content-releases',\n  ];\n  const burgerMenuPluginsLinks = pluginsSectionLinks.filter(\n    (plugin) => !excludedPluginsFromBurgerMenu.some((link) => plugin.to.includes(link))\n  );\n  const burgerMobileNavigationLinks = [\n    ...burgerMenuPluginsLinks,\n    ...mapMobileNavigationLinks(burgerMobileNavigation),\n  ];\n\n  return (\n    <>\n      <MainNav>\n        <NavBrand />\n\n        {isDesktop && <Divider />}\n\n        <MenuDetails>\n          <NavListWrapper\n            tag=\"ul\"\n            gap={3}\n            direction={{\n              initial: 'row',\n              large: 'column',\n            }}\n            alignItems=\"center\"\n            justifyContent={{\n              initial: 'center',\n              large: 'flex-start',\n            }}\n            flex={1}\n            paddingLeft={{\n              initial: 3,\n              large: 0,\n            }}\n            paddingRight={{\n              initial: 3,\n              large: 0,\n            }}\n            paddingTop={3}\n            paddingBottom={3}\n          >\n            <MainNavIcons\n              listLinks={listLinks}\n              mobileLinks={topMobileNavigationLinks}\n              handleClickOnLink={handleClickOnLink}\n            />\n          </NavListWrapper>\n          <TrialCountdown />\n          <Box\n            display={{\n              initial: 'none',\n              large: 'flex',\n            }}\n            borderStyle=\"solid\"\n            borderWidth={{\n              initial: 0,\n              large: '1px 0 0 0',\n            }}\n            borderColor=\"neutral150\"\n            padding={3}\n          >\n            <NavUser />\n          </Box>\n        </MenuDetails>\n\n        <Box\n          padding={3}\n          display={{\n            initial: 'flex',\n            large: 'none',\n          }}\n        >\n          <IconButton\n            onClick={() => setIsBurgerMenuShown((prev) => !prev)}\n            style={{ border: 'none' }}\n            label=\"Menu\"\n            type=\"button\"\n            aria-expanded={isBurgerMenuShown}\n            aria-controls=\"burger-menu\"\n          >\n            {!isBurgerMenuShown ? <List fill=\"neutral1000\" /> : <Cross fill=\"neutral1000\" />}\n          </IconButton>\n        </Box>\n      </MainNav>\n      <NavBurgerMenu\n        isShown={isBurgerMenuShown}\n        listLinks={burgerMobileNavigationLinks}\n        handleClickOnLink={handleClickOnLink}\n        onClose={() => setIsBurgerMenuShown(false)}\n      />\n    </>\n  );\n};\n\nexport { LeftMenu };\n"],"names":["sortLinks","links","sort","a","b","positionA","position","positionB","NavListWrapper","styled","Flex","MenuDetails","theme","breakpoints","large","LeftMenu","generalSectionLinks","pluginsSectionLinks","topMobileNavigation","burgerMobileNavigation","isBurgerMenuShown","setIsBurgerMenuShown","React","useState","trackUsage","useTracking","pathname","useLocation","formatMessage","locale","useIntl","formatter","useCollator","sensitivity","isDesktop","useIsDesktop","handleClickOnLink","destination","from","to","useEffect","listLinksAlphabeticallySorted","compare","intlLabel","listLinks","mapMobileNavigationLinks","mobileNavLinks","reduce","acc","mobileLink","linkFound","find","link","push","navigationLink","topMobileNavigationLinks","excludedPluginsFromBurgerMenu","burgerMenuPluginsLinks","filter","plugin","some","includes","burgerMobileNavigationLinks","_jsxs","_Fragment","MainNav","_jsx","NavBrand","Divider","tag","gap","direction","initial","alignItems","justifyContent","flex","paddingLeft","paddingRight","paddingTop","paddingBottom","MainNavIcons","mobileLinks","TrialCountdown","Box","display","borderStyle","borderWidth","borderColor","padding","NavUser","IconButton","onClick","prev","style","border","label","type","aria-expanded","aria-controls","List","fill","Cross","NavBurgerMenu","isShown","onClose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAMA,YAAY,CAACC,KAAAA,GAAAA;AACjB,IAAA,OAAOA,KAAAA,CAAMC,IAAI,CAAC,CAACC,CAAAA,EAAGC,CAAAA,GAAAA;;QAEpB,MAAMC,SAAAA,GAAYF,CAAAA,CAAEG,QAAQ,IAAI,CAAA;QAChC,MAAMC,SAAAA,GAAYH,CAAAA,CAAEE,QAAQ,IAAI,CAAA;AAEhC,QAAA,IAAID,YAAYE,SAAAA,EAAW;AACzB,YAAA,OAAO,EAAC;QACV,CAAA,MAAO;YACL,OAAO,CAAA;AACT,QAAA;AACF,IAAA,CAAA,CAAA;AACF,CAAA;AAEA,MAAMC,cAAAA,GAAiBC,aAAAA,CAA4BC,iBAAAA,CAAK;;;;;;;;;AASxD,CAAC;AAQD,MAAMC,WAAAA,GAAcF,aAAAA,CAAOC,iBAAAA,CAAK;;;;;;EAM9B,EAAE,CAAC,EAAEE,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,KAAK,CAAC;;;;;AAK3C,CAAC;AAED,MAAMC,QAAAA,GAAW,CAAC,EAChBC,mBAAAA,GAAsB,EAAE,EACxBC,mBAAAA,GAAsB,EAAE,EACxBC,mBAAAA,GAAsB,EAAE,EACxBC,sBAAAA,GAAyB,EAAE,EACb,GAAA;AACd,IAAA,MAAM,CAACC,iBAAAA,EAAmBC,oBAAAA,CAAqB,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IACjE,MAAM,EAAEC,UAAU,EAAE,GAAGC,oBAAAA,EAAAA;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGC,0BAAAA,EAAAA;AACrB,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAE,GAAGC,iBAAAA,EAAAA;IAClC,MAAMC,SAAAA,GAAYC,yBAAYH,MAAAA,EAAQ;QACpCI,WAAAA,EAAa;AACf,KAAA,CAAA;AACA,IAAA,MAAMC,SAAAA,GAAYC,0BAAAA,EAAAA;AAElB,IAAA,MAAMC,oBAAoB,CAACC,WAAAA,GAAAA;AACzBb,QAAAA,UAAAA,CAAW,cAAA,EAAgB;YAAEc,IAAAA,EAAMZ,QAAAA;YAAUa,EAAAA,EAAIF;AAAY,SAAA,CAAA;AAC/D,IAAA,CAAA;;AAGAf,IAAAA,gBAAAA,CAAMkB,SAAS,CAAC,IAAA;QACdnB,oBAAAA,CAAqB,KAAA,CAAA;IACvB,CAAA,EAAG;AAACK,QAAAA;AAAS,KAAA,CAAA;AAEb,IAAA,MAAMe,6BAAAA,GAAgC;AAAIxB,QAAAA,GAAAA,mBAAAA;AAAwBD,QAAAA,GAAAA;AAAoB,KAAA,CAACd,IAAI,CACzF,CAACC,CAAAA,EAAGC,IAAM2B,SAAAA,CAAUW,OAAO,CAACd,aAAAA,CAAczB,CAAAA,CAAEwC,SAAS,CAAA,EAAGf,aAAAA,CAAcxB,EAAEuC,SAAS,CAAA,CAAA,CAAA;AAEnF,IAAA,MAAMC,YAAY5C,SAAAA,CAAUyC,6BAAAA,CAAAA;AAE5B;;MAGA,MAAMI,2BAA2B,CAACC,cAAAA,GAChCA,eAAeC,MAAM,CAAa,CAACC,GAAAA,EAAKC,UAAAA,GAAAA;YACtC,MAAMC,SAAAA,GAAYN,SAAAA,CAAUO,IAAI,CAAC,CAACC,OAASA,IAAAA,CAAKb,EAAE,KAAKU,UAAAA,CAAWV,EAAE,CAAA;AACpE,YAAA,IAAIW,SAAAA,EAAW;AACbF,gBAAAA,GAAAA,CAAIK,IAAI,CAACJ,UAAAA,CAAWG,IAAI,GAAG;AAAE,oBAAA,GAAGF,SAAS;AAAEI,oBAAAA,cAAAA,EAAgBL,WAAWG;iBAAK,GAAIF,SAAAA,CAAAA;AACjF,YAAA;YACA,OAAOF,GAAAA;AACT,QAAA,CAAA,EAAG,EAAE,CAAA;AAEP;;MAGA,MAAMO,2BAA2BV,wBAAAA,CAAyB3B,mBAAAA,CAAAA;AAE1D;;AAEC,MACD,MAAMsC,6BAAAA,GAAgC;AACpC,QAAA,iBAAA;AACA,QAAA,sBAAA;AACA,QAAA,QAAA;AACA,QAAA;AACD,KAAA;AACD,IAAA,MAAMC,yBAAyBxC,mBAAAA,CAAoByC,MAAM,CACvD,CAACC,SAAW,CAACH,6BAAAA,CAA8BI,IAAI,CAAC,CAACR,IAAAA,GAASO,MAAAA,CAAOpB,EAAE,CAACsB,QAAQ,CAACT,IAAAA,CAAAA,CAAAA,CAAAA;AAE/E,IAAA,MAAMU,2BAAAA,GAA8B;AAC/BL,QAAAA,GAAAA,sBAAAA;WACAZ,wBAAAA,CAAyB1B,sBAAAA;AAC7B,KAAA;IAED,qBACE4C,eAAA,CAAAC,mBAAA,EAAA;;0BACED,eAAA,CAACE,eAAAA,EAAAA;;kCACCC,cAAA,CAACC,iBAAAA,EAAAA,EAAAA,CAAAA;AAEAjC,oBAAAA,SAAAA,kBAAagC,cAAA,CAACE,oBAAAA,EAAAA,EAAAA,CAAAA;kCAEfL,eAAA,CAACpD,WAAAA,EAAAA;;0CACCuD,cAAA,CAAC1D,cAAAA,EAAAA;gCACC6D,GAAAA,EAAI,IAAA;gCACJC,GAAAA,EAAK,CAAA;gCACLC,SAAAA,EAAW;oCACTC,OAAAA,EAAS,KAAA;oCACT1D,KAAAA,EAAO;AACT,iCAAA;gCACA2D,UAAAA,EAAW,QAAA;gCACXC,cAAAA,EAAgB;oCACdF,OAAAA,EAAS,QAAA;oCACT1D,KAAAA,EAAO;AACT,iCAAA;gCACA6D,IAAAA,EAAM,CAAA;gCACNC,WAAAA,EAAa;oCACXJ,OAAAA,EAAS,CAAA;oCACT1D,KAAAA,EAAO;AACT,iCAAA;gCACA+D,YAAAA,EAAc;oCACZL,OAAAA,EAAS,CAAA;oCACT1D,KAAAA,EAAO;AACT,iCAAA;gCACAgE,UAAAA,EAAY,CAAA;gCACZC,aAAAA,EAAe,CAAA;AAEf,gCAAA,QAAA,gBAAAb,cAAA,CAACc,yBAAAA,EAAAA;oCACCpC,SAAAA,EAAWA,SAAAA;oCACXqC,WAAAA,EAAa1B,wBAAAA;oCACbnB,iBAAAA,EAAmBA;;;0CAGvB8B,cAAA,CAACgB,6BAAAA,EAAAA,EAAAA,CAAAA;0CACDhB,cAAA,CAACiB,gBAAAA,EAAAA;gCACCC,OAAAA,EAAS;oCACPZ,OAAAA,EAAS,MAAA;oCACT1D,KAAAA,EAAO;AACT,iCAAA;gCACAuE,WAAAA,EAAY,OAAA;gCACZC,WAAAA,EAAa;oCACXd,OAAAA,EAAS,CAAA;oCACT1D,KAAAA,EAAO;AACT,iCAAA;gCACAyE,WAAAA,EAAY,YAAA;gCACZC,OAAAA,EAAS,CAAA;AAET,gCAAA,QAAA,gBAAAtB,cAAA,CAACuB,eAAAA,EAAAA,EAAAA;;;;kCAILvB,cAAA,CAACiB,gBAAAA,EAAAA;wBACCK,OAAAA,EAAS,CAAA;wBACTJ,OAAAA,EAAS;4BACPZ,OAAAA,EAAS,MAAA;4BACT1D,KAAAA,EAAO;AACT,yBAAA;AAEA,wBAAA,QAAA,gBAAAoD,cAAA,CAACwB,uBAAAA,EAAAA;AACCC,4BAAAA,OAAAA,EAAS,IAAMtE,oBAAAA,CAAqB,CAACuE,IAAAA,GAAS,CAACA,IAAAA,CAAAA;4BAC/CC,KAAAA,EAAO;gCAAEC,MAAAA,EAAQ;AAAO,6BAAA;4BACxBC,KAAAA,EAAM,MAAA;4BACNC,IAAAA,EAAK,QAAA;4BACLC,eAAAA,EAAe7E,iBAAAA;4BACf8E,eAAAA,EAAc,aAAA;AAEb,4BAAA,QAAA,EAAA,CAAC9E,kCAAoB8C,cAAA,CAACiC,UAAAA,EAAAA;gCAAKC,IAAAA,EAAK;+CAAmBlC,cAAA,CAACmC,WAAAA,EAAAA;gCAAMD,IAAAA,EAAK;;;;;;0BAItElC,cAAA,CAACoC,2BAAAA,EAAAA;gBACCC,OAAAA,EAASnF,iBAAAA;gBACTwB,SAAAA,EAAWkB,2BAAAA;gBACX1B,iBAAAA,EAAmBA,iBAAAA;AACnBoE,gBAAAA,OAAAA,EAAS,IAAMnF,oBAAAA,CAAqB,KAAA;;;;AAI5C;;;;"}
+{"version":3,"file":"LeftMenu.js","sources":["../../../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Divider, Flex, FlexComponent, IconButton, useCollator } from '@strapi/design-system';\nimport { Cross, List } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../features/Tracking';\nimport { useIsDesktop } from '../hooks/useMediaQuery';\nimport { Menu, MenuItem, MobileMenuItem } from '../hooks/useMenu';\n\nimport { MainNav } from './MainNav/MainNav';\nimport { MainNavIcons } from './MainNav/MainNavLinks';\nimport { NavBrand } from './MainNav/NavBrand';\nimport { NavBurgerMenu } from './MainNav/NavBurgerMenu';\nimport { NavUser } from './MainNav/NavUser';\nimport { TrialCountdown } from './MainNav/TrialCountdown';\n\nconst sortLinks = (links: MenuItem[]) => {\n  return links.sort((a, b) => {\n    // if no position is defined, we put the link in the position of the external plugins, before the plugins list\n    const positionA = a.position ?? 6;\n    const positionB = b.position ?? 6;\n\n    if (positionA < positionB) {\n      return -1;\n    } else {\n      return 1;\n    }\n  });\n};\n\nconst NavListWrapper = styled<FlexComponent<'ul'>>(Flex)`\n  width: 100%;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\ninterface LeftMenuProps\n  extends Pick<\n    Menu,\n    'generalSectionLinks' | 'pluginsSectionLinks' | 'topMobileNavigation' | 'burgerMobileNavigation'\n  > {}\n\nconst MenuDetails = styled(Flex)`\n  flex: 1;\n  flex-direction: row;\n  justify-content: space-between;\n  overflow-x: auto;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n`;\n\nconst LeftMenu = ({\n  generalSectionLinks = [],\n  pluginsSectionLinks = [],\n  topMobileNavigation = [],\n  burgerMobileNavigation = [],\n}: LeftMenuProps) => {\n  const [isBurgerMenuShown, setIsBurgerMenuShown] = React.useState(false);\n  const { trackUsage } = useTracking();\n  const { pathname } = useLocation();\n  const { formatMessage, locale } = useIntl();\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n  const isDesktop = useIsDesktop();\n\n  const handleClickOnLink = (destination: string) => {\n    trackUsage('willNavigate', { from: pathname, to: destination });\n  };\n\n  // Close burger menu when route changes\n  React.useEffect(() => {\n    setIsBurgerMenuShown(false);\n  }, [pathname]);\n\n  const listLinksAlphabeticallySorted = [...pluginsSectionLinks, ...generalSectionLinks].sort(\n    (a, b) => formatter.compare(formatMessage(a.intlLabel), formatMessage(b.intlLabel))\n  );\n  const listLinks = sortLinks(listLinksAlphabeticallySorted);\n\n  /**\n   * Return filtered mobile navigation links (used for both top and burger menu)\n   */\n  const mapMobileNavigationLinks = (mobileNavLinks: MobileMenuItem[]): MenuItem[] =>\n    mobileNavLinks.reduce<MenuItem[]>((acc, mobileLink) => {\n      const linkFound = listLinks.find((link) => link.to === mobileLink.to);\n      if (linkFound) {\n        acc.push(mobileLink.link ? { ...linkFound, navigationLink: mobileLink.link } : linkFound);\n      }\n      return acc;\n    }, []);\n\n  /**\n   * Mobile top navigation\n   */\n  const topMobileNavigationLinks = mapMobileNavigationLinks(topMobileNavigation);\n\n  /**\n   * Mobile burger menu\n   */\n  const excludedPluginsFromBurgerMenu = [\n    'content-manager',\n    'content-type-builder',\n    'upload',\n    'content-releases',\n  ];\n  const burgerMenuPluginsLinks = pluginsSectionLinks.filter(\n    (plugin) => !excludedPluginsFromBurgerMenu.some((link) => plugin.to.includes(link))\n  );\n  const burgerMobileNavigationLinks = [\n    ...burgerMenuPluginsLinks,\n    ...mapMobileNavigationLinks(burgerMobileNavigation),\n  ];\n\n  return (\n    <>\n      <MainNav>\n        <NavBrand />\n\n        {isDesktop && <Divider />}\n\n        <MenuDetails>\n          <NavListWrapper\n            tag=\"ul\"\n            gap={3}\n            direction={{\n              initial: 'row',\n              large: 'column',\n            }}\n            alignItems=\"center\"\n            justifyContent={{\n              initial: 'center',\n              large: 'flex-start',\n            }}\n            flex={1}\n            paddingLeft={{\n              initial: 3,\n              large: 0,\n            }}\n            paddingRight={{\n              initial: 3,\n              large: 0,\n            }}\n            paddingTop={3}\n            paddingBottom={3}\n          >\n            <MainNavIcons\n              listLinks={listLinks}\n              mobileLinks={topMobileNavigationLinks}\n              handleClickOnLink={handleClickOnLink}\n            />\n          </NavListWrapper>\n          <TrialCountdown />\n          <Box\n            display={{\n              initial: 'none',\n              large: 'flex',\n            }}\n            borderStyle=\"solid\"\n            borderWidth={{\n              initial: 0,\n              large: '1px 0 0 0',\n            }}\n            borderColor=\"neutral150\"\n            padding={3}\n          >\n            <NavUser />\n          </Box>\n        </MenuDetails>\n\n        <Box\n          padding={3}\n          display={{\n            initial: 'flex',\n            large: 'none',\n          }}\n        >\n          <IconButton\n            onClick={() => setIsBurgerMenuShown((prev) => !prev)}\n            style={{ border: 'none' }}\n            label=\"Menu\"\n            type=\"button\"\n            aria-expanded={isBurgerMenuShown}\n            aria-controls=\"burger-menu\"\n          >\n            {!isBurgerMenuShown ? <List fill=\"neutral1000\" /> : <Cross fill=\"neutral1000\" />}\n          </IconButton>\n        </Box>\n      </MainNav>\n      <NavBurgerMenu\n        isShown={isBurgerMenuShown}\n        listLinks={burgerMobileNavigationLinks}\n        handleClickOnLink={handleClickOnLink}\n        onClose={() => setIsBurgerMenuShown(false)}\n      />\n    </>\n  );\n};\n\nexport { LeftMenu };\n"],"names":["sortLinks","links","sort","a","b","positionA","position","positionB","NavListWrapper","styled","Flex","MenuDetails","theme","breakpoints","large","LeftMenu","generalSectionLinks","pluginsSectionLinks","topMobileNavigation","burgerMobileNavigation","isBurgerMenuShown","setIsBurgerMenuShown","React","useState","trackUsage","useTracking","pathname","useLocation","formatMessage","locale","useIntl","formatter","useCollator","sensitivity","isDesktop","useIsDesktop","handleClickOnLink","destination","from","to","useEffect","listLinksAlphabeticallySorted","compare","intlLabel","listLinks","mapMobileNavigationLinks","mobileNavLinks","reduce","acc","mobileLink","linkFound","find","link","push","navigationLink","topMobileNavigationLinks","excludedPluginsFromBurgerMenu","burgerMenuPluginsLinks","filter","plugin","some","includes","burgerMobileNavigationLinks","_jsxs","_Fragment","MainNav","_jsx","NavBrand","Divider","tag","gap","direction","initial","alignItems","justifyContent","flex","paddingLeft","paddingRight","paddingTop","paddingBottom","MainNavIcons","mobileLinks","TrialCountdown","Box","display","borderStyle","borderWidth","borderColor","padding","NavUser","IconButton","onClick","prev","style","border","label","type","aria-expanded","aria-controls","List","fill","Cross","NavBurgerMenu","isShown","onClose"],"mappings":"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"}

package/dist/admin/admin/src/components/MainNav/MainNav.js

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 
-const MainNavWrapper = styled.styled(designSystem.Flex)`
+const MainNavWrapper = styledComponents.styled(designSystem.Flex)`
   border-bottom: 1px solid ${({ theme })=>theme.colors.neutral150};
   position: sticky;
   max-height: 100%;

package/dist/admin/admin/src/components/MainNav/MainNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"MainNav.js","sources":["../../../../../../admin/src/components/MainNav/MainNav.tsx"],"sourcesContent":["import { Flex, FlexProps } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst MainNavWrapper = styled(Flex)`\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  position: sticky;\n  max-height: 100%;\n  height: auto;\n  z-index: 4;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    border-bottom: none;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n    height: 100dvh;\n  }\n`;\n\nconst MainNav = (props: FlexProps<'nav'>) => (\n  <MainNavWrapper\n    alignItems=\"normal\"\n    tag=\"nav\"\n    background=\"neutral0\"\n    direction={{\n      initial: 'row',\n      large: 'column',\n    }}\n    width={{\n      initial: '100dvw',\n      large: 10,\n    }}\n    {...props}\n  />\n);\n\nexport { MainNav };\n"],"names":["MainNavWrapper","styled","Flex","theme","colors","neutral150","breakpoints","large","MainNav","props","_jsx","alignItems","tag","background","direction","initial","width"],"mappings":";;;;;;AAGA,MAAMA,cAAAA,GAAiBC,aAAAA,CAAOC,iBAAAA,CAAK;2BACR,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;;;;;EAMlE,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMG,WAAW,CAACC,KAAK,CAAC;;4BAEf,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;;AAGrE,CAAC;AAED,MAAMG,OAAAA,GAAU,CAACC,KAAAA,iBACfC,cAAA,CAACV,cAAAA,EAAAA;QACCW,UAAAA,EAAW,QAAA;QACXC,GAAAA,EAAI,KAAA;QACJC,UAAAA,EAAW,UAAA;QACXC,SAAAA,EAAW;YACTC,OAAAA,EAAS,KAAA;YACTR,KAAAA,EAAO;AACT,SAAA;QACAS,KAAAA,EAAO;YACLD,OAAAA,EAAS,QAAA;YACTR,KAAAA,EAAO;AACT,SAAA;AACC,QAAA,GAAGE;;;;;"}
+{"version":3,"file":"MainNav.js","sources":["../../../../../../admin/src/components/MainNav/MainNav.tsx"],"sourcesContent":["import { Flex, FlexProps } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst MainNavWrapper = styled(Flex)`\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  position: sticky;\n  max-height: 100%;\n  height: auto;\n  z-index: 4;\n\n  ${({ theme }) => theme.breakpoints.large} {\n    border-bottom: none;\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n    height: 100dvh;\n  }\n`;\n\nconst MainNav = (props: FlexProps<'nav'>) => (\n  <MainNavWrapper\n    alignItems=\"normal\"\n    tag=\"nav\"\n    background=\"neutral0\"\n    direction={{\n      initial: 'row',\n      large: 'column',\n    }}\n    width={{\n      initial: '100dvw',\n      large: 10,\n    }}\n    {...props}\n  />\n);\n\nexport { MainNav };\n"],"names":["MainNavWrapper","styled","Flex","theme","colors","neutral150","breakpoints","large","MainNav","props","_jsx","alignItems","tag","background","direction","initial","width"],"mappings":";;;;;;AAGA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,iBAAAA,CAAK;2BACR,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;;;;;EAMlE,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMG,WAAW,CAACC,KAAK,CAAC;;4BAEf,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;;AAGrE,CAAC;AAED,MAAMG,OAAAA,GAAU,CAACC,KAAAA,iBACfC,cAAA,CAACV,cAAAA,EAAAA;QACCW,UAAAA,EAAW,QAAA;QACXC,GAAAA,EAAI,KAAA;QACJC,UAAAA,EAAW,UAAA;QACXC,SAAAA,EAAW;YACTC,OAAAA,EAAS,KAAA;YACTR,KAAAA,EAAO;AACT,SAAA;QACAS,KAAAA,EAAO;YACLD,OAAAA,EAAS,QAAA;YACTR,KAAAA,EAAO;AACT,SAAA;AACC,QAAA,GAAGE;;;;;"}

package/dist/admin/admin/src/components/MainNav/MainNavLinks.js

@@ -5,15 +5,15 @@ require('react');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var useMediaQuery = require('../../hooks/useMediaQuery.js');
 var Tours = require('../GuidedTour/Tours.js');
 var NavLink = require('./NavLink.js');
 
-const NavLinkBadgeLock = styled.styled(NavLink.NavLink.Badge)`
+const NavLinkBadgeLock = styledComponents.styled(NavLink.NavLink.Badge)`
   background-color: transparent;
 `;
-const NavLinkBadgeCounter = styled.styled(NavLink.NavLink.Badge)`
+const NavLinkBadgeCounter = styledComponents.styled(NavLink.NavLink.Badge)`
   span {
     color: ${({ theme })=>theme.colors.neutral0};
   }
@@ -99,7 +99,7 @@ const MainNavIcons = ({ listLinks, mobileLinks, handleClickOnLink })=>{
         }, link.to) : null;
     }) : null;
 };
-const IconContainer = styled.styled(designSystem.Box)`
+const IconContainer = styledComponents.styled(designSystem.Box)`
   svg {
     display: block;
   }